feat: add autosave while editing Mermaid and YfmHtmlblock (#852)

makhnatkin · web-flow · commit 5ddd9d5ee8c5 · 2025-10-02T21:18:22.000+02:00
diff --git a/demo/components/Playground.tsx b/demo/components/Playground.tsx
@@ -86,6 +86,7 @@ export type PlaygroundProps = {
     disableMarkdownItAttrs?: boolean;
     markupParseHtmlOnPaste?: boolean;
     style?: React.CSSProperties;
+    storyAdditionalControls?: Record<string, any>;
 } & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
@@ -141,6 +142,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         disableMarkdownItAttrs,
         markupParseHtmlOnPaste,
         style,
+        storyAdditionalControls,
     } = props;
     const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
     const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
@@ -200,11 +202,20 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                     /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
                                 );
                             },
+                            autoSave: {
+                                enabled: storyAdditionalControls?.mermaidAutoSaveEnabled ?? true,
+                                delay: storyAdditionalControls?.mermaidAutoSaveDelay ?? 1000,
+                            },
                         })
                         .use(FoldingHeading)
                         .use(YfmHtmlBlock, {
                             useConfig: useYfmHtmlBlockStyles,
                             sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
+                            autoSave: {
+                                enabled:
+                                    storyAdditionalControls?.yfmHtmlBlockAutoSaveEnabled ?? true,
+                                delay: storyAdditionalControls?.yfmHtmlBlockAutoSaveDelay ?? 1000,
+                            },
                             head: `
                         <base target="_blank" />
                         <style>
diff --git a/demo/components/PlaygroundMini.tsx b/demo/components/PlaygroundMini.tsx
@@ -28,6 +28,7 @@ export type PlaygroundMiniProps = Pick<
     | 'directiveSyntax'
     | 'disabledHTMLBlockModes'
     | 'disableMarkdownItAttrs'
+    | 'storyAdditionalControls'
 > & {withDefaultInitialContent?: boolean};
 
 export const PlaygroundMini = memo<PlaygroundMiniProps>(
diff --git a/demo/stories/yfm/YFM.stories.tsx b/demo/stories/yfm/YFM.stories.tsx
@@ -53,7 +53,13 @@ export const YfmTabs: Story = {
 
 export const YfmHtmlBlock: Story = {
     name: 'YFM HTML',
-    args: {initial: markup.yfmHtmlBlock},
+    args: {
+        initial: markup.yfmHtmlBlock,
+        storyAdditionalControls: {
+            yfmHtmlBlockAutoSaveEnabled: false,
+            yfmHtmlBlockAutoSaveDelay: 2000,
+        },
+    },
 };
 
 export const YfmFile: Story = {
@@ -73,5 +79,11 @@ export const LaTeXFormulas: Story = {
 
 export const MermaidDiagram: Story = {
     name: 'Mermaid diagram',
-    args: {initial: markup.mermaidDiagram},
+    args: {
+        initial: markup.mermaidDiagram,
+        storyAdditionalControls: {
+            mermaidAutoSaveEnabled: false,
+            mermaidAutoSaveDelay: 2000,
+        },
+    },
 };
diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx b/src/extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx
@@ -12,9 +12,10 @@ import {useSharedEditingState} from 'src/react-utils/useSharedEditingState';
 import {cn} from '../../../../classname';
 import {TextAreaFixed as TextArea} from '../../../../forms/TextInput';
 import {i18n} from '../../../../i18n/common';
-import {useBooleanState, useElementState} from '../../../../react-utils';
+import {useAutoSave, useBooleanState, useElementState} from '../../../../react-utils';
 import {removeNode} from '../../../../utils';
 import {MermaidConsts} from '../MermaidSpecs/const';
+import type {MermaidOptions} from '../index';
 import type {MermaidEntitySharedState} from '../types';
 
 export const cnMermaid = cn('Mermaid');
@@ -68,22 +69,26 @@ const DiagramEditMode: React.FC<{
     mermaidInstance: Mermaid | null;
     onSave: (v: string) => void;
     onCancel: () => void;
-}> = ({initialText, onSave, onCancel, mermaidInstance}) => {
-    const [text, setText] = useState(initialText || '');
+    options: MermaidOptions;
+}> = ({initialText, onSave, onCancel, mermaidInstance, options: {autoSave}}) => {
+    const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({
+        initialValue: initialText || '',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
 
     return (
         <div className={b()}>
-            <MermaidPreview mermaidInstance={mermaidInstance} text={text} />
+            <MermaidPreview mermaidInstance={mermaidInstance} text={value} />
             <div className={b('Editor')}>
                 <div>
                     <TextArea
                         controlProps={{
                             className: STOP_EVENT_CLASSNAME,
                         }}
-                        value={text}
-                        onUpdate={(v) => {
-                            setText(v);
-                        }}
+                        value={value}
+                        onUpdate={handleChange}
                         autoFocus
                     />
                 </div>
@@ -92,7 +97,11 @@ const DiagramEditMode: React.FC<{
                         <Button onClick={onCancel} view={'flat'}>
                             <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>
                         </Button>
-                        <Button onClick={() => onSave(text)} view={'action'}>
+                        <Button
+                            onClick={handleManualSave}
+                            view={'action'}
+                            disabled={isSaveDisabled}
+                        >
                             <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
                         </Button>
                     </div>
@@ -108,7 +117,8 @@ export const MermaidView: React.FC<{
     getMermaidInstance: () => Mermaid;
     node: Node;
     getPos: () => number | undefined;
-}> = ({onChange, node, getPos, view, getMermaidInstance}) => {
+    options: MermaidOptions;
+}> = ({onChange, node, getPos, view, getMermaidInstance, options}) => {
     const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(
         () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),
@@ -144,8 +154,8 @@ export const MermaidView: React.FC<{
                 onCancel={unsetEditing}
                 onSave={(v) => {
                     onChange({[MermaidConsts.NodeAttrs.content]: v});
-                    unsetEditing();
                 }}
+                options={options}
             />
         );
     }
diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx b/src/extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx
@@ -20,6 +20,7 @@ export class WMermaidNodeView implements NodeView {
     private readonly getPos;
     private readonly renderItem;
     private readonly loadRuntimeScript: () => void;
+    private readonly options: MermaidOptions;
 
     constructor(
         node: Node,
@@ -35,6 +36,7 @@ export class WMermaidNodeView implements NodeView {
         this.view = view;
         this.getPos = getPos;
         this.loadRuntimeScript = loadRuntimeScript;
+        this.options = opts;
         this.initializeMermaid();
         this.renderItem = getReactRendererFromState(view.state).createItem(
             'mermaid-view',
@@ -121,6 +123,7 @@ export class WMermaidNodeView implements NodeView {
                     node={this.node}
                     getMermaidInstance={this.getMermaidInstance}
                     getPos={this.getPos}
+                    options={this.options}
                 />
             </Portal>
         );
diff --git a/src/extensions/additional/Mermaid/index.ts b/src/extensions/additional/Mermaid/index.ts
@@ -5,24 +5,27 @@ import {MermaidSpecs} from './MermaidSpecs';
 import {MermaidAction} from './MermaidSpecs/const';
 import {addMermaid} from './actions';
 
-export type MermaidOptions = {loadRuntimeScript: () => void};
+export type MermaidOptions = {
+    loadRuntimeScript: () => void;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
+};
 
-export const Mermaid: ExtensionAuto<MermaidOptions> = (builder, {loadRuntimeScript}) => {
+export const Mermaid: ExtensionAuto<MermaidOptions> = (builder, options) => {
     builder.use(MermaidSpecs, {
-        nodeView: MermaidNodeViewFactory({loadRuntimeScript}),
+        nodeView: MermaidNodeViewFactory(options),
     });
 
     builder.addAction(MermaidAction, () => addMermaid);
 };
 
 const MermaidNodeViewFactory: (
     opts: MermaidOptions,
-) => (deps: ExtensionDeps) => NodeViewConstructor =
-    ({loadRuntimeScript}) =>
-    () =>
-    (node, view, getPos) => {
-        return new WMermaidNodeView(node, view, getPos, {loadRuntimeScript});
-    };
+) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {
+    return new WMermaidNodeView(node, view, getPos, options);
+};
 
 declare global {
     namespace WysiwygEditor {
diff --git a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
@@ -12,7 +12,7 @@ import {SharedStateKey} from 'src/extensions/behavior/SharedState';
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/common';
 import {debounce} from 'src/lodash';
-import {useBooleanState, useElementState} from 'src/react-utils/hooks';
+import {useAutoSave, useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {useSharedEditingState} from 'src/react-utils/useSharedEditingState';
 import {removeNode} from 'src/utils/remove-node';
 
@@ -194,8 +194,14 @@ const CodeEditMode: React.FC<{
     initialText: string;
     onSave: (v: string) => void;
     onCancel: () => void;
-}> = ({initialText, onSave, onCancel}) => {
-    const [text, setText] = useState(initialText || '\n');
+    options: YfmHtmlBlockOptions;
+}> = ({initialText, onSave, onCancel, options: {autoSave}}) => {
+    const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({
+        initialValue: initialText || '\n',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
 
     return (
         <div className={b({editing: true})}>
@@ -204,10 +210,8 @@ const CodeEditMode: React.FC<{
                     controlProps={{
                         className: STOP_EVENT_CLASSNAME,
                     }}
-                    value={text}
-                    onUpdate={(v) => {
-                        setText(v);
-                    }}
+                    value={value}
+                    onUpdate={handleChange}
                     autoFocus
                 />
 
@@ -216,7 +220,11 @@ const CodeEditMode: React.FC<{
                         <Button onClick={onCancel} view={'flat'}>
                             <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>
                         </Button>
-                        <Button onClick={() => onSave(text)} view={'action'}>
+                        <Button
+                            onClick={handleManualSave}
+                            view={'action'}
+                            disabled={isSaveDisabled}
+                        >
                             <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
                         </Button>
                     </div>
@@ -232,13 +240,8 @@ export const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;
     options: YfmHtmlBlockOptions;
     view: EditorView;
-}> = ({
-    onChange,
-    node,
-    getPos,
-    view,
-    options: {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''},
-}) => {
+}> = ({onChange, node, getPos, view, options}) => {
+    const {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''} = options;
     const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(
         () => SharedStateKey.define<YfmHtmlBlockEntitySharedState>({name: entityId}),
@@ -258,8 +261,8 @@ export const YfmHtmlBlockView: React.FC<{
                 onCancel={unsetEditing}
                 onSave={(v) => {
                     onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v});
-                    unsetEditing();
                 }}
+                options={options}
             />
         );
     }
diff --git a/src/extensions/additional/YfmHtmlBlock/index.ts b/src/extensions/additional/YfmHtmlBlock/index.ts
@@ -11,6 +11,10 @@ import {addYfmHtmlBlock} from './actions';
 export interface YfmHtmlBlockOptions
     extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number; // по умолчанию 1000ms
+    };
 }
 
 export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (
diff --git a/src/react-utils/hooks.ts b/src/react-utils/hooks.ts
@@ -59,3 +59,10 @@ export function useDebounce<Fn extends AnyFunction>(cb: Fn, wait: number) {
 
     return debouncedFn;
 }
+
+export {
+    useAutoSave,
+    type AutoSaveOptions,
+    type UseAutoSaveProps,
+    type UseAutoSaveReturn,
+} from './hooks/useAutoSave';
diff --git a/src/react-utils/hooks/useAutoSave.ts b/src/react-utils/hooks/useAutoSave.ts
