feat: added page-constructor extension

.release-please/config.json

@@ -12,6 +12,7 @@
   ],
   "packages": {
     "packages/editor": {},
-    "packages/latex-extension": {}
+    "packages/latex-extension": {},
+    "packages/page-constructor-extension": {}
   }
 }

.release-please/manifest.json

@@ -1,4 +1,5 @@
 {
   "packages/editor": "15.39.0",
-  "packages/latex-extension": "0.1.0"
+  "packages/latex-extension": "0.1.0",
+  "packages/page-constructor-extension": "0.0.0"
 }

demo/.storybook/main.ts

@@ -27,7 +27,7 @@
         check: true,
         reactDocgen: 'react-docgen-typescript',
     },
     webpackFinal: (config) => {
         config.plugins?.push(
             new webpack.DefinePlugin({
                 __VERSION__: `'${pkg.version}-storybook'`,
@@ -37,12 +37,12 @@
             }),
         );
 
         config.resolve ||= {};
         config.resolve.alias ||= {};
         config.resolve.fallback ||= {};
 
         // Node.js polyfills for browser
         config.resolve.fallback = {
             ...config.resolve.fallback,
             fs: false,
             path: require.resolve('path-browserify'),
@@ -50,8 +50,19 @@
             process: require.resolve('process/browser'),
         };
 
+        config.ignoreWarnings ||= [];
+        config.ignoreWarnings.push(/\.js\.map$/);
+        config.module ||= {};
+        config.module.rules ||= [];
+        config.module.rules.push({
+            test: /\.(js|css)\.map$/,
+            include: /node_modules/,
+            type: 'asset/resource' as const,
+            generator: {emit: false},
+        });
+
         config.watchOptions ||= {};
         config.watchOptions.ignored = /node_modules([\\]+|\/)+(?!@gravity-ui\/markdown-editor)/;
 
         return config;
     },

demo/package.json

@@ -26,12 +26,15 @@
     "@diplodoc/html-extension": "catalog:peer-diplodoc",
     "@diplodoc/latex-extension": "catalog:peer-diplodoc",
     "@diplodoc/mermaid-extension": "catalog:peer-diplodoc",
+    "@diplodoc/page-constructor-extension": "catalog:peer-diplodoc",
     "@diplodoc/quote-link-extension": "catalog:peer-diplodoc",
     "@diplodoc/tabs-extension": "catalog:peer-diplodoc",
     "@diplodoc/transform": "catalog:peer-diplodoc",
     "@gravity-ui/components": "catalog:peer-gravity",
     "@gravity-ui/markdown-editor": "workspace:*",
     "@gravity-ui/markdown-editor-latex-extension": "workspace:*",
+    "@gravity-ui/markdown-editor-page-constructor-extension": "workspace:*",
+    "@gravity-ui/page-constructor": "catalog:peer-gravity",
     "@gravity-ui/uikit": "catalog:peer-gravity",
     "markdown-it": "catalog:peers"
   },

demo/src/components/Playground.tsx

@@ -32,6 +32,8 @@ import {
     wLatexBlockItemData,
     wLatexInlineItemData,
 } from '@gravity-ui/markdown-editor-latex-extension/configs';
+import {YfmPageConstructorExtension} from '@gravity-ui/markdown-editor-page-constructor-extension';
+import {wYfmPageConstructorItemData} from '@gravity-ui/markdown-editor-page-constructor-extension/configs';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import {getPlugins} from '../defaults/md-plugins';
@@ -54,6 +56,7 @@ const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
     wLatexInlineItemData,
     wLatexBlockItemData,
     wysiwygToolbarConfigs.wMermaidItemData,
+    wYfmPageConstructorItemData,
     wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
 );
 
@@ -211,6 +214,16 @@ export const Playground = memo<PlaygroundProps>((props) => {
                             },
                             theme: {dark: 'dark', light: 'forest'},
                         })
+                        .use(YfmPageConstructorExtension, {
+                            autoSave: {
+                                enabled:
+                                    storyAdditionalControls?.yfmPageConstructorAutoSaveEnabled ??
+                                    true,
+                                delay:
+                                    storyAdditionalControls?.yfmPageConstructorAutoSaveDelay ??
+                                    1000,
+                            },
+                        })
                         .use(FoldingHeading)
                         .use(YfmHtmlBlock, {
                             useConfig: useYfmHtmlBlockStyles,

demo/src/components/SplitModePreview.tsx

@@ -11,18 +11,26 @@ import {
     withMermaid,
 } from '@gravity-ui/markdown-editor/view/hocs/withMermaid/index.js';
 import {withYfmHtmlBlock} from '@gravity-ui/markdown-editor/view/hocs/withYfmHtml/index.js';
+import {withYfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension/view';
 import {useThemeValue} from '@gravity-ui/uikit';
 import type MarkdownIt from 'markdown-it';
 
-import {LATEX_RUNTIME, MERMAID_RUNTIME, YFM_HTML_BLOCK_RUNTIME} from '../defaults/md-plugins';
+import {
+    LATEX_RUNTIME,
+    MERMAID_RUNTIME,
+    PAGE_CONSTRUCTOR_RUNTIME,
+    YFM_HTML_BLOCK_RUNTIME,
+} from '../defaults/md-plugins';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
 
 const ML_ATTR = 'data-ml';
 const mermaidConfig: MermaidConfig = {theme: 'forest'};
 
 const Preview = withMermaid({runtime: MERMAID_RUNTIME})(
     withLatex({runtime: LATEX_RUNTIME})(
-        withYfmHtmlBlock({runtime: YFM_HTML_BLOCK_RUNTIME})(YfmStaticView),
+        withYfmPageConstructor({runtime: PAGE_CONSTRUCTOR_RUNTIME})(
+            withYfmHtmlBlock({runtime: YFM_HTML_BLOCK_RUNTIME})(YfmStaticView),
+        ),
     ),
 );
 

demo/src/defaults/md-plugins.ts

@@ -5,6 +5,7 @@ import '@diplodoc/folding-headings-extension/runtime';
 import {transform as yfmHtmlBlock} from '@diplodoc/html-extension';
 import {transform as latex} from '@diplodoc/latex-extension';
 import {transform as mermaid} from '@diplodoc/mermaid-extension';
+import {transform as yfmPageConstructor} from '@diplodoc/page-constructor-extension';
 import {transform as yfmTabs} from '@diplodoc/tabs-extension';
 import anchors from '@diplodoc/transform/lib/plugins/anchors';
 import checkbox from '@diplodoc/transform/lib/plugins/checkbox';
@@ -30,6 +31,7 @@ import type {PluginWithParams} from 'markdown-it/lib';
 export const LATEX_RUNTIME = 'extension:latex';
 export const MERMAID_RUNTIME = 'extension:mermaid';
 export const YFM_HTML_BLOCK_RUNTIME = 'extension:yfm-html-block';
+export const PAGE_CONSTRUCTOR_RUNTIME = 'extension:page-constructor';
 
 type GetPluginsOptions = {
     directiveSyntax?: RenderPreviewParams['directiveSyntax'];
@@ -88,6 +90,7 @@ export function getPlugins({
         latex({bundle: false, validate: false, runtime: LATEX_RUNTIME}),
         mark,
         mermaid({bundle: false, runtime: MERMAID_RUNTIME}),
+        yfmPageConstructor({bundle: false, runtime: PAGE_CONSTRUCTOR_RUNTIME}),
         sub,
         yfmHtmlBlock({
             bundle: false,

demo/src/stories/yfm/YFM.stories.tsx

@@ -87,3 +87,14 @@ export const MermaidDiagram: Story = {
         },
     },
 };
+
+export const YfmPageConstructor: Story = {
+    name: 'YFM Page Constructor',
+    args: {
+        initial: markup.yfmPageConstructor,
+        storyAdditionalControls: {
+            yfmPageConstructorAutoSaveEnabled: true,
+            yfmPageConstructorAutoSaveDelay: 500,
+        },
+    },
+};

demo/src/stories/yfm/content.ts

@@ -311,6 +311,19 @@ sequenceDiagram
 	Alice->>Bob: Hi Bob
 	Bob->>Alice: Hi Alice
 \`\`\`
+`.trim(),
+
+    yfmPageConstructor: `
+ 
+
+## YFM Page Constructor (optional feature)
+
+::: page-constructor
+blocks:
+  - type: 'header-block'
+    title: 'Title'
+    description: 'Description'
+:::
 `.trim(),
 
     foldingHeadings: `

demo/tests/playwright/playwright.config.ts

@@ -37,6 +37,7 @@ const ctViteConfig: ViteInlineConfig = {
         alias: {
             ...aliasesFromTsConf,
             '~@gravity-ui/uikit/styles/mixins': '@gravity-ui/uikit/styles/mixins',
+            '~@diplodoc/transform/dist/css/yfm.css': '@diplodoc/transform/dist/css/yfm.css',
         },
     },
     optimizeDeps: {

demo/tests/visual-tests/YfmExtensions.visual.test.tsx

@@ -49,6 +49,12 @@ test.describe('Extensions, YFM', () => {
         await mount(<YFMStories.MermaidDiagram />);
         await wait.loadersHidden();
 
+        await expectScreenshot();
+    });
+    test('YFM Page Constructor', async ({mount, expectScreenshot, wait}) => {
+        await mount(<YFMStories.YfmPageConstructor />);
+        await wait.loadersHidden();
+
         await expectScreenshot();
     });
 });

eslint.config.mjs

@@ -60,4 +60,21 @@ export default defineConfig(
             },
         },
     },
+    {
+        files: ['./packages/page-constructor-extension/**/*'],
+        languageOptions: {
+            parserOptions: {
+                project: './packages/page-constructor-extension/tsconfig.json',
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        settings: {
+            'import/resolver': {
+                typescript: {
+                    alwaysTryTypes: true,
+                    project: './packages/page-constructor-extension/tsconfig.json',
+                },
+            },
+        },
+    },
 );

packages/page-constructor-extension/.prettierignore

@@ -0,0 +1 @@
+build

packages/page-constructor-extension/README.md

@@ -0,0 +1,49 @@
+# @gravity-ui/markdown-editor-page-constructor-extension
+
+Page Constructor extension for [@gravity-ui/markdown-editor](https://github.com/gravity-ui/markdown-editor).
+
+Provides a WYSIWYG editing experience for [Page Constructor](https://github.com/gravity-ui/page-constructor) blocks inside the Markdown editor, as well as a preview HOC for split-mode rendering.
+
+## Installation
+
+```bash
+npm install @gravity-ui/markdown-editor-page-constructor-extension
+```
+
+### Required peer dependencies
+
+```bash
+npm install @gravity-ui/markdown-editor @gravity-ui/uikit @gravity-ui/page-constructor @diplodoc/page-constructor-extension react react-dom
+```
+
+## Usage
+
+### WYSIWYG extension
+
+```typescript
+import {YfmPageConstructorExtension} from '@gravity-ui/markdown-editor-page-constructor-extension';
+
+builder.use(YfmPageConstructorExtension, {
+    autoSave: {enabled: true, delay: 1000},
+});
+```
+
+### Toolbar button
+
+```typescript
+import {wYfmPageConstructorItemData} from '@gravity-ui/markdown-editor-page-constructor-extension/configs';
+```
+
+### Split-mode preview HOC
+
+```typescript
+import {withYfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension/view';
+
+const PAGE_CONSTRUCTOR_RUNTIME = 'extension:page-constructor';
+
+const Preview = withYfmPageConstructor({runtime: PAGE_CONSTRUCTOR_RUNTIME})(YfmStaticView);
+```
+
+## License
+
+MIT

packages/page-constructor-extension/__mocks__/styleMock.cjs

@@ -0,0 +1 @@
+module.exports = {};

packages/page-constructor-extension/gulpfile.mjs

@@ -0,0 +1,20 @@
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+import {series, task} from '@markdown-editor/gulp-tasks';
+import {registerBuildTasks} from '@markdown-editor/gulp-tasks/build';
+
+import pkg from './package.json' with {type: 'json'};
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const BUILD_DIR = resolve('build');
+const NODE_MODULES_DIR = resolve(__dirname, 'node_modules');
+
+registerBuildTasks({
+    version: pkg.version,
+    buildDir: BUILD_DIR,
+    nodeModulesDir: NODE_MODULES_DIR,
+});
+
+task('default', series('clean', 'build'));

packages/page-constructor-extension/jest.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('jest').Config} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    roots: ['<rootDir>/src'],
+    moduleNameMapper: {
+        '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.cjs',
+    },
+    transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|@diplodoc)/)'],
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                tsconfig: {
+                    verbatimModuleSyntax: false,
+                },
+            },
+        ],
+    },
+};