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.38.1",
-  "packages/latex-extension": "0.1.0"
+  "packages/latex-extension": "0.1.0",
+  "packages/page-constructor-extension": "0.0.0"
 }

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,41 @@
+# @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
+```
+
+## Usage
+
+### WYSIWYG extension
+
+```typescript
+import {YfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension';
+
+builder.use(YfmPageConstructor, {
+    autoSave: {enabled: true, delay: 1000},
+});
+```
+
+### Toolbar button
+
+```typescript
+import {wYfmPageConstructorItemData} from '@gravity-ui/markdown-editor-page-constructor-extension/toolbar';
+```
+
+### Split-mode preview HOC
+
+```typescript
+import {withYfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension/hocs/withYfmPageConstructor';
+
+const Preview = withYfmPageConstructor()(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,
+                },
+            },
+        ],
+    },
+};

packages/page-constructor-extension/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@gravity-ui/markdown-editor-page-constructor-extension",
+  "version": "0.0.0",
+  "description": "Page Constructor extension for @gravity-ui/markdown-editor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gravity-ui/markdown-editor"
+  },
+  "keywords": [
+    "md",
+    "yfm",
+    "wysiwyg",
+    "markdown",
+    "prosemirror",
+    "page-constructor"
+  ],
+  "scripts": {
+    "clean": "gulp clean",
+    "build": "gulp build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "run-p -cs lint:*",
+    "lint:js": "eslint './**/*.{js,jsx,mjs,ts,tsx}'",
+    "lint:styles": "stylelint './**/*.{css,scss}' --allow-empty-input",
+    "lint:prettier": "prettier --check './**/*.{js,jsx,mjs,ts,tsx,css,scss}'",
+    "test": "jest --config jest.config.cjs",
+    "prepublishOnly": "nx lint && nx clean && nx build"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./build/esm/index.d.ts",
+        "default": "./build/esm/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/index.d.ts",
+        "default": "./build/cjs/index.js"
+      }
+    },
+    "./toolbar": {
+      "import": {
+        "types": "./build/esm/toolbar.d.ts",
+        "default": "./build/esm/toolbar.js"
+      },
+      "require": {
+        "types": "./build/cjs/toolbar.d.ts",
+        "default": "./build/cjs/toolbar.js"
+      }
+    },
+    "./hocs/withYfmPageConstructor": {
+      "import": {
+        "types": "./build/esm/hocs/withYfmPageConstructor/index.d.ts",
+        "default": "./build/esm/hocs/withYfmPageConstructor/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/hocs/withYfmPageConstructor/index.d.ts",
+        "default": "./build/cjs/hocs/withYfmPageConstructor/index.js"
+      }
+    }
+  },
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/esm/index.d.ts",
+  "files": [
+    "build",
+    "README.md"
+  ],
+  "dependencies": {
+    "tslib": "catalog:ts"
+  },
+  "devDependencies": {
+    "@diplodoc/page-constructor-extension": "catalog:peer-diplodoc",
+    "@gravity-ui/icons": "^2.12.0",
+    "@gravity-ui/markdown-editor": "workspace:*",
+    "@gravity-ui/page-constructor": "catalog:peer-gravity",
+    "@gravity-ui/uikit": "catalog:peer-gravity",
+    "@markdown-editor/gulp-tasks": "workspace:*",
+    "@markdown-editor/linters": "workspace:*",
+    "@markdown-editor/tsconfig": "workspace:*",
+    "@types/jest": "^29.5.0",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
+    "gulp-cli": "catalog:",
+    "jest": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "prosemirror-model": "^1.24.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-test-builder": "^1.1.1",
+    "prosemirror-view": "^1.38.0",
+    "react": "catalog:react",
+    "react-dom": "catalog:react",
+    "react-error-boundary": "^3.1.4",
+    "react-use": "catalog:",
+    "ts-dedent": "^2.2.0",
+    "ts-jest": "^29.2.0",
+    "typescript": "catalog:ts"
+  },
+  "peerDependencies": {
+    "@diplodoc/page-constructor-extension": "^0.13.3",
+    "@gravity-ui/icons": "^2.12.0",
+    "@gravity-ui/markdown-editor": "workspace:^15.38.1",
+    "@gravity-ui/page-constructor": "^7.0.0",
+    "@gravity-ui/uikit": "^7.1.0",
+    "prosemirror-model": "^1.24.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.38.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-error-boundary": "^3.1.4",
+    "react-use": "^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@gravity-ui/page-constructor": {
+      "optional": true
+    },
+    "react-error-boundary": {
+      "optional": true
+    },
+    "react-use": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

packages/page-constructor-extension/src/TextAreaFixed.tsx

@@ -0,0 +1,21 @@
+import {forwardRef, useRef} from 'react';
+
+import {type TextAreaProps, TextArea as TextAreaUIKit} from '@gravity-ui/uikit';
+import {useEffectOnce} from 'react-use';
+
+export const TextAreaFixed = forwardRef<HTMLSpanElement, TextAreaProps>((props, ref) => {
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const controlRef = (props.controlRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
+
+    useEffectOnce(() => {
+        if (props.autoFocus) {
+            setTimeout(() => {
+                controlRef.current?.focus();
+            }, 30);
+        }
+    });
+
+    return <TextAreaUIKit ref={ref} {...props} controlRef={controlRef} autoFocus={false} />;
+});
+
+TextAreaFixed.displayName = 'TextAreaFixed';