chore: init pnpm workspace

.github/workflows/branch-preview.yaml

@@ -24,16 +24,16 @@ jobs:
           - name: Install dependencies
             run: pnpm run deps:ci
 
-          - name: Install Storybook CLI
-            run: pnpm i @storybook/[email protected]
+          - name: Build packages
+            run: pnpm run build
 
           - name: Build Storybook
-            run: pnpm run sb:build
+            run: pnpm --filter @markdown-editor/demo sb:build
 
           - name: Upload to S3
             uses: gravity-ui/preview-upload-to-s3-action@v1
             with:
-              src-path: storybook-static
+              src-path: demo/storybook-static
               dest-path: /md-editor/branches/${{ github.ref_name }}/
               s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
               s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.github/workflows/ci.yml

@@ -51,10 +51,10 @@ jobs:
         run: pnpm run deps:ci
 
       - name: Unit Tests
-        run: pnpm run test
+        run: pnpm --filter '@gravity-ui/*' test
 
       - name: ESBuild compatability
-        run: pnpm run test:esbuild
+        run: pnpm --filter '@gravity-ui/*' test:esbuild
 
   check_circular_deps:
     name: Check Circular Dependencies
@@ -76,4 +76,4 @@ jobs:
         run: pnpm run deps:ci
 
       - name: Check circular dependencies
-        run: pnpm run check-circular-deps
+        run: pnpm --filter '@gravity-ui/*' check-circular-deps

.github/workflows/main-preview.yml

@@ -24,16 +24,16 @@ jobs:
       - name: Install dependencies
         run: pnpm run deps:ci
 
-      - name: Install Storybook CLI
-        run: pnpm i @storybook/[email protected]
+      - name: Build packages
+        run: pnpm run build
 
       - name: Build Storybook
-        run: pnpm run sb:build
+        run: pnpm --filter @markdown-editor/demo sb:build
 
       - name: Upload to S3
         uses: gravity-ui/preview-upload-to-s3-action@v1
         with:
-          src-path: storybook-static
+          src-path: demo/storybook-static
           dest-path: /md-editor/main/
           s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
           s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.github/workflows/pr-preview.yml

@@ -23,16 +23,16 @@ jobs:
       - name: Install dependencies
         run: pnpm run deps:ci
 
-      - name: Install Storybook CLI
-        run: pnpm i @storybook/[email protected]
+      - name: Build packages
+        run: pnpm run build
 
       - name: Build Storybook
-        run: pnpm run sb:build
+        run: pnpm --filter @markdown-editor/demo sb:build
 
       - name: Upload to S3
         uses: gravity-ui/preview-upload-to-s3-action@v1
         with:
-          src-path: storybook-static
+          src-path: demo/storybook-static
           dest-path: /md-editor/pulls/${{ github.event.pull_request.number }}/
           s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
           s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.github/workflows/pr-visual-tests.yml

@@ -25,8 +25,11 @@ jobs:
       - name: Install dependencies
         run: pnpm run deps:ci
 
+      - name: Build packages
+        run: pnpm run build
+
       - name: Run Visual Tests
-        run: pnpm run playwright
+        run: pnpm run ci:playwright
         env:
           CI: 'true'
 
@@ -35,7 +38,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: playwright-report
-          path: ./playwright-report
+          path: ./demo/playwright-report
           retention-days: 1
 
       - name: Save PR ID

.gitignore

@@ -22,7 +22,8 @@ build/
 coverage/
 storybook-static/
 .eslintcache
-demo/docs
+demo/src/docs
+debug-storybook.log
 
 # tests
 playwright-report*

.storybook/addons/generateDocs.ts → demo/.storybook/addons/generateDocs.ts

@@ -1,13 +1,14 @@
-import * as fs from 'fs/promises';
-import * as path from 'path';
+/* eslint-disable no-console */
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import {dirname} from 'node:path';
 import {fileURLToPath} from 'url';
-import {dirname} from 'path';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const inputDir = path.join(__dirname, '../../docs');
-const outputDir = path.join(__dirname, '../../demo/docs');
+const inputDir = path.join(__dirname, '../../../docs');
+const outputDir = path.join(__dirname, '../../src/docs');
 
 /**
  * Converts a kebab-case string to camelCase

.storybook/main.ts → demo/.storybook/main.ts

@@ -1,8 +1,9 @@
-import {resolve, dirname} from 'node:path';
-import {fileURLToPath} from 'node:url';
 import {createRequire} from 'node:module';
-import webpack from 'webpack';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'url';
+
 import type {StorybookConfig} from '@storybook/react-webpack5';
+import webpack from 'webpack';
 
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
@@ -16,7 +17,7 @@
         name: '@storybook/react-webpack5',
         options: {},
     },
-    stories: ['../demo/**/*.mdx', '../demo/**/*.stories.@(js|jsx|ts|tsx)'],
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
         './addons/generateDocs.ts',
         '@storybook/preset-scss',
@@ -27,7 +28,7 @@
         check: true,
         reactDocgen: 'react-docgen-typescript',
     },
     webpackFinal: (config) => {
         config.plugins?.push(
             new webpack.DefinePlugin({
                 __VERSION__: `'${pkg.version}-storybook'`,
@@ -37,12 +38,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'),
@@ -53,11 +54,11 @@
         const baseUrl = resolve(__dirname, '..', tsConfig.compilerOptions.baseUrl);
         const paths = tsConfig.compilerOptions.paths;
 
         for (const alias in paths) {
             config.resolve.alias[alias] = resolve(baseUrl, paths[alias][0]);
         }
 
         config.resolve.alias['demo/*'] = resolve(__dirname, '..', 'demo/*');
 
         return config;
     },

.storybook/manager.ts → demo/.storybook/manager.ts

@@ -1,4 +1,5 @@
 import {addons} from 'storybook/manager-api';
+
 import {themes} from './theme';
 
 addons.setConfig({

.storybook/preview.ts → demo/.storybook/preview.ts

@@ -1,8 +1,9 @@
 import type {Preview} from '@storybook/react-webpack5';
 import {MINIMAL_VIEWPORTS} from 'storybook/viewport';
-import {withThemeProvider} from '../demo/hocs/withThemeProvider';
-import {withLang} from '../demo/hocs/withLang';
-import {withToaster} from '../demo/hocs/withToaster';
+
+import {withLang} from '../src/hocs/withLang';
+import {withThemeProvider} from '../src/hocs/withThemeProvider';
+import {withToaster} from '../src/hocs/withToaster';
 
 const preview: Preview = {
     decorators: [withThemeProvider, withLang, withToaster],

demo/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@markdown-editor/demo",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "sb:start": "storybook dev -p 8888 -c .storybook",
+    "sb:build": "storybook build -c .storybook -o storybook-static",
+    "lint": "run-p -cs lint:*",
+    "lint:js": "eslint \"{src,demo}/**/*.{js,jsx,ts,tsx}\"",
+    "lint:styles": "stylelint \"{src,demo}/**/*.{css,scss}\"",
+    "lint:prettier": "prettier --check \"{src,demo}/**/*.{js,jsx,ts,tsx,css,scss}\"",
+    "playwright:install": "playwright install chromium webkit --with-deps",
+    "playwright": "playwright test --config=tests/playwright/playwright.config.ts",
+    "playwright:generate": "node scripts/generate-playwright-test.js",
+    "playwright:watch": "pnpm run playwright --ui",
+    "playwright:headed": "playwright test --config=tests/playwright/playwright.config.ts --headed",
+    "playwright:update": "pnpm run playwright -u",
+    "playwright:clear": "rm -rf ./tests/playwright/.cache",
+    "playwright:report": "playwright show-report playwright-report",
+    "playwright:docker": "./scripts/playwright-docker.sh test",
+    "playwright:docker:update": "./scripts/playwright-docker.sh update",
+    "playwright:docker:clear": "./scripts/playwright-docker.sh clear",
+    "playwright:docker:report": "playwright show-report playwright-report-docker"
+  },
+  "dependencies": {
+    "@diplodoc/cut-extension": "catalog:peer-diplodoc",
+    "@diplodoc/file-extension": "catalog:peer-diplodoc",
+    "@diplodoc/folding-headings-extension": "catalog:peer-diplodoc",
+    "@diplodoc/html-extension": "catalog:peer-diplodoc",
+    "@diplodoc/latex-extension": "catalog:peer-diplodoc",
+    "@diplodoc/mermaid-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/uikit": "catalog:peer-gravity",
+    "markdown-it": "catalog:peers"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/eslint-config": "catalog:linters",
+    "@gravity-ui/icons": "^2.12.0",
+    "@gravity-ui/prettier-config": "catalog:linters",
+    "@gravity-ui/stylelint-config": "catalog:linters",
+    "@gravity-ui/tsconfig": "catalog:ts",
+    "@playwright/experimental-ct-react": "1.49.0",
+    "@playwright/test": "1.49.0",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-webpack5-compiler-babel": "4.0.0",
+    "@storybook/cli": "10.1.10",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "10.1.10",
+    "@storybook/react-webpack5": "10.1.10",
+    "@types/markdown-it": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
+    "eslint": "catalog:linters",
+    "eslint-plugin-lodash": "catalog:linters",
+    "eslint-plugin-react": "catalog:linters",
+    "lowlight": "catalog:peers",
+    "npm-run-all": "^4.1.5",
+    "path-browserify": "1.0.1",
+    "postcss": "catalog:linters",
+    "prettier": "catalog:linters",
+    "process": "0.11.10",
+    "prosemirror-dev-toolkit": "1.1.8",
+    "react": "catalog:react",
+    "react-dom": "catalog:react",
+    "react-use": "catalog:",
+    "storybook": "10.1.10",
+    "stylelint": "catalog:linters",
+    "ts-dedent": "2.2.0",
+    "typescript": "catalog:ts",
+    "url": "0.11.4",
+    "webpack": "^5.97.1"
+  }
+}

scripts/generate-playwright-test.js → demo/scripts/generate-playwright-test.js

@@ -26,7 +26,7 @@ const shouldRewrite = Boolean(args.rewrite || args.r);
 
 if (!name) {
     console.error(
-        '❌ Please specify a test name. Usage: npm run playwright:generate <TestName> [--out <outputDir>] [--rewrite|-r]',
+        '❌ Please specify a test name. Usage: pnpm run playwright:generate <TestName> [--out <outputDir>] [--rewrite|-r]',
     );
     process.exit(1);
 }

scripts/playwright-docker.sh → demo/scripts/playwright-docker.sh

@@ -2,6 +2,13 @@
 
 set -euo pipefail
 
+# Change to repository root directory
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"
+cd "$REPO_ROOT"
+
+echo "Running in $(pwd)"
+
 IMAGE_NAME="mcr.microsoft.com/playwright"
 IMAGE_TAG="v1.49.0-jammy" # This version have to be synchronized with playwright version from package.json
 
@@ -33,7 +40,7 @@ fi
 
 if [[ "$1" = "clear" ]]; then
   rm -rf "$NODE_MODULES_CACHE_DIR"
-  rm -rf "./tests/playwright/.cache-docker"
+  rm -rf "./demo/tests/playwright/.cache-docker"
   exit 0
 fi
 
@@ -52,13 +59,15 @@ fi
 
 if [[ "$1" = "test" ]]; then
   echo "Running playwright tests"
-  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm run playwright'
+  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@gravity-ui/*' build'
+  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@markdown-editor/demo' run playwright'
   exit 0
 fi
 
 if [[ "$1" = "update" ]]; then
   echo "Running playwright tests (update)"
-  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm run playwright:update'
+  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@gravity-ui/*' build'
+  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@markdown-editor/demo' run playwright:update'
   exit 0
 fi
 

demo/components/MoveToLine.tsx → demo/src/components/MoveToLine.tsx

@@ -1,9 +1,8 @@
 import {useState} from 'react';
 
+import {NumberInput} from '@gravity-ui/markdown-editor';
 import {Button, type DOMProps, Flex} from '@gravity-ui/uikit';
 
-import {NumberInput} from 'src/index';
-
 export type MoveToLineProps = DOMProps & {
     onClick: (value: number | undefined) => void;
 };

demo/components/PMSelection.tsx → demo/src/components/PMSelection.tsx

@@ -1,15 +1,14 @@
 import {useLayoutEffect} from 'react';
 
-import {useEffectOnce, useUpdate} from 'react-use';
-
-import type {EditorView} from '#pm/view';
 import {
     type ClassNameProps,
     type MarkdownEditorInstance,
     isNodeSelection,
     isTextSelection,
     isWholeSelection,
-} from 'src/index';
+} from '@gravity-ui/markdown-editor';
+import type {EditorView} from '@gravity-ui/markdown-editor/pm/view';
+import {useEffectOnce, useUpdate} from 'react-use';
 
 export type WysiwygSelectionProps = ClassNameProps & {
     editor: MarkdownEditorInstance;
@@ -21,7 +20,10 @@ export function WysiwygSelection({editor, className}: WysiwygSelectionProps) {
         rerender();
     });
 
-    const view = editor?.currentMode === 'wysiwyg' && editor._wysiwygView;
+    const view =
+        editor?.currentMode === 'wysiwyg' &&
+        // @ts-expect-error
+        editor._wysiwygView;
 
     useLayoutEffect(() => {
         if (!editor) return undefined;

demo/components/Playground.tsx → demo/src/components/Playground.tsx

@@ -2,16 +2,6 @@ import {type CSSProperties, memo, useCallback, useEffect, useMemo, useState} fro
 
 import type {EmbeddingMode} from '@diplodoc/html-extension';
 import {defaultOptions} from '@diplodoc/transform/lib/sanitize';
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
-
-import type {ToolbarActionData} from 'src/bundle/Editor';
-import type {SettingItems} from 'src/bundle/settings';
-import type {Extension} from 'src/cm/state';
-import {FoldingHeading} from 'src/extensions/additional/FoldingHeading';
-import {Math} from 'src/extensions/additional/Math';
-import {Mermaid} from 'src/extensions/additional/Mermaid';
-import {YfmHtmlBlock} from 'src/extensions/additional/YfmHtmlBlock';
-import {getSanitizeYfmHtmlBlock} from 'src/extensions/additional/YfmHtmlBlock/utils';
 import {
     type DirectiveSyntaxValue,
     type FileUploadHandler,
@@ -23,14 +13,23 @@ import {
     NumberInput,
     type RenderPreview,
     type ToolbarGroupData,
+    type ToolbarsPreset,
     type UseMarkdownEditorProps,
     type WysiwygPlaceholderOptions,
     logger,
     useMarkdownEditor,
     wysiwygToolbarConfigs,
-} from 'src/index';
-import type {CodeEditor} from 'src/markup';
-import type {ToolbarsPreset} from 'src/modules/toolbars/types';
+} from '@gravity-ui/markdown-editor';
+import type {ToolbarActionData} from '@gravity-ui/markdown-editor/_/bundle/Editor.js';
+import type {SettingItems} from '@gravity-ui/markdown-editor/_/bundle/settings/index.js';
+import type {CodeEditor} from '@gravity-ui/markdown-editor/_/markup/index.js';
+import type {Extension} from '@gravity-ui/markdown-editor/cm/state';
+import {FoldingHeading} from '@gravity-ui/markdown-editor/extensions/additional/FoldingHeading/index.js';
+import {Math} from '@gravity-ui/markdown-editor/extensions/additional/Math/index.js';
+import {Mermaid} from '@gravity-ui/markdown-editor/extensions/additional/Mermaid/index.js';
+import {YfmHtmlBlock} from '@gravity-ui/markdown-editor/extensions/additional/YfmHtmlBlock/index.js';
+import {getSanitizeYfmHtmlBlock} from '@gravity-ui/markdown-editor/extensions/additional/YfmHtmlBlock/utils.js';
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import {getPlugins} from '../defaults/md-plugins';
 import {useLogs} from '../hooks/useLogs';