npm - @gravity-ui/markdown-editor - Versions diffs - 15.21.0 → 15.22.0 - Mend

@gravity-ui/markdown-editor 15.21.0 → 15.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/build/cjs/extensions/additional/FoldingHeading/plugins/folding.css CHANGED Viewed

@@ -1,15 +1,17 @@
-.pm-h-folding-hidden {
+.ProseMirror .pm-h-folding-hidden,
+.yfm.ProseMirror .pm-h-folding-hidden {
   display: none;
 }
-.pm-h-folding-content {
+.ProseMirror .pm-h-folding-content,
+.yfm.ProseMirror .pm-h-folding-content {
   padding-left: 28px;
 }
-.pm-h-folding-separator {
+.ProseMirror .pm-h-folding-separator,
+.yfm.ProseMirror .pm-h-folding-separator {
   position: relative;
 }
-.pm-h-folding-separator::before {
+.ProseMirror .pm-h-folding-separator::before,
+.yfm.ProseMirror .pm-h-folding-separator::before {
   position: absolute;
   z-index: 1;
   bottom: -4px;
@@ -22,7 +24,8 @@
   mask-size: 12px;
   transform: translateY(80%);
 }
-.pm-h-folding-separator::after {
+.ProseMirror .pm-h-folding-separator::after,
+.yfm.ProseMirror .pm-h-folding-separator::after {
   position: absolute;
   z-index: 1;
   bottom: -8px;
@@ -32,8 +35,8 @@
   content: "";
   border-top: 1px dashed var(--g-color-line-generic);
 }
-.pm-h-folding-label::after {
+.ProseMirror .pm-h-folding-label::after,
+.yfm.ProseMirror .pm-h-folding-label::after {
   position: absolute;
   z-index: 1;
   right: 2px;

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/MermaidView.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ 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";
+import type { MermaidOptions } from "../index.js";
 export declare const cnMermaid: import("@bem-react/classname").ClassNameFormatter;
 export declare const STOP_EVENT_CLASSNAME = "prosemirror-stop-event";
 import "./Mermaid.css";
@@ -13,4 +14,5 @@ export declare const MermaidView: React.FC<{
     getMermaidInstance: () => Mermaid;
     node: Node;
     getPos: () => number | undefined;
+    options: MermaidOptions;
 }>;

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js CHANGED Viewed

@@ -42,15 +42,18 @@ const MermaidPreview = ({ mermaidInstance, text = '', }) => {
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: b('Preview'), children: svg ? (0, jsx_runtime_1.jsx)("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : (0, jsx_runtime_1.jsx)(uikit_1.Loader, {}) }));
 };
-const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
-    const [text, setText] = (0, react_1.useState)(initialText || '');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }), (0, jsx_runtime_1.jsxs)("div", { className: b('Editor'), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TextInput_1.TextAreaFixed, { controlProps: {
+const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled } = (0, react_utils_1.useAutoSave)({
+        initialValue: initialText || '',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)(MermaidPreview, { mermaidInstance: mermaidInstance, text: value }), (0, jsx_runtime_1.jsxs)("div", { className: b('Editor'), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TextInput_1.TextAreaFixed, { controlProps: {
                                 className: exports.STOP_EVENT_CLASSNAME,
-                            }, value: text, onUpdate: (v) => {
-                                setText(v);
-                            }, autoFocus: true }) }), (0, jsx_runtime_1.jsx)("div", { className: b('Controls'), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: onCancel, view: 'flat', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('cancel') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: () => onSave(text), view: 'action', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('save') }) })] }) })] })] }));
+                            }, value: value, onUpdate: handleChange, autoFocus: true }) }), (0, jsx_runtime_1.jsx)("div", { className: b('Controls'), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: onCancel, view: 'flat', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('cancel') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('save') }) })] }) })] })] }));
 };
-const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
+const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance, options }) => {
     const enitityId = node.attrs[const_1.MermaidConsts.NodeAttrs.EntityId];
     const entityKey = (0, react_1.useMemo)(() => SharedState_1.SharedStateKey.define({ name: enitityId }), [enitityId]);
     const [editing, setEditing, unsetEditing] = (0, useSharedEditingState_1.useSharedEditingState)(view, entityKey);
@@ -71,8 +74,7 @@ const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
     if (editing) {
         return ((0, jsx_runtime_1.jsx)(DiagramEditMode, { initialText: node.attrs[const_1.MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [const_1.MermaidConsts.NodeAttrs.content]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(), onDoubleClick: setEditing, children: [(0, jsx_runtime_1.jsx)(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[const_1.MermaidConsts.NodeAttrs.content] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: 's', className: exports.STOP_EVENT_CLASSNAME, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Ellipsis, className: exports.STOP_EVENT_CLASSNAME }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: menuOpen, anchorElement: anchorElement, onOpenChange: closeMenu, placement: "bottom-end", children: (0, jsx_runtime_1.jsxs)(uikit_1.Menu, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { onClick: () => {
                                         setEditing();

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js.map CHANGED Viewed

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

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/NodeView.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export declare class WMermaidNodeView implements NodeView {
     private readonly getPos;
     private readonly renderItem;
     private readonly loadRuntimeScript;
+    private readonly options;
     constructor(node: Node, view: EditorView, getPos: () => number | undefined, opts: MermaidOptions);
     initializeMermaid(): void;
     update(node: Node): boolean;

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/NodeView.js CHANGED Viewed

@@ -15,6 +15,7 @@ class WMermaidNodeView {
     getPos;
     renderItem;
     loadRuntimeScript;
+    options;
     constructor(node, view, getPos, opts) {
         const { loadRuntimeScript } = opts;
         this.node = node;
@@ -24,6 +25,7 @@ class WMermaidNodeView {
         this.view = view;
         this.getPos = getPos;
         this.loadRuntimeScript = loadRuntimeScript;
+        this.options = opts;
         this.initializeMermaid();
         this.renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('mermaid-view', this.renderMermaid.bind(this));
         this.validateEntityId();
@@ -75,7 +77,7 @@ class WMermaidNodeView {
     }
     getMermaidInstance = () => mermaidInstance;
     renderMermaid() {
-        return ((0, jsx_runtime_1.jsx)(uikit_1.Portal, { container: this.dom, children: (0, jsx_runtime_1.jsx)(MermaidView_1.MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }) }));
+        return ((0, jsx_runtime_1.jsx)(uikit_1.Portal, { container: this.dom, children: (0, jsx_runtime_1.jsx)(MermaidView_1.MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos, options: this.options }) }));
     }
 }
 exports.WMermaidNodeView = WMermaidNodeView;

package/build/cjs/extensions/additional/Mermaid/MermaidNodeView/NodeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":";;;;AAAA,6CAAyC;AAKzC,4EAAgF;AAChF,8DAAwE;AAGxE,oDAA4E;AAE5E,kDAAgE;AAEhE,IAAI,eAAwB,CAAC;AAE7B,MAAa,gBAAgB;IAChB,GAAG,CAAc;IAClB,IAAI,CAAO;IACF,IAAI,CAAC;IACL,MAAM,CAAC;IACP,UAAU,CAAC;IACX,iBAAiB,CAAa;~~IAE/C~~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~~GACrB~~,GACG,CACZ,CAAC;IACN,CAAC;CACJ;~~AAhHD~~,~~4CAgHC~~","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n\n constructor(\n node: Node,\n view: EditorView,\n getPos: () => number \| undefined,\n opts: MermaidOptions,\n ) {\n const {loadRuntimeScript} = opts;\n this.node = node;\n this.dom = document.createElement('div');\n this.dom.classList.add('mermaid-container');\n this.dom.contentEditable = 'false';\n this.view = view;\n this.getPos = getPos;\n this.loadRuntimeScript = loadRuntimeScript;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n />\n </Portal>\n );\n }\n}\n"]}
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 {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n private readonly options: MermaidOptions;\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.options = opts;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n options={this.options}\n />\n </Portal>\n );\n }\n}\n"]}

package/build/cjs/extensions/additional/Mermaid/index.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { MermaidAction } from "./MermaidSpecs/const.js";
 export type MermaidOptions = {
     loadRuntimeScript: () => void;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
 };
 export declare const Mermaid: ExtensionAuto<MermaidOptions>;
 declare global {

package/build/cjs/extensions/additional/Mermaid/index.js CHANGED Viewed

@@ -5,14 +5,14 @@ const MermaidNodeView_1 = require("./MermaidNodeView/index.js");
 const MermaidSpecs_1 = require("./MermaidSpecs/index.js");
 const const_1 = require("./MermaidSpecs/const.js");
 const actions_1 = require("./actions.js");
-const Mermaid = (builder, { loadRuntimeScript }) => {
+const Mermaid = (builder, options) => {
     builder.use(MermaidSpecs_1.MermaidSpecs, {
-        nodeView: MermaidNodeViewFactory({ loadRuntimeScript }),
+        nodeView: MermaidNodeViewFactory(options),
     });
     builder.addAction(const_1.MermaidAction, () => actions_1.addMermaid);
 };
 exports.Mermaid = Mermaid;
-const MermaidNodeViewFactory = ({ loadRuntimeScript }) => () => (node, view, getPos) => {
-    return new MermaidNodeView_1.WMermaidNodeView(node, view, getPos, { loadRuntimeScript });
+const MermaidNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new MermaidNodeView_1.WMermaidNodeView(node, view, getPos, options);
 };
 //# sourceMappingURL=index.js.map

package/build/cjs/extensions/additional/Mermaid/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":";;;AAEA,gEAAmD;AACnD,0DAA4C;AAC5C,mDAAmD;AACnD,0CAAqC;~~AAI9B~~,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE;~~IACnF~~,OAAO,CAAC,GAAG,CAAC,2BAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC;~~KACxD~~,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,qBAAa,EAAE,GAAG,EAAE,CAAC,oBAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AANW,QAAA,OAAO,WAMlB;AAEF,MAAM,sBAAsB,~~GAGxB~~,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE,~~CACxB~~,GAAG,EAAE,~~CACL~~,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~IACnB~~,OAAO,IAAI,kCAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC,CAAC;~~AACzE~~,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {loadRuntimeScript: () => void};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, ~~{loadRuntimeScript}~~) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(~~{loadRuntimeScript}~~),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor ~~=\n~~ (~~{loadRuntimeScript}~~) ~~=>\n~~ () ~~=>\n~~ (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, ~~{loadRuntimeScript}~~);\n };\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":";;;AAEA,gEAAmD;AACnD,0DAA4C;AAC5C,mDAAmD;AACnD,0CAAqC;AAU9B,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;IACvE,OAAO,CAAC,GAAG,CAAC,2BAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO,CAAC;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,qBAAa,EAAE,GAAG,EAAE,CAAC,oBAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AANW,QAAA,OAAO,WAMlB;AAEF,MAAM,sBAAsB,GAEwB,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1F,OAAO,IAAI,kCAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {\n loadRuntimeScript: () => void;\n autoSave?: {\n enabled: boolean;\n delay?: number;\n };\n};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, options) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(options),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, options);\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}

package/build/cjs/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js CHANGED Viewed

@@ -139,15 +139,19 @@ const YfmHtmlBlockPreview = ({ html, onClick, config }) => {
             height,
         }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
 };
-const CodeEditMode = ({ initialText, onSave, onCancel }) => {
-    const [text, setText] = (0, react_1.useState)(initialText || '\n');
+const CodeEditMode = ({ initialText, onSave, onCancel, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled } = (0, hooks_1.useAutoSave)({
+        initialValue: initialText || '\n',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
     return ((0, jsx_runtime_1.jsx)("div", { className: b({ editing: true }), children: (0, jsx_runtime_1.jsxs)("div", { className: b('editor'), children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextAreaFixed, { controlProps: {
                         className: exports.STOP_EVENT_CLASSNAME,
-                    }, value: text, onUpdate: (v) => {
-                        setText(v);
-                    }, autoFocus: true }), (0, jsx_runtime_1.jsx)("div", { className: b('controls'), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: onCancel, view: 'flat', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('cancel') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: () => onSave(text), view: 'action', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('save') }) })] }) })] }) }));
+                    }, value: value, onUpdate: handleChange, autoFocus: true }), (0, jsx_runtime_1.jsx)("div", { className: b('controls'), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: onCancel, view: 'flat', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('cancel') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('save') }) })] }) })] }) }));
 };
-const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
+const YfmHtmlBlockView = ({ onChange, node, getPos, view, options }) => {
+    const { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' } = options;
     const entityId = node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = (0, react_1.useMemo)(() => SharedState_1.SharedStateKey.define({ name: entityId }), [entityId]);
     const config = useConfig?.();
@@ -157,8 +161,7 @@ const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig,
     if (editing) {
         return ((0, jsx_runtime_1.jsx)(CodeEditMode, { initialText: node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {

package/build/cjs/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js.map CHANGED Viewed

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

package/build/cjs/extensions/additional/YfmHtmlBlock/index.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { YfmHtmlBlockAction } from "./YfmHtmlBlockSpecs/const.js";
 export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
 }
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/cjs/extensions/additional/YfmHtmlBlock/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/YfmHtmlBlock/index.ts"],"names":[],"mappings":";;;AAKA,0EAA6D;AAC7D,oEAAsD;AACtD,wDAA6D;AAC7D,0CAA0C;~~AAOnC~~,MAAM,YAAY,GAAuC,CAC5D,OAAO,EACP,EAAC,SAAS,EAAE,CAAC,EAAE,GAAG,OAAO,EAAC,EAC5B,EAAE;IACA,OAAO,CAAC,GAAG,CAAC,qCAAiB,EAAE;QAC3B,QAAQ,EAAE,2BAA2B,CAAC,OAAO,CAAC;QAC9C,GAAG,OAAO;KACb,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,0BAAkB,EAAE,GAAG,EAAE,CAAC,yBAAe,CAAC,CAAC;AACjE,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB;AAEF,MAAM,2BAA2B,GAEmB,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1F,OAAO,IAAI,4CAAqB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;AACpE,CAAC,CAAC","sourcesContent":["import type {PluginOptions} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\n\nimport type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WYfmHtmlBlockNodeView} from './YfmHtmlBlockNodeView';\nimport {YfmHtmlBlockSpecs} from './YfmHtmlBlockSpecs';\nimport {YfmHtmlBlockAction} from './YfmHtmlBlockSpecs/const';\nimport {addYfmHtmlBlock} from './actions';\n\nexport interface YfmHtmlBlockOptions\n extends Omit<PluginOptions, 'runtimeJsPath' \| 'containerClasses' \| 'bundle' \| 'embeddingMode'> {\n useConfig?: () => IHTMLIFrameElementConfig \| undefined;\n}\n\nexport const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (\n builder,\n {useConfig: _, ...options},\n) => {\n builder.use(YfmHtmlBlockSpecs, {\n nodeView: YfmHtmlBlockNodeViewFactory(options),\n ...options,\n });\n\n builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);\n};\n\nconst YfmHtmlBlockNodeViewFactory: (\n options: YfmHtmlBlockOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {\n return new WYfmHtmlBlockNodeView({node, view, getPos, options});\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [YfmHtmlBlockAction]: Action;\n }\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/YfmHtmlBlock/index.ts"],"names":[],"mappings":";;;AAKA,0EAA6D;AAC7D,oEAAsD;AACtD,wDAA6D;AAC7D,0CAA0C;AAWnC,MAAM,YAAY,GAAuC,CAC5D,OAAO,EACP,EAAC,SAAS,EAAE,CAAC,EAAE,GAAG,OAAO,EAAC,EAC5B,EAAE;IACA,OAAO,CAAC,GAAG,CAAC,qCAAiB,EAAE;QAC3B,QAAQ,EAAE,2BAA2B,CAAC,OAAO,CAAC;QAC9C,GAAG,OAAO;KACb,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,0BAAkB,EAAE,GAAG,EAAE,CAAC,yBAAe,CAAC,CAAC;AACjE,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB;AAEF,MAAM,2BAA2B,GAEmB,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1F,OAAO,IAAI,4CAAqB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;AACpE,CAAC,CAAC","sourcesContent":["import type {PluginOptions} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\n\nimport type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WYfmHtmlBlockNodeView} from './YfmHtmlBlockNodeView';\nimport {YfmHtmlBlockSpecs} from './YfmHtmlBlockSpecs';\nimport {YfmHtmlBlockAction} from './YfmHtmlBlockSpecs/const';\nimport {addYfmHtmlBlock} from './actions';\n\nexport interface YfmHtmlBlockOptions\n extends Omit<PluginOptions, 'runtimeJsPath' \| 'containerClasses' \| 'bundle' \| 'embeddingMode'> {\n useConfig?: () => IHTMLIFrameElementConfig \| undefined;\n autoSave?: {\n enabled: boolean;\n delay?: number; // по умолчанию 1000ms\n };\n}\n\nexport const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (\n builder,\n {useConfig: _, ...options},\n) => {\n builder.use(YfmHtmlBlockSpecs, {\n nodeView: YfmHtmlBlockNodeViewFactory(options),\n ...options,\n });\n\n builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);\n};\n\nconst YfmHtmlBlockNodeViewFactory: (\n options: YfmHtmlBlockOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {\n return new WYfmHtmlBlockNodeView({node, view, getPos, options});\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [YfmHtmlBlockAction]: Action;\n }\n }\n}\n"]}

package/build/cjs/extensions/base/BaseSchema/BaseSchemaSpecs/index.js CHANGED Viewed

@@ -70,7 +70,8 @@ const BaseSchemaSpecs = (builder, opts) => {
                     }
                 }
                 if (!isParentEmpty) {
-                    state.write('&nbsp;\n\n');
+                    state.write('&nbsp;\n');
+                    state.write('\n');
                 }
             }
             else {

package/build/cjs/extensions/base/BaseSchema/BaseSchemaSpecs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/base/BaseSchema/BaseSchemaSpecs/index.ts"],"names":[],"mappings":"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~~YAAY~~,CAAC,CAAC;~~gBAC9B~~,CAAC;YACL,CAAC;iBAAM,CAAC;gBACJ,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBACzB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACL,CAAC;KACJ,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC;~~AAxEW~~,QAAA,eAAe,~~mBAwE1B~~","sourcesContent":["import type {NodeSpec} from 'prosemirror-model';\n\nimport {isEmptyString} from 'src/utils';\n\nimport type {ExtensionAuto} from '../../../../core';\nimport {nodeTypeFactory} from '../../../../utils/schema';\n\nexport enum BaseNode {\n Doc = 'doc',\n Text = 'text',\n Paragraph = 'paragraph',\n}\n\nconst paragraphLineNumberAttr = 'data-line';\n\nexport const pType = nodeTypeFactory(BaseNode.Paragraph);\n\nexport type BaseSchemaSpecsOptions = {\n // This cannot be passed through placeholder option of BehaviorPreset because BasePreset initializes first\n paragraphPlaceholder?: NonNullable<NodeSpec['placeholder']>['content'];\n preserveEmptyRows?: boolean;\n};\n\nexport const BaseSchemaSpecs: ExtensionAuto<BaseSchemaSpecsOptions> = (builder, opts) => {\n builder\n .addNode(BaseNode.Doc, () => ({\n spec: {\n content: 'block+',\n },\n fromMd: {tokenSpec: {name: BaseNode.Doc, type: 'block', ignore: true}},\n toMd: () => {\n throw new Error('Unexpected toMd() call on doc node');\n },\n }))\n .addNode(BaseNode.Text, () => ({\n spec: {\n group: 'inline',\n },\n fromMd: {tokenSpec: {name: BaseNode.Text, type: 'node', ignore: true}},\n toMd: (state, node, parent) => {\n const {escapeText} = parent.type.spec;\n state.text(node.text ?? '', escapeText ?? !state.isAutolink);\n },\n }))\n .addNode(BaseNode.Paragraph, () => ({\n spec: {\n attrs: {[paragraphLineNumberAttr]: {default: null}},\n content: 'inline',\n group: 'block',\n parseDOM: [{tag: 'p'}],\n toDOM(node) {\n const lineNumber = node.attrs[paragraphLineNumberAttr];\n\n return [\n 'p',\n lineNumber === null ? {} : {[paragraphLineNumberAttr]: lineNumber},\n 0,\n ];\n },\n selectable: true,\n placeholder: opts.paragraphPlaceholder\n ? {\n content: opts.paragraphPlaceholder,\n alwaysVisible: false,\n }\n : undefined,\n },\n fromMd: {tokenSpec: {name: BaseNode.Paragraph, type: 'block'}},\n toMd: (state, node, parent) => {\n /\n An empty line is added only if there is some content in the parent element.\n This is necessary in order to prevent an empty document with empty lines\n */\n if (opts.preserveEmptyRows && isEmptyString(node)) {\n let isParentEmpty = true;\n\n for (let index = 0; index < parent.content.childCount; index++) {\n const parentChild = parent.content.child(index);\n if (\n parentChild.content.size !== 0 \|\|\n parentChild.type.name !== 'paragraph'\n ) {\n isParentEmpty = false;\n }\n }\n\n if (!isParentEmpty) {\n state.write(' \\n\\n');\n }\n } else {\n state.renderInline(node);\n state.closeBlock(node);\n }\n },\n }));\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/base/BaseSchema/BaseSchemaSpecs/index.ts"],"names":[],"mappings":"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","sourcesContent":["import type {NodeSpec} from 'prosemirror-model';\n\nimport {isEmptyString} from 'src/utils';\n\nimport type {ExtensionAuto} from '../../../../core';\nimport {nodeTypeFactory} from '../../../../utils/schema';\n\nexport enum BaseNode {\n Doc = 'doc',\n Text = 'text',\n Paragraph = 'paragraph',\n}\n\nconst paragraphLineNumberAttr = 'data-line';\n\nexport const pType = nodeTypeFactory(BaseNode.Paragraph);\n\nexport type BaseSchemaSpecsOptions = {\n // This cannot be passed through placeholder option of BehaviorPreset because BasePreset initializes first\n paragraphPlaceholder?: NonNullable<NodeSpec['placeholder']>['content'];\n preserveEmptyRows?: boolean;\n};\n\nexport const BaseSchemaSpecs: ExtensionAuto<BaseSchemaSpecsOptions> = (builder, opts) => {\n builder\n .addNode(BaseNode.Doc, () => ({\n spec: {\n content: 'block+',\n },\n fromMd: {tokenSpec: {name: BaseNode.Doc, type: 'block', ignore: true}},\n toMd: () => {\n throw new Error('Unexpected toMd() call on doc node');\n },\n }))\n .addNode(BaseNode.Text, () => ({\n spec: {\n group: 'inline',\n },\n fromMd: {tokenSpec: {name: BaseNode.Text, type: 'node', ignore: true}},\n toMd: (state, node, parent) => {\n const {escapeText} = parent.type.spec;\n state.text(node.text ?? '', escapeText ?? !state.isAutolink);\n },\n }))\n .addNode(BaseNode.Paragraph, () => ({\n spec: {\n attrs: {[paragraphLineNumberAttr]: {default: null}},\n content: 'inline',\n group: 'block',\n parseDOM: [{tag: 'p'}],\n toDOM(node) {\n const lineNumber = node.attrs[paragraphLineNumberAttr];\n\n return [\n 'p',\n lineNumber === null ? {} : {[paragraphLineNumberAttr]: lineNumber},\n 0,\n ];\n },\n selectable: true,\n placeholder: opts.paragraphPlaceholder\n ? {\n content: opts.paragraphPlaceholder,\n alwaysVisible: false,\n }\n : undefined,\n },\n fromMd: {tokenSpec: {name: BaseNode.Paragraph, type: 'block'}},\n toMd: (state, node, parent) => {\n /\n An empty line is added only if there is some content in the parent element.\n This is necessary in order to prevent an empty document with empty lines\n */\n if (opts.preserveEmptyRows && isEmptyString(node)) {\n let isParentEmpty = true;\n\n for (let index = 0; index < parent.content.childCount; index++) {\n const parentChild = parent.content.child(index);\n if (\n parentChild.content.size !== 0 \|\|\n parentChild.type.name !== 'paragraph'\n ) {\n isParentEmpty = false;\n }\n }\n\n if (!isParentEmpty) {\n state.write(' \\n');\n state.write('\\n');\n }\n } else {\n state.renderInline(node);\n state.closeBlock(node);\n }\n },\n }));\n};\n"]}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export type FloatingMenuProps = {
     canDrag: boolean;
     anchorElement: Element;
     dropdownItems: DropdownMenuProps<unknown>['items'];
-    switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' | 'onMouseMove' | 'onMouseUp'>;
+    switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'>;
     onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;
 };
 export declare const FloatingMenu: React.FC<FloatingMenuProps>;

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingMenu.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx"],"names":[],"mappings":";;;;AAAA,iCAA+B;AAE/B,6CAAuF;AACvF,6CAO2B;AAE3B,2EAAgD;AAEhD,6DAAwE;AAExE,MAAM,WAAW,GAAiC;IAC9C,QAAQ,EAAE,CAAC,GAAG;CACjB,CAAC;~~AAWK~~,MAAM,YAAY,GAAgC,SAAS,oBAAoB,CAAC,KAAK;IACxF,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,YAAY,EAAC,GACpF,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,IAAA,6BAAe,EAAC,KAAK,CAAC,CAAC;IAErE,MAAM,cAAc,GAAG,YAAY,IAAI,SAAS,CAAC;IACjD,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,CAAC;IAEpC,OAAO,CACH,uBAAC,6BAAa,IACV,IAAI,QACJ,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACrC,cAAc,EAAE;YACZ,UAAU,EAAE,SAAS;SACxB,EACD,KAAK,EAAE;YACH,eAAe,EAAE,aAAa;SACjC,YAED,uBAAC,oBAAY,IACT,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE;gBACtB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACvB,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;YAC1B,CAAC,EACD,cAAc,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CAC/B,uBAAC,YAAI,IACD,aAAa,QACb,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE;oBACH,YAAY,EAAE,2BAA2B;oBACzC,eAAe,EAAE,cAAc;wBAC3B,CAAC,CAAC,gCAAgC;wBAClC,CAAC,CAAC,SAAS;iBAClB,EACD,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,YAE1B,uBAAC,cAAM,IACH,KAAK,EAAE;wBACH,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;wBACpC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;wBAClD,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;wBACvD,uBAAuB,EAAE,cAAc;4BACnC,CAAC,CAAC,SAAS;4BACX,CAAC,CAAC,gCAAgC;qBACzC,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,EACnD,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EACrD,IAAI,EAAC,IAAI,EACT,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,2BAA2B,KAClE,aAAa,KACb,kBAAkB,YAErB,cAAc,CAAC,CAAC,CAAC,CACd,uBAAC,YAAI,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAU,CAAC,CAAC,CAAC,gBAAU,GAAI,CACpD,CAAC,CAAC,CAAC,CACA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,WAAW;qBACxC,GACI,GACN,CACV,EACD,UAAU,EAAE;gBACR,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc;aACxD,EACD,SAAS,EAAE,EAAC,EAAE,EAAE,kBAAkB,OAAO,OAAO,EAAC,EACjD,KAAK,EAAE,aAAa,GACtB,GACU,CACnB,CAAC;AACN,CAAC,CAAC;AA3EW,QAAA,YAAY,gBA2EvB","sourcesContent":["import {useState} from 'react';\n\nimport {Ellipsis as DotsColumn, GripHorizontal as GripColumn} from '@gravity-ui/icons';\nimport {\n Button,\n type ButtonButtonProps,\n DropdownMenu,\n type DropdownMenuProps,\n Flex,\n Icon,\n} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nimport {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';\n\nconst popupOffset: FloatingPopupProps['offset'] = {\n mainAxis: -9.5,\n};\n\nexport type FloatingMenuProps = {\n dirtype: 'row' \| 'column';\n canDrag: boolean;\n anchorElement: Element;\n dropdownItems: DropdownMenuProps<unknown>['items'];\n switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' \| 'onMouseMove' \| 'onMouseUp'>;\n onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;\n};\n\nexport const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloatingMenu(props) {\n const {dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle} =\n props;\n\n const [isMenuOpened, setMenuOpened] = useState(false);\n const [isHovered, setHovered, unsetHovered] = useBooleanState(false);\n\n const showActionView = isMenuOpened \|\| isHovered;\n const isRowType = dirtype === 'row';\n\n return (\n <FloatingPopup\n open\n offset={popupOffset}\n anchorElement={anchorElement}\n placement={isRowType ? 'left' : 'top'}\n floatingStyles={{\n lineHeight: 'initial',\n }}\n style={{\n backgroundColor: 'transparent',\n }}\n >\n <DropdownMenu\n onOpenToggle={(...args) => {\n setMenuOpened(...args);\n onOpenToggle(...args);\n }}\n renderSwitcher={(switcherProps) => (\n <Flex\n centerContent\n width={20} // xs button\n height={20} // xs button\n style={{\n borderRadius: 'var(--g-border-radius-xs)',\n backgroundColor: showActionView\n ? 'var(--g-color-base-background)'\n : undefined,\n }}\n onMouseEnter={setHovered}\n onMouseLeave={unsetHovered}\n >\n <Button\n style={{\n cursor: canDrag ? 'grab' : undefined,\n transform: isRowType ? 'rotate(90deg)' : undefined,\n '--g-button-height': showActionView ? undefined : '5px',\n '--_--background-color': showActionView\n ? undefined\n : 'var(--g-color-base-background)',\n }}\n view={isMenuOpened ? 'outlined-action' : 'outlined'}\n pin={showActionView ? 'round-round' : 'circle-circle'}\n size=\"xs\"\n qa={isRowType ? 'g-md-yfm-table-row-btn' : 'g-md-yfm-table-column-btn'}\n {...switcherProps}\n {...switcherMouseProps}\n >\n {showActionView ? (\n <Icon data={canDrag ? GripColumn : DotsColumn} />\n ) : (\n String.fromCharCode(8194) // en space\n )}\n </Button>\n </Flex>\n )}\n popupProps={{\n zIndex: 1010,\n placement: isRowType ? 'right-start' : 'bottom-start',\n }}\n menuProps={{qa: `g-md-yfm-table-${dirtype}-menu`}}\n items={dropdownItems}\n />\n </FloatingPopup>\n );\n};\n"]}
1	+ {"version":3,"file":"FloatingMenu.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useState} from 'react';\n\nimport {Ellipsis as DotsColumn, GripHorizontal as GripColumn} from '@gravity-ui/icons';\nimport {\n Button,\n type ButtonButtonProps,\n DropdownMenu,\n type DropdownMenuProps,\n Flex,\n Icon,\n} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nimport {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';\n\nconst popupOffset: FloatingPopupProps['offset'] = {\n mainAxis: -9.5,\n};\n\nexport type FloatingMenuProps = {\n dirtype: 'row' \| 'column';\n canDrag: boolean;\n anchorElement: Element;\n dropdownItems: DropdownMenuProps<unknown>['items'];\n switcherMouseProps?: Pick<\n ButtonButtonProps,\n 'onMouseDown' \| 'onMouseMove' \| 'onMouseUp' \| 'onMouseLeave'\n >;\n onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;\n};\n\nexport const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloatingMenu(props) {\n const {dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle} =\n props;\n\n const [isMenuOpened, setMenuOpened] = useState(false);\n const [isHovered, setHovered, unsetHovered] = useBooleanState(false);\n\n const showActionView = isMenuOpened \|\| isHovered;\n const isRowType = dirtype === 'row';\n\n return (\n <FloatingPopup\n open\n offset={popupOffset}\n anchorElement={anchorElement}\n placement={isRowType ? 'left' : 'top'}\n floatingStyles={{\n lineHeight: 'initial',\n }}\n style={{\n backgroundColor: 'transparent',\n }}\n >\n <DropdownMenu\n onOpenToggle={(...args) => {\n setMenuOpened(...args);\n onOpenToggle(...args);\n }}\n renderSwitcher={(switcherProps) => (\n <Flex\n centerContent\n width={20} // xs button\n height={20} // xs button\n style={{\n borderRadius: 'var(--g-border-radius-xs)',\n backgroundColor: showActionView\n ? 'var(--g-color-base-background)'\n : undefined,\n }}\n onMouseEnter={setHovered}\n onMouseLeave={unsetHovered}\n >\n <Button\n style={{\n cursor: canDrag ? 'grab' : undefined,\n transform: isRowType ? 'rotate(90deg)' : undefined,\n '--g-button-height': showActionView ? undefined : '5px',\n '--_--background-color': showActionView\n ? undefined\n : 'var(--g-color-base-background)',\n }}\n view={isMenuOpened ? 'outlined-action' : 'outlined'}\n pin={showActionView ? 'round-round' : 'circle-circle'}\n size=\"xs\"\n qa={isRowType ? 'g-md-yfm-table-row-btn' : 'g-md-yfm-table-column-btn'}\n {...switcherProps}\n {...switcherMouseProps}\n >\n {showActionView ? (\n <Icon data={canDrag ? GripColumn : DotsColumn} />\n ) : (\n String.fromCharCode(8194) // en space\n )}\n </Button>\n </Flex>\n )}\n popupProps={{\n zIndex: 1010,\n placement: isRowType ? 'right-start' : 'bottom-start',\n }}\n menuProps={{qa: `g-md-yfm-table-${dirtype}-menu`}}\n items={dropdownItems}\n />\n </FloatingPopup>\n );\n};\n"]}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.js CHANGED Viewed

@@ -57,6 +57,7 @@ const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multipl
     ]);
     return ((0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: acnhorElement, switcherMouseProps: dndHandler
             ? {
+                onMouseLeave: dndHandler.control_handleMouseLeave,
                 onMouseDown: dndHandler.control_handleMouseDown,
                 onMouseMove: dndHandler.control_handleMouseMove,
                 onMouseUp: dndHandler.control_handleMouseUp,

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingMenuControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8B;AAE9B,6CAQ2B;AAC3B,6CAAuC;AAEvC,4EAAwC;AAGxC,kEAAkF;AAe3E,MAAM,mBAAmB,GAC5B,SAAS,2BAA2B,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,GACrB;IACG,MAAM,aAAa,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CACD;QACI;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,aAAa,CAAC;gBAChC,EAAE,EAAE,6BAA6B,IAAI,SAAS;gBAC9C,MAAM,EAAE,mBAAmB;gBAC3B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,eAAO,CAAC,CAAC,CAAC,iBAAS,GAAI;aAClE;YACD;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,YAAY,CAAC;gBAC/B,EAAE,EAAE,6BAA6B,IAAI,QAAQ;gBAC7C,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAS,CAAC,CAAC,CAAC,kBAAU,GAAI;aACrE;SACJ;QACD;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,aAAa,CAAC;gBACzB,EAAE,EAAE,kBAAkB,IAAI,cAAc;gBACxC,MAAM,EAAE,iBAAiB;gBACzB,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,mBAAU,GAAI;aACxC;SACJ;QACD;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,UAAU,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAC1D,EAAE,EAAE,gCAAgC,IAAI,EAAE;gBAC1C,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,aAAK,GAAI;aACnC;YACD;gBACI,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,IAAA,gBAAI,EAAC,cAAc,CAAC;gBAC1B,EAAE,EAAE,oCAAoC;gBACxC,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,GAAI;aACtC;SACJ;KACyC,EAClD;QACI,IAAI;QACJ,QAAQ;QACR,iBAAiB;QACjB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,kBAAkB;KACrB,CACJ,CAAC;IAEF,OAAO,CACH,uBAAC,2BAAY,IACT,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,EAClD,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EACd,UAAU;YACN,CAAC,CAAC;gBACI,WAAW,EAAE,UAAU,CAAC,uBAAuB;gBAC/C,WAAW,EAAE,UAAU,CAAC,uBAAuB;gBAC/C,SAAS,EAAE,UAAU,CAAC,qBAAqB;aAC9C;YACH,CAAC,CAAC,SAAS,EAEnB,aAAa,EAAE,aAAa,GAC9B,CACL,CAAC;AACN,CAAC,CAAC;~~AAnFO~~,QAAA,mBAAmB,~~uBAmF1B~~","sourcesContent":["import {useMemo} from 'react';\n\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n BroomMotion as ClearCells,\n TrashBin,\n Xmark,\n} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/yfm-table';\n\nimport type {DnDControlHandler} from '../../dnd/dnd';\nimport {FloatingMenu, type FloatingMenuProps} from '../FloatingMenu/FloatingMenu';\n\nexport type FloatingMenuControlProps = {\n acnhorElement: Element;\n multiple: boolean;\n type: FloatingMenuProps['dirtype'];\n dndHandler?: DnDControlHandler;\n onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];\n onClearCellsClick: () => void;\n onInsertBeforeClick: () => void;\n onInsertAfterClick: () => void;\n onRemoveRangeClick: () => void;\n onRemoveTableClick: () => void;\n};\n\nexport const FloatingMenuControl: React.FC<FloatingMenuControlProps> =\n function YfmTableFloatingMenuControl({\n type,\n multiple,\n dndHandler,\n acnhorElement,\n onMenuOpenToggle,\n onClearCellsClick,\n onInsertBeforeClick,\n onInsertAfterClick,\n onRemoveRangeClick,\n onRemoveTableClick,\n }) {\n const dropdownItems = useMemo<FloatingMenuProps['dropdownItems']>(\n () =>\n [\n [\n {\n text: i18n(`${type}.add.before`),\n qa: `g-md-yfm-table-action-add-${type}-before`,\n action: onInsertBeforeClick,\n iconStart: <Icon data={type === 'row' ? ArrowUp : ArrowLeft} />,\n },\n {\n text: i18n(`${type}.add.after`),\n qa: `g-md-yfm-table-action-add-${type}-after`,\n action: onInsertAfterClick,\n iconStart: <Icon data={type === 'row' ? ArrowDown : ArrowRight} />,\n },\n ],\n [\n {\n text: i18n('cells.clear'),\n qa: `g-md-yfm-table-${type}-clear-cells`,\n action: onClearCellsClick,\n iconStart: <Icon data={ClearCells} />,\n },\n ],\n [\n {\n text: i18n(`${type}.remove${multiple ? '.multiple' : ''}`),\n qa: `g-md-yfm-table-action-remove-${type}`,\n action: onRemoveRangeClick,\n iconStart: <Icon data={Xmark} />,\n },\n {\n theme: 'danger',\n text: i18n('table.remove'),\n qa: 'g-md-yfm-table-action-remove-table',\n action: onRemoveTableClick,\n iconStart: <Icon data={TrashBin} />,\n },\n ],\n ] satisfies FloatingMenuProps['dropdownItems'],\n [\n type,\n multiple,\n onClearCellsClick,\n onInsertAfterClick,\n onInsertBeforeClick,\n onRemoveRangeClick,\n onRemoveTableClick,\n ],\n );\n\n return (\n <FloatingMenu\n dirtype={type}\n canDrag={dndHandler ? dndHandler.canDrag() : false}\n onOpenToggle={onMenuOpenToggle}\n anchorElement={acnhorElement}\n switcherMouseProps={\n dndHandler\n ? {\n onMouseDown: dndHandler.control_handleMouseDown,\n onMouseMove: dndHandler.control_handleMouseMove,\n onMouseUp: dndHandler.control_handleMouseUp,\n }\n : undefined\n }\n dropdownItems={dropdownItems}\n />\n );\n };\n"]}
1	+ {"version":3,"file":"FloatingMenuControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8B;AAE9B,6CAQ2B;AAC3B,6CAAuC;AAEvC,4EAAwC;AAGxC,kEAAkF;AAe3E,MAAM,mBAAmB,GAC5B,SAAS,2BAA2B,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,GACrB;IACG,MAAM,aAAa,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CACD;QACI;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,aAAa,CAAC;gBAChC,EAAE,EAAE,6BAA6B,IAAI,SAAS;gBAC9C,MAAM,EAAE,mBAAmB;gBAC3B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,eAAO,CAAC,CAAC,CAAC,iBAAS,GAAI;aAClE;YACD;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,YAAY,CAAC;gBAC/B,EAAE,EAAE,6BAA6B,IAAI,QAAQ;gBAC7C,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAS,CAAC,CAAC,CAAC,kBAAU,GAAI;aACrE;SACJ;QACD;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,aAAa,CAAC;gBACzB,EAAE,EAAE,kBAAkB,IAAI,cAAc;gBACxC,MAAM,EAAE,iBAAiB;gBACzB,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,mBAAU,GAAI;aACxC;SACJ;QACD;YACI;gBACI,IAAI,EAAE,IAAA,gBAAI,EAAC,GAAG,IAAI,UAAU,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAC1D,EAAE,EAAE,gCAAgC,IAAI,EAAE;gBAC1C,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,aAAK,GAAI;aACnC;YACD;gBACI,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,IAAA,gBAAI,EAAC,cAAc,CAAC;gBAC1B,EAAE,EAAE,oCAAoC;gBACxC,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,GAAI;aACtC;SACJ;KACyC,EAClD;QACI,IAAI;QACJ,QAAQ;QACR,iBAAiB;QACjB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,kBAAkB;KACrB,CACJ,CAAC;IAEF,OAAO,CACH,uBAAC,2BAAY,IACT,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,EAClD,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EACd,UAAU;YACN,CAAC,CAAC;gBACI,YAAY,EAAE,UAAU,CAAC,wBAAwB;gBACjD,WAAW,EAAE,UAAU,CAAC,uBAAuB;gBAC/C,WAAW,EAAE,UAAU,CAAC,uBAAuB;gBAC/C,SAAS,EAAE,UAAU,CAAC,qBAAqB;aAC9C;YACH,CAAC,CAAC,SAAS,EAEnB,aAAa,EAAE,aAAa,GAC9B,CACL,CAAC;AACN,CAAC,CAAC;AApFO,QAAA,mBAAmB,uBAoF1B","sourcesContent":["import {useMemo} from 'react';\n\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n BroomMotion as ClearCells,\n TrashBin,\n Xmark,\n} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/yfm-table';\n\nimport type {DnDControlHandler} from '../../dnd/dnd';\nimport {FloatingMenu, type FloatingMenuProps} from '../FloatingMenu/FloatingMenu';\n\nexport type FloatingMenuControlProps = {\n acnhorElement: Element;\n multiple: boolean;\n type: FloatingMenuProps['dirtype'];\n dndHandler?: DnDControlHandler;\n onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];\n onClearCellsClick: () => void;\n onInsertBeforeClick: () => void;\n onInsertAfterClick: () => void;\n onRemoveRangeClick: () => void;\n onRemoveTableClick: () => void;\n};\n\nexport const FloatingMenuControl: React.FC<FloatingMenuControlProps> =\n function YfmTableFloatingMenuControl({\n type,\n multiple,\n dndHandler,\n acnhorElement,\n onMenuOpenToggle,\n onClearCellsClick,\n onInsertBeforeClick,\n onInsertAfterClick,\n onRemoveRangeClick,\n onRemoveTableClick,\n }) {\n const dropdownItems = useMemo<FloatingMenuProps['dropdownItems']>(\n () =>\n [\n [\n {\n text: i18n(`${type}.add.before`),\n qa: `g-md-yfm-table-action-add-${type}-before`,\n action: onInsertBeforeClick,\n iconStart: <Icon data={type === 'row' ? ArrowUp : ArrowLeft} />,\n },\n {\n text: i18n(`${type}.add.after`),\n qa: `g-md-yfm-table-action-add-${type}-after`,\n action: onInsertAfterClick,\n iconStart: <Icon data={type === 'row' ? ArrowDown : ArrowRight} />,\n },\n ],\n [\n {\n text: i18n('cells.clear'),\n qa: `g-md-yfm-table-${type}-clear-cells`,\n action: onClearCellsClick,\n iconStart: <Icon data={ClearCells} />,\n },\n ],\n [\n {\n text: i18n(`${type}.remove${multiple ? '.multiple' : ''}`),\n qa: `g-md-yfm-table-action-remove-${type}`,\n action: onRemoveRangeClick,\n iconStart: <Icon data={Xmark} />,\n },\n {\n theme: 'danger',\n text: i18n('table.remove'),\n qa: 'g-md-yfm-table-action-remove-table',\n action: onRemoveTableClick,\n iconStart: <Icon data={TrashBin} />,\n },\n ],\n ] satisfies FloatingMenuProps['dropdownItems'],\n [\n type,\n multiple,\n onClearCellsClick,\n onInsertAfterClick,\n onInsertBeforeClick,\n onRemoveRangeClick,\n onRemoveTableClick,\n ],\n );\n\n return (\n <FloatingMenu\n dirtype={type}\n canDrag={dndHandler ? dndHandler.canDrag() : false}\n onOpenToggle={onMenuOpenToggle}\n anchorElement={acnhorElement}\n switcherMouseProps={\n dndHandler\n ? {\n onMouseLeave: dndHandler.control_handleMouseLeave,\n onMouseDown: dndHandler.control_handleMouseDown,\n onMouseMove: dndHandler.control_handleMouseMove,\n onMouseUp: dndHandler.control_handleMouseUp,\n }\n : undefined\n }\n dropdownItems={dropdownItems}\n />\n );\n };\n"]}