@gravity-ui/markdown-editor 14.12.3 → 15.0.1

package/build/esm/extensions/additional/Math/hint.js

@@ -1,19 +1,19 @@
-import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
-import { Link, Portal } from '@gravity-ui/uikit';
-import { cn } from '../../../classname';
-import { i18n } from '../../../i18n/math-hint';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpMark, Link, Portal } from '@gravity-ui/uikit';
+import { cn } from "../../../classname.js";
+import { i18n } from "../../../i18n/math-hint/index.js";
 export const b = cn('MathHint');
 const MathHintContent = function MathHintContent() {
-    return (React.createElement(React.Fragment, null,
-        i18n('math_hint'),
-        ' ',
-        React.createElement(Link, { href: 'https://katex.org/', target: 'blank' }, i18n('math_hint_katex'))));
+    return (_jsxs(_Fragment, { children: [i18n('math_hint'), ' ', _jsx(Link, { href: 'https://katex.org/', target: 'blank', children: i18n('math_hint_katex') })] }));
 };
 const MathHint = function MathHint(props) {
-    return (React.createElement(HelpPopover, Object.assign({ placement: ['bottom-end', 'top-end'] }, props, { content: React.createElement(MathHintContent, null) })));
+    return (_jsx(HelpMark, { popoverProps: {
+            placement: ['bottom-end', 'top-end'],
+            modal: false,
+            ...props,
+        }, children: _jsx(MathHintContent, {}) }));
 };
 export function renderMathHint(props, container) {
-    return (React.createElement(Portal, { container: container },
-        React.createElement(MathHint, Object.assign({}, props))));
+    return (_jsx(Portal, { container: container, children: _jsx(MathHint, { ...props }) }));
 }
+//# sourceMappingURL=hint.js.map

package/build/esm/extensions/additional/Math/hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hint.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Math/hint.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAsB,IAAI,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAC,EAAE,EAAC,8BAA2B;AACtC,OAAO,EAAC,IAAI,EAAC,yCAAgC;AAE7C,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,eAAe,GAAa,SAAS,eAAe;IACtD,OAAO,CACH,8BACK,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EACvB,KAAC,IAAI,IAAC,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,OAAO,YAC5C,IAAI,CAAC,iBAAiB,CAAC,GACrB,IACR,CACN,CAAC;AACN,CAAC,CAAC;AAIF,MAAM,QAAQ,GAA4B,SAAS,QAAQ,CAAC,KAAK;IAC7D,OAAO,CACH,KAAC,QAAQ,IACL,YAAY,EAAE;YACV,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;YACpC,KAAK,EAAE,KAAK;YACZ,GAAG,KAAK;SACX,YAED,KAAC,eAAe,KAAG,GACZ,CACd,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,KAAoB,EAAE,SAAsB;IACvE,OAAO,CACH,KAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YACxB,KAAC,QAAQ,OAAK,KAAK,GAAI,GAClB,CACZ,CAAC;AACN,CAAC","sourcesContent":["import {HelpMark, type HelpMarkProps, Link, Portal} from '@gravity-ui/uikit';\n\nimport {cn} from '../../../classname';\nimport {i18n} from '../../../i18n/math-hint';\n\nexport const b = cn('MathHint');\n\nconst MathHintContent: React.FC = function MathHintContent() {\n    return (\n        <>\n            {i18n('math_hint')}{' '}\n            <Link href={'https://katex.org/'} target={'blank'}>\n                {i18n('math_hint_katex')}\n            </Link>\n        </>\n    );\n};\n\ntype MathHintProps = Pick<NonNullable<HelpMarkProps['popoverProps']>, 'offset' | 'hasArrow'>;\n\nconst MathHint: React.FC<MathHintProps> = function MathHint(props) {\n    return (\n        <HelpMark\n            popoverProps={{\n                placement: ['bottom-end', 'top-end'],\n                modal: false,\n                ...props,\n            }}\n        >\n            <MathHintContent />\n        </HelpMark>\n    );\n};\n\nexport function renderMathHint(props: MathHintProps, container: HTMLElement): React.ReactNode {\n    return (\n        <Portal container={container}>\n            <MathHint {...props} />\n        </Portal>\n    );\n}\n"]}

package/build/esm/extensions/additional/Math/index.d.ts

@@ -1,11 +1,11 @@
-import type { Action, ExtensionAuto } from '../../../core';
-import { MathNodeViewOptions } from './view-and-edit';
-import './index.css';
-export { MathNode, mathBType, mathIType } from './MathSpecs';
-export { MathBlockNodeView, MathInlineNodeView } from './view-and-edit';
+import type { Action, ExtensionAuto } from "../../../core/index.js";
+import { type MathNodeViewOptions } from "./view-and-edit.js";
+import "./index.css";
+export { MathNode, mathBType, mathIType } from "./MathSpecs/index.js";
+export { MathBlockNodeView, MathInlineNodeView } from "./view-and-edit.js";
 declare const mathIAction = "addMathInline";
 declare const mathBAction = "toMathBlock";
-export declare type MathOptions = Pick<MathNodeViewOptions, 'loadRuntimeScript' | 'sanitize' | 'katexOptions'>;
+export type MathOptions = Pick<MathNodeViewOptions, 'loadRuntimeScript' | 'sanitize' | 'katexOptions'>;
 export declare const Math: ExtensionAuto<MathOptions>;
 declare global {
     namespace WysiwygEditor {

package/build/esm/extensions/additional/Math/index.js

@@ -1,26 +1,30 @@
 import { chainCommands, setBlockType } from 'prosemirror-commands';
 import { TextSelection } from 'prosemirror-state';
+// @ts-ignore // TODO: fix cjs build
 import { hasParentNodeOfType } from 'prosemirror-utils';
-import { inlineNodeInputRule, textblockTypeInputRule } from '../../../utils/inputrules';
-import { isTextSelection } from '../../../utils/selection';
-import { MathSpecs } from './MathSpecs';
-import { ignoreIfCursorInsideMathInline, moveCursorLeftOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning, } from './commands';
-import { mathBType, mathIType } from './const';
-import { mathViewAndEditPlugin } from './view-and-edit';
-import './index.css';
-export { MathNode, mathBType, mathIType } from './MathSpecs';
-export { MathBlockNodeView, MathInlineNodeView } from './view-and-edit';
+import { inlineNodeInputRule, textblockTypeInputRule } from "../../../utils/inputrules.js";
+import { isTextSelection } from "../../../utils/selection.js";
+import { MathSpecs } from "./MathSpecs/index.js";
+import { ignoreIfCursorInsideMathInline, moveCursorLeftOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning, } from "./commands.js";
+import { mathBType, mathIType } from "./const.js";
+import { mathViewAndEditPlugin } from "./view-and-edit.js";
+import "./index.css";
+export { MathNode, mathBType, mathIType } from "./MathSpecs/index.js";
+export { MathBlockNodeView, MathInlineNodeView } from "./view-and-edit.js";
 const mathIAction = 'addMathInline';
 const mathBAction = 'toMathBlock';
 const mathITemplate = 'f(x)=';
 export const Math = (builder, opts) => {
     builder.use(MathSpecs);
     builder.addKeymap(() => ({
-        Enter: ignoreIfCursorInsideMathInline,
+        Enter: ignoreIfCursorInsideMathInline, // ignore breaks in math inline
         Backspace: chainCommands(removeEmptyMathInlineIfCursorIsAtBeginning, moveCursorLeftOfMathInline),
     }));
     builder
-        .addPlugin(() => mathViewAndEditPlugin(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))
+        .addPlugin(() => mathViewAndEditPlugin({
+        ...opts,
+        reactRenderer: builder.context.get('reactrenderer'),
+    }))
         .addInputRules((deps) => ({
         rules: [
             textblockTypeInputRule(/^\$\$\s$/, mathBType(deps.schema)),
@@ -61,3 +65,4 @@ export const Math = (builder, opts) => {
         };
     });
 };
+//# sourceMappingURL=index.js.map

package/build/esm/extensions/additional/Math/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Math/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAe,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAC9D,oCAAoC;AACpC,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,qCAAkC;AACtF,OAAO,EAAC,eAAe,EAAC,oCAAiC;AAEzD,OAAO,EAAC,SAAS,EAAC,6BAAoB;AACtC,OAAO,EACH,8BAA8B,EAC9B,0BAA0B,EAC1B,0CAA0C,GAC7C,sBAAmB;AACpB,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,mBAAgB;AAC7C,OAAO,EAA2B,qBAAqB,EAAC,2BAAwB;AAEhF,qBAAsB;AAEtB,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAC,6BAAoB;AAC3D,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAC,2BAAwB;AAEtE,MAAM,WAAW,GAAG,eAAe,CAAC;AACpC,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,aAAa,GAAG,OAAO,CAAC;AAS9B,MAAM,CAAC,MAAM,IAAI,GAA+B,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;IAC9D,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAEvB,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC;QACrB,KAAK,EAAE,8BAA8B,EAAE,+BAA+B;QACtE,SAAS,EAAE,aAAa,CACpB,0CAA0C,EAC1C,0BAA0B,CAC7B;KACJ,CAAC,CAAC,CAAC;IAEJ,OAAO;SACF,SAAS,CAAC,GAAG,EAAE,CACZ,qBAAqB,CAAC;QAClB,GAAG,IAAI;QACP,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAE;KACvD,CAAC,CACL;SACA,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACtB,KAAK,EAAE;YACH,sBAAsB,CAAC,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1D,mBAAmB,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAC1C,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAClF;SACJ;KACJ,CAAC,CAAC,CAAC;IACR,OAAO;SACF,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;QAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,GAAG,GAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACrC,MAAM,EAAC,SAAS,EAAC,GAAG,KAAK,CAAC;YAC1B,IAAI,eAAe,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1E,IAAI,QAAQ,EAAE,CAAC;oBACX,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC;oBAC7C,MAAM,YAAY,GACd,QAAQ,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC;oBAC5D,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC;oBACpB,SAAS,CAAC,WAAW,CACjB,EAAE,EACF,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CACpD,CAAC;oBACF,EAAE,CAAC,YAAY,CACX,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CACzE,CAAC;oBACF,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACjB,CAAC;gBACD,OAAO,IAAI,CAAC;YAChB,CAAC;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC;QACF,OAAO;YACH,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;YAC/D,QAAQ,EAAE,GAAG;YACb,GAAG,EAAE,GAAG;SACX,CAAC;IACN,CAAC,CAAC;SACD,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;QAC7B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/B,OAAO;YACH,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;YAC/D,QAAQ,EAAE,GAAG;YACb,GAAG,EAAE,GAAG;SACX,CAAC;IACN,CAAC,CAAC,CAAC;AACX,CAAC,CAAC","sourcesContent":["import {chainCommands, setBlockType} from 'prosemirror-commands';\nimport {type Command, TextSelection} from 'prosemirror-state';\n// @ts-ignore // TODO: fix cjs build\nimport {hasParentNodeOfType} from 'prosemirror-utils';\n\nimport type {Action, ExtensionAuto} from '../../../core';\nimport {inlineNodeInputRule, textblockTypeInputRule} from '../../../utils/inputrules';\nimport {isTextSelection} from '../../../utils/selection';\n\nimport {MathSpecs} from './MathSpecs';\nimport {\n    ignoreIfCursorInsideMathInline,\n    moveCursorLeftOfMathInline,\n    removeEmptyMathInlineIfCursorIsAtBeginning,\n} from './commands';\nimport {mathBType, mathIType} from './const';\nimport {type MathNodeViewOptions, mathViewAndEditPlugin} from './view-and-edit';\n\nimport './index.scss';\n\nexport {MathNode, mathBType, mathIType} from './MathSpecs';\nexport {MathBlockNodeView, MathInlineNodeView} from './view-and-edit';\n\nconst mathIAction = 'addMathInline';\nconst mathBAction = 'toMathBlock';\n\nconst mathITemplate = 'f(x)=';\n\n// !!! YfmPreset/YfmSpecsPreset does not use or re-export the Math extension\n\nexport type MathOptions = Pick<\n    MathNodeViewOptions,\n    'loadRuntimeScript' | 'sanitize' | 'katexOptions'\n>;\n\nexport const Math: ExtensionAuto<MathOptions> = (builder, opts) => {\n    builder.use(MathSpecs);\n\n    builder.addKeymap(() => ({\n        Enter: ignoreIfCursorInsideMathInline, // ignore breaks in math inline\n        Backspace: chainCommands(\n            removeEmptyMathInlineIfCursorIsAtBeginning,\n            moveCursorLeftOfMathInline,\n        ),\n    }));\n\n    builder\n        .addPlugin(() =>\n            mathViewAndEditPlugin({\n                ...opts,\n                reactRenderer: builder.context.get('reactrenderer')!,\n            }),\n        )\n        .addInputRules((deps) => ({\n            rules: [\n                textblockTypeInputRule(/^\\$\\$\\s$/, mathBType(deps.schema)),\n                inlineNodeInputRule(/\\$[^$\\s]+\\$$/, (match) =>\n                    mathIType(deps.schema).create(null, deps.schema.text(match.replace(/\\$/g, ''))),\n                ),\n            ],\n        }));\n    builder\n        .addAction(mathIAction, (deps) => {\n            const type = mathIType(deps.schema);\n            const cmd: Command = (state, dispatch) => {\n                const {selection} = state;\n                if (isTextSelection(selection) && selection.$from.sameParent(selection.$to)) {\n                    if (dispatch) {\n                        const fragment = selection.content().content;\n                        const selectedText =\n                            fragment.textBetween(0, fragment.size) || mathITemplate;\n                        const tr = state.tr;\n                        selection.replaceWith(\n                            tr,\n                            type.create(null, deps.schema.text(selectedText)),\n                        );\n                        tr.setSelection(\n                            TextSelection.create(tr.doc, selection.from + selectedText.length + 1),\n                        );\n                        dispatch(tr);\n                    }\n                    return true;\n                }\n                return false;\n            };\n            return {\n                isActive: (state) => hasParentNodeOfType(type)(state.selection),\n                isEnable: cmd,\n                run: cmd,\n            };\n        })\n        .addAction(mathBAction, (deps) => {\n            const type = mathBType(deps.schema);\n            const cmd = setBlockType(type);\n            return {\n                isActive: (state) => hasParentNodeOfType(type)(state.selection),\n                isEnable: cmd,\n                run: cmd,\n            };\n        });\n};\n\ndeclare global {\n    namespace WysiwygEditor {\n        interface Actions {\n            [mathIAction]: Action;\n            [mathBAction]: Action;\n        }\n    }\n}\n"]}

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

@@ -1,11 +1,11 @@
 import type { KatexOptions } from 'katex';
 export type { KatexOptions };
-export declare type RunOptions = KatexOptions & {
+export type RunOptions = KatexOptions & {
     querySelector?: string;
     nodes?: HTMLElement[];
     sanitize?: (content: string) => string;
 };
-export declare type ExposedAPI = {
+export type ExposedAPI = {
     run: (options?: RunOptions) => Promise<void>;
 };
 declare global {

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

@@ -1,3 +1,4 @@
 // copied from https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/types.ts
 // and https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/%40types/globals.d.ts
 export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Math/types.ts"],"names":[],"mappings":"AAAA,8HAA8H;AAC9H,mIAAmI","sourcesContent":["// copied from https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/types.ts\n// and https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/%40types/globals.d.ts\n\nimport type {KatexOptions} from 'katex';\n\nexport type {KatexOptions};\n\nexport type RunOptions = KatexOptions & {\n    querySelector?: string;\n    nodes?: HTMLElement[];\n    sanitize?: (content: string) => string;\n};\n\nexport type ExposedAPI = {\n    run: (options?: RunOptions) => Promise<void>;\n};\n\ndeclare global {\n    interface Window {\n        latexJsonp: Callback[];\n    }\n\n    type Callback = (exposed: ExposedAPI) => void | Promise<void>;\n}\n"]}

package/build/esm/extensions/additional/Math/view-and-edit.d.ts

@@ -1,10 +1,10 @@
 import type { Node } from 'prosemirror-model';
 import { Plugin } from 'prosemirror-state';
-import { Decoration, NodeView } from 'prosemirror-view';
-import type { ReactRenderer, RendererItem } from '../../behavior/ReactRenderer';
-import type { KatexOptions, RunOptions } from './types';
-import './view-and-edit.css';
-export declare type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {
+import { Decoration, type NodeView, type ViewMutationRecord } from 'prosemirror-view';
+import type { ReactRenderer, RendererItem } from "../../behavior/ReactRenderer/index.js";
+import type { KatexOptions, RunOptions } from "./types.js";
+import "./view-and-edit.css";
+export type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {
     katexOptions?: KatexOptions;
     loadRuntimeScript: () => void;
     reactRenderer: ReactRenderer;
@@ -27,7 +27,7 @@ export declare abstract class MathNodeView implements NodeView {
     abstract isDisplayMode(): boolean;
     constructor(node: Node, opts: MathNodeViewOptions);
     update(node: Node, decos: readonly Decoration[]): boolean;
-    ignoreMutation(mutation: MutationRecord): boolean;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
     destroy(): void;
     protected renderKatex(): void;
     protected toggleErrorView(isError: boolean): void;
@@ -58,5 +58,5 @@ export declare class MathBlockNodeView extends MathNodeView {
         hintRendererItem: RendererItem;
     };
 }
-export declare type MathViewAndEditPluginOptions = MathNodeViewOptions;
+export type MathViewAndEditPluginOptions = MathNodeViewOptions;
 export declare const mathViewAndEditPlugin: (options: MathViewAndEditPluginOptions) => Plugin<any>;

package/build/esm/extensions/additional/Math/view-and-edit.js

@@ -1,19 +1,31 @@
 import { keydownHandler } from 'prosemirror-keymap';
 import { Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { isTextSelection } from '../../../utils/selection';
-import { moveCursorLeftOfMathInline, moveCursorRightOfMathInline } from './commands';
-import { CLASSNAMES, MathNode } from './const';
-import { b, renderMathHint } from './hint';
-import './view-and-edit.css';
+import { isTextSelection } from "../../../utils/selection.js";
+import { moveCursorLeftOfMathInline, moveCursorRightOfMathInline } from "./commands.js";
+import { CLASSNAMES, MathNode } from "./const.js";
+import { b, renderMathHint } from "./hint.js";
+import "./view-and-edit.css";
 const MATH_ACTIVE_DECO = 'math_active_decoration';
 export class MathNodeView {
+    dom;
+    contentDOM;
+    node;
+    texContent;
+    mathViewDOM;
+    mathHintContainerDOM;
+    hintRendererItem;
+    reactRenderer;
+    loadRuntimeScript;
+    katexRunOptions;
+    hasActiveDeco = false;
     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.katexRunOptions = {
+            ...opts.katexOptions,
+            sanitize: opts.sanitize,
+        };
         this.reactRenderer = opts.reactRenderer;
         this.loadRuntimeScript = opts.loadRuntimeScript;
         const elems = this.createDOM();
@@ -22,7 +34,7 @@ export class MathNodeView {
         this.mathViewDOM = elems.mathViewDOM;
         this.mathHintContainerDOM = elems.mathHintContainerDOM;
         this.hintRendererItem = elems.hintRendererItem;
-        (_a = window.latexJsonp) !== null && _a !== void 0 ? _a : (window.latexJsonp = []);
+        window.latexJsonp ??= [];
         this.loadRuntimeScript();
         this.renderKatex();
     }
@@ -44,11 +56,11 @@ export class MathNodeView {
         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.mathHintContainerDOM.contains(mutation.target) ||
                 this.mathViewDOM.contains(mutation.target)));
     }
     destroy() {
@@ -67,7 +79,12 @@ export class MathNodeView {
         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 }));
+                await api.run({
+                    ...this.katexRunOptions,
+                    ...runOptions,
+                    nodes: [elem],
+                    throwOnError: true,
+                });
             }
             catch (err) {
                 const errorElem = document.createElement('span');
@@ -89,8 +106,7 @@ export class MathNodeView {
 }
 export class MathInlineNodeView extends MathNodeView {
     destroy() {
-        var _a;
-        (_a = this.hintRendererItem) === null || _a === void 0 ? void 0 : _a.remove();
+        this.hintRendererItem?.remove();
     }
     isDisplayMode() {
         return false;
@@ -108,7 +124,7 @@ export class MathInlineNodeView extends MathNodeView {
         dom.appendChild(mathViewDOM);
         dom.appendChild(mathInlineDOM.container);
         dom.appendChild(mathHintContainerDOM);
-        const hintRendererItem = this.reactRenderer.createItem('math-inline-hint', () => renderMathHint({ offset: { left: 3, top: -1 } }, mathHintContainerDOM));
+        const hintRendererItem = this.reactRenderer.createItem('math-inline-hint', () => renderMathHint({}, mathHintContainerDOM));
         return {
             dom,
             contentDOM: mathInlineDOM.content,
@@ -150,7 +166,7 @@ export class MathBlockNodeView extends MathNodeView {
         dom.appendChild(mathHintContainerDOM);
         dom.appendChild(mathViewDOM);
         dom.appendChild(contentDOM);
-        const hintRendererItem = this.reactRenderer.createItem('math-block-hint', () => renderMathHint({ offset: { left: -3 } }, mathHintContainerDOM));
+        const hintRendererItem = this.reactRenderer.createItem('math-block-hint', () => renderMathHint({}, mathHintContainerDOM));
         return { dom, contentDOM, mathViewDOM, mathHintContainerDOM, hintRendererItem };
     }
 }
@@ -184,3 +200,4 @@ export const mathViewAndEditPlugin = (options) => new Plugin({
         },
     },
 });
+//# sourceMappingURL=view-and-edit.js.map

package/build/esm/extensions/additional/Math/view-and-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-and-edit.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Math/view-and-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import {keydownHandler} from 'prosemirror-keymap';\nimport type {Node} from 'prosemirror-model';\nimport {Plugin} from 'prosemirror-state';\nimport {Decoration, DecorationSet, type NodeView, type ViewMutationRecord} from 'prosemirror-view';\n\nimport {isTextSelection} from '../../../utils/selection';\nimport type {ReactRenderer, RendererItem} from '../../behavior/ReactRenderer';\n\nimport {moveCursorLeftOfMathInline, moveCursorRightOfMathInline} from './commands';\nimport {CLASSNAMES, MathNode} from './const';\nimport {b, renderMathHint} from './hint';\nimport type {KatexOptions, RunOptions} from './types';\n\nimport './view-and-edit.scss';\n\nconst MATH_ACTIVE_DECO = 'math_active_decoration';\n\nexport type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {\n    katexOptions?: KatexOptions;\n    loadRuntimeScript: () => void;\n    reactRenderer: ReactRenderer;\n};\n\nexport abstract class MathNodeView implements NodeView {\n    dom: HTMLElement;\n    contentDOM: HTMLElement;\n\n    protected node: Node;\n    protected texContent: string;\n    protected mathViewDOM: HTMLElement;\n    protected mathHintContainerDOM: HTMLElement;\n\n    protected hintRendererItem: RendererItem;\n    protected readonly reactRenderer: ReactRenderer;\n    protected readonly loadRuntimeScript: () => void;\n    protected readonly katexRunOptions: RunOptions;\n\n    protected hasActiveDeco = false;\n\n    abstract createDOM(): Record<\n        'dom' | 'contentDOM' | 'mathViewDOM' | 'mathHintContainerDOM',\n        HTMLElement\n    > & {hintRendererItem: RendererItem};\n    abstract isDisplayMode(): boolean;\n\n    constructor(node: Node, opts: MathNodeViewOptions) {\n        this.node = node;\n        this.texContent = this.getTexContent();\n        this.katexRunOptions = {\n            ...opts.katexOptions,\n            sanitize: opts.sanitize,\n        };\n\n        this.reactRenderer = opts.reactRenderer;\n        this.loadRuntimeScript = opts.loadRuntimeScript;\n\n        const elems = this.createDOM();\n        this.dom = elems.dom;\n        this.contentDOM = elems.contentDOM;\n        this.mathViewDOM = elems.mathViewDOM;\n        this.mathHintContainerDOM = elems.mathHintContainerDOM;\n        this.hintRendererItem = elems.hintRendererItem;\n\n        window.latexJsonp ??= [];\n        this.loadRuntimeScript();\n        this.renderKatex();\n    }\n\n    update(node: Node, decos: readonly Decoration[]): boolean {\n        if (this.node.type !== node.type) return false;\n        this.node = node;\n\n        const isActive = decos.some((deco) => deco.spec[MATH_ACTIVE_DECO]);\n        if (isActive === this.hasActiveDeco) return true;\n\n        if (!isActive) {\n            const newTexContent = this.getTexContent();\n            if (this.texContent !== newTexContent) {\n                this.texContent = newTexContent;\n                this.renderKatex();\n            }\n        }\n\n        this.hasActiveDeco = isActive;\n\n        return true;\n    }\n\n    ignoreMutation(mutation: ViewMutationRecord): boolean {\n        if (mutation.type === 'selection' || mutation.type === 'attributes') return true;\n\n        return (\n            mutation.type === 'childList' &&\n            (mutation.target === this.mathHintContainerDOM ||\n                this.mathHintContainerDOM.contains(mutation.target) ||\n                this.mathViewDOM.contains(mutation.target))\n        );\n    }\n\n    destroy() {\n        this.hintRendererItem.remove();\n    }\n\n    protected renderKatex() {\n        const displayMode = this.isDisplayMode();\n        const runOptions: RunOptions = {displayMode};\n\n        const econtent = encodeURIComponent(this.texContent);\n        const eoptions = encodeURIComponent(JSON.stringify(runOptions));\n\n        const elem = document.createElement(displayMode ? 'p' : 'span');\n        elem.classList.add('yfm-latex');\n        elem.setAttribute('data-content', econtent);\n        elem.setAttribute('data-options', eoptions);\n        this.mathViewDOM.replaceChildren(elem);\n\n        this.toggleErrorView(false);\n\n        window.latexJsonp.push(async (api) => {\n            try {\n                await api.run({\n                    ...this.katexRunOptions,\n                    ...runOptions,\n                    nodes: [elem],\n                    throwOnError: true,\n                });\n            } catch (err) {\n                const errorElem = document.createElement('span');\n                errorElem.classList.add('math-error');\n                errorElem.innerText = `(error) ${this.texContent}`;\n                errorElem.title = String(err);\n                this.mathViewDOM.replaceChildren(errorElem);\n                this.toggleErrorView(true);\n            }\n        });\n    }\n\n    protected toggleErrorView(isError: boolean) {\n        this.dom.classList.toggle('math-container-error', isError);\n        this.mathViewDOM.classList.toggle('math-view-error', isError);\n    }\n\n    protected getTexContent() {\n        return this.node.textContent;\n    }\n}\n\nexport class MathInlineNodeView extends MathNodeView {\n    destroy() {\n        this.hintRendererItem?.remove();\n    }\n\n    isDisplayMode(): boolean {\n        return false;\n    }\n\n    createDOM() {\n        const dom = document.createElement('span');\n        dom.classList.add('math-container', 'math-inline-container');\n\n        const mathViewDOM = document.createElement('span');\n        mathViewDOM.classList.add('math-view', 'math-inline-view');\n        mathViewDOM.contentEditable = 'false';\n\n        const mathInlineDOM = this.createMathInlineDOM();\n\n        const mathHintContainerDOM = document.createElement('div');\n        mathHintContainerDOM.contentEditable = 'false';\n        mathHintContainerDOM.classList.add(...b({view: 'inline'}).split(' '));\n\n        dom.appendChild(mathViewDOM);\n        dom.appendChild(mathInlineDOM.container);\n        dom.appendChild(mathHintContainerDOM);\n\n        const hintRendererItem = this.reactRenderer.createItem('math-inline-hint', () =>\n            renderMathHint({}, mathHintContainerDOM),\n        );\n\n        return {\n            dom,\n            contentDOM: mathInlineDOM.content,\n            mathViewDOM,\n            mathHintContainerDOM,\n            hintRendererItem,\n        };\n    }\n\n    // same as math-inline spec toDOM()\n    protected createMathInlineDOM() {\n        const container = document.createElement('span');\n        container.classList.add(CLASSNAMES.Inline.Container);\n\n        const sharpBefore = document.createElement('span');\n        sharpBefore.classList.add(CLASSNAMES.Inline.Sharp);\n        sharpBefore.contentEditable = 'false';\n        sharpBefore.textContent = '$';\n\n        const sharpAfter = sharpBefore.cloneNode(true);\n\n        const content = document.createElement('span');\n        content.classList.add(CLASSNAMES.Inline.Content);\n\n        container.replaceChildren(sharpBefore, content, sharpAfter);\n\n        return {container, content};\n    }\n}\n\nexport class MathBlockNodeView extends MathNodeView {\n    isDisplayMode(): boolean {\n        return true;\n    }\n\n    createDOM() {\n        const dom = document.createElement('div');\n        dom.classList.add('math-container', 'math-block-container');\n\n        const mathViewDOM = document.createElement('div');\n        mathViewDOM.classList.add('math-view', 'math-block-view');\n        mathViewDOM.contentEditable = 'false';\n\n        const contentDOM = document.createElement('div');\n        contentDOM.classList.add('math-block');\n\n        const mathHintContainerDOM = document.createElement('div');\n        mathHintContainerDOM.contentEditable = 'false';\n        mathHintContainerDOM.classList.add(...b({view: 'block'}).split(' '));\n\n        dom.appendChild(mathHintContainerDOM);\n        dom.appendChild(mathViewDOM);\n        dom.appendChild(contentDOM);\n\n        const hintRendererItem = this.reactRenderer.createItem('math-block-hint', () =>\n            renderMathHint({}, mathHintContainerDOM),\n        );\n\n        return {dom, contentDOM, mathViewDOM, mathHintContainerDOM, hintRendererItem};\n    }\n}\n\nexport type MathViewAndEditPluginOptions = MathNodeViewOptions;\n\nexport const mathViewAndEditPlugin = (options: MathViewAndEditPluginOptions) =>\n    new Plugin({\n        props: {\n            handleKeyDown: keydownHandler({\n                ArrowRight: moveCursorRightOfMathInline,\n                ArrowLeft: moveCursorLeftOfMathInline,\n            }),\n            nodeViews: {\n                [MathNode.Block]: (node) => new MathBlockNodeView(node, options),\n                [MathNode.Inline]: (node) => new MathInlineNodeView(node, options),\n            },\n            decorations: (state) => {\n                const {selection} = state;\n                if (isTextSelection(selection)) {\n                    const decorations: Decoration[] = [];\n                    state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {\n                        const typeName = node.type.name;\n                        if (typeName === MathNode.Inline || typeName === MathNode.Block) {\n                            decorations.push(\n                                Decoration.node(\n                                    pos,\n                                    pos + node.nodeSize,\n                                    {\n                                        class: 'math-active',\n                                    },\n                                    {[MATH_ACTIVE_DECO]: true},\n                                ),\n                            );\n                        }\n                    });\n                    if (decorations.length) {\n                        return DecorationSet.create(state.doc, decorations);\n                    }\n                }\n                return DecorationSet.empty;\n            },\n        },\n    });\n"]}

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import type { Mermaid } from 'mermaid';
-import { Node } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { MermaidConsts } from '../MermaidSpecs/const';
+import type { Mermaid } from 'mermaid' with { 'resolution-mode': 'import' };
+import type { Node } from 'prosemirror-model';
+import type { EditorView } from 'prosemirror-view';
+import { MermaidConsts } from "../MermaidSpecs/const.js";
 export declare const cnMermaid: import("@bem-react/classname").ClassNameFormatter;
-export declare const cnDiagramHelper: import("@bem-react/classname").ClassNameFormatter;
-import './Mermaid.css';
+export declare const STOP_EVENT_CLASSNAME = "prosemirror-stop-event";
+import "./Mermaid.css";
 export declare const MermaidView: React.FC<{
     view: EditorView;
     onChange: (attrs: {

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

@@ -1,15 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Ellipsis as DotsIcon } from '@gravity-ui/icons';
 import { Button, Icon, Loader, Menu, Popup } from '@gravity-ui/uikit';
-import { cn } from '../../../../classname';
-import { TextAreaFixed as TextArea } from '../../../../forms/TextInput';
-import { i18n } from '../../../../i18n/common';
-import { useBooleanState } from '../../../../react-utils';
-import { removeNode } from '../../../../utils';
-import { MermaidConsts } from '../MermaidSpecs/const';
+import { cn } from "../../../../classname.js";
+import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
+import { i18n } from "../../../../i18n/common/index.js";
+import { useBooleanState, useElementState } from "../../../../react-utils/index.js";
+import { removeNode } from "../../../../utils/index.js";
+import { MermaidConsts } from "../MermaidSpecs/const.js";
 export const cnMermaid = cn('Mermaid');
-export const cnDiagramHelper = cn('MermaidHelper');
-import './Mermaid.css';
+export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
+import "./Mermaid.css";
 const b = cnMermaid;
 const MermaidPreview = ({ mermaidInstance, text = '', }) => {
     const [svg, setSvg] = useState();
@@ -32,33 +33,23 @@ const MermaidPreview = ({ mermaidInstance, text = '', }) => {
         p();
     }, [mermaidInstance, text]);
     if (error) {
-        return React.createElement("div", { className: b('Error') }, error && React.createElement("div", null, error));
+        return _jsx("div", { className: b('Error'), children: error && _jsx("div", { children: error }) });
     }
-    return (React.createElement("div", { className: b('Preview') }, svg ? React.createElement("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : React.createElement(Loader, null)));
+    return (_jsx("div", { className: b('Preview'), children: svg ? _jsx("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : _jsx(Loader, {}) }));
 };
 const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
     const [text, setText] = useState(initialText || '');
-    return (React.createElement("div", { className: b() },
-        React.createElement(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }),
-        React.createElement("div", { className: b('Editor') },
-            React.createElement("div", null,
-                React.createElement(TextArea, { controlProps: {
-                        className: cnDiagramHelper({ 'prosemirror-stop-event': true }),
-                    }, value: text, onUpdate: (v) => {
-                        setText(v);
-                    }, autoFocus: true })),
-            React.createElement("div", { className: b('Controls') },
-                React.createElement("div", null,
-                    React.createElement(Button, { onClick: onCancel, view: 'flat' },
-                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, i18n('cancel'))),
-                    React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
-                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
+    return (_jsxs("div", { className: b(), children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }), _jsxs("div", { className: b('Editor'), children: [_jsx("div", { children: _jsx(TextArea, { controlProps: {
+                                className: STOP_EVENT_CLASSNAME,
+                            }, value: text, onUpdate: (v) => {
+                                setText(v);
+                            }, 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 MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
     const [mermaidInstance, setMermaidInstance] = useState(null);
     const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(Boolean(node.attrs[MermaidConsts.NodeAttrs.newCreated]));
-    const [menuOpen, , , toggleMenuOpen] = useBooleanState(false);
-    const buttonRef = useRef(null);
+    const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);
+    const [anchorElement, setAnchorElement] = useElementState();
     useEffect(() => {
         const waitForMermaid = () => setTimeout(() => {
             const instance = getMermaidInstance();
@@ -71,31 +62,24 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
         waitForMermaid();
     }, []);
     if (editing) {
-        return (React.createElement(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
+        return (_jsx(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [MermaidConsts.NodeAttrs.content]: v });
                 unsetEditing();
             } }));
     }
-    return (React.createElement("div", { className: b(), onDoubleClick: setEditing },
-        React.createElement(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[MermaidConsts.NodeAttrs.content] }),
-        React.createElement("div", null,
-            React.createElement(Button, { onClick: toggleMenuOpen, ref: buttonRef, size: 's', className: cnDiagramHelper({ 'prosemirror-stop-event': true }) },
-                React.createElement(Icon, { data: DotsIcon, className: cnDiagramHelper({ 'prosemirror-stop-event': true }) })),
-            React.createElement(Popup, { anchorRef: buttonRef, open: menuOpen, onClose: toggleMenuOpen, placement: ['bottom-end'] },
-                React.createElement(Menu, null,
-                    React.createElement(Menu.Item, { onClick: () => {
-                            toggleEditing();
-                            toggleMenuOpen();
-                        } }, i18n('edit')),
-                    React.createElement(Menu.Item, { onClick: () => {
-                            const pos = getPos();
-                            if (pos === undefined)
-                                return;
-                            removeNode({
-                                node,
-                                pos,
-                                tr: view.state.tr,
-                                dispatch: view.dispatch,
-                            });
-                        } }, i18n('remove')))))));
+    return (_jsxs("div", { className: b(), onDoubleClick: setEditing, children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[MermaidConsts.NodeAttrs.content] }), _jsxs("div", { children: [_jsx(Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: 's', className: STOP_EVENT_CLASSNAME, children: _jsx(Icon, { data: DotsIcon, className: STOP_EVENT_CLASSNAME }) }), _jsx(Popup, { open: menuOpen, anchorElement: anchorElement, onOpenChange: closeMenu, placement: "bottom-end", children: _jsxs(Menu, { children: [_jsx(Menu.Item, { onClick: () => {
+                                        toggleEditing();
+                                        closeMenu();
+                                    }, children: i18n('edit') }), _jsx(Menu.Item, { onClick: () => {
+                                        const pos = getPos();
+                                        if (pos === undefined)
+                                            return;
+                                        removeNode({
+                                            node,
+                                            pos,
+                                            tr: view.state.tr,
+                                            dispatch: view.dispatch,
+                                        });
+                                    }, children: i18n('remove') })] }) })] })] }));
 };
+//# sourceMappingURL=MermaidView.js.map

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

@@ -0,0 +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"]}

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

@@ -1,6 +1,6 @@
-import { Node } from 'prosemirror-model';
-import { EditorView, NodeView } from 'prosemirror-view';
-import type { MermaidOptions } from '..';
+import type { Node } from 'prosemirror-model';
+import type { EditorView, NodeView } from 'prosemirror-view';
+import type { MermaidOptions } from "../index.js";
 export declare class WMermaidNodeView implements NodeView {
     readonly dom: HTMLElement;
     private node;

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

@@ -1,12 +1,16 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { getReactRendererFromState } from '../../../behavior';
-import { MermaidConsts } from '../MermaidSpecs/const';
-import { MermaidView } from './MermaidView';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Portal } from '@gravity-ui/uikit';
+import { getReactRendererFromState } from "../../../behavior/index.js";
+import { MermaidView, STOP_EVENT_CLASSNAME } from "./MermaidView.js";
 let mermaidInstance;
 export class WMermaidNodeView {
+    dom;
+    node;
+    view;
+    getPos;
+    renderItem;
+    loadRuntimeScript;
     constructor(node, view, getPos, opts) {
-        this.getMermaidInstance = () => mermaidInstance;
         const { loadRuntimeScript } = opts;
         this.node = node;
         this.dom = document.createElement('div');
@@ -41,20 +45,21 @@ export class WMermaidNodeView {
     }
     stopEvent(e) {
         const target = e.target;
-        if (typeof target.className === 'string' &&
-            target.className.includes('prosemirror-stop-event')) {
-            return true;
-        }
-        return false;
+        return target.classList.contains(STOP_EVENT_CLASSNAME);
     }
     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), []);
+        const tr = this.view.state.tr.setNodeMarkup(pos, undefined, {
+            ...this.node.attrs,
+            ...attrs,
+        }, []);
         this.view.dispatch(tr);
     }
+    getMermaidInstance = () => mermaidInstance;
     renderMermaid() {
-        return createPortal(React.createElement(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }), this.dom);
+        return (_jsx(Portal, { container: this.dom, children: _jsx(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }) }));
     }
 }
+//# sourceMappingURL=NodeView.js.map

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

@@ -0,0 +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"]}

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

@@ -1 +1 @@
-export * from './NodeView';
+export * from "./NodeView.js";

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

@@ -1 +1,2 @@
-export * from './NodeView';
+export * from "./NodeView.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/index.ts"],"names":[],"mappings":"AAAA,8BAA2B","sourcesContent":["export * from './NodeView';\n"]}