fix: fixed issues

Author: separatrixxx

demo/src/components/Playground.tsx

@@ -32,7 +32,7 @@ import {
     wLatexBlockItemData,
     wLatexInlineItemData,
 } from '@gravity-ui/markdown-editor-latex-extension/configs';
-import {YfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension';
+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';
 
@@ -214,7 +214,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                             },
                             theme: {dark: 'dark', light: 'forest'},
                         })
-                        .use(YfmPageConstructor, {
+                        .use(YfmPageConstructorExtension, {
                             autoSave: {
                                 enabled:
                                     storyAdditionalControls?.yfmPageConstructorAutoSaveEnabled ??

packages/page-constructor-extension/README.md

@@ -21,9 +21,9 @@ npm install @gravity-ui/markdown-editor @gravity-ui/uikit @gravity-ui/page-const
 ### WYSIWYG extension
 
 ```typescript
-import {YfmPageConstructor} from '@gravity-ui/markdown-editor-page-constructor-extension';
+import {YfmPageConstructorExtension} from '@gravity-ui/markdown-editor-page-constructor-extension';
 
-builder.use(YfmPageConstructor, {
+builder.use(YfmPageConstructorExtension, {
     autoSave: {enabled: true, delay: 1000},
 });
 ```

packages/page-constructor-extension/src/extension/YfmPageConstructorNodeView/YfmPageConstructor.scss

@@ -1,4 +1,4 @@
-.g-md-YfmPageConstructor {
+.g-md-yfm-page-constructor {
     position: relative;
 
     display: flex;
@@ -15,7 +15,7 @@
         display: flex;
     }
 
-    &__Constructor {
+    &__constructor {
         flex: 1 1 auto;
 
         min-width: 0;
@@ -26,7 +26,7 @@
         }
     }
 
-    &__Error {
+    &__error {
         flex: 1 1 auto;
 
         font-family: var(--g-font-family-monospace);
@@ -36,7 +36,7 @@
         color: var(--g-color-text-danger);
     }
 
-    &__Preview {
+    &__preview {
         flex: 1 1 auto;
 
         min-width: 0;
@@ -47,7 +47,7 @@
         }
     }
 
-    &__Editor {
+    &__editor {
         flex: 1 1 auto;
 
         min-width: 320px;
@@ -56,15 +56,15 @@
         caret-color: auto;
     }
 
-    &__Controls {
+    &__controls {
         display: flex;
         justify-content: flex-end;
         gap: 8px;
 
         margin-top: 8px;
     }
 
-    &__Menu {
+    &__menu {
         position: absolute;
         z-index: 10;
         top: 0;

packages/page-constructor-extension/src/extension/YfmPageConstructorNodeView/YfmPageConstructorPreview.tsx

@@ -43,14 +43,14 @@ export const YfmPageConstructorPreview: React.FC<{
 
     if (!loadResult.success) {
         return (
-            <div className={b('Error')}>
+            <div className={b('error')}>
                 <div>{String(loadResult.error)}</div>
             </div>
         );
     }
 
     return (
-        <div className={b('Preview')}>
+        <div className={b('preview')}>
             <ErrorBoundary
                 fallbackRender={({error}) => (
                     <Flex justifyContent="center" alignItems="center" width="100%" height="100%">

packages/page-constructor-extension/src/extension/YfmPageConstructorNodeView/YfmPageConstructorView.tsx

@@ -24,7 +24,7 @@ import type {TransformerOptions} from './YfmPageConstructorPreview';
 import './YfmPageConstructor.scss';
 
 export {type TransformerOptions};
-export const cnYfmPageConstructor: (...args: unknown[]) => string = cn('YfmPageConstructor');
+export const cnYfmPageConstructor: (...args: unknown[]) => string = cn('yfm-page-constructor');
 export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
 
 const b = cnYfmPageConstructor;
@@ -67,16 +67,16 @@ const PageConstructorEditMode: React.FC<{
             <YfmPageConstructorPreview
                 text={value}
                 transformerOptions={transformerOptions}
-                className={b('Constructor')}
+                className={b('constructor')}
             />
-            <div className={b('Editor')} style={{whiteSpace: 'nowrap', caretColor: 'auto'}}>
+            <div className={b('editor')} style={{whiteSpace: 'nowrap', caretColor: 'auto'}}>
                 <TextArea
                     controlProps={{className: STOP_EVENT_CLASSNAME}}
                     value={value}
                     onUpdate={handleChange}
                     autoFocus
                 />
-                <Flex justifyContent="flex-end" spacing={{mt: 2}} className={b('Controls')}>
+                <Flex justifyContent="flex-end" spacing={{mt: 2}} className={b('controls')}>
                     <Button onClick={onCancel} view="flat">
                         <span className={STOP_EVENT_CLASSNAME}>
                             {isAutoSaveEnabled ? i18n('close') : i18n('cancel')}
@@ -152,10 +152,10 @@ export const YfmPageConstructorView: React.FC<{
             <YfmPageConstructorPreview
                 text={content}
                 transformerOptions={transformerOptions}
-                className={b('Constructor')}
+                className={b('constructor')}
             />
             {canEdit && (
-                <div className={b('Menu')}>
+                <div className={b('menu')}>
                     <Button
                         size="s"
                         onClick={toggleMenuOpen}

packages/page-constructor-extension/src/extension/YfmPageConstructorSpecs/const.ts

@@ -1,17 +1,14 @@
 import {entityIdAttr, nodeTypeFactory} from '@gravity-ui/markdown-editor';
 
-export enum YfmPageConstructorAttrs {
-    // @ts-expect-error error TS18055
-    EntityId = entityIdAttr,
-    content = 'data-content',
-}
+export const YfmPageConstructorAttrs = {
+    EntityId: entityIdAttr,
+    content: 'data-content',
+} as const;
 
 export const yfmPageConstructorNodeName = 'yfm-page-constructor';
 export const yfmPageConstructorTokenName = 'yfm_page-constructor';
 export const yfmPageConstructorNodeType = nodeTypeFactory(yfmPageConstructorNodeName);
 
-export const YfmPageConstructorAction = 'createYfmPageConstructor';
-
 export const YfmPageConstructorConsts = {
     NodeName: yfmPageConstructorNodeName,
     NodeAttrs: YfmPageConstructorAttrs,

packages/page-constructor-extension/src/extension/YfmPageConstructorSpecs/index.tsx

@@ -1,5 +1,5 @@
 import {transform} from '@diplodoc/page-constructor-extension/plugin/csr';
-import type {ExtensionAuto, ExtensionNodeSpec} from '@gravity-ui/markdown-editor';
+import type {ExtensionAuto} from '@gravity-ui/markdown-editor';
 import {generateEntityId} from '@gravity-ui/markdown-editor';
 
 import {
@@ -11,65 +11,50 @@ import {
 
 export {yfmPageConstructorNodeName, YfmPageConstructorConsts} from './const';
 
-export type YfmPageConstructorSpecsOptions = {
-    nodeView?: ExtensionNodeSpec['view'];
-};
-
-const YfmPageConstructorSpecsExtension: ExtensionAuto<YfmPageConstructorSpecsOptions> = (
-    builder,
-    {nodeView},
-) => {
+export const YfmPageConstructorSpecsExtension: ExtensionAuto = (builder) => {
     builder
         .configureMd((md) => md.use(transform({bundle: false}), {}))
-        .addNode(yfmPageConstructorNodeName, () => ({
-            fromMd: {
-                tokenName: yfmPageConstructorTokenName,
-                tokenSpec: {
-                    name: yfmPageConstructorNodeName,
-                    type: 'node',
-                    noCloseToken: true,
-                    getAttrs: ({content}) => ({
-                        [YfmPageConstructorConsts.NodeAttrs.content]: content,
-                        [YfmPageConstructorConsts.NodeAttrs.EntityId]: generateEntityId(
-                            yfmPageConstructorNodeName,
-                        ),
-                    }),
+        .addNodeSpec(yfmPageConstructorNodeName, () => ({
+            selectable: true,
+            atom: true,
+            group: 'block',
+            attrs: {
+                [YfmPageConstructorConsts.NodeAttrs.content]: {default: ''},
+                [YfmPageConstructorConsts.NodeAttrs.EntityId]: {
+                    default: defaultYfmPageConstructorEntityId,
                 },
             },
-            spec: {
-                selectable: true,
-                atom: true,
-                group: 'block',
-                attrs: {
-                    [YfmPageConstructorConsts.NodeAttrs.content]: {default: ''},
-                    [YfmPageConstructorConsts.NodeAttrs.EntityId]: {
-                        default: defaultYfmPageConstructorEntityId,
-                    },
-                },
-                parseDOM: [],
-                toDOM(node) {
-                    return ['div', node.attrs];
-                },
-                dnd: {props: {offset: [8, 1]}},
+            parseDOM: [],
+            toDOM(node) {
+                return ['div', node.attrs];
             },
-            toMd: (state, node) => {
-                const content = String(
-                    node.attrs[YfmPageConstructorConsts.NodeAttrs.content] || '',
-                );
-
-                state.write('::: page-constructor');
+            dnd: {props: {offset: [8, 1]}},
+        }))
+        .addMarkdownTokenParserSpec(yfmPageConstructorTokenName, () => ({
+            name: yfmPageConstructorNodeName,
+            type: 'node',
+            noCloseToken: true,
+            getAttrs: ({content}) => ({
+                [YfmPageConstructorConsts.NodeAttrs.content]: content,
+                [YfmPageConstructorConsts.NodeAttrs.EntityId]: generateEntityId(
+                    yfmPageConstructorNodeName,
+                ),
+            }),
+        }))
+        .addNodeSerializerSpec(yfmPageConstructorNodeName, () => (state, node) => {
+            const content = String(node.attrs[YfmPageConstructorConsts.NodeAttrs.content] || '');
+
+            state.write('::: page-constructor');
+            state.ensureNewLine();
+
+            if (content) {
+                state.text(content.trimEnd(), false);
                 state.ensureNewLine();
+            }
 
-                if (content) {
-                    state.text(content.trimEnd(), false);
-                    state.ensureNewLine();
-                }
-
-                state.write(':::');
-                state.closeBlock(node);
-            },
-            view: nodeView,
-        }));
+            state.write(':::');
+            state.closeBlock(node);
+        });
 };
 
 export const YfmPageConstructorSpecs = Object.assign(

packages/page-constructor-extension/src/extension/actions.ts

@@ -2,7 +2,7 @@ import type {ActionSpec} from '@gravity-ui/markdown-editor';
 import {SharedStateKey, generateEntityId, get$Cursor, pType} from '@gravity-ui/markdown-editor';
 import type {Command} from '@gravity-ui/markdown-editor/pm/state';
 
-import {YfmPageConstructorConsts} from './YfmPageConstructorSpecs';
+import {YfmPageConstructorConsts} from './YfmPageConstructorSpecs/const';
 import type {YfmPageConstructorEntitySharedState} from './types';
 
 const defaultYfmPageConstructorContent = [
@@ -40,6 +40,9 @@ const createYfmPageConstructor: Command = (state, dispatch) => {
 };
 
 export const addYfmPageConstructor: ActionSpec = {
+    isActive() {
+        return false;
+    },
     isEnable(state) {
         return createYfmPageConstructor(state);
     },

packages/page-constructor-extension/src/extension/const.ts

@@ -1 +1,3 @@
 export * from './YfmPageConstructorSpecs/const';
+
+export const YfmPageConstructorAction = 'createYfmPageConstructor';

packages/page-constructor-extension/src/extension/index.ts

@@ -1,37 +1,44 @@
-import type {
-    Action,
-    ExtensionAuto,
-    ExtensionDeps,
-    NodeViewConstructor,
-} from '@gravity-ui/markdown-editor';
+import type {Action, ExtensionAuto} from '@gravity-ui/markdown-editor';
+import {Plugin} from '@gravity-ui/markdown-editor/pm/state';
 
 import {WYfmPageConstructorNodeView} from './YfmPageConstructorNodeView';
 import type {TransformerOptions} from './YfmPageConstructorNodeView/YfmPageConstructorPreview';
 export type {TransformerOptions as YfmPageConstructorTransformerOptions};
 import {YfmPageConstructorSpecs} from './YfmPageConstructorSpecs';
-import {YfmPageConstructorAction} from './YfmPageConstructorSpecs/const';
+import {yfmPageConstructorNodeName} from './YfmPageConstructorSpecs/const';
 import {addYfmPageConstructor} from './actions';
+import {YfmPageConstructorAction} from './const';
 
 export type YfmPageConstructorOptions = {
+    /** Whether the user can edit page-constructor blocks in WYSIWYG mode. @default true */
     canEdit?: boolean;
+    /** Auto-save configuration for the YAML editor inside the node view. */
     autoSave?: {
+        /** Enable auto-save. When true, changes are saved automatically after a delay. */
         enabled: boolean;
+        /** Delay in milliseconds before auto-saving after the last edit. */
         delay?: number;
     };
+    /** Options for server-side content transformation, or `false` to disable it. */
     transformerOptions?: TransformerOptions;
 };
 
-function createNodeViewFactory(
-    options: YfmPageConstructorOptions,
-): (deps: ExtensionDeps) => NodeViewConstructor {
-    return () => (node, view, getPos) => {
-        return new WYfmPageConstructorNodeView(node, view, getPos, options);
-    };
-}
+export const YfmPageConstructorExtension: ExtensionAuto<YfmPageConstructorOptions> = (
+    builder,
+    options,
+) => {
+    builder.use(YfmPageConstructorSpecs);
 
-export const YfmPageConstructor: ExtensionAuto<YfmPageConstructorOptions> = (builder, options) => {
-    builder.use(YfmPageConstructorSpecs, {
-        nodeView: createNodeViewFactory(options),
+    builder.addPlugin(() => {
+        return new Plugin({
+            props: {
+                nodeViews: {
+                    [yfmPageConstructorNodeName]: (node, view, getPos) => {
+                        return new WYfmPageConstructorNodeView(node, view, getPos, options);
+                    },
+                },
+            },
+        });
     });
 
     builder.addAction(YfmPageConstructorAction, () => addYfmPageConstructor);