npm - @gravity-ui/markdown-editor - Versions diffs - 15.25.0 → 15.26.1 - Mend

@gravity-ui/markdown-editor 15.25.0 → 15.26.1

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 (142) hide show

package/build/cjs/extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../../../src","sources":["extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/index.tsx"],"names":[],"mappings":";;;;~~AAAA~~,6CAA2C;AAC3C,~~6CAA4D~~;~~AAI5D~~,sEAAmD;AACnD,0EAAwE;AACxE,6EAAyE;AACzE,~~6DAAgE~~;~~AAChE~~,qEAA4D;AAC5D,kEAAsE;AAEtE,6BAA4B;~~AAU5B~~,MAAM,QAAQ,GAA4B,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAC,EAAE,EAAE;IAClF,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,kCAAiB,CAAC,IAAI,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IAEpC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,IAAI,KAAK,KAAK;YAAE,OAAO;QAE3B,IAAI,CAAC,QAAQ,CACT,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,EAAE;YACnC,CAAC,kCAAiB,CAAC,IAAI,CAAC,EAAE,IAAI;~~SACjC~~,CAAC,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,cAAM,IACH,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,KAAK,EACX,aAAa,QACb,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,WAAW,EACpB,UAAU,QACV,iBAAiB,EAAE,IAAA,kBAAe,EAAC,eAAe,CAAC,EACnD,cAAc,~~EAAC,+BAA+B~~,~~EAC9C~~,~~SAAS~~,~~EAAC~~,~~gCAAgC~~,EAC1C,kBAAkB,EAAE,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,~~EAAC,+BAA+B~~,~~YAAE~~,IAAA,gBAAI,EAAC,cAAc,CAAC,GAAO,~~CAC9E~~,GAGH,CACL,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,gCAAgC,GAAG,CAC5C,IAAgB,EAChB,SAAyB,EACzB,UAAkC,EAAE,~~EACtC~~,EAAE;IACA,OAAO,IAAI,mCAAqB,CAAC,IAAI,EAAE;QACnC,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,IAAA,8BAAa,EAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC1C,cAAc,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;QACjC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,EAAE,EAAE,CAAC,~~CAC5B~~,uBAAC,iBAAO,IACJ,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EACzB,SAAS,~~EAAC~~,~~yBAAyB~~,~~EACnC~~,IAAI,EAAE;~~gBACF~~;~~oBACI~~;~~wBACI~~,EAAE,EAAE,iBAAiB;~~wBACrB~~,IAAI,EAAE,yBAAe,CAAC,cAAc;~~wBACpC~~,SAAS,EAAE,GAAG,EAAE,CAAC,CACb,uBAAC,QAAQ,IACL,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,SAAS,EACtB,OAAO,EAAE,OAAO,GAClB,CACL;~~wBACD~~,KAAK,EAAE,EAAE;~~qBACZ~~;~~iBACJ~~;~~gBACD~~;~~oBACI~~;wBACI,EAAE,EAAE,mBAAmB;~~wBACvB~~,IAAI,EAAE,EAAC,IAAI,EAAE,gBAAQ,EAAC;~~wBACtB~~,KAAK,EAAE,IAAA,gBAAI,EAAC,QAAQ,CAAC;~~wBACrB~~,IAAI,EAAE,yBAAe,CAAC,YAAY;~~wBAClC~~,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;~~wBACrB~~,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;~~wBACpB~~,IAAI,EAAE,GAAG,EAAE,CACP,IAAA,wBAAU,EAAC;~~4BACP~~,GAAG,EAAE,GAAG;~~4BACR~~,IAAI,EAAE,IAAI;~~4BACV~~,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;~~4BACjB~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;~~yBACrC~~,CAAC;~~qBACT~~;iBACJ~~;aACJ~~,GACH,CACL;KACJ,CAAC,CAAC;AACP,CAAC,CAAC;~~AApDW~~,QAAA,gCAAgC,~~oCAoD3C~~","sourcesContent":["import {TrashBin} from '@gravity-ui/icons';\nimport {Select, type SelectOption} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {i18n} from '../../../../../i18n/codeblock';\nimport {i18n as i18nPlaceholder} from '../../../../../i18n/placeholder';\nimport {BaseTooltipPluginView} from '../../../../../plugins/BaseTooltip';\nimport {Toolbar, ToolbarDataType} from '../../../../../toolbar';\nimport {removeNode} from '../../../../../utils/remove-node';\nimport {CodeBlockNodeAttr, codeBlockType} from '../../CodeBlockSpecs';\n\nimport './TooltipView.scss';\n\ntype CodeMenuProps = {\n view: EditorView;\n pos: number;\n node: Node;\n selectItems: SelectOption[];\n mapping: Record<string, string>;\n};\n\nconst CodeMenu: React.FC<CodeMenuProps> = ({view, pos, node, selectItems, mapping}) => {\n const lang = node.attrs[CodeBlockNodeAttr.Lang];\n const value = mapping[lang] ?? lang;\n\n const handleClick = (type: string) => {\n view.focus();\n if (type === value) return;\n\n view.dispatch(\n view.state.tr.setNodeMarkup(pos, null, {\n [CodeBlockNodeAttr.Lang]: type,\n }),\n );\n };\n\n return (\n <Select\n size=\"m\"\n width=\"max\"\n disablePortal\n value={[value]}\n onUpdate={(v) => handleClick(v[0])}\n options={selectItems}\n filterable\n filterPlaceholder={i18nPlaceholder('select_filter')}\n popupClassName~~=\"g~~-~~md-code-block__select-~~popup\"\n className~~=\"g~~-~~md-code-block__select-~~button\"\n renderEmptyOptions={() => (\n <div className~~=\"g~~-~~md-code-block__select-~~empty\">{i18n('empty_option')}</div>\n )}\n // TODO: in onOpenChange return focus to view.dom after press Esc in Select\n // after https://github.com/gravity-ui/uikit/issues/2075\n />\n );\n};\n\nexport const codeLangSelectTooltipViewCreator = (\n view: EditorView,\n langItems: SelectOption[],\n mapping: Record<string, string> = {},\n) => {\n return new BaseTooltipPluginView(view, {\n idPrefix: 'code-block-tooltip',\n nodeType: codeBlockType(view.state.schema),\n popupPlacement: ['bottom', 'top'],\n content: (view, {node, pos}) => (\n <Toolbar\n editor={{}}\n focus={() => view.focus()}\n className~~=\"g-md-code-block-toolbar~~\"\n data={[\n [\n {\n id: 'code-block-type',\n type: ToolbarDataType.ReactComponent,\n component: () => (\n <CodeMenu\n view={view}\n pos={pos}\n node={node}\n selectItems={langItems}\n mapping={mapping}\n />\n ),\n width: 28,\n },\n ],\n [\n {\n id: 'code-block-remove',\n icon: {data: TrashBin},\n title: i18n('remove'),\n type: ToolbarDataType.SingleButton,\n isActive: () => false,\n isEnable: () => true,\n exec: () =>\n removeNode({\n pos: pos,\n node: node,\n tr: view.state.tr,\n dispatch: view.dispatch.bind(view),\n }),\n },\n ],\n ]}\n />\n ),\n });\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../../../src","sources":["extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {ChangeEventHandler} from 'react';\n\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Checkbox, Select, type SelectOption} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from 'src/classname';\n\nimport {i18n} from '../../../../../i18n/codeblock';\nimport {i18n as i18nPlaceholder} from '../../../../../i18n/placeholder';\nimport {BaseTooltipPluginView} from '../../../../../plugins/BaseTooltip';\nimport {Toolbar, type ToolbarData, ToolbarDataType} from '../../../../../toolbar';\nimport {removeNode} from '../../../../../utils/remove-node';\nimport {CodeBlockNodeAttr, codeBlockType} from '../../CodeBlockSpecs';\n\nimport './TooltipView.scss';\n\nconst bCodeBlock = cn('code-block');\nconst bToolbar = cn('code-block-toolbar');\n\ntype CodeMenuProps = {\n view: EditorView;\n pos: number;\n node: Node;\n selectItems: SelectOption[];\n mapping: Record<string, string>;\n};\n\nconst CodeMenu: React.FC<CodeMenuProps> = ({view, pos, node, selectItems, mapping}) => {\n const lang = node.attrs[CodeBlockNodeAttr.Lang];\n const showLineNumbers = node.attrs[CodeBlockNodeAttr.ShowLineNumbers];\n const value = mapping[lang] ?? lang;\n\n const handleClick = (type: string) => {\n view.focus();\n if (type === value) return;\n\n view.dispatch(\n view.state.tr.setNodeMarkup(pos, null, {\n [CodeBlockNodeAttr.Lang]: type,\n [CodeBlockNodeAttr.ShowLineNumbers]: showLineNumbers,\n }),\n );\n };\n\n return (\n <Select\n size=\"m\"\n width=\"max\"\n disablePortal\n value={[value]}\n onUpdate={(v) => handleClick(v[0])}\n options={selectItems}\n filterable\n filterPlaceholder={i18nPlaceholder('select_filter')}\n popupClassName={bCodeBlock('select-popup')}\n className={bCodeBlock('select-button')}\n renderEmptyOptions={() => (\n <div className={bCodeBlock('select-empty')}>{i18n('empty_option')}</div>\n )}\n // TODO: in onOpenChange return focus to view.dom after press Esc in Select\n // after https://github.com/gravity-ui/uikit/issues/2075\n />\n );\n};\n\ntype ShowLineNumbersProps = {\n view: EditorView;\n pos: number;\n node: Node;\n};\n\nconst ShowLineNumbers: React.FC<ShowLineNumbersProps> = ({view, pos, node}) => {\n const lang = node.attrs[CodeBlockNodeAttr.Lang];\n const showLineNumbers = node.attrs[CodeBlockNodeAttr.ShowLineNumbers] === 'true';\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n view.dispatch(\n view.state.tr.setNodeMarkup(pos, null, {\n [CodeBlockNodeAttr.Lang]: lang,\n [CodeBlockNodeAttr.ShowLineNumbers]: event.target.checked ? 'true' : '',\n }),\n );\n };\n\n return (\n <Checkbox\n checked={showLineNumbers}\n className={bCodeBlock('show-line-numbers')}\n content={i18n('show_line_numbers')}\n onChange={handleChange}\n />\n );\n};\n\nexport const codeLangSelectTooltipViewCreator = (\n view: EditorView,\n langItems: SelectOption[],\n mapping: Record<string, string> = {},\n showLineNumbers: boolean,\n) => {\n return new BaseTooltipPluginView(view, {\n idPrefix: 'code-block-tooltip',\n nodeType: codeBlockType(view.state.schema),\n popupPlacement: ['bottom', 'top'],\n content: (view, {node, pos}) => {\n const lineNumbersCheckbox: ToolbarData<{}>[number][number] = {\n id: 'code-block-showlinenumbers',\n type: ToolbarDataType.ReactComponent,\n component: () => <ShowLineNumbers view={view} pos={pos} node={node} />,\n width: 28,\n };\n\n return (\n <Toolbar\n editor={{}}\n focus={() => view.focus()}\n className={bToolbar()}\n data={[\n [\n {\n id: 'code-block-type',\n type: ToolbarDataType.ReactComponent,\n component: () => (\n <CodeMenu\n view={view}\n pos={pos}\n node={node}\n selectItems={langItems}\n mapping={mapping}\n />\n ),\n width: 28,\n },\n ],\n ...(showLineNumbers ? [[lineNumbersCheckbox]] : []),\n [\n {\n id: 'code-block-remove',\n icon: {data: TrashBin},\n title: i18n('remove'),\n type: ToolbarDataType.SingleButton,\n isActive: () => false,\n isEnable: () => true,\n exec: () =>\n removeNode({\n pos: pos,\n node: node,\n tr: view.state.tr,\n dispatch: view.dispatch.bind(view),\n }),\n },\n ],\n ]}\n />\n );\n },\n });\n};\n"]}

package/build/cjs/extensions/markdown/CodeBlock/CodeBlockSpecs/index.d.ts CHANGED Viewed

@@ -3,10 +3,16 @@ export declare const CodeBlockNodeAttr: {
     readonly Lang: "data-language";
     readonly Markup: "data-markup";
     readonly Line: "data-line";
+    readonly ShowLineNumbers: "data-show-line-numbers";
 };
 export declare const codeBlockNodeName = "code_block";
 export declare const codeBlockType: (schema: import("prosemirror-model").Schema) => import("prosemirror-model").NodeType;
+export type LineNumbersOptions = {
+    enabled?: boolean;
+    showByDefault?: boolean;
+};
 export type CodeBlockSpecsOptions = {
     nodeview?: ExtensionNodeSpec['view'];
+    lineNumbers?: LineNumbersOptions;
 };
 export declare const CodeBlockSpecs: ExtensionAuto<CodeBlockSpecsOptions>;

package/build/cjs/extensions/markdown/CodeBlock/CodeBlockSpecs/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ exports.CodeBlockNodeAttr = {
     Lang: 'data-language',
     Markup: 'data-markup',
     Line: 'data-line',
+    ShowLineNumbers: 'data-show-line-numbers',
 };
 exports.codeBlockNodeName = 'code_block';
 exports.codeBlockType = (0, schema_1.nodeTypeFactory)(exports.codeBlockNodeName);
@@ -29,6 +30,13 @@ const CodeBlockSpecs = (builder, opts) => {
                 [exports.CodeBlockNodeAttr.Lang]: { default: '' },
                 [exports.CodeBlockNodeAttr.Markup]: { default: '```' },
                 [exports.CodeBlockNodeAttr.Line]: { default: null },
+                ...(opts.lineNumbers?.enabled
+                    ? {
+                        [exports.CodeBlockNodeAttr.ShowLineNumbers]: {
+                            default: opts.lineNumbers.showByDefault ? 'true' : '',
+                        },
+                    }
+                    : {}),
             },
             content: 'text*',
             group: 'block',
@@ -59,6 +67,9 @@ const CodeBlockSpecs = (builder, opts) => {
                 getAttrs: (tok) => {
                     return {
                         [exports.CodeBlockNodeAttr.Line]: tok.attrGet('data-line'),
+                        [exports.CodeBlockNodeAttr.ShowLineNumbers]: tok.info.includes('showLineNumbers')
+                            ? 'true'
+                            : '',
                     };
                 },
                 prepareContent: removeNewLineAtEnd, // content of code blocks contains extra \n at the end
@@ -67,7 +78,14 @@ const CodeBlockSpecs = (builder, opts) => {
         toMd: (state, node) => {
             const lang = node.attrs[exports.CodeBlockNodeAttr.Lang];
             const markup = node.attrs[exports.CodeBlockNodeAttr.Markup];
-            state.write(markup + lang + '\n');
+            const showLineNumbers = opts.lineNumbers?.enabled
+                ? node.attrs[exports.CodeBlockNodeAttr.ShowLineNumbers]
+                : '';
+            let info = lang;
+            if (showLineNumbers === 'true') {
+                info += ' showLineNumbers';
+            }
+            state.write(markup + info + '\n');
             state.text(node.textContent, false);
             // Add a newline to the current content before adding closing marker
             state.write('\n');
@@ -92,7 +110,15 @@ const CodeBlockSpecs = (builder, opts) => {
                     if (tok.info) {
                         // like in markdown-it
                         // https://github.com/markdown-it/markdown-it/blob/d07d585b6b15aaee2bc8f7a54b994526dad4dbc5/lib/renderer.mjs#L36-L37
-                        attrs[exports.CodeBlockNodeAttr.Lang] = tok.info.split(/(\s+)/g)[0];
+                        const parts = tok.info.split(/\s+/);
+                        const isFirstPartForLineNumbers = opts.lineNumbers?.enabled && parts[0] === 'showLineNumbers';
+                        attrs[exports.CodeBlockNodeAttr.Lang] = isFirstPartForLineNumbers ? '' : parts[0];
+                    }
+                    if (opts.lineNumbers?.enabled && tok.info?.includes('showLineNumbers')) {
+                        attrs[exports.CodeBlockNodeAttr.ShowLineNumbers] = 'true';
+                    }
+                    else {
+                        attrs[exports.CodeBlockNodeAttr.ShowLineNumbers] = '';
                     }
                     return attrs;
                 },

package/build/cjs/extensions/markdown/CodeBlock/CodeBlockSpecs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/markdown/CodeBlock/CodeBlockSpecs/index.ts"],"names":[],"mappings":"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","sourcesContent":["import type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';\nimport {nodeTypeFactory} from '../../../../utils/schema';\n\nexport const CodeBlockNodeAttr = {\n Lang: 'data-language',\n Markup: 'data-markup',\n Line: 'data-line',\n} as const;\n\nexport const codeBlockNodeName = 'code_block';\nexport const codeBlockType = nodeTypeFactory(codeBlockNodeName);\n\nexport type CodeBlockSpecsOptions = {\n nodeview?: ExtensionNodeSpec['view'];\n};\n\nconst getLangOfNode = (node: Element) => {\n let result = node.getAttribute(CodeBlockNodeAttr.Lang) \|\| '';\n\n if (!result) {\n const firstElementChild = node.firstElementChild;\n\n if (\n firstElementChild &&\n firstElementChild.nodeName.toLowerCase() === 'code' &&\n firstElementChild.classList.contains('hljs')\n ) {\n result = firstElementChild.getAttribute('class')?.split(' ')?.[1] \|\| '';\n }\n }\n\n return result;\n};\n\nexport const CodeBlockSpecs: ExtensionAuto<CodeBlockSpecsOptions> = (builder, opts) => {\n builder.addNode(codeBlockNodeName, () => ({\n view: opts.nodeview,\n spec: {\n attrs: {\n [CodeBlockNodeAttr.Lang]: {default: ''},\n [CodeBlockNodeAttr.Markup]: {default: '```'},\n [CodeBlockNodeAttr.Line]: {default: null},\n },\n content: 'text*',\n group: 'block',\n code: true,\n marks: '',\n selectable: true,\n allowSelection: false,\n parseDOM: [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n getAttrs: (node) => {\n return {\n [CodeBlockNodeAttr.Lang]: getLangOfNode(node as Element),\n };\n },\n },\n ],\n toDOM({attrs}) {\n return ['pre', attrs, ['code', 0]];\n },\n },\n fromMd: {\n tokenSpec: {\n name: codeBlockNodeName,\n type: 'block',\n noCloseToken: true,\n getAttrs: (tok) => {\n return {\n [CodeBlockNodeAttr.Line]: tok.attrGet('data-line'),\n };\n },\n prepareContent: removeNewLineAtEnd, // content of code blocks contains extra \\n at the end\n },\n },\n toMd: (state, node) => {\n const lang: string = node.attrs[CodeBlockNodeAttr.Lang];\n const markup: string = node.attrs[CodeBlockNodeAttr.Markup];\n\n state.write(markup + lang + '\\n');\n state.text(node.textContent, false);\n // Add a newline to the current content before adding closing marker\n state.write('\\n');\n state.write(markup);\n state.closeBlock(node);\n },\n }));\n builder.addNode('fence', () => ({\n // we adding this node only for define specific 'fence' parser token,\n // which parse fence md token to code_block node\n spec: {},\n fromMd: {\n tokenSpec: {\n name: codeBlockNodeName,\n type: 'block',\n noCloseToken: true,\n getAttrs: (tok) => {\n const attrs: Record<string, string \| null> = {\n [CodeBlockNodeAttr.Markup]: tok.markup,\n [CodeBlockNodeAttr.Line]: tok.attrGet('data-line'),\n };\n if (tok.info) {\n // like in markdown-it\n // https://github.com/markdown-it/markdown-it/blob/d07d585b6b15aaee2bc8f7a54b994526dad4dbc5/lib/renderer.mjs#L36-L37\n attrs[CodeBlockNodeAttr.Lang] = tok.info.split(/(\\s+)/g)[0];\n }\n return attrs;\n },\n prepareContent: removeNewLineAtEnd, // content of fence blocks contains extra \\n at the end\n },\n },\n toMd: () => {\n throw new Error('Unexpected toMd() call on fence node');\n },\n }));\n builder.addKeymap(() => ({\n Tab: (state, dispatch) => {\n const {$anchor, $head} = state.selection;\n if ($anchor.sameParent($head) && $anchor.parent.type.name === codeBlockNodeName) {\n dispatch?.(state.tr.replaceSelectionWith(state.schema.text('\\t')).scrollIntoView());\n return true;\n }\n return false;\n },\n }));\n};\n\nfunction removeNewLineAtEnd(content: string): string {\n return content.endsWith('\\n') ? content.slice(0, content.length - 1) : content;\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["extensions/markdown/CodeBlock/CodeBlockSpecs/index.ts"],"names":[],"mappings":"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","sourcesContent":["import type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';\nimport {nodeTypeFactory} from '../../../../utils/schema';\n\nexport const CodeBlockNodeAttr = {\n Lang: 'data-language',\n Markup: 'data-markup',\n Line: 'data-line',\n ShowLineNumbers: 'data-show-line-numbers',\n} as const;\n\nexport const codeBlockNodeName = 'code_block';\nexport const codeBlockType = nodeTypeFactory(codeBlockNodeName);\n\nexport type LineNumbersOptions = {enabled?: boolean; showByDefault?: boolean};\n\nexport type CodeBlockSpecsOptions = {\n nodeview?: ExtensionNodeSpec['view'];\n lineNumbers?: LineNumbersOptions;\n};\n\nconst getLangOfNode = (node: Element) => {\n let result = node.getAttribute(CodeBlockNodeAttr.Lang) \|\| '';\n\n if (!result) {\n const firstElementChild = node.firstElementChild;\n\n if (\n firstElementChild &&\n firstElementChild.nodeName.toLowerCase() === 'code' &&\n firstElementChild.classList.contains('hljs')\n ) {\n result = firstElementChild.getAttribute('class')?.split(' ')?.[1] \|\| '';\n }\n }\n\n return result;\n};\n\nexport const CodeBlockSpecs: ExtensionAuto<CodeBlockSpecsOptions> = (builder, opts) => {\n builder.addNode(codeBlockNodeName, () => ({\n view: opts.nodeview,\n spec: {\n attrs: {\n [CodeBlockNodeAttr.Lang]: {default: ''},\n [CodeBlockNodeAttr.Markup]: {default: '```'},\n [CodeBlockNodeAttr.Line]: {default: null},\n ...(opts.lineNumbers?.enabled\n ? {\n [CodeBlockNodeAttr.ShowLineNumbers]: {\n default: opts.lineNumbers.showByDefault ? 'true' : '',\n },\n }\n : {}),\n },\n content: 'text*',\n group: 'block',\n code: true,\n marks: '',\n selectable: true,\n allowSelection: false,\n parseDOM: [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n getAttrs: (node) => {\n return {\n [CodeBlockNodeAttr.Lang]: getLangOfNode(node as Element),\n };\n },\n },\n ],\n toDOM({attrs}) {\n return ['pre', attrs, ['code', 0]];\n },\n },\n fromMd: {\n tokenSpec: {\n name: codeBlockNodeName,\n type: 'block',\n noCloseToken: true,\n getAttrs: (tok) => {\n return {\n [CodeBlockNodeAttr.Line]: tok.attrGet('data-line'),\n [CodeBlockNodeAttr.ShowLineNumbers]: tok.info.includes('showLineNumbers')\n ? 'true'\n : '',\n };\n },\n prepareContent: removeNewLineAtEnd, // content of code blocks contains extra \\n at the end\n },\n },\n toMd: (state, node) => {\n const lang: string = node.attrs[CodeBlockNodeAttr.Lang];\n const markup: string = node.attrs[CodeBlockNodeAttr.Markup];\n const showLineNumbers: string = opts.lineNumbers?.enabled\n ? node.attrs[CodeBlockNodeAttr.ShowLineNumbers]\n : '';\n\n let info = lang;\n\n if (showLineNumbers === 'true') {\n info += ' showLineNumbers';\n }\n\n state.write(markup + info + '\\n');\n state.text(node.textContent, false);\n // Add a newline to the current content before adding closing marker\n state.write('\\n');\n state.write(markup);\n state.closeBlock(node);\n },\n }));\n builder.addNode('fence', () => ({\n // we adding this node only for define specific 'fence' parser token,\n // which parse fence md token to code_block node\n spec: {},\n fromMd: {\n tokenSpec: {\n name: codeBlockNodeName,\n type: 'block',\n noCloseToken: true,\n getAttrs: (tok) => {\n const attrs: Record<string, string \| null> = {\n [CodeBlockNodeAttr.Markup]: tok.markup,\n [CodeBlockNodeAttr.Line]: tok.attrGet('data-line'),\n };\n if (tok.info) {\n // like in markdown-it\n // https://github.com/markdown-it/markdown-it/blob/d07d585b6b15aaee2bc8f7a54b994526dad4dbc5/lib/renderer.mjs#L36-L37\n const parts = tok.info.split(/\\s+/);\n\n const isFirstPartForLineNumbers =\n opts.lineNumbers?.enabled && parts[0] === 'showLineNumbers';\n\n attrs[CodeBlockNodeAttr.Lang] = isFirstPartForLineNumbers ? '' : parts[0];\n }\n if (opts.lineNumbers?.enabled && tok.info?.includes('showLineNumbers')) {\n attrs[CodeBlockNodeAttr.ShowLineNumbers] = 'true';\n } else {\n attrs[CodeBlockNodeAttr.ShowLineNumbers] = '';\n }\n\n return attrs;\n },\n prepareContent: removeNewLineAtEnd, // content of fence blocks contains extra \\n at the end\n },\n },\n toMd: () => {\n throw new Error('Unexpected toMd() call on fence node');\n },\n }));\n builder.addKeymap(() => ({\n Tab: (state, dispatch) => {\n const {$anchor, $head} = state.selection;\n if ($anchor.sameParent($head) && $anchor.parent.type.name === codeBlockNodeName) {\n dispatch?.(state.tr.replaceSelectionWith(state.schema.text('\\t')).scrollIntoView());\n return true;\n }\n return false;\n },\n }));\n};\n\nfunction removeNewLineAtEnd(content: string): string {\n return content.endsWith('\\n') ? content.slice(0, content.length - 1) : content;\n}\n"]}

package/build/cjs/extensions/markdown/CodeBlock/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { type HighlightLangMap } from "./CodeBlockHighlight/CodeBlockHighlight.js";
-import { type CodeBlockSpecsOptions } from "./CodeBlockSpecs/index.js";
+import { type CodeBlockSpecsOptions, type LineNumbersOptions } from "./CodeBlockSpecs/index.js";
 import { cbAction } from "./const.js";
 export { resetCodeblock } from "./commands.js";
 export { codeBlockNodeName, CodeBlockNodeAttr, codeBlockType } from "./CodeBlockSpecs/index.js";
@@ -8,6 +8,7 @@ export type CodeBlockOptions = CodeBlockSpecsOptions & {
     codeBlockKey?: string | null;
     langs?: HighlightLangMap;
 };
+export declare const lineNumbersOptionsDefault: LineNumbersOptions;
 export declare const CodeBlock: ExtensionAuto<CodeBlockOptions>;
 declare global {
     namespace WysiwygEditor {

package/build/cjs/extensions/markdown/CodeBlock/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeBlock = exports.codeBlockType = exports.CodeBlockNodeAttr = exports.codeBlockNodeName = exports.resetCodeblock = void 0;
+exports.CodeBlock = exports.lineNumbersOptionsDefault = exports.codeBlockType = exports.CodeBlockNodeAttr = exports.codeBlockNodeName = exports.resetCodeblock = void 0;
 // @ts-ignore // TODO: fix cjs build
 const prosemirror_utils_1 = require("prosemirror-utils");
 const lodash_1 = require("../../../lodash.js");
@@ -17,10 +17,22 @@ var CodeBlockSpecs_2 = require("./CodeBlockSpecs/index.js");
 Object.defineProperty(exports, "codeBlockNodeName", { enumerable: true, get: function () { return CodeBlockSpecs_2.codeBlockNodeName; } });
 Object.defineProperty(exports, "CodeBlockNodeAttr", { enumerable: true, get: function () { return CodeBlockSpecs_2.CodeBlockNodeAttr; } });
 Object.defineProperty(exports, "codeBlockType", { enumerable: true, get: function () { return CodeBlockSpecs_2.codeBlockType; } });
+exports.lineNumbersOptionsDefault = { enabled: true, showByDefault: true };
 const CodeBlock = (builder, opts) => {
-    builder.use(CodeBlockSpecs_1.CodeBlockSpecs, opts);
+    const optsNormalized = {
+        ...opts,
+        lineNumbers: {
+            enabled: typeof opts.lineNumbers?.enabled === 'boolean'
+                ? opts.lineNumbers.enabled
+                : exports.lineNumbersOptionsDefault.enabled,
+            showByDefault: typeof opts.lineNumbers?.showByDefault === 'boolean'
+                ? opts.lineNumbers.showByDefault
+                : exports.lineNumbersOptionsDefault.showByDefault,
+        },
+    };
+    builder.use(CodeBlockSpecs_1.CodeBlockSpecs, optsNormalized);
     builder.addKeymap((deps) => {
-        const { codeBlockKey } = opts;
+        const { codeBlockKey } = optsNormalized;
         const bindings = { Enter: commands_1.newlineInCode, Backspace: commands_1.resetCodeblock };
         if (codeBlockKey) {
             bindings[codeBlockKey] = (0, keymap_1.withLogAction)('code_block', (0, commands_1.setCodeBlockType)(deps));
@@ -37,11 +49,14 @@ const CodeBlock = (builder, opts) => {
         };
     });
     builder.addPlugin(codeBlockPastePlugin_1.codeBlockPastePlugin, builder.Priority.High);
-    if ((0, lodash_1.isFunction)(opts.langs)) {
-        builder.use(opts.langs);
+    if ((0, lodash_1.isFunction)(optsNormalized.langs)) {
+        builder.use(optsNormalized.langs);
     }
     else {
-        builder.use(CodeBlockHighlight_1.CodeBlockHighlight, opts.langs ?? {});
+        builder.use(CodeBlockHighlight_1.CodeBlockHighlight, {
+            langs: optsNormalized.langs,
+            lineNumbers: optsNormalized.lineNumbers,
+        });
     }
 };
 exports.CodeBlock = CodeBlock;

package/build/cjs/extensions/markdown/CodeBlock/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/markdown/CodeBlock/index.ts"],"names":[],"mappings":";;;AACA,oCAAoC;AACpC,yDAAsD;AAGtD,+CAA2C;AAC3C,6DAAiE;AACjE,qDAAoD;AAEpD,mFAAkG;AAClG,~~8DAA4E~~;~~AAC5E~~,4CAA2E;AAC3E,sCAAgD;AAChD,4EAAoE;AAEpE,0CAA0C;AAAlC,0GAAA,cAAc,OAAA;AACtB,4DAAqF;AAA7E,mHAAA,iBAAiB,OAAA;AAAE,mHAAA,iBAAiB,OAAA;AAAE,+GAAA,aAAa,OAAA;~~AAOpD~~,MAAM,SAAS,GAAoC,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;IACxE,OAAO,CAAC,GAAG,CAAC,+BAAc,EAAE,~~IAAI~~,CAAC,CAAC;~~IAElC~~,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;QACvB,MAAM,EAAC,YAAY,EAAC,GAAG,~~IAAI~~,CAAC;~~QAC5B~~,MAAM,QAAQ,GAAW,EAAC,KAAK,EAAE,wBAAa,EAAE,SAAS,EAAE,yBAAc,EAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,CAAC;YACf,QAAQ,CAAC,YAAY,CAAC,GAAG,IAAA,sBAAa,EAAC,YAAY,EAAE,IAAA,2BAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;QACjF,CAAC;QACD,OAAO,QAAQ,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,aAAa,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,CAAC,aAAa,CAAC,IAAA,qBAAa,EAAC,MAAM,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;IACvF,OAAO,CAAC,SAAS,CAAC,gBAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;QACjC,MAAM,EAAE,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,OAAO;YACH,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,uCAAmB,EAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;YAC7D,QAAQ,EAAE,IAAA,2BAAgB,EAAC,IAAI,CAAC;YAChC,GAAG,EAAE,IAAA,2BAAgB,EAAC,IAAI,CAAC;SAC9B,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,2CAAoB,EAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,IAAI,IAAA,mBAAU,EAAC,~~IAAI~~,CAAC,KAAK,CAAC,EAAE,CAAC;~~QACzB~~,OAAO,CAAC,GAAG,CAAC,~~IAAI~~,CAAC,KAAK,CAAC,CAAC;~~IAC5B~~,CAAC;SAAM,CAAC;QACJ,OAAO,CAAC,GAAG,CAAC,uCAAkB,EAAE,~~IAAI~~,CAAC,KAAK,~~IAAI~~,EAAE,CAAC,CAAC;~~IACtD~~,CAAC;AACL,CAAC,CAAC;~~AA7BW~~,QAAA,SAAS,~~aA6BpB~~;AAUF,mEAAmE;AACnE,6DAA6D;AAC7D,SAAS,aAAa,CAAC,QAAkB;IACrC,OAAO,IAAA,mCAAsB,EAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACrD,CAAC","sourcesContent":["import type {NodeType} from 'prosemirror-model';\n// @ts-ignore // TODO: fix cjs build\nimport {hasParentNodeOfType} from 'prosemirror-utils';\n\nimport type {Action, ExtensionAuto, Keymap} from '../../../core';\nimport {isFunction} from '../../../lodash';\nimport {textblockTypeInputRule} from '../../../utils/inputrules';\nimport {withLogAction} from '../../../utils/keymap';\n\nimport {CodeBlockHighlight, type HighlightLangMap} from './CodeBlockHighlight/CodeBlockHighlight';\nimport {CodeBlockSpecs, type ~~CodeBlockSpecsOptions~~} from './CodeBlockSpecs';\nimport {newlineInCode, resetCodeblock, setCodeBlockType} from './commands';\nimport {cbAction, codeBlockType} from './const';\nimport {codeBlockPastePlugin} from './plugins/codeBlockPastePlugin';\n\nexport {resetCodeblock} from './commands';\nexport {codeBlockNodeName, CodeBlockNodeAttr, codeBlockType} from './CodeBlockSpecs';\n\nexport type CodeBlockOptions = CodeBlockSpecsOptions & {\n codeBlockKey?: string \| null;\n langs?: HighlightLangMap;\n};\n\nexport const CodeBlock: ExtensionAuto<CodeBlockOptions> = (builder, opts) => {\n builder.use(CodeBlockSpecs, ~~opts~~);\n\n builder.addKeymap((deps) => {\n const {codeBlockKey} = ~~opts~~;\n const bindings: Keymap = {Enter: newlineInCode, Backspace: resetCodeblock};\n if (codeBlockKey) {\n bindings[codeBlockKey] = withLogAction('code_block', setCodeBlockType(deps));\n }\n return bindings;\n });\n\n builder.addInputRules(({schema}) => ({rules: [codeBlockRule(codeBlockType(schema))]}));\n builder.addAction(cbAction, (deps) => {\n const cb = codeBlockType(deps.schema);\n return {\n isActive: (state) => hasParentNodeOfType(cb)(state.selection),\n isEnable: setCodeBlockType(deps),\n run: setCodeBlockType(deps),\n };\n });\n\n builder.addPlugin(codeBlockPastePlugin, builder.Priority.High);\n\n if (isFunction(~~opts~~.langs)) {\n builder.use(~~opts~~.langs);\n } else {\n builder.use(CodeBlockHighlight, ~~opts~~.langs ~~?? {~~});\n }\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [cbAction]: Action;\n }\n }\n}\n\n// Given a code block node type, returns an input rule that turns a\n// textblock starting with three backticks into a code block.\nfunction codeBlockRule(nodeType: NodeType) {\n return textblockTypeInputRule(/^```$/, nodeType);\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/markdown/CodeBlock/index.ts"],"names":[],"mappings":"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","sourcesContent":["import type {NodeType} from 'prosemirror-model';\n// @ts-ignore // TODO: fix cjs build\nimport {hasParentNodeOfType} from 'prosemirror-utils';\n\nimport type {Action, ExtensionAuto, Keymap} from '../../../core';\nimport {isFunction} from '../../../lodash';\nimport {textblockTypeInputRule} from '../../../utils/inputrules';\nimport {withLogAction} from '../../../utils/keymap';\n\nimport {CodeBlockHighlight, type HighlightLangMap} from './CodeBlockHighlight/CodeBlockHighlight';\nimport {\n CodeBlockSpecs,\n type CodeBlockSpecsOptions,\n type LineNumbersOptions,\n} from './CodeBlockSpecs';\nimport {newlineInCode, resetCodeblock, setCodeBlockType} from './commands';\nimport {cbAction, codeBlockType} from './const';\nimport {codeBlockPastePlugin} from './plugins/codeBlockPastePlugin';\n\nexport {resetCodeblock} from './commands';\nexport {codeBlockNodeName, CodeBlockNodeAttr, codeBlockType} from './CodeBlockSpecs';\n\nexport type CodeBlockOptions = CodeBlockSpecsOptions & {\n codeBlockKey?: string \| null;\n langs?: HighlightLangMap;\n};\n\nexport const lineNumbersOptionsDefault: LineNumbersOptions = {enabled: true, showByDefault: true};\n\nexport const CodeBlock: ExtensionAuto<CodeBlockOptions> = (builder, opts) => {\n const optsNormalized: CodeBlockOptions = {\n ...opts,\n lineNumbers: {\n enabled:\n typeof opts.lineNumbers?.enabled === 'boolean'\n ? opts.lineNumbers.enabled\n : lineNumbersOptionsDefault.enabled,\n showByDefault:\n typeof opts.lineNumbers?.showByDefault === 'boolean'\n ? opts.lineNumbers.showByDefault\n : lineNumbersOptionsDefault.showByDefault,\n },\n };\n\n builder.use(CodeBlockSpecs, optsNormalized);\n\n builder.addKeymap((deps) => {\n const {codeBlockKey} = optsNormalized;\n const bindings: Keymap = {Enter: newlineInCode, Backspace: resetCodeblock};\n if (codeBlockKey) {\n bindings[codeBlockKey] = withLogAction('code_block', setCodeBlockType(deps));\n }\n return bindings;\n });\n\n builder.addInputRules(({schema}) => ({rules: [codeBlockRule(codeBlockType(schema))]}));\n builder.addAction(cbAction, (deps) => {\n const cb = codeBlockType(deps.schema);\n return {\n isActive: (state) => hasParentNodeOfType(cb)(state.selection),\n isEnable: setCodeBlockType(deps),\n run: setCodeBlockType(deps),\n };\n });\n\n builder.addPlugin(codeBlockPastePlugin, builder.Priority.High);\n\n if (isFunction(optsNormalized.langs)) {\n builder.use(optsNormalized.langs);\n } else {\n builder.use(CodeBlockHighlight, {\n langs: optsNormalized.langs,\n lineNumbers: optsNormalized.lineNumbers,\n });\n }\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [cbAction]: Action;\n }\n }\n}\n\n// Given a code block node type, returns an input rule that turns a\n// textblock starting with three backticks into a code block.\nfunction codeBlockRule(nodeType: NodeType) {\n return textblockTypeInputRule(/^```$/, nodeType);\n}\n"]}

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.js CHANGED Viewed

@@ -19,27 +19,25 @@ const getSchemaSpecs = (opts, placeholder) => ({
                 tag: 'div.checkbox',
                 priority: 100,
                 getContent(node, schema) {
-                    const input = node.querySelector('input[type=checkbox]');
-                    const label = node.querySelector('label[for]');
-                    const checked = input?.checked ? 'true' : null;
-                    const text = label?.textContent;
-                    return prosemirror_model_1.Fragment.from([
-                        (0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
-                        (0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
-                    ]);
+                    if (node instanceof HTMLElement) {
+                        const input = node.querySelector('input[type=checkbox]');
+                        if (input && input instanceof HTMLInputElement) {
+                            const label = findLabelForInput(input);
+                            return createCheckboxFragment(schema, input.checked, label?.textContent);
+                        }
+                    }
+                    return prosemirror_model_1.Fragment.empty;
                 },
             },
             {
                 tag: 'input[type=checkbox]',
                 priority: 50,
-                getContent(node, schema) {
-                    const id = node.id;
-                    const checked = node.checked ? 'true' : null;
-                    const text = node.parentNode?.querySelector(`label[for=${id}]`)?.textContent;
-                    return prosemirror_model_1.Fragment.from([
-                        (0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
-                        (0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
-                    ]);
+                getContent(input, schema) {
+                    if (input instanceof HTMLInputElement) {
+                        const label = findLabelForInput(input);
+                        return createCheckboxFragment(schema, input.checked, label?.textContent);
+                    }
+                    return prosemirror_model_1.Fragment.empty;
                 },
             },
         ],
@@ -76,7 +74,7 @@ const getSchemaSpecs = (opts, placeholder) => ({
             {
                 // input handled by checkbox node parse rule
                 // ignore label
-                tag: 'input[type=checkbox] ~ label[for]',
+                tag: 'input[type=checkbox] ~ label',
                 ignore: true,
                 consuming: true,
             },
@@ -101,4 +99,18 @@ const getSchemaSpecs = (opts, placeholder) => ({
     },
 });
 exports.getSchemaSpecs = getSchemaSpecs;
+// fallback for invalid HTML (input without id + label without for)
+function findNextSiblingLabel(element) {
+    const nextSibling = element.nextElementSibling;
+    return nextSibling instanceof HTMLLabelElement ? nextSibling : null;
+}
+function findLabelForInput(element) {
+    return element.labels?.[0] || findNextSiblingLabel(element);
+}
+function createCheckboxFragment(schema, checked, labelText) {
+    return prosemirror_model_1.Fragment.from([
+        (0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked ? 'true' : null }),
+        (0, const_1.checkboxLabelType)(schema).create(null, labelText ? schema.text(labelText) : null),
+    ]);
+}
 //# sourceMappingURL=schema.js.map

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/Checkbox/CheckboxSpecs/schema.ts"],"names":[],"mappings":";;;AAAA,~~yDAA0D~~;~~AAI1D~~,sCAA4F;AAI5F,MAAM,yBAAyB,GAAG,UAAU,CAAC;AAEtC,MAAM,cAAc,GAAG,CAC1B,IAA6D,EAC7D,WAAgC,EACF,EAAE,CAAC,CAAC;IAClC,CAAC,oBAAY,CAAC,QAAQ,CAAC,EAAE;QACrB,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,GAAG,oBAAY,CAAC,KAAK,IAAI,oBAAY,CAAC,KAAK,EAAE;QACtD,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,KAAK;QACrB,KAAK,EAAE;YACH,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,IAAA,SAAC,GAAE,EAAC;YACpC,CAAC,oBAAY,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SACvC;QACD,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,cAAc;gBACnB,QAAQ,EAAE,GAAG;gBACb,UAAU,CAAC,IAAI,EAAE,MAAM;oBACnB,~~MAAM~~,~~KAAK~~,~~GAAI~~,~~IAAoB~~,~~CAAC~~,~~aAAa,CAC7C,sBAAsB,CACzB,~~CAAC;~~oBACF~~,MAAM,KAAK,~~GAAI~~,~~IAAoB~~,CAAC,aAAa,~~CAC7C~~,~~YAAY~~,~~CACf~~,CAAC;~~oBAEF~~,~~MAAM~~,~~OAAO~~,~~GAAG~~,KAAK,~~EAAE~~,~~OAAO~~,~~CAAC~~,CAAC~~,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC~~;~~oBAC/C~~,MAAM,~~IAAI~~,GAAG,~~KAAK~~,~~EAAE,WAAW,~~CAAC~~;oBAEhC~~,~~OAAO~~,~~4BAAQ,~~CAAC,~~IAAI,~~CAAC;~~wBACjB~~,~~IAAA~~,~~yBAAiB~~,~~EAAC~~,MAAM,~~CAAC~~,~~CAAC~~,~~MAAM,~~CAAC,~~EAAC~~,~~CAAC~~,~~oBAAY~~,~~CAAC,OAAO,CAAC,~~EAAE,~~OAAO~~,~~EAAC~~,CAAC;~~wBACnE~~,~~IAAA,yBAAiB,EAAC,MAAM,~~CAAC,CAAC,~~MAAM~~,~~CAAC~~,~~IAAI,EAAE,IAAI,~~CAAC,~~CAAC~~,CAAC~~,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC~~;~~qBAC1E~~,CAAC~~,CAAC~~;~~gBACP,CAAC;~~aACJ;YACD;gBACI,GAAG,EAAE,sBAAsB;gBAC3B,QAAQ,EAAE,EAAE;gBACZ,UAAU,CAAC,~~IAAI~~,EAAE,MAAM;~~oBACnB~~,~~MAAM~~,~~EAAE~~,~~GAAI~~,~~IAAoB~~,~~CAAC,~~EAAE,CAAC;~~oBACpC~~,MAAM,~~OAAO~~,~~GAAI~~,~~IAAyB~~,CAAC,~~OAAO~~,CAAC,CAAC,~~CAAC~~,~~MAAM~~,CAAC,~~CAAC,CAAC,IAAI,CAAC;oBACnE,~~MAAM,~~IAAI~~,~~GAAG~~,~~IAAI,~~CAAC,~~UAAU~~,EAAE,~~aAAa~~,~~CACvC,aAAa,~~EAAE,~~GAAG,CACrB,EAAE,~~WAAW,CAAC~~;oBAEf~~,~~OAAO,4BAAQ,~~CAAC,~~IAAI,~~CAAC;~~wBACjB~~,~~IAAA,yBAAiB,EAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAC,CAAC,oBAAY,CAAC,~~OAAO,~~CAAC~~,~~EAAE,OAAO,EAAC,~~CAAC~~;wBACnE~~,~~IAAA~~,~~yBAAiB,EAAC,MAAM,~~CAAC~~,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC~~;~~qBAC1E~~,CAAC~~,CAAC~~;~~gBACP,CAAC;~~aACJ;SACJ;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE;YACH,CAAC,oBAAY,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,UAAU,EAAC;YAC1C,CAAC,oBAAY,CAAC,EAAE,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;YAClC,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SAC1C;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE;QAClB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,eAAe,IAAA,SAAC,EAAC,OAAO,CAAC,IAAI;gBAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjB,CAAC,oBAAY,CAAC,GAAG,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,oBAAY,CAAC,GAAG,CAAC,IAAI,EAAE;iBAC7E,CAAC;aACL;YACD;gBACI,4CAA4C;gBAC5C,eAAe;gBACf,GAAG,EAAE,~~mCAAmC~~;~~gBACxC~~,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,IAAI;aAClB;SACJ;QACD,KAAK,EAAE;YACH,CAAC,oBAAY,CAAC,GAAG,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SACtC;QACD,UAAU,EAAE,KAAK;QACjB,WAAW,EAAE;YACT,OAAO,EACH,WAAW,EAAE,CAAC,oBAAY,CAAC,KAAK,CAAC;gBACjC,IAAI,EAAE,wBAAwB;gBAC9B,yBAAyB;YAC7B,aAAa,EAAE,IAAI;SACtB;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,MAAM,EAAE,EAAC,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAA,SAAC,EAAC,OAAO,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC;QAC3D,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,IAAI;QACtB,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC;~~AA9GU~~,QAAA,cAAc,~~kBA8GxB~~","sourcesContent":["import {Fragment, type NodeSpec} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType} from './const';\n\nimport type {CheckboxSpecsOptions} from './index';\n\nconst DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';\n\nexport const getSchemaSpecs = (\n opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>,\n placeholder?: PlaceholderOptions,\n): Record<CheckboxNode, NodeSpec> => ({\n [CheckboxNode.Checkbox]: {\n group: 'block checkbox',\n content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,\n selectable: true,\n allowSelection: false,\n attrs: {\n [CheckboxAttr.Class]: {default: b()},\n [CheckboxAttr.Line]: {default: null},\n },\n parseDOM: [\n {\n tag: 'div.checkbox',\n priority: 100,\n getContent(node, schema) {\n ~~const~~ ~~input =~~ (node as HTMLElement)~~.querySelector<HTMLInputElement>(~~\n ~~'input[type=checkbox]',\n );\n~~ const ~~label~~ = (node ~~as HTMLElement)~~.querySelector<~~HTMLLabelElement~~>(\n '~~label~~[~~for~~]'~~,\n~~ );\n\n ~~const~~ ~~checked~~ = input~~?.checked~~ ? ~~'true'~~ ~~: null;\~~n const ~~text~~ = ~~label?.textContent~~;\n\n return ~~Fragment.from~~([\n ~~checkboxInputType(~~schema).~~create({[CheckboxAttr.Checked]:~~ checked}),\n ~~checkboxLabelType(schema).create(null, text ? schema.text(text) : null)~~,\n ]);\n },\n },\n {\n tag: 'input[type=checkbox]',\n priority: 50,\n getContent(~~node~~, schema) {\n ~~const~~ ~~id =~~ (~~node~~ as ~~HTMLElement~~)~~.id;\~~n const ~~checked~~ = (~~node as HTMLInputElement~~)~~.checked ? 'true' : null~~;\n ~~const~~ ~~text~~ = ~~node.parentNode?.querySelector<HTMLLabelElement>(\n `~~label~~[for=${id}]`,\n )~~?.textContent;\n\n return Fragment.from([\n checkboxInputType(schema).create({[CheckboxAttr.Checked]: checked}),\n checkboxLabelType(schema).create(null, text ? schema.text(text) : null),\n ]);\n },\n },\n ],\n toDOM(node) {\n return ['div', node.attrs, 0];\n },\n complex: 'root',\n },\n\n [CheckboxNode.Input]: {\n group: 'block checkbox',\n parseDOM: [],\n attrs: {\n [CheckboxAttr.Type]: {default: 'checkbox'},\n [CheckboxAttr.Id]: {default: null},\n [CheckboxAttr.Checked]: {default: null},\n },\n toDOM(node) {\n return ['div', node.attrs];\n },\n selectable: false,\n allowSelection: false,\n complex: 'leaf',\n },\n\n [CheckboxNode.Label]: {\n content: 'inline*',\n group: 'block checkbox',\n parseDOM: [\n {\n tag: `span[class=\"${b('label')}\"]`,\n getAttrs: (node) => ({\n [CheckboxAttr.For]: (node as Element).getAttribute(CheckboxAttr.For) \|\| '',\n }),\n },\n {\n // input handled by checkbox node parse rule\n // ignore label\n tag: 'input[type=checkbox] ~ label~~[for]~~',\n ignore: true,\n consuming: true,\n },\n ],\n attrs: {\n [CheckboxAttr.For]: {default: null},\n },\n escapeText: false,\n placeholder: {\n content:\n placeholder?.[CheckboxNode.Label] ??\n opts?.checkboxLabelPlaceholder ??\n DEFAULT_LABEL_PLACEHOLDER,\n alwaysVisible: true,\n },\n toDOM(node) {\n return ['span', {...node.attrs, class: b('label')}, 0];\n },\n selectable: false,\n allowSelection: false,\n disableGapCursor: true,\n complex: 'leaf',\n },\n});\n"]}
1	+ {"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/Checkbox/CheckboxSpecs/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, type NodeSpec, type Schema} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType} from './const';\n\nimport type {CheckboxSpecsOptions} from './index';\n\nconst DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';\n\nexport const getSchemaSpecs = (\n opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>,\n placeholder?: PlaceholderOptions,\n): Record<CheckboxNode, NodeSpec> => ({\n [CheckboxNode.Checkbox]: {\n group: 'block checkbox',\n content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,\n selectable: true,\n allowSelection: false,\n attrs: {\n [CheckboxAttr.Class]: {default: b()},\n [CheckboxAttr.Line]: {default: null},\n },\n parseDOM: [\n {\n tag: 'div.checkbox',\n priority: 100,\n getContent(node, schema) {\n if (node instanceof HTMLElement) {\n const input = node.querySelector<HTMLInputElement>('input[type=checkbox]');\n\n if (input && input instanceof HTMLInputElement) {\n const label = findLabelForInput(input);\n return createCheckboxFragment(\n schema,\n input.checked,\n label?.textContent,\n );\n }\n }\n return Fragment.empty;\n },\n },\n {\n tag: 'input[type=checkbox]',\n priority: 50,\n getContent(input, schema) {\n if (input instanceof HTMLInputElement) {\n const label = findLabelForInput(input);\n return createCheckboxFragment(schema, input.checked, label?.textContent);\n }\n return Fragment.empty;\n },\n },\n ],\n toDOM(node) {\n return ['div', node.attrs, 0];\n },\n complex: 'root',\n },\n\n [CheckboxNode.Input]: {\n group: 'block checkbox',\n parseDOM: [],\n attrs: {\n [CheckboxAttr.Type]: {default: 'checkbox'},\n [CheckboxAttr.Id]: {default: null},\n [CheckboxAttr.Checked]: {default: null},\n },\n toDOM(node) {\n return ['div', node.attrs];\n },\n selectable: false,\n allowSelection: false,\n complex: 'leaf',\n },\n\n [CheckboxNode.Label]: {\n content: 'inline*',\n group: 'block checkbox',\n parseDOM: [\n {\n tag: `span[class=\"${b('label')}\"]`,\n getAttrs: (node) => ({\n [CheckboxAttr.For]: (node as Element).getAttribute(CheckboxAttr.For) \|\| '',\n }),\n },\n {\n // input handled by checkbox node parse rule\n // ignore label\n tag: 'input[type=checkbox] ~ label',\n ignore: true,\n consuming: true,\n },\n ],\n attrs: {\n [CheckboxAttr.For]: {default: null},\n },\n escapeText: false,\n placeholder: {\n content:\n placeholder?.[CheckboxNode.Label] ??\n opts?.checkboxLabelPlaceholder ??\n DEFAULT_LABEL_PLACEHOLDER,\n alwaysVisible: true,\n },\n toDOM(node) {\n return ['span', {...node.attrs, class: b('label')}, 0];\n },\n selectable: false,\n allowSelection: false,\n disableGapCursor: true,\n complex: 'leaf',\n },\n});\n\n// fallback for invalid HTML (input without id + label without for)\nfunction findNextSiblingLabel(element: HTMLInputElement): HTMLLabelElement \| null {\n const nextSibling = element.nextElementSibling;\n return nextSibling instanceof HTMLLabelElement ? nextSibling : null;\n}\n\nfunction findLabelForInput(element: HTMLInputElement): HTMLLabelElement \| null {\n return element.labels?.[0] \|\| findNextSiblingLabel(element);\n}\n\nfunction createCheckboxFragment(\n schema: Schema<any, any>,\n checked: boolean \| null,\n labelText: string \| null \| undefined,\n): Fragment {\n return Fragment.from([\n checkboxInputType(schema).create({[CheckboxAttr.Checked]: checked ? 'true' : null}),\n checkboxLabelType(schema).create(null, labelText ? schema.text(labelText) : null),\n ]);\n}\n"]}

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

@@ -1,8 +1,9 @@
 import { type ButtonButtonProps, type DropdownMenuProps } from '@gravity-ui/uikit';
+import { type ReferenceType } from "../FloatingPopup/index.js";
 export type FloatingMenuProps = {
     dirtype: 'row' | 'column';
     canDrag: boolean;
-    anchorElement: Element;
+    anchorElement: ReferenceType;
     dropdownItems: DropdownMenuProps<unknown>['items'];
     switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'>;
     onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;

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~~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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"]}
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, type ReferenceType} 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: ReferenceType;\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.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 import type { DnDControlHandler } from "../../dnd/dnd.js";
 import { type FloatingMenuProps } from "../FloatingMenu/FloatingMenu.js";
+type ControlType = FloatingMenuProps['dirtype'];
 export type FloatingMenuControlProps = {
-    acnhorElement: Element;
+    cellElement: Element;
+    tableElement: Element;
     multiple: boolean;
-    type: FloatingMenuProps['dirtype'];
+    type: ControlType;
     dndHandler?: DnDControlHandler;
     onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];
     onClearCellsClick: () => void;
@@ -13,3 +15,4 @@ export type FloatingMenuControlProps = {
     onRemoveTableClick: () => void;
 };
 export declare const FloatingMenuControl: React.FC<FloatingMenuControlProps>;
+export {};

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

@@ -7,7 +7,7 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const yfm_table_1 = require("../../../../../../../i18n/yfm-table/index.js");
 const FloatingMenu_1 = require("../FloatingMenu/FloatingMenu.js");
-const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, acnhorElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
+const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, cellElement, tableElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
     const dropdownItems = (0, react_1.useMemo)(() => [
         [
             {
@@ -55,7 +55,8 @@ const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multipl
         onRemoveRangeClick,
         onRemoveTableClick,
     ]);
-    return ((0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: acnhorElement, switcherMouseProps: dndHandler
+    const anchor = (0, react_1.useMemo)(() => getVirtualAnchor(type, tableElement, cellElement), [type, tableElement, cellElement]);
+    return ((0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: anchor, switcherMouseProps: dndHandler
             ? {
                 onMouseLeave: dndHandler.control_handleMouseLeave,
                 onMouseDown: dndHandler.control_handleMouseDown,
@@ -65,4 +66,60 @@ const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multipl
             : undefined, dropdownItems: dropdownItems }));
 };
 exports.FloatingMenuControl = FloatingMenuControl;
+function getVirtualAnchor(type, tableElem, cellElem) {
+    if (type === 'row') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect = cellElem.getBoundingClientRect();
+                const tableRect = tableElem.getBoundingClientRect().toJSON();
+                {
+                    // fix table rect
+                    tableRect.x += 1;
+                    tableRect.width -= 2;
+                    tableRect.left += 1;
+                    tableRect.right -= 1;
+                }
+                return {
+                    // from table
+                    x: tableRect.x,
+                    width: tableRect.width,
+                    left: tableRect.left,
+                    right: tableRect.right,
+                    // from cell
+                    y: cellRect.y,
+                    height: cellRect.height,
+                    top: cellRect.top,
+                    bottom: cellRect.top,
+                };
+            },
+        };
+    }
+    if (type === 'column') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect = cellElem.getBoundingClientRect().toJSON();
+                const tableRect = tableElem.getBoundingClientRect();
+                const EDGE_OFFSET = 16;
+                const cellMiddle = cellRect.x + cellRect.width / 2;
+                // left border of table
+                if (cellMiddle - EDGE_OFFSET <= tableRect.left) {
+                    const visible = cellRect.right - tableRect.left;
+                    cellRect.width = (visible - EDGE_OFFSET) * 2;
+                    cellRect.left = cellRect.right - cellRect.width;
+                    cellRect.x = cellRect.left;
+                }
+                // right border of table
+                if (cellMiddle + EDGE_OFFSET >= tableRect.right) {
+                    const visible = tableRect.right - cellRect.left;
+                    cellRect.width = (visible - EDGE_OFFSET) * 2;
+                    cellRect.right = cellRect.left + cellRect.width;
+                }
+                return cellRect;
+            },
+        };
+    }
+    throw new Error(`Unknown control type: ${type}`);
+}
 //# sourceMappingURL=FloatingMenuControl.js.map

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,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"]}
1	+ {"version":3,"file":"FloatingMenuControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {ClientRectObject, VirtualElement} from '@floating-ui/dom';\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\ntype ControlType = FloatingMenuProps['dirtype'];\n\nexport type FloatingMenuControlProps = {\n cellElement: Element;\n tableElement: Element;\n multiple: boolean;\n type: ControlType;\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 cellElement,\n tableElement,\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 const anchor = useMemo(\n () => getVirtualAnchor(type, tableElement, cellElement),\n [type, tableElement, cellElement],\n );\n\n return (\n <FloatingMenu\n dirtype={type}\n canDrag={dndHandler ? dndHandler.canDrag() : false}\n onOpenToggle={onMenuOpenToggle}\n anchorElement={anchor}\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\nfunction getVirtualAnchor(\n type: ControlType,\n tableElem: Element,\n cellElem: Element,\n): VirtualElement {\n if (type === 'row') {\n return {\n contextElement: cellElem,\n getBoundingClientRect() {\n const cellRect = cellElem.getBoundingClientRect();\n const tableRect: ClientRectObject = tableElem.getBoundingClientRect().toJSON();\n\n {\n // fix table rect\n tableRect.x += 1;\n tableRect.width -= 2;\n tableRect.left += 1;\n tableRect.right -= 1;\n }\n\n return {\n // from table\n x: tableRect.x,\n width: tableRect.width,\n left: tableRect.left,\n right: tableRect.right,\n // from cell\n y: cellRect.y,\n height: cellRect.height,\n top: cellRect.top,\n bottom: cellRect.top,\n };\n },\n };\n }\n\n if (type === 'column') {\n return {\n contextElement: cellElem,\n getBoundingClientRect() {\n const cellRect: ClientRectObject = cellElem.getBoundingClientRect().toJSON();\n const tableRect = tableElem.getBoundingClientRect();\n\n const EDGE_OFFSET = 16;\n\n const cellMiddle = cellRect.x + cellRect.width / 2;\n\n // left border of table\n if (cellMiddle - EDGE_OFFSET <= tableRect.left) {\n const visible = cellRect.right - tableRect.left;\n cellRect.width = (visible - EDGE_OFFSET) * 2;\n cellRect.left = cellRect.right - cellRect.width;\n cellRect.x = cellRect.left;\n }\n\n // right border of table\n if (cellMiddle + EDGE_OFFSET >= tableRect.right) {\n const visible = tableRect.right - cellRect.left;\n cellRect.width = (visible - EDGE_OFFSET) * 2;\n cellRect.right = cellRect.left + cellRect.width;\n }\n\n return cellRect;\n },\n };\n }\n\n throw new Error(`Unknown control type: ${type}`);\n}\n"]}

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

@@ -1,4 +1,6 @@
+import { type FloatingPopupProps, type FloatingPopupRef } from "../FloatingPopup/index.js";
 import { type InsertCursorProps } from "./InsertCursor.js";
 import { type PlusButtonProps } from "./PlusButton.js";
-export type FloatingPlusButtonProps = Pick<PlusButtonProps, 'onClick'> & Pick<InsertCursorProps, 'type' | 'anchor'>;
-export declare const FloatingPlusButton: React.FC<FloatingPlusButtonProps>;
+export type FloatingPlusButtonRef = FloatingPopupRef & {};
+export type FloatingPlusButtonProps = Pick<FloatingPopupProps, 'floatingStyles'> & Pick<PlusButtonProps, 'onClick'> & Pick<InsertCursorProps, 'type' | 'anchor'>;
+export declare const FloatingPlusButton: import("react").ForwardRefExoticComponent<Pick<FloatingPopupProps, "floatingStyles"> & Pick<PlusButtonProps, "onClick"> & Pick<InsertCursorProps, "type" | "anchor"> & import("react").RefAttributes<FloatingPopupRef>>;