@gravity-ui/markdown-editor 13.0.0

package/build/cjs/extensions/yfm/Math/view-and-edit.css

@@ -0,0 +1,73 @@
+.math-block {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-complementary);
+}
+
+.math-block-container {
+  margin-bottom: 15px;
+}
+
+.math-error {
+  color: var(--g-color-text-danger);
+}
+
+.math-block-view.math-view-error {
+  display: flex;
+  justify-content: center;
+}
+
+.math-container.math-active .math-view {
+  display: none;
+}
+
+.math-block-container.math-active .math-block {
+  background-color: var(--g-color-base-misc-light);
+}
+.math-block-container.math-active .math-block::before, .math-block-container.math-active .math-block::after {
+  display: block;
+  content: "$$";
+  color: var(--g-color-text-hint);
+}
+
+.math-container:not(.math-active) {
+  --g-md-math-back-color: transparent;
+  --g-md-math-hover-color: var(--g-color-base-simple-hover);
+  position: relative;
+}
+.math-container:not(.math-active).math-container-error {
+  --g-md-math-back-color: var(--g-color-base-danger-light);
+  --g-md-math-hover-color: var(--g-color-base-danger-light-hover);
+}
+.math-container:not(.math-active)::before {
+  position: absolute;
+  z-index: -1;
+  inset: -2px;
+  content: "";
+  border-radius: var(--g-border-radius-s);
+  background-color: var(--g-md-math-back-color);
+  transition: background-color 0.15s linear;
+}
+.math-container:not(.math-active):hover {
+  cursor: pointer;
+}
+.math-container:not(.math-active):hover::before {
+  background-color: var(--g-md-math-hover-color);
+}
+.math-container:not(.math-active) .math-inline,
+.math-container:not(.math-active) .math-block {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+.math-container:not(.math-active) .g-md-MathHint {
+  display: none;
+}
+
+.g-md-MathHint_view_block {
+  float: right;
+}
+.g-md-MathHint_view_inline {
+  display: inline-block;
+  margin-right: 6px;
+}

package/build/cjs/extensions/yfm/Math/view-and-edit.d.ts

@@ -0,0 +1,61 @@
+import type { Node } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, NodeView } from 'prosemirror-view';
+import type { ReactRenderer, RendererItem } from '../../../extensions/behavior/ReactRenderer';
+import type { KatexOptions, RunOptions } from './types';
+export declare type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {
+    katexOptions?: KatexOptions;
+    loadRuntimeScript: () => void;
+    reactRenderer: ReactRenderer;
+};
+export declare abstract class MathNodeView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    protected node: Node;
+    protected texContent: string;
+    protected mathViewDOM: HTMLElement;
+    protected mathHintContainerDOM: HTMLElement;
+    protected hintRendererItem: RendererItem;
+    protected readonly reactRenderer: ReactRenderer;
+    protected readonly loadRuntimeScript: () => void;
+    protected readonly katexRunOptions: RunOptions;
+    protected hasActiveDeco: boolean;
+    abstract createDOM(): Record<'dom' | 'contentDOM' | 'mathViewDOM' | 'mathHintContainerDOM', HTMLElement> & {
+        hintRendererItem: RendererItem;
+    };
+    abstract isDisplayMode(): boolean;
+    constructor(node: Node, opts: MathNodeViewOptions);
+    update(node: Node, decos: readonly Decoration[]): boolean;
+    ignoreMutation(mutation: MutationRecord): boolean;
+    destroy(): void;
+    protected renderKatex(): void;
+    protected toggleErrorView(isError: boolean): void;
+    protected getTexContent(): string;
+}
+export declare class MathInlineNodeView extends MathNodeView {
+    destroy(): void;
+    isDisplayMode(): boolean;
+    createDOM(): {
+        dom: HTMLSpanElement;
+        contentDOM: HTMLSpanElement;
+        mathViewDOM: HTMLSpanElement;
+        mathHintContainerDOM: HTMLDivElement;
+        hintRendererItem: RendererItem;
+    };
+    protected createMathInlineDOM(): {
+        container: HTMLSpanElement;
+        content: HTMLSpanElement;
+    };
+}
+export declare class MathBlockNodeView extends MathNodeView {
+    isDisplayMode(): boolean;
+    createDOM(): {
+        dom: HTMLDivElement;
+        contentDOM: HTMLDivElement;
+        mathViewDOM: HTMLDivElement;
+        mathHintContainerDOM: HTMLDivElement;
+        hintRendererItem: RendererItem;
+    };
+}
+export declare type MathViewAndEditPluginOptions = MathNodeViewOptions;
+export declare const mathViewAndEditPlugin: (options: MathViewAndEditPluginOptions) => Plugin<any>;

package/build/cjs/extensions/yfm/Math/view-and-edit.js

@@ -0,0 +1,192 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mathViewAndEditPlugin = exports.MathBlockNodeView = exports.MathInlineNodeView = exports.MathNodeView = void 0;
+const prosemirror_keymap_1 = require("prosemirror-keymap");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const selection_1 = require("../../../utils/selection");
+const commands_1 = require("./commands");
+const const_1 = require("./const");
+const hint_1 = require("./hint");
+// eslint-disable-line import/order
+const MATH_ACTIVE_DECO = 'math_active_decoration';
+class MathNodeView {
+    constructor(node, opts) {
+        var _a;
+        this.hasActiveDeco = false;
+        this.node = node;
+        this.texContent = this.getTexContent();
+        this.katexRunOptions = Object.assign(Object.assign({}, opts.katexOptions), { sanitize: opts.sanitize });
+        this.reactRenderer = opts.reactRenderer;
+        this.loadRuntimeScript = opts.loadRuntimeScript;
+        const elems = this.createDOM();
+        this.dom = elems.dom;
+        this.contentDOM = elems.contentDOM;
+        this.mathViewDOM = elems.mathViewDOM;
+        this.mathHintContainerDOM = elems.mathHintContainerDOM;
+        this.hintRendererItem = elems.hintRendererItem;
+        (_a = window.latexJsonp) !== null && _a !== void 0 ? _a : (window.latexJsonp = []);
+        this.loadRuntimeScript();
+        this.renderKatex();
+    }
+    update(node, decos) {
+        if (this.node.type !== node.type)
+            return false;
+        this.node = node;
+        const isActive = decos.some((deco) => deco.spec[MATH_ACTIVE_DECO]);
+        if (isActive === this.hasActiveDeco)
+            return true;
+        if (!isActive) {
+            const newTexContent = this.getTexContent();
+            if (this.texContent !== newTexContent) {
+                this.texContent = newTexContent;
+                this.renderKatex();
+            }
+        }
+        this.hasActiveDeco = isActive;
+        return true;
+    }
+    ignoreMutation(mutation) {
+        // @ts-expect-error
+        if (mutation.type === 'selection' || mutation.type === 'attributes')
+            return true;
+        return (mutation.type === 'childList' &&
+            (mutation.target === this.mathHintContainerDOM ||
+                this.mathViewDOM.contains(mutation.target)));
+    }
+    destroy() {
+        this.hintRendererItem.remove();
+    }
+    renderKatex() {
+        const displayMode = this.isDisplayMode();
+        const runOptions = { displayMode };
+        const econtent = encodeURIComponent(this.texContent);
+        const eoptions = encodeURIComponent(JSON.stringify(runOptions));
+        const elem = document.createElement(displayMode ? 'p' : 'span');
+        elem.classList.add('yfm-latex');
+        elem.setAttribute('data-content', econtent);
+        elem.setAttribute('data-options', eoptions);
+        this.mathViewDOM.replaceChildren(elem);
+        this.toggleErrorView(false);
+        window.latexJsonp.push(async (api) => {
+            try {
+                await api.run(Object.assign(Object.assign(Object.assign({}, this.katexRunOptions), runOptions), { nodes: [elem], throwOnError: true }));
+            }
+            catch (err) {
+                const errorElem = document.createElement('span');
+                errorElem.classList.add('math-error');
+                errorElem.innerText = `(error) ${this.texContent}`;
+                errorElem.title = String(err);
+                this.mathViewDOM.replaceChildren(errorElem);
+                this.toggleErrorView(true);
+            }
+        });
+    }
+    toggleErrorView(isError) {
+        this.dom.classList.toggle('math-container-error', isError);
+        this.mathViewDOM.classList.toggle('math-view-error', isError);
+    }
+    getTexContent() {
+        return this.node.textContent;
+    }
+}
+exports.MathNodeView = MathNodeView;
+class MathInlineNodeView extends MathNodeView {
+    destroy() {
+        var _a;
+        (_a = this.hintRendererItem) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    isDisplayMode() {
+        return false;
+    }
+    createDOM() {
+        const dom = document.createElement('span');
+        dom.classList.add('math-container', 'math-inline-container');
+        const mathViewDOM = document.createElement('span');
+        mathViewDOM.classList.add('math-view', 'math-inline-view');
+        mathViewDOM.contentEditable = 'false';
+        const mathInlineDOM = this.createMathInlineDOM();
+        const mathHintContainerDOM = document.createElement('div');
+        mathHintContainerDOM.contentEditable = 'false';
+        mathHintContainerDOM.classList.add(...(0, hint_1.b)({ view: 'inline' }).split(' '));
+        dom.appendChild(mathViewDOM);
+        dom.appendChild(mathInlineDOM.container);
+        dom.appendChild(mathHintContainerDOM);
+        const hintRendererItem = this.reactRenderer.createItem('math-inline-hint', () => (0, hint_1.renderMathHint)({ offset: { left: 3, top: -1 } }, mathHintContainerDOM));
+        return {
+            dom,
+            contentDOM: mathInlineDOM.content,
+            mathViewDOM,
+            mathHintContainerDOM,
+            hintRendererItem,
+        };
+    }
+    // same as math-inline spec toDOM()
+    createMathInlineDOM() {
+        const container = document.createElement('span');
+        container.classList.add(const_1.CLASSNAMES.Inline.Container);
+        const sharpBefore = document.createElement('span');
+        sharpBefore.classList.add(const_1.CLASSNAMES.Inline.Sharp);
+        sharpBefore.contentEditable = 'false';
+        sharpBefore.textContent = '$';
+        const sharpAfter = sharpBefore.cloneNode(true);
+        const content = document.createElement('span');
+        content.classList.add(const_1.CLASSNAMES.Inline.Content);
+        container.replaceChildren(sharpBefore, content, sharpAfter);
+        return { container, content };
+    }
+}
+exports.MathInlineNodeView = MathInlineNodeView;
+class MathBlockNodeView extends MathNodeView {
+    isDisplayMode() {
+        return true;
+    }
+    createDOM() {
+        const dom = document.createElement('div');
+        dom.classList.add('math-container', 'math-block-container');
+        const mathViewDOM = document.createElement('div');
+        mathViewDOM.classList.add('math-view', 'math-block-view');
+        mathViewDOM.contentEditable = 'false';
+        const contentDOM = document.createElement('div');
+        contentDOM.classList.add('math-block');
+        const mathHintContainerDOM = document.createElement('div');
+        mathHintContainerDOM.contentEditable = 'false';
+        mathHintContainerDOM.classList.add(...(0, hint_1.b)({ view: 'block' }).split(' '));
+        dom.appendChild(mathHintContainerDOM);
+        dom.appendChild(mathViewDOM);
+        dom.appendChild(contentDOM);
+        const hintRendererItem = this.reactRenderer.createItem('math-block-hint', () => (0, hint_1.renderMathHint)({ offset: { left: -3 } }, mathHintContainerDOM));
+        return { dom, contentDOM, mathViewDOM, mathHintContainerDOM, hintRendererItem };
+    }
+}
+exports.MathBlockNodeView = MathBlockNodeView;
+const mathViewAndEditPlugin = (options) => new prosemirror_state_1.Plugin({
+    props: {
+        nodeViews: {
+            [const_1.MathNode.Block]: (node) => new MathBlockNodeView(node, options),
+            [const_1.MathNode.Inline]: (node) => new MathInlineNodeView(node, options),
+        },
+        handleKeyDown: (0, prosemirror_keymap_1.keydownHandler)({
+            ArrowLeft: commands_1.moveCursorToEndOfMathInline,
+        }),
+        decorations: (state) => {
+            const { selection } = state;
+            if ((0, selection_1.isTextSelection)(selection)) {
+                const decorations = [];
+                state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+                    const typeName = node.type.name;
+                    if (typeName === const_1.MathNode.Inline || typeName === const_1.MathNode.Block) {
+                        decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                            class: 'math-active',
+                        }, { [MATH_ACTIVE_DECO]: true }));
+                    }
+                });
+                if (decorations.length) {
+                    return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
+                }
+            }
+            return prosemirror_view_1.DecorationSet.empty;
+        },
+    },
+});
+exports.mathViewAndEditPlugin = mathViewAndEditPlugin;

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/Mermaid.css

@@ -0,0 +1,33 @@
+.g-md-Mermaid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 2px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-Mermaid_edit {
+  display: flex;
+}
+.g-md-Mermaid__Preview {
+  flex: 1;
+}
+.g-md-Mermaid__Error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-Mermaid__Editor {
+  flex: 1;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-Mermaid__EditorPopover {
+  z-index: 1;
+  float: right;
+}
+.g-md-Mermaid__Controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/MermaidView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Mermaid } from 'mermaid';
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { MermaidConsts } from '../MermaidSpecs/const';
+export declare const cnMermaid: import("@bem-react/classname").ClassNameFormatter;
+export declare const cnDiagramHelper: import("@bem-react/classname").ClassNameFormatter;
+export declare const MermaidView: React.FC<{
+    view: EditorView;
+    onChange: (attrs: {
+        [MermaidConsts.NodeAttrs.content]: string;
+    }) => void;
+    getMermaidInstance: () => Mermaid;
+    node: Node;
+    getPos: () => number | undefined;
+}>;

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/MermaidView.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MermaidView = exports.cnDiagramHelper = exports.cnMermaid = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const TextInput_1 = require("../../../../forms/TextInput");
+const hooks_1 = require("../../../../react-utils/hooks");
+const remove_node_1 = require("../../../../utils/remove-node");
+const const_1 = require("../MermaidSpecs/const");
+exports.cnMermaid = (0, classname_1.cn)('Mermaid');
+exports.cnDiagramHelper = (0, classname_1.cn)('MermaidHelper');
+const b = exports.cnMermaid;
+const MermaidPreview = ({ mermaidInstance, text = '', }) => {
+    const [svg, setSvg] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const p = async () => {
+            if (mermaidInstance) {
+                try {
+                    // Validates syntax and throws error if text is invalid
+                    await mermaidInstance.parse(text);
+                    const { svg: S } = await mermaidInstance.render(`mermaid-${Date.now()}`, text);
+                    setSvg(S);
+                    setError(null);
+                }
+                catch (e) {
+                    setError(e.message);
+                }
+            }
+        };
+        p();
+    }, [mermaidInstance, text]);
+    if (error) {
+        return react_1.default.createElement("div", { className: b('Error') }, error && react_1.default.createElement("div", null, error));
+    }
+    return (react_1.default.createElement("div", { className: b('Preview') }, svg ? react_1.default.createElement("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : react_1.default.createElement(uikit_1.Loader, null)));
+};
+const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
+    const [text, setText] = (0, react_1.useState)(initialText || '');
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }),
+        react_1.default.createElement("div", { className: b('Editor') },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(TextInput_1.TextAreaFixed, { controlProps: {
+                        className: (0, exports.cnDiagramHelper)({ 'prosemirror-stop-event': true }),
+                    }, value: text, onUpdate: (v) => {
+                        setText(v);
+                    }, autoFocus: true })),
+            react_1.default.createElement("div", { className: b('Controls') },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(uikit_1.Button, { onClick: onCancel, view: 'flat' },
+                        react_1.default.createElement("span", { className: (0, exports.cnDiagramHelper)({ 'prosemirror-stop-event': true }) }, "Cancel")),
+                    react_1.default.createElement(uikit_1.Button, { onClick: () => onSave(text), view: 'action' },
+                        react_1.default.createElement("span", { className: (0, exports.cnDiagramHelper)({ 'prosemirror-stop-event': true }) }, "Save")))))));
+};
+const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
+    const [mermaidInstance, setMermaidInstance] = (0, react_1.useState)(null);
+    const [editing, setEditing, unsetEditing, toggleEditing] = (0, hooks_1.useBooleanState)(Boolean(node.attrs[const_1.MermaidConsts.NodeAttrs.newCreated]));
+    const [menuOpen, , , toggleMenuOpen] = (0, hooks_1.useBooleanState)(false);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const waitForMermaid = () => setTimeout(() => {
+            const instance = getMermaidInstance();
+            if (instance) {
+                setMermaidInstance(instance);
+                return;
+            }
+            waitForMermaid();
+        }, 100);
+        waitForMermaid();
+    }, []);
+    if (editing) {
+        return (react_1.default.createElement(DiagramEditMode, { initialText: node.attrs[const_1.MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
+                onChange({ [const_1.MermaidConsts.NodeAttrs.content]: v });
+                unsetEditing();
+            } }));
+    }
+    return (react_1.default.createElement("div", { className: b(), onDoubleClick: setEditing },
+        react_1.default.createElement(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[const_1.MermaidConsts.NodeAttrs.content] }),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(uikit_1.Button, { onClick: toggleMenuOpen, ref: buttonRef, size: 's', className: (0, exports.cnDiagramHelper)({ 'prosemirror-stop-event': true }) },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, className: (0, exports.cnDiagramHelper)({ 'prosemirror-stop-event': true }) })),
+            react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: menuOpen, onClose: toggleMenuOpen, placement: ['bottom-end'] },
+                react_1.default.createElement(uikit_1.Menu, null,
+                    react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                            toggleEditing();
+                            toggleMenuOpen();
+                        } }, "Edit"),
+                    react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                            const pos = getPos();
+                            if (pos === undefined)
+                                return;
+                            (0, remove_node_1.removeNode)({
+                                node,
+                                pos,
+                                tr: view.state.tr,
+                                dispatch: view.dispatch,
+                            });
+                        } }, "Remove"))))));
+};
+exports.MermaidView = MermaidView;

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/NodeView.d.ts

@@ -0,0 +1,20 @@
+import { Node } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import type { MermaidOptions } from '..';
+export declare class WMermaidNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    private node;
+    private readonly view;
+    private readonly getPos;
+    private readonly renderItem;
+    private readonly loadRuntimeScript;
+    constructor(node: Node, view: EditorView, getPos: () => number | undefined, opts: MermaidOptions);
+    initializeMermaid(): void;
+    update(node: Node): boolean;
+    destroy(): void;
+    ignoreMutation(): boolean;
+    stopEvent(e: Event): boolean;
+    private onChange;
+    private getMermaidInstance;
+    private renderMermaid;
+}

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/NodeView.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WMermaidNodeView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = require("react-dom");
+const behavior_1 = require("../../../behavior");
+const const_1 = require("../MermaidSpecs/const");
+const MermaidView_1 = require("./MermaidView");
+let mermaidInstance;
+class WMermaidNodeView {
+    constructor(node, view, getPos, opts) {
+        this.getMermaidInstance = () => mermaidInstance;
+        const { loadRuntimeScript } = opts;
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.classList.add('mermaid-container');
+        this.dom.contentEditable = 'false';
+        this.view = view;
+        this.getPos = getPos;
+        this.loadRuntimeScript = loadRuntimeScript;
+        this.initializeMermaid();
+        this.renderItem = (0, behavior_1.getReactRendererFromState)(view.state).createItem('mermaid-view', this.renderMermaid.bind(this));
+    }
+    initializeMermaid() {
+        // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime
+        window.mermaidJsonp = window.mermaidJsonp || [];
+        window.mermaidJsonp.push((mermaid) => {
+            mermaidInstance = mermaid;
+        });
+        this.loadRuntimeScript();
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        this.node = node;
+        this.renderItem.rerender();
+        return true;
+    }
+    destroy() {
+        this.renderItem.remove();
+    }
+    ignoreMutation() {
+        return true;
+    }
+    stopEvent(e) {
+        const target = e.target;
+        if (typeof target.className === 'string' &&
+            target.className.includes('prosemirror-stop-event')) {
+            return true;
+        }
+        return false;
+    }
+    onChange(attrs) {
+        const pos = this.getPos();
+        if (pos === undefined)
+            return;
+        const tr = this.view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), attrs), []);
+        this.view.dispatch(tr);
+    }
+    renderMermaid() {
+        return (0, react_dom_1.createPortal)(react_1.default.createElement(MermaidView_1.MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }), this.dom);
+    }
+}
+exports.WMermaidNodeView = WMermaidNodeView;

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/index.d.ts

@@ -0,0 +1 @@
+export * from './NodeView';

package/build/cjs/extensions/yfm/Mermaid/MermaidNodeView/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./NodeView"), exports);

package/build/cjs/extensions/yfm/Mermaid/MermaidSpecs/const.d.ts

@@ -0,0 +1,13 @@
+export declare enum MermaidAttrs {
+    content = "content",
+    class = "class",
+    newCreated = "newCreated"
+}
+export declare const mermaidNodeName = "mermaid";
+export declare const mermaidNodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const MermaidAction = "createMermaid";
+export declare const MermaidConsts: {
+    readonly NodeName: "mermaid";
+    readonly NodeAttrs: typeof MermaidAttrs;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+};

package/build/cjs/extensions/yfm/Mermaid/MermaidSpecs/const.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MermaidConsts = exports.MermaidAction = exports.mermaidNodeType = exports.mermaidNodeName = exports.MermaidAttrs = void 0;
+const schema_1 = require("../../../../utils/schema");
+var MermaidAttrs;
+(function (MermaidAttrs) {
+    MermaidAttrs["content"] = "content";
+    MermaidAttrs["class"] = "class";
+    MermaidAttrs["newCreated"] = "newCreated";
+})(MermaidAttrs = exports.MermaidAttrs || (exports.MermaidAttrs = {}));
+exports.mermaidNodeName = 'mermaid';
+exports.mermaidNodeType = (0, schema_1.nodeTypeFactory)(exports.mermaidNodeName);
+exports.MermaidAction = 'createMermaid';
+exports.MermaidConsts = {
+    NodeName: exports.mermaidNodeName,
+    NodeAttrs: MermaidAttrs,
+    nodeType: exports.mermaidNodeType,
+};

package/build/cjs/extensions/yfm/Mermaid/MermaidSpecs/index.d.ts

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

package/build/cjs/extensions/yfm/Mermaid/MermaidSpecs/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MermaidSpecs = exports.mermaidNodeName = void 0;
+// eslint-disable-next-line import/no-extraneous-dependencies
+const mermaid_extension_1 = require("@diplodoc/mermaid-extension");
+const const_1 = require("./const");
+var const_2 = require("./const");
+Object.defineProperty(exports, "mermaidNodeName", { enumerable: true, get: function () { return const_2.mermaidNodeName; } });
+const MermaidSpecsExtension = (builder, { nodeView }) => {
+    builder
+        .configureMd((md) => md.use((0, mermaid_extension_1.transform)({ runtime: 'mermaid', bundle: false }), {}))
+        .addNode(const_1.mermaidNodeName, () => ({
+        fromMd: {
+            tokenSpec: {
+                name: const_1.mermaidNodeName,
+                type: 'node',
+                getAttrs: ({ content }) => ({ content }),
+            },
+        },
+        spec: {
+            selectable: true,
+            atom: true,
+            group: 'block',
+            attrs: {
+                [const_1.MermaidConsts.NodeAttrs.content]: { default: '' },
+                [const_1.MermaidConsts.NodeAttrs.class]: { default: 'mermaid' },
+                [const_1.MermaidConsts.NodeAttrs.newCreated]: { default: null },
+            },
+            parseDOM: [],
+            toDOM(node) {
+                return ['div', node.attrs];
+            },
+            dnd: { props: { offset: [8, 1] } },
+        },
+        toMd: (state, node) => {
+            state.write('```mermaid\n');
+            state.ensureNewLine();
+            state.write(node.attrs.content);
+            state.ensureNewLine();
+            state.write('```');
+            state.ensureNewLine();
+        },
+        view: nodeView,
+    }));
+};
+exports.MermaidSpecs = Object.assign(MermaidSpecsExtension, const_1.MermaidConsts);