@gravity-ui/markdown-editor 14.12.1 → 14.12.2

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

@@ -1,9 +1,9 @@
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { get$Cursor } from "../../../utils/selection.js";
-import { mathIType } from "./const.js";
+import { get$Cursor } from '../../../utils/selection';
+import { mathIType } from './const';
 export const ignoreIfCursorInsideMathInline = ({ selection, schema }) => {
     const $cursor = get$Cursor(selection);
-    return $cursor?.parent.type === mathIType(schema);
+    return ($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === mathIType(schema);
 };
 /**
  * If cursor at the beginning of MathInline:
@@ -12,13 +12,13 @@ export const ignoreIfCursorInsideMathInline = ({ selection, schema }) => {
  */
 export const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispatch) => {
     const $cursor = get$Cursor(tr.selection);
-    if ($cursor?.parent.type === mathIType(schema) && $cursor.start() === $cursor.pos) {
+    if (($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === mathIType(schema) && $cursor.start() === $cursor.pos) {
         const isEmptyAnchor = $cursor.parent.nodeSize <= 2;
         if (isEmptyAnchor) {
-            dispatch?.(tr.delete($cursor.before(), $cursor.after()));
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.delete($cursor.before(), $cursor.after()));
         }
         else {
-            dispatch?.(tr.setSelection(NodeSelection.create(tr.doc, $cursor.before())));
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(NodeSelection.create(tr.doc, $cursor.before())));
         }
         return true;
     }
@@ -28,15 +28,16 @@ export const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispa
  * Handle cursor movement to the right at the boundary of a MathInline block
  */
 export const moveCursorRightOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
     const $cursor = get$Cursor(tr.selection);
     if ($cursor) {
         const mathType = mathIType(schema);
-        const isOnBeforeOfMathInline = $cursor.nodeAfter?.type === mathType;
+        const isOnBeforeOfMathInline = ((_a = $cursor.nodeAfter) === null || _a === void 0 ? void 0 : _a.type) === mathType;
         const isOnEndOfMathInline = $cursor.parentOffset === $cursor.parent.content.size &&
             $cursor.parent.type === mathType;
         if (isOnBeforeOfMathInline || isOnEndOfMathInline) {
             const newPos = $cursor.pos + 1;
-            dispatch?.(tr.setSelection(TextSelection.create(tr.doc, newPos)));
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, newPos)));
             return true;
         }
     }
@@ -46,17 +47,17 @@ export const moveCursorRightOfMathInline = ({ tr, schema }, dispatch) => {
  * Handle cursor movement to the left at the boundary of a MathInline block
  */
 export const moveCursorLeftOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
     const $cursor = get$Cursor(tr.selection);
     if ($cursor) {
         const mathType = mathIType(schema);
-        const isOnAfterOfMathInline = $cursor.nodeBefore?.type === mathType;
+        const isOnAfterOfMathInline = ((_a = $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === mathType;
         const isOnStartOfMathInline = $cursor.parentOffset === 0 && $cursor.parent.type === mathType;
         if (isOnAfterOfMathInline || isOnStartOfMathInline) {
             const newPos = $cursor.pos - 1;
-            dispatch?.(tr.setSelection(TextSelection.create(tr.doc, newPos)));
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, newPos)));
             return true;
         }
     }
     return false;
 };
-//# sourceMappingURL=commands.js.map

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

@@ -1,2 +1,2 @@
-export * from "./MathSpecs/const.js";
-export { mathBType, mathIType } from "./MathSpecs/index.js";
+export * from './MathSpecs/const';
+export { mathBType, mathIType } from './MathSpecs';

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

@@ -1,3 +1,2 @@
-export * from "./MathSpecs/const.js";
-export { mathBType, mathIType } from "./MathSpecs/index.js";
-//# sourceMappingURL=const.js.map
+export * from './MathSpecs/const';
+export { mathBType, mathIType } from './MathSpecs';

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

@@ -1,5 +1,6 @@
-import { type HelpMarkProps } from '@gravity-ui/uikit';
+import React from 'react';
+import { HelpPopoverProps } from '@gravity-ui/components';
 export declare const b: import("@bem-react/classname").ClassNameFormatter;
-type MathHintProps = Pick<NonNullable<HelpMarkProps['popoverProps']>, 'offset' | 'hasArrow'>;
+declare type MathHintProps = Pick<HelpPopoverProps, 'offset' | 'hasArrow'>;
 export declare function renderMathHint(props: MathHintProps, container: HTMLElement): React.ReactNode;
 export {};

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

@@ -1,19 +1,19 @@
-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";
+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';
 export const b = cn('MathHint');
 const MathHintContent = function MathHintContent() {
-    return (_jsxs(_Fragment, { children: [i18n('math_hint'), ' ', _jsx(Link, { href: 'https://katex.org/', target: 'blank', children: i18n('math_hint_katex') })] }));
+    return (React.createElement(React.Fragment, null,
+        i18n('math_hint'),
+        ' ',
+        React.createElement(Link, { href: 'https://katex.org/', target: 'blank' }, i18n('math_hint_katex'))));
 };
 const MathHint = function MathHint(props) {
-    return (_jsx(HelpMark, { popoverProps: {
-            placement: ['bottom-end', 'top-end'],
-            modal: false,
-            ...props,
-        }, children: _jsx(MathHintContent, {}) }));
+    return (React.createElement(HelpPopover, Object.assign({ placement: ['bottom-end', 'top-end'] }, props, { content: React.createElement(MathHintContent, null) })));
 };
 export function renderMathHint(props, container) {
-    return (_jsx(Portal, { container: container, children: _jsx(MathHint, { ...props }) }));
+    return (React.createElement(Portal, { container: container },
+        React.createElement(MathHint, Object.assign({}, props))));
 }
-//# sourceMappingURL=hint.js.map

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

@@ -1,11 +1,11 @@
-import type { Action, ExtensionAuto } from "../../../core/index.js";
-import { 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";
+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';
 declare const mathIAction = "addMathInline";
 declare const mathBAction = "toMathBlock";
-export type MathOptions = Pick<MathNodeViewOptions, 'loadRuntimeScript' | 'sanitize' | 'katexOptions'>;
+export declare 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,30 +1,26 @@
 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.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";
+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';
 const mathIAction = 'addMathInline';
 const mathBAction = 'toMathBlock';
 const mathITemplate = 'f(x)=';
 export const Math = (builder, opts) => {
     builder.use(MathSpecs);
     builder.addKeymap(() => ({
-        Enter: ignoreIfCursorInsideMathInline, // ignore breaks in math inline
+        Enter: ignoreIfCursorInsideMathInline,
         Backspace: chainCommands(removeEmptyMathInlineIfCursorIsAtBeginning, moveCursorLeftOfMathInline),
     }));
     builder
-        .addPlugin(() => mathViewAndEditPlugin({
-        ...opts,
-        reactRenderer: builder.context.get('reactrenderer'),
-    }))
+        .addPlugin(() => mathViewAndEditPlugin(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))
         .addInputRules((deps) => ({
         rules: [
             textblockTypeInputRule(/^\$\$\s$/, mathBType(deps.schema)),
@@ -65,4 +61,3 @@ export const Math = (builder, opts) => {
         };
     });
 };
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,3 @@
 // 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/view-and-edit.d.ts

@@ -1,10 +1,10 @@
 import type { Node } from 'prosemirror-model';
 import { Plugin } from 'prosemirror-state';
-import { Decoration, NodeView, 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'> & {
+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'> & {
     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: ViewMutationRecord): boolean;
+    ignoreMutation(mutation: MutationRecord): boolean;
     destroy(): void;
     protected renderKatex(): void;
     protected toggleErrorView(isError: boolean): void;
@@ -58,5 +58,5 @@ export declare class MathBlockNodeView extends MathNodeView {
         hintRendererItem: RendererItem;
     };
 }
-export type MathViewAndEditPluginOptions = MathNodeViewOptions;
+export declare type MathViewAndEditPluginOptions = MathNodeViewOptions;
 export declare const mathViewAndEditPlugin: (options: MathViewAndEditPluginOptions) => Plugin<any>;

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

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

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

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

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

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React, { useEffect, useRef, 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.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";
+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';
 export const cnMermaid = cn('Mermaid');
-export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
-import "./Mermaid.css";
+export const cnDiagramHelper = cn('MermaidHelper');
+import './Mermaid.css';
 const b = cnMermaid;
 const MermaidPreview = ({ mermaidInstance, text = '', }) => {
     const [svg, setSvg] = useState();
@@ -33,23 +32,33 @@ const MermaidPreview = ({ mermaidInstance, text = '', }) => {
         p();
     }, [mermaidInstance, text]);
     if (error) {
-        return _jsx("div", { className: b('Error'), children: error && _jsx("div", { children: error }) });
+        return React.createElement("div", { className: b('Error') }, error && React.createElement("div", null, error));
     }
-    return (_jsx("div", { className: b('Preview'), children: svg ? _jsx("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : _jsx(Loader, {}) }));
+    return (React.createElement("div", { className: b('Preview') }, svg ? React.createElement("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : React.createElement(Loader, null)));
 };
 const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
     const [text, setText] = useState(initialText || '');
-    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') }) })] }) })] })] }));
+    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'))))))));
 };
 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, , closeMenu, toggleMenuOpen] = useBooleanState(false);
-    const [anchorElement, setAnchorElement] = useElementState();
+    const [menuOpen, , , toggleMenuOpen] = useBooleanState(false);
+    const buttonRef = useRef(null);
     useEffect(() => {
         const waitForMermaid = () => setTimeout(() => {
             const instance = getMermaidInstance();
@@ -62,24 +71,31 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
         waitForMermaid();
     }, []);
     if (editing) {
-        return (_jsx(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
+        return (React.createElement(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [MermaidConsts.NodeAttrs.content]: v });
                 unsetEditing();
             } }));
     }
-    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') })] }) })] })] }));
+    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')))))));
 };
-//# sourceMappingURL=MermaidView.js.map

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

@@ -1,6 +1,6 @@
-import type { Node } from 'prosemirror-model';
-import type { EditorView, NodeView } from 'prosemirror-view';
-import type { MermaidOptions } from "../index.js";
+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;

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

@@ -1,17 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Portal } from '@gravity-ui/uikit';
-import { getReactRendererFromState } from "../../../behavior/index.js";
-import { MermaidConsts } from "../MermaidSpecs/const.js";
-import { MermaidView, STOP_EVENT_CLASSNAME } from "./MermaidView.js";
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { getReactRendererFromState } from '../../../behavior';
+import { MermaidConsts } from '../MermaidSpecs/const';
+import { MermaidView } from './MermaidView';
 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');
@@ -46,21 +41,20 @@ export class WMermaidNodeView {
     }
     stopEvent(e) {
         const target = e.target;
-        return target.classList.contains(STOP_EVENT_CLASSNAME);
+        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, {
-            ...this.node.attrs,
-            ...attrs,
-        }, []);
+        const tr = this.view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), attrs), []);
         this.view.dispatch(tr);
     }
-    getMermaidInstance = () => mermaidInstance;
     renderMermaid() {
-        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 }) }));
+        return createPortal(React.createElement(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }), this.dom);
     }
 }
-//# sourceMappingURL=NodeView.js.map

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

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

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

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

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

@@ -4,10 +4,10 @@ export declare enum MermaidAttrs {
     newCreated = "newCreated"
 }
 export declare const mermaidNodeName = "mermaid";
-export declare const mermaidNodeType: (schema: import("prosemirror-model").Schema) => import("prosemirror-model").NodeType;
+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) => import("prosemirror-model").NodeType;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 };

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

@@ -1,4 +1,4 @@
-import { nodeTypeFactory } from "../../../../utils/schema.js";
+import { nodeTypeFactory } from '../../../../utils/schema';
 export var MermaidAttrs;
 (function (MermaidAttrs) {
     MermaidAttrs["content"] = "content";
@@ -13,4 +13,3 @@ export const MermaidConsts = {
     NodeAttrs: MermaidAttrs,
     nodeType: mermaidNodeType,
 };
-//# sourceMappingURL=const.js.map

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

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

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

@@ -1,7 +1,7 @@
 // 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 { MermaidConsts, mermaidNodeName } from './const';
+export { mermaidNodeName } from './const';
 const MermaidSpecsExtension = (builder, { nodeView }) => {
     builder
         .configureMd((md) => md.use(transform({ runtime: 'mermaid', bundle: false }), {}))
@@ -41,4 +41,3 @@ const MermaidSpecsExtension = (builder, { nodeView }) => {
     }));
 };
 export const MermaidSpecs = Object.assign(MermaidSpecsExtension, MermaidConsts);
-//# sourceMappingURL=index.js.map