@gravity-ui/markdown-editor 15.3.1 → 15.4.1

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid | null; text: string}> = ({\n    mermaidInstance,\n    text = '',\n}) => {\n    const [svg, setSvg] = useState<string>();\n    const [error, setError] = useState<string | null>(null);\n\n    useEffect(() => {\n        const p = async () => {\n            if (mermaidInstance) {\n                try {\n                    // Validates syntax and throws error if text is invalid\n                    await mermaidInstance.parse(text);\n\n                    const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n                    setSvg(S);\n                    setError(null);\n                } catch (e) {\n                    setError((e as Error).message);\n                }\n            }\n        };\n\n        p();\n    }, [mermaidInstance, text]);\n\n    if (error) {\n        return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n    }\n\n    return (\n        <div className={b('Preview')}>\n            {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n        </div>\n    );\n};\n\nconst DiagramEditMode: React.FC<{\n    initialText: string;\n    mermaidInstance: Mermaid | null;\n    onSave: (v: string) => void;\n    onCancel: () => void;\n}> = ({initialText, onSave, onCancel, mermaidInstance}) => {\n    const [text, setText] = useState(initialText || '');\n\n    return (\n        <div className={b()}>\n            <MermaidPreview mermaidInstance={mermaidInstance} text={text} />\n            <div className={b('Editor')}>\n                <div>\n                    <TextArea\n                        controlProps={{\n                            className: STOP_EVENT_CLASSNAME,\n                        }}\n                        value={text}\n                        onUpdate={(v) => {\n                            setText(v);\n                        }}\n                        autoFocus\n                    />\n                </div>\n                <div className={b('Controls')}>\n                    <div>\n                        <Button onClick={onCancel} view={'flat'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n                        </Button>\n                        <Button onClick={() => onSave(text)} view={'action'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n                        </Button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const MermaidView: React.FC<{\n    view: EditorView;\n    onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n    getMermaidInstance: () => Mermaid;\n    node: Node;\n    getPos: () => number | undefined;\n}> = ({onChange, node, getPos, view, getMermaidInstance}) => {\n    const [mermaidInstance, setMermaidInstance] = useState<Mermaid | null>(null);\n    const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(\n        Boolean(node.attrs[MermaidConsts.NodeAttrs.newCreated]),\n    );\n    const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n    const [anchorElement, setAnchorElement] = useElementState();\n\n    useEffect(() => {\n        const waitForMermaid = () =>\n            setTimeout(() => {\n                const instance = getMermaidInstance();\n                if (instance) {\n                    setMermaidInstance(instance);\n\n                    return;\n                }\n\n                waitForMermaid();\n            }, 100);\n\n        waitForMermaid();\n    }, []);\n\n    if (editing) {\n        return (\n            <DiagramEditMode\n                initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n                mermaidInstance={mermaidInstance}\n                onCancel={unsetEditing}\n                onSave={(v) => {\n                    onChange({[MermaidConsts.NodeAttrs.content]: v});\n                    unsetEditing();\n                }}\n            />\n        );\n    }\n\n    return (\n        <div className={b()} onDoubleClick={setEditing}>\n            <MermaidPreview\n                mermaidInstance={mermaidInstance}\n                text={node.attrs[MermaidConsts.NodeAttrs.content]}\n            />\n            <div>\n                <Button\n                    onClick={toggleMenuOpen}\n                    ref={setAnchorElement}\n                    size={'s'}\n                    className={STOP_EVENT_CLASSNAME}\n                >\n                    <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n                </Button>\n                <Popup\n                    open={menuOpen}\n                    anchorElement={anchorElement}\n                    onOpenChange={closeMenu}\n                    placement=\"bottom-end\"\n                >\n                    <Menu>\n                        <Menu.Item\n                            onClick={() => {\n                                toggleEditing();\n                                closeMenu();\n                            }}\n                        >\n                            {i18n('edit')}\n                        </Menu.Item>\n                        <Menu.Item\n                            onClick={() => {\n                                const pos = getPos();\n                                if (pos === undefined) return;\n                                removeNode({\n                                    node,\n                                    pos,\n                                    tr: view.state.tr,\n                                    dispatch: view.dispatch,\n                                });\n                            }}\n                        >\n                            {i18n('remove')}\n                        </Menu.Item>\n                    </Menu>\n                </Popup>\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nimport type {MermaidEntitySharedState} from '../types';\n\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid | null; text: string}> = ({\n    mermaidInstance,\n    text = '',\n}) => {\n    const [svg, setSvg] = useState<string>();\n    const [error, setError] = useState<string | null>(null);\n\n    useEffect(() => {\n        const p = async () => {\n            if (mermaidInstance) {\n                try {\n                    // Validates syntax and throws error if text is invalid\n                    await mermaidInstance.parse(text);\n\n                    const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n                    setSvg(S);\n                    setError(null);\n                } catch (e) {\n                    setError((e as Error).message);\n                }\n            }\n        };\n\n        p();\n    }, [mermaidInstance, text]);\n\n    if (error) {\n        return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n    }\n\n    return (\n        <div className={b('Preview')}>\n            {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n        </div>\n    );\n};\n\nconst DiagramEditMode: React.FC<{\n    initialText: string;\n    mermaidInstance: Mermaid | null;\n    onSave: (v: string) => void;\n    onCancel: () => void;\n}> = ({initialText, onSave, onCancel, mermaidInstance}) => {\n    const [text, setText] = useState(initialText || '');\n\n    return (\n        <div className={b()}>\n            <MermaidPreview mermaidInstance={mermaidInstance} text={text} />\n            <div className={b('Editor')}>\n                <div>\n                    <TextArea\n                        controlProps={{\n                            className: STOP_EVENT_CLASSNAME,\n                        }}\n                        value={text}\n                        onUpdate={(v) => {\n                            setText(v);\n                        }}\n                        autoFocus\n                    />\n                </div>\n                <div className={b('Controls')}>\n                    <div>\n                        <Button onClick={onCancel} view={'flat'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n                        </Button>\n                        <Button onClick={() => onSave(text)} view={'action'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n                        </Button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const MermaidView: React.FC<{\n    view: EditorView;\n    onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n    getMermaidInstance: () => Mermaid;\n    node: Node;\n    getPos: () => number | undefined;\n}> = ({onChange, node, getPos, view, getMermaidInstance}) => {\n    const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];\n    const entityKey = useMemo(\n        () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),\n        [enitityId],\n    );\n\n    const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n    const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n    const [anchorElement, setAnchorElement] = useElementState();\n\n    const [mermaidInstance, setMermaidInstance] = useState<Mermaid | null>(null);\n    useEffect(() => {\n        const waitForMermaid = () =>\n            setTimeout(() => {\n                const instance = getMermaidInstance();\n                if (instance) {\n                    setMermaidInstance(instance);\n\n                    return;\n                }\n\n                waitForMermaid();\n            }, 100);\n\n        waitForMermaid();\n    }, []);\n\n    if (editing) {\n        return (\n            <DiagramEditMode\n                initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n                mermaidInstance={mermaidInstance}\n                onCancel={unsetEditing}\n                onSave={(v) => {\n                    onChange({[MermaidConsts.NodeAttrs.content]: v});\n                    unsetEditing();\n                }}\n            />\n        );\n    }\n\n    return (\n        <div className={b()} onDoubleClick={setEditing}>\n            <MermaidPreview\n                mermaidInstance={mermaidInstance}\n                text={node.attrs[MermaidConsts.NodeAttrs.content]}\n            />\n            <div>\n                <Button\n                    onClick={toggleMenuOpen}\n                    ref={setAnchorElement}\n                    size={'s'}\n                    className={STOP_EVENT_CLASSNAME}\n                >\n                    <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n                </Button>\n                <Popup\n                    open={menuOpen}\n                    anchorElement={anchorElement}\n                    onOpenChange={closeMenu}\n                    placement=\"bottom-end\"\n                >\n                    <Menu>\n                        <Menu.Item\n                            onClick={() => {\n                                setEditing();\n                                closeMenu();\n                            }}\n                        >\n                            {i18n('edit')}\n                        </Menu.Item>\n                        <Menu.Item\n                            onClick={() => {\n                                const pos = getPos();\n                                if (pos === undefined) return;\n                                removeNode({\n                                    node,\n                                    pos,\n                                    tr: view.state.tr,\n                                    dispatch: view.dispatch,\n                                });\n                            }}\n                        >\n                            {i18n('remove')}\n                        </Menu.Item>\n                    </Menu>\n                </Popup>\n            </div>\n        </div>\n    );\n};\n"]}

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.d.ts

@@ -14,6 +14,7 @@ export declare class WMermaidNodeView implements NodeView {
     destroy(): void;
     ignoreMutation(): boolean;
     stopEvent(e: Event): boolean;
+    private validateEntityId;
     private onChange;
     private getMermaidInstance;
     private renderMermaid;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Portal } from '@gravity-ui/uikit';
-import { getReactRendererFromState } from "../../../behavior/index.js";
+import { getReactRendererFromState } from "../../../behavior/ReactRenderer/index.js";
+import { generateEntityId, isInvalidEntityId } from "../../../../utils/entity-id.js";
+import { MermaidConsts, defaultMermaidEntityId } from "../MermaidSpecs/const.js";
 import { MermaidView, STOP_EVENT_CLASSNAME } from "./MermaidView.js";
 let mermaidInstance;
 export class WMermaidNodeView {
@@ -21,6 +23,7 @@ export class WMermaidNodeView {
         this.loadRuntimeScript = loadRuntimeScript;
         this.initializeMermaid();
         this.renderItem = getReactRendererFromState(view.state).createItem('mermaid-view', this.renderMermaid.bind(this));
+        this.validateEntityId();
     }
     initializeMermaid() {
         // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime
@@ -47,6 +50,16 @@ export class WMermaidNodeView {
         const target = e.target;
         return target.classList.contains(STOP_EVENT_CLASSNAME);
     }
+    validateEntityId() {
+        if (isInvalidEntityId({
+            node: this.node,
+            doc: this.view.state.doc,
+            defaultId: defaultMermaidEntityId,
+        })) {
+            const newId = generateEntityId(MermaidConsts.NodeName);
+            this.view.dispatch(this.view.state.tr.setNodeAttribute(this.getPos(), MermaidConsts.NodeAttrs.EntityId, newId));
+        }
+    }
     onChange(attrs) {
         const pos = this.getPos();
         if (pos === undefined)

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport type {MermaidOptions} from '..';\nimport {getReactRendererFromState} from '../../../behavior';\nimport type {MermaidConsts} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n    readonly dom: HTMLElement;\n    private node: Node;\n    private readonly view;\n    private readonly getPos;\n    private readonly renderItem;\n    private readonly loadRuntimeScript: () => void;\n\n    constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number | undefined,\n        opts: MermaidOptions,\n    ) {\n        const {loadRuntimeScript} = opts;\n        this.node = node;\n        this.dom = document.createElement('div');\n        this.dom.classList.add('mermaid-container');\n        this.dom.contentEditable = 'false';\n        this.view = view;\n        this.getPos = getPos;\n        this.loadRuntimeScript = loadRuntimeScript;\n        this.initializeMermaid();\n        this.renderItem = getReactRendererFromState(view.state).createItem(\n            'mermaid-view',\n            this.renderMermaid.bind(this),\n        );\n    }\n\n    initializeMermaid() {\n        // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n        window.mermaidJsonp = window.mermaidJsonp || [];\n        window.mermaidJsonp.push((mermaid: Mermaid) => {\n            mermaidInstance = mermaid;\n        });\n\n        this.loadRuntimeScript();\n    }\n\n    update(node: Node) {\n        if (node.type !== this.node.type) return false;\n        this.node = node;\n        this.renderItem.rerender();\n        return true;\n    }\n\n    destroy() {\n        this.renderItem.remove();\n    }\n\n    ignoreMutation() {\n        return true;\n    }\n\n    stopEvent(e: Event) {\n        const target = e.target as Element;\n        return target.classList.contains(STOP_EVENT_CLASSNAME);\n    }\n\n    private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n        const pos = this.getPos();\n        if (pos === undefined) return;\n\n        const tr = this.view.state.tr.setNodeMarkup(\n            pos,\n            undefined,\n            {\n                ...this.node.attrs,\n                ...attrs,\n            },\n            [],\n        );\n\n        this.view.dispatch(tr);\n    }\n\n    private getMermaidInstance = () => mermaidInstance;\n\n    private renderMermaid() {\n        return (\n            <Portal container={this.dom}>\n                <MermaidView\n                    view={this.view}\n                    onChange={this.onChange.bind(this)}\n                    node={this.node}\n                    getMermaidInstance={this.getMermaidInstance}\n                    getPos={this.getPos}\n                />\n            </Portal>\n        );\n    }\n}\n"]}
+{"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n    readonly dom: HTMLElement;\n    private node: Node;\n    private readonly view;\n    private readonly getPos;\n    private readonly renderItem;\n    private readonly loadRuntimeScript: () => void;\n\n    constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number | undefined,\n        opts: MermaidOptions,\n    ) {\n        const {loadRuntimeScript} = opts;\n        this.node = node;\n        this.dom = document.createElement('div');\n        this.dom.classList.add('mermaid-container');\n        this.dom.contentEditable = 'false';\n        this.view = view;\n        this.getPos = getPos;\n        this.loadRuntimeScript = loadRuntimeScript;\n        this.initializeMermaid();\n        this.renderItem = getReactRendererFromState(view.state).createItem(\n            'mermaid-view',\n            this.renderMermaid.bind(this),\n        );\n\n        this.validateEntityId();\n    }\n\n    initializeMermaid() {\n        // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n        window.mermaidJsonp = window.mermaidJsonp || [];\n        window.mermaidJsonp.push((mermaid: Mermaid) => {\n            mermaidInstance = mermaid;\n        });\n\n        this.loadRuntimeScript();\n    }\n\n    update(node: Node) {\n        if (node.type !== this.node.type) return false;\n        this.node = node;\n        this.renderItem.rerender();\n        return true;\n    }\n\n    destroy() {\n        this.renderItem.remove();\n    }\n\n    ignoreMutation() {\n        return true;\n    }\n\n    stopEvent(e: Event) {\n        const target = e.target as Element;\n        return target.classList.contains(STOP_EVENT_CLASSNAME);\n    }\n\n    private validateEntityId() {\n        if (\n            isInvalidEntityId({\n                node: this.node,\n                doc: this.view.state.doc,\n                defaultId: defaultMermaidEntityId,\n            })\n        ) {\n            const newId = generateEntityId(MermaidConsts.NodeName);\n            this.view.dispatch(\n                this.view.state.tr.setNodeAttribute(\n                    this.getPos()!,\n                    MermaidConsts.NodeAttrs.EntityId,\n                    newId,\n                ),\n            );\n        }\n    }\n\n    private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n        const pos = this.getPos();\n        if (pos === undefined) return;\n\n        const tr = this.view.state.tr.setNodeMarkup(\n            pos,\n            undefined,\n            {\n                ...this.node.attrs,\n                ...attrs,\n            },\n            [],\n        );\n\n        this.view.dispatch(tr);\n    }\n\n    private getMermaidInstance = () => mermaidInstance;\n\n    private renderMermaid() {\n        return (\n            <Portal container={this.dom}>\n                <MermaidView\n                    view={this.view}\n                    onChange={this.onChange.bind(this)}\n                    node={this.node}\n                    getMermaidInstance={this.getMermaidInstance}\n                    getPos={this.getPos}\n                />\n            </Portal>\n        );\n    }\n}\n"]}

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/const.d.ts

@@ -1,6 +1,8 @@
 export declare enum MermaidAttrs {
+    EntityId = "data-entity-id",
     content = "content",
     class = "class",
+    /** @deprecated This is no longer used. Removed in next major version */
     newCreated = "newCreated"
 }
 export declare const mermaidNodeName = "mermaid";
@@ -11,3 +13,4 @@ export declare const MermaidConsts: {
     readonly NodeAttrs: typeof MermaidAttrs;
     readonly nodeType: (schema: import("prosemirror-model").Schema) => import("prosemirror-model").NodeType;
 };
+export declare const defaultMermaidEntityId: string;

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/const.js

@@ -1,8 +1,13 @@
+import { entityIdAttr } from "../../../../utils/entity-id.js";
 import { nodeTypeFactory } from "../../../../utils/schema.js";
 export var MermaidAttrs;
 (function (MermaidAttrs) {
+    // @ts-expect-error error TS18055
+    MermaidAttrs["EntityId"] = "data-entity-id";
     MermaidAttrs["content"] = "content";
     MermaidAttrs["class"] = "class";
+    // MAJOR: remove before next major
+    /** @deprecated This is no longer used. Removed in next major version */
     MermaidAttrs["newCreated"] = "newCreated";
 })(MermaidAttrs || (MermaidAttrs = {}));
 export const mermaidNodeName = 'mermaid';
@@ -13,4 +18,5 @@ export const MermaidConsts = {
     NodeAttrs: MermaidAttrs,
     nodeType: mermaidNodeType,
 };
+export const defaultMermaidEntityId = mermaidNodeName + '#0';
 //# sourceMappingURL=const.js.map

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidSpecs/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,oCAAiC;AAEzD,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,yCAAyB,CAAA;AAC7B,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC;AACzC,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,QAAQ,EAAE,eAAe;IACzB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,eAAe;CACnB,CAAC","sourcesContent":["import {nodeTypeFactory} from '../../../../utils/schema';\n\nexport enum MermaidAttrs {\n    content = 'content',\n    class = 'class',\n    newCreated = 'newCreated',\n}\n\nexport const mermaidNodeName = 'mermaid';\nexport const mermaidNodeType = nodeTypeFactory(mermaidNodeName);\n\nexport const MermaidAction = 'createMermaid';\n\nexport const MermaidConsts = {\n    NodeName: mermaidNodeName,\n    NodeAttrs: MermaidAttrs,\n    nodeType: mermaidNodeType,\n} as const;\n"]}
+{"version":3,"file":"const.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidSpecs/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,uCAA4B;AACjD,OAAO,EAAC,eAAe,EAAC,oCAAyB;AAEjD,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IACpB,iCAAiC;IACjC,2CAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,kCAAkC;IAClC,wEAAwE;IACxE,yCAAyB,CAAA;AAC7B,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC;AACzC,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,QAAQ,EAAE,eAAe;IACzB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,eAAe;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,sBAAsB,GAAG,eAAe,GAAG,IAAI,CAAC","sourcesContent":["import {entityIdAttr} from 'src/utils/entity-id';\nimport {nodeTypeFactory} from 'src/utils/schema';\n\nexport enum MermaidAttrs {\n    // @ts-expect-error error TS18055\n    EntityId = entityIdAttr,\n    content = 'content',\n    class = 'class',\n    // MAJOR: remove before next major\n    /** @deprecated This is no longer used. Removed in next major version */\n    newCreated = 'newCreated',\n}\n\nexport const mermaidNodeName = 'mermaid';\nexport const mermaidNodeType = nodeTypeFactory(mermaidNodeName);\n\nexport const MermaidAction = 'createMermaid';\n\nexport const MermaidConsts = {\n    NodeName: mermaidNodeName,\n    NodeAttrs: MermaidAttrs,\n    nodeType: mermaidNodeType,\n} as const;\n\nexport const defaultMermaidEntityId = mermaidNodeName + '#0';\n"]}

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/index.d.ts

@@ -1,9 +1,9 @@
 import type { ExtensionNodeSpec } from "../../../../core/index.js";
-export { mermaidNodeName } from "./const.js";
+export { mermaidNodeName, MermaidConsts } from "./const.js";
 export type MermaidSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
 };
-export declare const MermaidSpecs: import("../../../../index.js").ExtensionWithOptions<MermaidSpecsOptions> & {
+export declare const MermaidSpecs: import("../../../../core/index.js").ExtensionWithOptions<MermaidSpecsOptions> & {
     readonly NodeName: "mermaid";
     readonly NodeAttrs: typeof import("./const.js").MermaidAttrs;
     readonly nodeType: (schema: import("prosemirror-model").Schema) => import("prosemirror-model").NodeType;

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/index.js

@@ -1,7 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { transform } from '@diplodoc/mermaid-extension';
-import { MermaidConsts, mermaidNodeName } from "./const.js";
-export { mermaidNodeName } from "./const.js";
+import { generateEntityId } from "../../../../utils/entity-id.js";
+import { MermaidConsts, defaultMermaidEntityId, mermaidNodeName } from "./const.js";
+export { mermaidNodeName, MermaidConsts } from "./const.js";
 const MermaidSpecsExtension = (builder, { nodeView }) => {
     builder
         .configureMd((md) => md.use(transform({ runtime: 'mermaid', bundle: false }), {}))
@@ -10,7 +11,10 @@ const MermaidSpecsExtension = (builder, { nodeView }) => {
             tokenSpec: {
                 name: mermaidNodeName,
                 type: 'node',
-                getAttrs: ({ content }) => ({ content }),
+                getAttrs: ({ content }) => ({
+                    [MermaidConsts.NodeAttrs.content]: content,
+                    [MermaidConsts.NodeAttrs.EntityId]: generateEntityId(mermaidNodeName),
+                }),
             },
         },
         spec: {
@@ -20,6 +24,7 @@ const MermaidSpecsExtension = (builder, { nodeView }) => {
             attrs: {
                 [MermaidConsts.NodeAttrs.content]: { default: '' },
                 [MermaidConsts.NodeAttrs.class]: { default: 'mermaid' },
+                [MermaidConsts.NodeAttrs.EntityId]: { default: defaultMermaidEntityId },
                 [MermaidConsts.NodeAttrs.newCreated]: { default: null },
             },
             parseDOM: [],

package/build/esm/extensions/additional/Mermaid/MermaidSpecs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidSpecs/index.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAC;AAItD,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,mBAAgB;AACvD,OAAO,EAAC,eAAe,EAAC,mBAAgB;AAMxC,MAAM,qBAAqB,GAAuC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE;IACtF,OAAO;SACF,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,EAAE,EAAE,CAAC,CAAC;SAC/E,OAAO,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,EAAE;YACJ,SAAS,EAAE;gBACP,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,CAAC;aACvC;SACJ;QACD,IAAI,EAAE;YACF,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,OAAO;YACd,KAAK,EAAE;gBACH,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,EAAC,OAAO,EAAE,EAAE,EAAC;gBAChD,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;gBACrD,CAAC,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;aACxD;YACD,QAAQ,EAAE,EAAE;YACZ,KAAK,CAAC,IAAI;gBACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC;YACD,GAAG,EAAE,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC;SACjC;QACD,IAAI,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;YAClB,MAAM,OAAO,GAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAE1E,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YAC1B,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACnB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,IAAI,EAAE,QAAQ;KACjB,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport {transform} from '@diplodoc/mermaid-extension';\n\nimport type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';\n\nimport {MermaidConsts, mermaidNodeName} from './const';\nexport {mermaidNodeName} from './const';\n\nexport type MermaidSpecsOptions = {\n    nodeView?: ExtensionNodeSpec['view'];\n};\n\nconst MermaidSpecsExtension: ExtensionAuto<MermaidSpecsOptions> = (builder, {nodeView}) => {\n    builder\n        .configureMd((md) => md.use(transform({runtime: 'mermaid', bundle: false}), {}))\n        .addNode(mermaidNodeName, () => ({\n            fromMd: {\n                tokenSpec: {\n                    name: mermaidNodeName,\n                    type: 'node',\n                    getAttrs: ({content}) => ({content}),\n                },\n            },\n            spec: {\n                selectable: true,\n                atom: true,\n                group: 'block',\n                attrs: {\n                    [MermaidConsts.NodeAttrs.content]: {default: ''},\n                    [MermaidConsts.NodeAttrs.class]: {default: 'mermaid'},\n                    [MermaidConsts.NodeAttrs.newCreated]: {default: null},\n                },\n                parseDOM: [],\n                toDOM(node) {\n                    return ['div', node.attrs];\n                },\n                dnd: {props: {offset: [8, 1]}},\n            },\n            toMd: (state, node) => {\n                const content: string = node.attrs[MermaidConsts.NodeAttrs.content] || '';\n\n                state.write('```mermaid');\n                state.ensureNewLine();\n                state.text(content.trim(), false);\n                state.ensureNewLine();\n                state.write('```');\n                state.ensureNewLine();\n            },\n            view: nodeView,\n        }));\n};\n\nexport const MermaidSpecs = Object.assign(MermaidSpecsExtension, MermaidConsts);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidSpecs/index.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAC;AAGtD,OAAO,EAAC,gBAAgB,EAAC,uCAA4B;AAErD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAE,eAAe,EAAC,mBAAgB;AAC/E,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,mBAAgB;AAMvD,MAAM,qBAAqB,GAAuC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE;IACtF,OAAO;SACF,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,EAAE,EAAE,CAAC,CAAC;SAC/E,OAAO,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,EAAE;YACJ,SAAS,EAAE;gBACP,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,CAAC;oBACtB,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO;oBAC1C,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC;iBACxE,CAAC;aACL;SACJ;QACD,IAAI,EAAE;YACF,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,OAAO;YACd,KAAK,EAAE;gBACH,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,EAAC,OAAO,EAAE,EAAE,EAAC;gBAChD,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,SAAS,EAAC;gBACrD,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAC,OAAO,EAAE,sBAAsB,EAAC;gBACrE,CAAC,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;aACxD;YACD,QAAQ,EAAE,EAAE;YACZ,KAAK,CAAC,IAAI;gBACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC;YACD,GAAG,EAAE,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC;SACjC;QACD,IAAI,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;YAClB,MAAM,OAAO,GAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAE1E,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YAC1B,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACnB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,IAAI,EAAE,QAAQ;KACjB,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport {transform} from '@diplodoc/mermaid-extension';\n\nimport type {ExtensionAuto, ExtensionNodeSpec} from '#core';\nimport {generateEntityId} from 'src/utils/entity-id';\n\nimport {MermaidConsts, defaultMermaidEntityId, mermaidNodeName} from './const';\nexport {mermaidNodeName, MermaidConsts} from './const';\n\nexport type MermaidSpecsOptions = {\n    nodeView?: ExtensionNodeSpec['view'];\n};\n\nconst MermaidSpecsExtension: ExtensionAuto<MermaidSpecsOptions> = (builder, {nodeView}) => {\n    builder\n        .configureMd((md) => md.use(transform({runtime: 'mermaid', bundle: false}), {}))\n        .addNode(mermaidNodeName, () => ({\n            fromMd: {\n                tokenSpec: {\n                    name: mermaidNodeName,\n                    type: 'node',\n                    getAttrs: ({content}) => ({\n                        [MermaidConsts.NodeAttrs.content]: content,\n                        [MermaidConsts.NodeAttrs.EntityId]: generateEntityId(mermaidNodeName),\n                    }),\n                },\n            },\n            spec: {\n                selectable: true,\n                atom: true,\n                group: 'block',\n                attrs: {\n                    [MermaidConsts.NodeAttrs.content]: {default: ''},\n                    [MermaidConsts.NodeAttrs.class]: {default: 'mermaid'},\n                    [MermaidConsts.NodeAttrs.EntityId]: {default: defaultMermaidEntityId},\n                    [MermaidConsts.NodeAttrs.newCreated]: {default: null},\n                },\n                parseDOM: [],\n                toDOM(node) {\n                    return ['div', node.attrs];\n                },\n                dnd: {props: {offset: [8, 1]}},\n            },\n            toMd: (state, node) => {\n                const content: string = node.attrs[MermaidConsts.NodeAttrs.content] || '';\n\n                state.write('```mermaid');\n                state.ensureNewLine();\n                state.text(content.trim(), false);\n                state.ensureNewLine();\n                state.write('```');\n                state.ensureNewLine();\n            },\n            view: nodeView,\n        }));\n};\n\nexport const MermaidSpecs = Object.assign(MermaidSpecsExtension, MermaidConsts);\n"]}

package/build/esm/extensions/additional/Mermaid/actions.js

@@ -1,17 +1,24 @@
-import { mermaidNodeType } from "./MermaidSpecs/const.js";
+import { SharedStateKey } from "../../behavior/SharedState/utils.js";
+import { generateEntityId } from "../../../utils/entity-id.js";
+import { MermaidConsts } from "./MermaidSpecs/index.js";
 export const addMermaid = {
     isEnable(state) {
         return state.selection.empty;
     },
     run(state, dispatch, _view) {
-        dispatch(state.tr.insert(state.selection.from, mermaidNodeType(state.schema).create({
-            content: [
+        const newEntityId = generateEntityId(MermaidConsts.NodeName);
+        const sharedKey = SharedStateKey.define({ name: newEntityId });
+        const tr = state.tr.insert(state.selection.from, MermaidConsts.nodeType(state.schema).create({
+            [MermaidConsts.NodeAttrs.content]: [
                 'sequenceDiagram',
                 '\tAlice->>Bob: Hi Bob',
                 '\tBob->>Alice: Hi Alice',
             ].join('\n'),
-            newCreated: true,
-        })));
+            [MermaidConsts.NodeAttrs.newCreated]: true,
+            [MermaidConsts.NodeAttrs.EntityId]: newEntityId,
+        }));
+        sharedKey.appendTransaction.set(tr, { editing: true });
+        dispatch(tr);
     },
 };
 //# sourceMappingURL=actions.js.map

package/build/esm/extensions/additional/Mermaid/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/actions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,gCAA6B;AAErD,MAAM,CAAC,MAAM,UAAU,GAAe;IAClC,QAAQ,CAAC,KAAK;QACV,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACjC,CAAC;IACD,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK;QACtB,QAAQ,CACJ,KAAK,CAAC,EAAE,CAAC,MAAM,CACX,KAAK,CAAC,SAAS,CAAC,IAAI,EACpB,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;YACjC,OAAO,EAAE;gBACL,iBAAiB;gBACjB,uBAAuB;gBACvB,yBAAyB;aAC5B,CAAC,IAAI,CAAC,IAAI,CAAC;YACZ,UAAU,EAAE,IAAI;SACnB,CAAC,CACL,CACJ,CAAC;IACN,CAAC;CACJ,CAAC","sourcesContent":["import type {ActionSpec} from '../../../core';\n\nimport {mermaidNodeType} from './MermaidSpecs/const';\n\nexport const addMermaid: ActionSpec = {\n    isEnable(state) {\n        return state.selection.empty;\n    },\n    run(state, dispatch, _view) {\n        dispatch(\n            state.tr.insert(\n                state.selection.from,\n                mermaidNodeType(state.schema).create({\n                    content: [\n                        'sequenceDiagram',\n                        '\\tAlice->>Bob: Hi Bob',\n                        '\\tBob->>Alice: Hi Alice',\n                    ].join('\\n'),\n                    newCreated: true,\n                }),\n            ),\n        );\n    },\n};\n"]}
+{"version":3,"file":"actions.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAC,4CAAkD;AACzE,OAAO,EAAC,gBAAgB,EAAC,oCAA4B;AAErD,OAAO,EAAC,aAAa,EAAC,gCAAuB;AAG7C,MAAM,CAAC,MAAM,UAAU,GAAe;IAClC,QAAQ,CAAC,KAAK;QACV,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACjC,CAAC;IACD,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK;QACtB,MAAM,WAAW,GAAG,gBAAgB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAA2B,EAAC,IAAI,EAAE,WAAW,EAAC,CAAC,CAAC;QAEvF,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CACtB,KAAK,CAAC,SAAS,CAAC,IAAI,EACpB,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;YACxC,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;gBAC/B,iBAAiB;gBACjB,uBAAuB;gBACvB,yBAAyB;aAC5B,CAAC,IAAI,CAAC,IAAI,CAAC;YACZ,CAAC,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI;YAC1C,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,WAAW;SAClD,CAAC,CACL,CAAC;QAEF,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAErD,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC;CACJ,CAAC","sourcesContent":["import type {ActionSpec} from '#core';\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState/utils';\nimport {generateEntityId} from 'src/utils/entity-id';\n\nimport {MermaidConsts} from './MermaidSpecs';\nimport type {MermaidEntitySharedState} from './types';\n\nexport const addMermaid: ActionSpec = {\n    isEnable(state) {\n        return state.selection.empty;\n    },\n    run(state, dispatch, _view) {\n        const newEntityId = generateEntityId(MermaidConsts.NodeName);\n        const sharedKey = SharedStateKey.define<MermaidEntitySharedState>({name: newEntityId});\n\n        const tr = state.tr.insert(\n            state.selection.from,\n            MermaidConsts.nodeType(state.schema).create({\n                [MermaidConsts.NodeAttrs.content]: [\n                    'sequenceDiagram',\n                    '\\tAlice->>Bob: Hi Bob',\n                    '\\tBob->>Alice: Hi Alice',\n                ].join('\\n'),\n                [MermaidConsts.NodeAttrs.newCreated]: true,\n                [MermaidConsts.NodeAttrs.EntityId]: newEntityId,\n            }),\n        );\n\n        sharedKey.appendTransaction.set(tr, {editing: true});\n\n        dispatch(tr);\n    },\n};\n"]}

package/build/esm/extensions/additional/Mermaid/types.d.ts

@@ -0,0 +1,3 @@
+export type MermaidEntitySharedState = {
+    editing: boolean;
+};

package/build/esm/extensions/additional/Mermaid/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/esm/extensions/additional/Mermaid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/types.ts"],"names":[],"mappings":"","sourcesContent":["export type MermaidEntitySharedState = {\n    editing: boolean;\n};\n"]}

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.d.ts

@@ -18,6 +18,7 @@ export declare class WYfmHtmlBlockNodeView implements NodeView {
     destroy(): void;
     ignoreMutation(): boolean;
     stopEvent(e: Event): boolean;
+    private validateEntityId;
     private onChange;
     private renderYfmHtmlBlock;
 }

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Portal } from '@gravity-ui/uikit';
-import { getReactRendererFromState } from "../../../behavior/index.js";
-import { YfmHtmlBlockConsts } from "../YfmHtmlBlockSpecs/const.js";
+import { getReactRendererFromState } from "../../../behavior/ReactRenderer/index.js";
+import { generateEntityId, isInvalidEntityId } from "../../../../utils/entity-id.js";
+import { YfmHtmlBlockConsts, defaultYfmHtmlBlockEntityId } from "../YfmHtmlBlockSpecs/const.js";
 import { STOP_EVENT_CLASSNAME, YfmHtmlBlockView } from "./YfmHtmlBlockView.js";
 export class WYfmHtmlBlockNodeView {
     dom;
@@ -19,13 +20,11 @@ export class WYfmHtmlBlockNodeView {
         this.getPos = getPos;
         this.options = options;
         this.renderItem = getReactRendererFromState(view.state).createItem('yfmHtmlBlock-view', this.renderYfmHtmlBlock.bind(this));
+        this.validateEntityId();
     }
     update(node) {
         if (node.type !== this.node.type)
             return false;
-        if (node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated] !==
-            this.node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated])
-            return false;
         this.node = node;
         this.renderItem.rerender();
         return true;
@@ -40,6 +39,16 @@ export class WYfmHtmlBlockNodeView {
         const target = e.target;
         return target.classList.contains(STOP_EVENT_CLASSNAME);
     }
+    validateEntityId() {
+        if (isInvalidEntityId({
+            node: this.node,
+            doc: this.view.state.doc,
+            defaultId: defaultYfmHtmlBlockEntityId,
+        })) {
+            const newId = generateEntityId(YfmHtmlBlockConsts.NodeName);
+            this.view.dispatch(this.view.state.tr.setNodeAttribute(this.getPos(), YfmHtmlBlockConsts.NodeAttrs.EntityId, newId));
+        }
+    }
     onChange(attrs) {
         const pos = this.getPos();
         if (pos === undefined)

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAIzC,OAAO,EAAC,yBAAyB,EAAC,mCAA0B;AAC5D,OAAO,EAAC,kBAAkB,EAAC,sCAAmC;AAG9D,OAAO,EAAC,oBAAoB,EAAE,gBAAgB,EAAC,8BAA2B;AAE1E,MAAM,OAAO,qBAAqB;IACrB,GAAG,CAAc;IAClB,IAAI,CAAO;IACF,IAAI,CAAC;IACL,MAAM,CAAC;IACP,OAAO,GAAwB,EAAE,CAAC;IAClC,UAAU,CAAC;IAE5B,YAAY,EACR,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,GAMV;QACG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;QACnD,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QAEvB,IAAI,CAAC,UAAU,GAAG,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAC9D,mBAAmB,EACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CACrC,CAAC;IACN,CAAC;IAED,MAAM,CAAC,IAAU;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC/C,IACI,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,SAAS,CAAC,UAAU,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,SAAS,CAAC,UAAU,CAAC;YAExD,OAAO,KAAK,CAAC;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO;QACH,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;IAC7B,CAAC;IAED,cAAc;QACV,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,SAAS,CAAC,CAAQ;QACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAC;QACnC,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAEO,QAAQ,CAAC,KAAsD;QACnE,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO;QAE9B,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CACvC,GAAG,EACH,SAAS,EACT;YACI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK;YAClB,GAAG,KAAK;SACX,EACD,EAAE,CACL,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAEO,kBAAkB;QACtB,OAAO,CACH,KAAC,MAAM,IAAC,SAAS,EAAE,IAAI,CAAC,GAAG,YACvB,KAAC,gBAAgB,IACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,GACjB,GACG,CACZ,CAAC;IACN,CAAC;CACJ","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from '../../../behavior';\nimport {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\n\nimport {STOP_EVENT_CLASSNAME, YfmHtmlBlockView} from './YfmHtmlBlockView';\n\nexport class WYfmHtmlBlockNodeView implements NodeView {\n    readonly dom: HTMLElement;\n    private node: Node;\n    private readonly view;\n    private readonly getPos;\n    private readonly options: YfmHtmlBlockOptions = {};\n    private readonly renderItem;\n\n    constructor({\n        node,\n        view,\n        getPos,\n        options,\n    }: {\n        node: Node;\n        view: EditorView;\n        getPos: () => number | undefined;\n        options: YfmHtmlBlockOptions;\n    }) {\n        this.node = node;\n        this.dom = document.createElement('div');\n        this.dom.classList.add('yfm-html-block-container');\n        this.dom.contentEditable = 'false';\n        this.view = view;\n        this.getPos = getPos;\n        this.options = options;\n\n        this.renderItem = getReactRendererFromState(view.state).createItem(\n            'yfmHtmlBlock-view',\n            this.renderYfmHtmlBlock.bind(this),\n        );\n    }\n\n    update(node: Node) {\n        if (node.type !== this.node.type) return false;\n        if (\n            node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated] !==\n            this.node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]\n        )\n            return false;\n        this.node = node;\n        this.renderItem.rerender();\n        return true;\n    }\n\n    destroy() {\n        this.renderItem.remove();\n    }\n\n    ignoreMutation() {\n        return true;\n    }\n\n    stopEvent(e: Event) {\n        const target = e.target as Element;\n        return target.classList.contains(STOP_EVENT_CLASSNAME);\n    }\n\n    private onChange(attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) {\n        const pos = this.getPos();\n        if (pos === undefined) return;\n\n        const tr = this.view.state.tr.setNodeMarkup(\n            pos,\n            undefined,\n            {\n                ...this.node.attrs,\n                ...attrs,\n            },\n            [],\n        );\n\n        this.view.dispatch(tr);\n    }\n\n    private renderYfmHtmlBlock() {\n        return (\n            <Portal container={this.dom}>\n                <YfmHtmlBlockView\n                    getPos={this.getPos}\n                    node={this.node}\n                    onChange={this.onChange.bind(this)}\n                    options={this.options}\n                    view={this.view}\n                />\n            </Portal>\n        );\n    }\n}\n"]}
+{"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport {YfmHtmlBlockConsts, defaultYfmHtmlBlockEntityId} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\n\nimport {STOP_EVENT_CLASSNAME, YfmHtmlBlockView} from './YfmHtmlBlockView';\n\nexport class WYfmHtmlBlockNodeView implements NodeView {\n    readonly dom: HTMLElement;\n    private node: Node;\n    private readonly view;\n    private readonly getPos;\n    private readonly options: YfmHtmlBlockOptions = {};\n    private readonly renderItem;\n\n    constructor({\n        node,\n        view,\n        getPos,\n        options,\n    }: {\n        node: Node;\n        view: EditorView;\n        getPos: () => number | undefined;\n        options: YfmHtmlBlockOptions;\n    }) {\n        this.node = node;\n        this.dom = document.createElement('div');\n        this.dom.classList.add('yfm-html-block-container');\n        this.dom.contentEditable = 'false';\n        this.view = view;\n        this.getPos = getPos;\n        this.options = options;\n\n        this.renderItem = getReactRendererFromState(view.state).createItem(\n            'yfmHtmlBlock-view',\n            this.renderYfmHtmlBlock.bind(this),\n        );\n\n        this.validateEntityId();\n    }\n\n    update(node: Node) {\n        if (node.type !== this.node.type) return false;\n        this.node = node;\n        this.renderItem.rerender();\n        return true;\n    }\n\n    destroy() {\n        this.renderItem.remove();\n    }\n\n    ignoreMutation() {\n        return true;\n    }\n\n    stopEvent(e: Event) {\n        const target = e.target as Element;\n        return target.classList.contains(STOP_EVENT_CLASSNAME);\n    }\n\n    private validateEntityId() {\n        if (\n            isInvalidEntityId({\n                node: this.node,\n                doc: this.view.state.doc,\n                defaultId: defaultYfmHtmlBlockEntityId,\n            })\n        ) {\n            const newId = generateEntityId(YfmHtmlBlockConsts.NodeName);\n            this.view.dispatch(\n                this.view.state.tr.setNodeAttribute(\n                    this.getPos()!,\n                    YfmHtmlBlockConsts.NodeAttrs.EntityId,\n                    newId,\n                ),\n            );\n        }\n    }\n\n    private onChange(attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) {\n        const pos = this.getPos();\n        if (pos === undefined) return;\n\n        const tr = this.view.state.tr.setNodeMarkup(\n            pos,\n            undefined,\n            {\n                ...this.node.attrs,\n                ...attrs,\n            },\n            [],\n        );\n\n        this.view.dispatch(tr);\n    }\n\n    private renderYfmHtmlBlock() {\n        return (\n            <Portal container={this.dom}>\n                <YfmHtmlBlockView\n                    getPos={this.getPos}\n                    node={this.node}\n                    onChange={this.onChange.bind(this)}\n                    options={this.options}\n                    view={this.view}\n                />\n            </Portal>\n        );\n    }\n}\n"]}

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { getStyles } from '@diplodoc/html-extension';
 import { Ellipsis as DotsIcon, Eye } from '@gravity-ui/icons';
 import { Button, Icon, Label, Menu, Popup } from '@gravity-ui/uikit';
-import debounce from "lodash/debounce.js";
 import { cn } from "../../../../classname.js";
+import { SharedStateKey } from "../../../behavior/SharedState/index.js";
 import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
 import { i18n } from "../../../../i18n/common/index.js";
+import { debounce } from "../../../../lodash.js";
 import { useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
+import { useSharedEditingState } from "../../../../react-utils/useSharedEditingState.js";
 import { removeNode } from "../../../../utils/remove-node.js";
 import { YfmHtmlBlockConsts } from "../YfmHtmlBlockSpecs/const.js";
 import "./YfmHtmlBlock.css";
@@ -29,7 +31,7 @@ const createLinkCLickHandler = (value, document) => (event) => {
         }
     }
 };
-const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
+const YfmHtmlBlockPreview = ({ html, onClick, config }) => {
     const ref = useRef(null);
     const styles = useRef({});
     const classNames = useRef([]);
@@ -45,7 +47,7 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
         if (contentWindow) {
             const frameDocument = contentWindow.document;
             frameDocument.addEventListener('dblclick', () => {
-                onСlick();
+                onClick();
             });
         }
     };
@@ -142,13 +144,12 @@ const CodeEditMode = ({ initialText, onSave, onCancel }) => {
                     }, autoFocus: true }), _jsx("div", { className: b('controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: () => onSave(text), view: 'action', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] }) }));
 };
 export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
-    const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]));
+    const entityId = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
+    const entityKey = useMemo(() => SharedStateKey.define({ name: entityId }), [entityId]);
     const config = useConfig?.();
+    const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);
     const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);
     const [anchorElement, setAnchorElement] = useElementState();
-    const handleClick = () => {
-        setEditing();
-    };
     if (editing) {
         return (_jsx(CodeEditMode, { initialText: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
@@ -165,9 +166,10 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useC
     const head = `<head>${headContent || additional}</head>`;
     const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;
     const html = `<!DOCTYPE html><html>${head}${body}</html>`;
-    const resultHtml = sanitize ? sanitize(html) : html;
-    return (_jsxs("div", { className: b(), onDoubleClick: setEditing, children: [_jsx(Label, { className: b('label'), icon: _jsx(Icon, { size: 16, data: Eye }), children: i18n('preview') }), _jsx(YfmHtmlBlockPreview, { html: resultHtml, "on\u0421lick": handleClick, config: config }), _jsxs("div", { className: b('menu'), children: [_jsx(Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: "s", className: STOP_EVENT_CLASSNAME, children: _jsx(Icon, { data: DotsIcon, className: STOP_EVENT_CLASSNAME }) }), _jsx(Popup, { anchorElement: anchorElement, open: menuOpen, onOpenChange: closeMenu, placement: "bottom-end", children: _jsxs(Menu, { children: [_jsx(Menu.Item, { onClick: () => {
-                                        toggleEditing();
+    const sanitizeFunction = typeof sanitize === 'function' ? sanitize : sanitize?.body;
+    const resultHtml = sanitizeFunction ? sanitizeFunction(html) : html;
+    return (_jsxs("div", { className: b(), onDoubleClick: setEditing, children: [_jsx(Label, { className: b('label'), icon: _jsx(Icon, { size: 16, data: Eye }), children: i18n('preview') }), _jsx(YfmHtmlBlockPreview, { html: resultHtml, onClick: setEditing, config: config }), _jsxs("div", { className: b('menu'), children: [_jsx(Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: "s", className: STOP_EVENT_CLASSNAME, children: _jsx(Icon, { data: DotsIcon, className: STOP_EVENT_CLASSNAME }) }), _jsx(Popup, { anchorElement: anchorElement, open: menuOpen, onOpenChange: closeMenu, placement: "bottom-end", children: _jsxs(Menu, { children: [_jsx(Menu.Item, { onClick: () => {
+                                        setEditing();
                                         closeMenu();
                                     }, children: i18n('edit') }), _jsx(Menu.Item, { onClick: () => {
                                         const pos = getPos();

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js.map

@@ -1 +1 @@
-{"version":3,"file":"YfmHtmlBlockView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nimport {getStyles} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\nimport {Ellipsis as DotsIcon, Eye} from '@gravity-ui/icons';\nimport {Button, Icon, Label, Menu, Popup} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useBooleanState, useElementState} from '../../../../react-utils/hooks';\nimport {removeNode} from '../../../../utils/remove-node';\nimport {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\n\nimport './YfmHtmlBlock.scss';\n\nexport const cnYfmHtmlBlock = cn('yfm-html-block');\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nconst b = cnYfmHtmlBlock;\n\ninterface YfmHtmlBlockViewProps {\n    html: string;\n    onСlick: () => void;\n    config?: IHTMLIFrameElementConfig;\n}\n\nexport function generateID() {\n    return Math.random().toString(36).substr(2, 8);\n}\n\nconst DEFAULT_PADDING = 20;\nconst DEFAULT_DELAY = 100;\n\nconst createLinkCLickHandler = (value: Element, document: Document) => (event: Event) => {\n    event.preventDefault();\n    const targetId = value.getAttribute('href');\n\n    if (targetId) {\n        const targetElement = document.querySelector(targetId);\n        if (targetElement) {\n            targetElement.scrollIntoView({behavior: 'smooth'});\n        }\n    }\n};\n\nconst YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onСlick, config}) => {\n    const ref = useRef<HTMLIFrameElement>(null);\n    const styles = useRef<Record<string, string>>({});\n    const classNames = useRef<string[]>([]);\n    const resizeConfig = useRef<Record<string, number>>({});\n\n    const [height, setHeight] = useState('100%');\n\n    useEffect(() => {\n        setStyles(config?.styles);\n        setClassNames(config?.classNames);\n    }, [config, ref.current?.contentWindow?.document?.body]);\n\n    const handleLoadIFrame = () => {\n        const contentWindow = ref.current?.contentWindow;\n\n        handleResizeIFrame();\n\n        if (contentWindow) {\n            const frameDocument = contentWindow.document;\n            frameDocument.addEventListener('dblclick', () => {\n                onСlick();\n            });\n        }\n    };\n\n    const handleResizeIFrame = () => {\n        if (ref.current) {\n            const contentWindow = ref.current?.contentWindow;\n            if (contentWindow) {\n                const body = contentWindow.document.body;\n                if (body) {\n                    const height =\n                        body.scrollHeight +\n                        (resizeConfig.current?.padding || DEFAULT_PADDING) +\n                        'px';\n\n                    setHeight(height);\n                }\n            }\n        }\n    };\n\n    const setClassNames = (newClassNames: string[] | undefined) => {\n        const body = ref.current?.contentWindow?.document.body;\n\n        if (body && newClassNames) {\n            const previousClassNames = classNames.current;\n\n            // remove all classes that were in previousClassNames but are not in classNames\n            previousClassNames.forEach((className) => {\n                if (!newClassNames.includes(className)) {\n                    body.classList.remove(className);\n                }\n            });\n\n            // add classes that are in classNames\n            newClassNames.forEach((className) => {\n                if (!body.classList.contains(className)) {\n                    body.classList.add(className);\n                }\n            });\n\n            classNames.current = newClassNames;\n        }\n    };\n\n    const setStyles = (newStyles: Record<string, string> | undefined) => {\n        const body = ref.current?.contentWindow?.document.body;\n\n        if (body && newStyles) {\n            const previousStyles = styles.current;\n\n            // remove all styles that are in previousStyles but not in styles\n            Object.keys(previousStyles).forEach((property) => {\n                if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {\n                    body.style.removeProperty(property);\n                }\n            });\n\n            // sdd or update styles that are in styles\n            Object.keys(newStyles).forEach((property) => {\n                body.style.setProperty(property, newStyles[property]);\n            });\n\n            // update current styles to the new styles\n            styles.current = newStyles;\n        }\n    };\n\n    // finds all relative links (href^=\"#\") and changes their click behavior\n    const createAnchorLinkHandlers = (type: 'add' | 'remove') => () => {\n        const document = ref.current?.contentWindow!.document;\n\n        if (document) {\n            document.querySelectorAll('a[href^=\"#\"]').forEach((value: Element) => {\n                const handler = createLinkCLickHandler(value, document);\n                if (type === 'add') {\n                    value.addEventListener('click', handler);\n                } else {\n                    value.removeEventListener('click', handler);\n                }\n            });\n        }\n    };\n\n    useEffect(() => {\n        ref.current?.addEventListener('load', handleLoadIFrame);\n        ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));\n        return () => {\n            ref.current?.removeEventListener('load', handleLoadIFrame);\n            ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));\n        };\n    }, [html]);\n\n    useEffect(() => {\n        if (ref.current) {\n            const resizeObserver = new window.ResizeObserver(\n                debounce(handleResizeIFrame, DEFAULT_DELAY),\n            );\n            resizeObserver.observe(ref.current);\n        }\n    }, [ref.current?.contentWindow?.document?.body]);\n\n    return (\n        <iframe\n            style={{\n                height,\n            }}\n            ref={ref}\n            title={generateID()}\n            frameBorder={0}\n            className={b('content')}\n            srcDoc={html}\n        />\n    );\n};\n\nconst CodeEditMode: React.FC<{\n    initialText: string;\n    onSave: (v: string) => void;\n    onCancel: () => void;\n}> = ({initialText, onSave, onCancel}) => {\n    const [text, setText] = useState(initialText || '\\n');\n\n    return (\n        <div className={b({editing: true})}>\n            <div className={b('editor')}>\n                <TextArea\n                    controlProps={{\n                        className: STOP_EVENT_CLASSNAME,\n                    }}\n                    value={text}\n                    onUpdate={(v) => {\n                        setText(v);\n                    }}\n                    autoFocus\n                />\n\n                <div className={b('controls')}>\n                    <div>\n                        <Button onClick={onCancel} view={'flat'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n                        </Button>\n                        <Button onClick={() => onSave(text)} view={'action'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n                        </Button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const YfmHtmlBlockView: React.FC<{\n    getPos: () => number | undefined;\n    node: Node;\n    onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;\n    options: YfmHtmlBlockOptions;\n    view: EditorView;\n}> = ({\n    onChange,\n    node,\n    getPos,\n    view,\n    options: {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''},\n}) => {\n    const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(\n        Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]),\n    );\n\n    const config = useConfig?.();\n\n    const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);\n    const [anchorElement, setAnchorElement] = useElementState();\n\n    const handleClick = () => {\n        setEditing();\n    };\n\n    if (editing) {\n        return (\n            <CodeEditMode\n                initialText={node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]}\n                onCancel={unsetEditing}\n                onSave={(v) => {\n                    onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v});\n                    unsetEditing();\n                }}\n            />\n        );\n    }\n\n    let additional = baseTarget ? `<base target=\"${baseTarget}\">` : '';\n    if (styles) {\n        const stylesContent =\n            typeof styles === 'string'\n                ? `<link rel=\"stylesheet\" href=\"${styles}\" />`\n                : `<style>${getStyles(styles)}</style>`;\n        additional += stylesContent;\n    }\n\n    const head = `<head>${headContent || additional}</head>`;\n    const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;\n    const html = `<!DOCTYPE html><html>${head}${body}</html>`;\n\n    const resultHtml = sanitize ? sanitize(html) : html;\n\n    return (\n        <div className={b()} onDoubleClick={setEditing}>\n            <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>\n                {i18n('preview')}\n            </Label>\n            <YfmHtmlBlockPreview html={resultHtml} onСlick={handleClick} config={config} />\n\n            <div className={b('menu')}>\n                <Button\n                    onClick={toggleMenuOpen}\n                    ref={setAnchorElement}\n                    size=\"s\"\n                    className={STOP_EVENT_CLASSNAME}\n                >\n                    <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n                </Button>\n                <Popup\n                    anchorElement={anchorElement}\n                    open={menuOpen}\n                    onOpenChange={closeMenu}\n                    placement=\"bottom-end\"\n                >\n                    <Menu>\n                        <Menu.Item\n                            onClick={() => {\n                                toggleEditing();\n                                closeMenu();\n                            }}\n                        >\n                            {i18n('edit')}\n                        </Menu.Item>\n                        <Menu.Item\n                            onClick={() => {\n                                const pos = getPos();\n                                if (pos === undefined) return;\n                                removeNode({\n                                    node,\n                                    pos,\n                                    tr: view.state.tr,\n                                    dispatch: view.dispatch,\n                                });\n                            }}\n                        >\n                            {i18n('remove')}\n                        </Menu.Item>\n                    </Menu>\n                </Popup>\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"YfmHtmlBlockView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useRef, useState} from 'react';\n\nimport {getStyles} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\nimport {Ellipsis as DotsIcon, Eye} from '@gravity-ui/icons';\nimport {Button, Icon, Label, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from 'src/classname';\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {TextAreaFixed as TextArea} from 'src/forms/TextInput';\nimport {i18n} from 'src/i18n/common';\nimport {debounce} from 'src/lodash';\nimport {useBooleanState, useElementState} from 'src/react-utils/hooks';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\nimport {removeNode} from 'src/utils/remove-node';\n\nimport {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\nimport type {YfmHtmlBlockEntitySharedState} from '../types';\n\nimport './YfmHtmlBlock.scss';\n\nexport const cnYfmHtmlBlock = cn('yfm-html-block');\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nconst b = cnYfmHtmlBlock;\n\ninterface YfmHtmlBlockViewProps {\n    html: string;\n    onClick: () => void;\n    config?: IHTMLIFrameElementConfig;\n}\n\nexport function generateID() {\n    return Math.random().toString(36).substr(2, 8);\n}\n\nconst DEFAULT_PADDING = 20;\nconst DEFAULT_DELAY = 100;\n\nconst createLinkCLickHandler = (value: Element, document: Document) => (event: Event) => {\n    event.preventDefault();\n    const targetId = value.getAttribute('href');\n\n    if (targetId) {\n        const targetElement = document.querySelector(targetId);\n        if (targetElement) {\n            targetElement.scrollIntoView({behavior: 'smooth'});\n        }\n    }\n};\n\nconst YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, config}) => {\n    const ref = useRef<HTMLIFrameElement>(null);\n    const styles = useRef<Record<string, string>>({});\n    const classNames = useRef<string[]>([]);\n    const resizeConfig = useRef<Record<string, number>>({});\n\n    const [height, setHeight] = useState('100%');\n\n    useEffect(() => {\n        setStyles(config?.styles);\n        setClassNames(config?.classNames);\n    }, [config, ref.current?.contentWindow?.document?.body]);\n\n    const handleLoadIFrame = () => {\n        const contentWindow = ref.current?.contentWindow;\n\n        handleResizeIFrame();\n\n        if (contentWindow) {\n            const frameDocument = contentWindow.document;\n            frameDocument.addEventListener('dblclick', () => {\n                onClick();\n            });\n        }\n    };\n\n    const handleResizeIFrame = () => {\n        if (ref.current) {\n            const contentWindow = ref.current?.contentWindow;\n            if (contentWindow) {\n                const body = contentWindow.document.body;\n                if (body) {\n                    const height =\n                        body.scrollHeight +\n                        (resizeConfig.current?.padding || DEFAULT_PADDING) +\n                        'px';\n\n                    setHeight(height);\n                }\n            }\n        }\n    };\n\n    const setClassNames = (newClassNames: string[] | undefined) => {\n        const body = ref.current?.contentWindow?.document.body;\n\n        if (body && newClassNames) {\n            const previousClassNames = classNames.current;\n\n            // remove all classes that were in previousClassNames but are not in classNames\n            previousClassNames.forEach((className) => {\n                if (!newClassNames.includes(className)) {\n                    body.classList.remove(className);\n                }\n            });\n\n            // add classes that are in classNames\n            newClassNames.forEach((className) => {\n                if (!body.classList.contains(className)) {\n                    body.classList.add(className);\n                }\n            });\n\n            classNames.current = newClassNames;\n        }\n    };\n\n    const setStyles = (newStyles: Record<string, string> | undefined) => {\n        const body = ref.current?.contentWindow?.document.body;\n\n        if (body && newStyles) {\n            const previousStyles = styles.current;\n\n            // remove all styles that are in previousStyles but not in styles\n            Object.keys(previousStyles).forEach((property) => {\n                if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {\n                    body.style.removeProperty(property);\n                }\n            });\n\n            // sdd or update styles that are in styles\n            Object.keys(newStyles).forEach((property) => {\n                body.style.setProperty(property, newStyles[property]);\n            });\n\n            // update current styles to the new styles\n            styles.current = newStyles;\n        }\n    };\n\n    // finds all relative links (href^=\"#\") and changes their click behavior\n    const createAnchorLinkHandlers = (type: 'add' | 'remove') => () => {\n        const document = ref.current?.contentWindow!.document;\n\n        if (document) {\n            document.querySelectorAll('a[href^=\"#\"]').forEach((value: Element) => {\n                const handler = createLinkCLickHandler(value, document);\n                if (type === 'add') {\n                    value.addEventListener('click', handler);\n                } else {\n                    value.removeEventListener('click', handler);\n                }\n            });\n        }\n    };\n\n    useEffect(() => {\n        ref.current?.addEventListener('load', handleLoadIFrame);\n        ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));\n        return () => {\n            ref.current?.removeEventListener('load', handleLoadIFrame);\n            ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));\n        };\n    }, [html]);\n\n    useEffect(() => {\n        if (ref.current) {\n            const resizeObserver = new window.ResizeObserver(\n                debounce(handleResizeIFrame, DEFAULT_DELAY),\n            );\n            resizeObserver.observe(ref.current);\n        }\n    }, [ref.current?.contentWindow?.document?.body]);\n\n    return (\n        <iframe\n            style={{\n                height,\n            }}\n            ref={ref}\n            title={generateID()}\n            frameBorder={0}\n            className={b('content')}\n            srcDoc={html}\n        />\n    );\n};\n\nconst CodeEditMode: React.FC<{\n    initialText: string;\n    onSave: (v: string) => void;\n    onCancel: () => void;\n}> = ({initialText, onSave, onCancel}) => {\n    const [text, setText] = useState(initialText || '\\n');\n\n    return (\n        <div className={b({editing: true})}>\n            <div className={b('editor')}>\n                <TextArea\n                    controlProps={{\n                        className: STOP_EVENT_CLASSNAME,\n                    }}\n                    value={text}\n                    onUpdate={(v) => {\n                        setText(v);\n                    }}\n                    autoFocus\n                />\n\n                <div className={b('controls')}>\n                    <div>\n                        <Button onClick={onCancel} view={'flat'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n                        </Button>\n                        <Button onClick={() => onSave(text)} view={'action'}>\n                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n                        </Button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const YfmHtmlBlockView: React.FC<{\n    getPos: () => number | undefined;\n    node: Node;\n    onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;\n    options: YfmHtmlBlockOptions;\n    view: EditorView;\n}> = ({\n    onChange,\n    node,\n    getPos,\n    view,\n    options: {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''},\n}) => {\n    const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];\n    const entityKey = useMemo(\n        () => SharedStateKey.define<YfmHtmlBlockEntitySharedState>({name: entityId}),\n        [entityId],\n    );\n\n    const config = useConfig?.();\n\n    const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n    const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);\n    const [anchorElement, setAnchorElement] = useElementState();\n\n    if (editing) {\n        return (\n            <CodeEditMode\n                initialText={node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]}\n                onCancel={unsetEditing}\n                onSave={(v) => {\n                    onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v});\n                    unsetEditing();\n                }}\n            />\n        );\n    }\n\n    let additional = baseTarget ? `<base target=\"${baseTarget}\">` : '';\n    if (styles) {\n        const stylesContent =\n            typeof styles === 'string'\n                ? `<link rel=\"stylesheet\" href=\"${styles}\" />`\n                : `<style>${getStyles(styles)}</style>`;\n        additional += stylesContent;\n    }\n\n    const head = `<head>${headContent || additional}</head>`;\n    const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;\n    const html = `<!DOCTYPE html><html>${head}${body}</html>`;\n\n    const sanitizeFunction = typeof sanitize === 'function' ? sanitize : sanitize?.body;\n\n    const resultHtml = sanitizeFunction ? sanitizeFunction(html) : html;\n\n    return (\n        <div className={b()} onDoubleClick={setEditing}>\n            <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>\n                {i18n('preview')}\n            </Label>\n            <YfmHtmlBlockPreview html={resultHtml} onClick={setEditing} config={config} />\n\n            <div className={b('menu')}>\n                <Button\n                    onClick={toggleMenuOpen}\n                    ref={setAnchorElement}\n                    size=\"s\"\n                    className={STOP_EVENT_CLASSNAME}\n                >\n                    <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n                </Button>\n                <Popup\n                    anchorElement={anchorElement}\n                    open={menuOpen}\n                    onOpenChange={closeMenu}\n                    placement=\"bottom-end\"\n                >\n                    <Menu>\n                        <Menu.Item\n                            onClick={() => {\n                                setEditing();\n                                closeMenu();\n                            }}\n                        >\n                            {i18n('edit')}\n                        </Menu.Item>\n                        <Menu.Item\n                            onClick={() => {\n                                const pos = getPos();\n                                if (pos === undefined) return;\n                                removeNode({\n                                    node,\n                                    pos,\n                                    tr: view.state.tr,\n                                    dispatch: view.dispatch,\n                                });\n                            }}\n                        >\n                            {i18n('remove')}\n                        </Menu.Item>\n                    </Menu>\n                </Popup>\n            </div>\n        </div>\n    );\n};\n"]}

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockSpecs/const.d.ts

@@ -1,6 +1,8 @@
 export declare enum YfmHtmlBlockAttrs {
+    EntityId = "data-entity-id",
     class = "class",
     frameborder = "frameborder",
+    /** @deprecated This is no longer used. Removed in next major version */
     newCreated = "newCreated",
     srcdoc = "srcdoc",
     style = "style"
@@ -13,3 +15,4 @@ export declare const YfmHtmlBlockConsts: {
     readonly NodeAttrs: typeof YfmHtmlBlockAttrs;
     readonly nodeType: (schema: import("prosemirror-model").Schema) => import("prosemirror-model").NodeType;
 };
+export declare const defaultYfmHtmlBlockEntityId: string;

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockSpecs/const.js

@@ -1,8 +1,13 @@
+import { entityIdAttr } from "../../../../utils/entity-id.js";
 import { nodeTypeFactory } from "../../../../utils/schema.js";
 export var YfmHtmlBlockAttrs;
 (function (YfmHtmlBlockAttrs) {
+    // @ts-expect-error error TS18055
+    YfmHtmlBlockAttrs["EntityId"] = "data-entity-id";
     YfmHtmlBlockAttrs["class"] = "class";
     YfmHtmlBlockAttrs["frameborder"] = "frameborder";
+    // MAJOR: remove before next major
+    /** @deprecated This is no longer used. Removed in next major version */
     YfmHtmlBlockAttrs["newCreated"] = "newCreated";
     YfmHtmlBlockAttrs["srcdoc"] = "srcdoc";
     YfmHtmlBlockAttrs["style"] = "style";
@@ -15,4 +20,5 @@ export const YfmHtmlBlockConsts = {
     NodeAttrs: YfmHtmlBlockAttrs,
     nodeType: yfmHtmlBlockNodeType,
 };
+export const defaultYfmHtmlBlockEntityId = yfmHtmlBlockNodeName + '#0';
 //# sourceMappingURL=const.js.map