feat(GridBlock): add Pretty Pages grid extension with templates

demo/src/stories/examples/grid-block/GridBlock.stories.tsx

@@ -0,0 +1,11 @@
+import type {StoryObj} from '@storybook/react';
+
+import {GridBlockDemo as component} from './GridBlock';
+
+export const Story: StoryObj<typeof component> = {};
+Story.storyName = 'Grid block';
+
+export default {
+    title: 'Examples / Grid block',
+    component,
+};

demo/src/stories/examples/grid-block/GridBlock.tsx

@@ -0,0 +1,62 @@
+import {memo} from 'react';
+
+import {LayoutCells} from '@gravity-ui/icons';
+import {
+    MarkdownEditorView,
+    type ToolbarsPreset,
+    useMarkdownEditor,
+} from '@gravity-ui/markdown-editor';
+import {ToolbarName as Toolbar} from '@gravity-ui/markdown-editor/_/modules/toolbars/constants.js';
+import {defaultPreset} from '@gravity-ui/markdown-editor/_/modules/toolbars/presets.js';
+import {GridBlock as GridBlockExtension} from '@gravity-ui/markdown-editor/extensions/additional/GridBlock/index.js';
+
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+
+const gridBlockItemId = 'gridBlock';
+
+const toolbarsPreset: ToolbarsPreset = {
+    items: {
+        ...defaultPreset.items,
+        [gridBlockItemId]: {
+            view: {
+                icon: {data: LayoutCells},
+                title: 'Grid block',
+            },
+            wysiwyg: {
+                exec: (e) => e.actions.createGridBlock.run(),
+                isActive: (e) => e.actions.createGridBlock.isActive(),
+                isEnable: (e) => e.actions.createGridBlock.isEnable(),
+            },
+        },
+    },
+    orders: {
+        ...defaultPreset.orders,
+        [Toolbar.wysiwygMain]: [[gridBlockItemId], ...defaultPreset.orders[Toolbar.wysiwygMain]],
+    },
+};
+
+export const GridBlockDemo = memo(function GridBlockDemo() {
+    const editor = useMarkdownEditor(
+        {
+            initial: {mode: 'wysiwyg', markup: ''},
+            wysiwygConfig: {extensions: GridBlockExtension},
+        },
+        [],
+    );
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                    toolbarsPreset={toolbarsPreset}
+                />
+            )}
+        />
+    );
+});

packages/editor/src/extensions/additional/GridBlock/GridBlock.test.ts

@@ -0,0 +1,46 @@
+import {builders} from 'prosemirror-test-builder';
+
+import {ExtensionsManager} from '../../../core';
+import {BaseNode, BaseSchemaSpecs} from '../../specs';
+
+import {GridBlockAttrs, gridBlockNodeName} from './GridBlockSpecs/const';
+import {GridBlockSpecs} from './GridBlockSpecs';
+
+const {schema, serializer} = new ExtensionsManager({
+    extensions: (builder) => builder.use(BaseSchemaSpecs, {}).use(GridBlockSpecs, {}),
+}).buildDeps();
+
+const {doc, gridBlock} = builders<'doc' | 'gridBlock'>(schema, {
+    doc: {nodeType: BaseNode.Doc},
+    gridBlock: {nodeType: gridBlockNodeName},
+});
+
+describe('GridBlock extension', () => {
+    it('should serialize to yfm html block', () => {
+        expect(
+            serializer.serialize(
+                doc(
+                    gridBlock({
+                        [GridBlockAttrs.blocks]: [
+                            {
+                                id: 'block-1',
+                                css: 'padding: 12px;',
+                                text: 'First',
+                            },
+                        ],
+                        [GridBlockAttrs.containerCss]: 'display: grid;',
+                        [GridBlockAttrs.EntityId]: 'grid_block-1',
+                    }),
+                ),
+            ),
+        ).toBe(
+            [
+                '::: html',
+                '<div class="grid" style="display: grid;">',
+                '  <div class="block-1" style="padding: 12px;">First</div>',
+                '</div>',
+                ':::',
+            ].join('\n'),
+        );
+    });
+});

packages/editor/src/extensions/additional/GridBlock/GridBlockNodeView/GridBlock.scss

@@ -0,0 +1,92 @@
+.g-md-grid-block {
+    position: relative;
+
+    margin-bottom: 15px;
+    padding: 32px 12px 12px;
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: var(--g-border-radius-m);
+
+    &__toolbar {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+        display: flex;
+        gap: 2px;
+    }
+
+    &__grid {
+        // default layout; overridden by the scoped <style> from container CSS
+        display: grid;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    &__item {
+        position: relative;
+
+        min-height: 56px;
+        padding: 12px;
+
+        border: 1px dashed var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+    }
+
+    &__item-gear {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+
+        opacity: 0;
+
+        transition: opacity 0.1s ease-in-out;
+    }
+
+    &__item:hover &__item-gear {
+        opacity: 1;
+    }
+
+    &__item-text {
+        min-height: 1.2em;
+
+        outline: none;
+
+        &:empty::before {
+            content: 'Text…';
+
+            color: var(--g-color-text-hint);
+        }
+    }
+
+    &__add {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        min-height: 56px;
+        padding: 12px;
+
+        cursor: pointer;
+
+        color: var(--g-color-text-secondary);
+        border: 1px dashed var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+        background: transparent;
+
+        &:hover {
+            color: var(--g-color-text-primary);
+            border-color: var(--g-color-line-generic-hover);
+            background: var(--g-color-base-generic);
+        }
+    }
+
+    &__css-editor {
+        width: 320px;
+        padding: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+}