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

@gravity-ui/markdown-editor 15.25.0 → 15.27.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 (342) hide show

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>>;

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

@@ -18,9 +18,8 @@ const offsetByType = {
     row: { alignmentAxis: -10 },
     column: { alignmentAxis: -10 },
 };
-const FloatingPlusButton = function YfmTableFloatingPlusButton({ anchor, type, ...btnProps }) {
+exports.FloatingPlusButton = (0, react_1.forwardRef)(function YfmTableFloatingPlusButton({ anchor, type, floatingStyles, ...btnProps }, ref) {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FloatingPopup_1.FloatingPopup, { open: true, anchorElement: anchor, placement: placementByType[type], offset: offsetByType[type], style: styles, children: (0, jsx_runtime_1.jsx)(PlusButton_1.PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && (0, jsx_runtime_1.jsx)(InsertCursor_1.InsertCursor, { anchor: anchor, type: type })] }));
-};
-exports.FloatingPlusButton = FloatingPlusButton;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FloatingPopup_1.FloatingPopup, { open: true, ref: ref, anchorElement: anchor, floatingStyles: floatingStyles, placement: placementByType[type], offset: offsetByType[type], style: styles, children: (0, jsx_runtime_1.jsx)(PlusButton_1.PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && (0, jsx_runtime_1.jsx)(InsertCursor_1.InsertCursor, { anchor: anchor, type: type })] }));
+});
 //# sourceMappingURL=FloatingPlusButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingPlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.tsx"],"names":[],"mappings":";;;;AAAA,~~iCAA~~+B;AAE/B,~~6DAAwE;AAExE,~~oDAAoE;AACpE,gDAA8D;AAE9D,MAAM,MAAM,GAAwB;IAChC,YAAY,EAAE,OAAO,EAAE,8BAA8B;IACrD,UAAU,EAAE,aAAa;CAC5B,CAAC;AACF,MAAM,eAAe,GAAuE;IACxF,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,SAAS;CACpB,CAAC;AACF,MAAM,YAAY,GAAoE;IAClF,GAAG,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;IACzB,MAAM,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;CAC/B,CAAC;~~AAKK~~,~~MAAM~~,kBAAkB,~~GAC3B~~,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAC;~~IAC3D~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,6DACI,uBAAC,6BAAa,IACV,IAAI,QACJ,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAC1B,KAAK,EAAE,MAAM,YAEb,uBAAC,uBAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,uBAAC,2BAAY,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,CACN,CAAC;AACN,CAAC,CAAC~~;AAtBO,QAAA,kBAAkB,sBAsBzB~~","sourcesContent":["import {useState} from 'react';\n\nimport {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';\n\nimport {InsertCursor, type InsertCursorProps} from './InsertCursor';\nimport {PlusButton, type PlusButtonProps} from './PlusButton';\n\nconst styles: React.CSSProperties = {\n borderRadius: '100px', // button circle border radius\n background: 'transparent',\n};\nconst placementByType: Record<InsertCursorProps['type'], FloatingPopupProps['placement']> = {\n row: 'left-end',\n column: 'top-end',\n};\nconst offsetByType: Record<InsertCursorProps['type'], FloatingPopupProps['offset']> = {\n row: {alignmentAxis: -10},\n column: {alignmentAxis: -10},\n};\n\nexport type FloatingPlusButtonProps = Pick<PlusButtonProps, 'onClick'> &\n Pick<InsertCursorProps, 'type' \| 'anchor'>;\n\nexport const FloatingPlusButton: ~~React.FC~~<FloatingPlusButtonProps> =\n function YfmTableFloatingPlusButton({anchor, type, ...btnProps}) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <>\n <FloatingPopup\n open\n anchorElement={anchor}\n placement={placementByType[type]}\n offset={offsetByType[type]}\n style={styles}\n >\n <PlusButton\n {...btnProps}\n onHoverChange={setHovered}\n qa={`g-md-yfm-table-plus-${type}`}\n />\n </FloatingPopup>\n {hovered && <InsertCursor anchor={anchor} type={type} />}\n </>\n );\n };\n"]}
1	+ {"version":3,"file":"FloatingPlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.tsx"],"names":[],"mappings":";;;;AAAA,iCAA2C;AAE3C,6DAA+F;AAE/F,oDAAoE;AACpE,gDAA8D;AAE9D,MAAM,MAAM,GAAwB;IAChC,YAAY,EAAE,OAAO,EAAE,8BAA8B;IACrD,UAAU,EAAE,aAAa;CAC5B,CAAC;AACF,MAAM,eAAe,GAAuE;IACxF,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,SAAS;CACpB,CAAC;AACF,MAAM,YAAY,GAAoE;IAClF,GAAG,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;IACzB,MAAM,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;CAC/B,CAAC;AAQW,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EACxC,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,EAAE,GAAG;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,6DACI,uBAAC,6BAAa,IACV,IAAI,QACJ,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAC1B,KAAK,EAAE,MAAM,YAEb,uBAAC,uBAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,uBAAC,2BAAY,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,CACN,CAAC;AACN,CAAC,CACJ,CAAC","sourcesContent":["import {forwardRef, useState} from 'react';\n\nimport {FloatingPopup, type FloatingPopupProps, type FloatingPopupRef} from '../FloatingPopup';\n\nimport {InsertCursor, type InsertCursorProps} from './InsertCursor';\nimport {PlusButton, type PlusButtonProps} from './PlusButton';\n\nconst styles: React.CSSProperties = {\n borderRadius: '100px', // button circle border radius\n background: 'transparent',\n};\nconst placementByType: Record<InsertCursorProps['type'], FloatingPopupProps['placement']> = {\n row: 'left-end',\n column: 'top-end',\n};\nconst offsetByType: Record<InsertCursorProps['type'], FloatingPopupProps['offset']> = {\n row: {alignmentAxis: -10},\n column: {alignmentAxis: -10},\n};\n\nexport type FloatingPlusButtonRef = FloatingPopupRef & {};\n\nexport type FloatingPlusButtonProps = Pick<FloatingPopupProps, 'floatingStyles'> &\n Pick<PlusButtonProps, 'onClick'> &\n Pick<InsertCursorProps, 'type' \| 'anchor'>;\n\nexport const FloatingPlusButton = forwardRef<FloatingPlusButtonRef, FloatingPlusButtonProps>(\n function YfmTableFloatingPlusButton({anchor, type, floatingStyles, ...btnProps}, ref) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <>\n <FloatingPopup\n open\n ref={ref}\n anchorElement={anchor}\n floatingStyles={floatingStyles}\n placement={placementByType[type]}\n offset={offsetByType[type]}\n style={styles}\n >\n <PlusButton\n {...btnProps}\n onHoverChange={setHovered}\n qa={`g-md-yfm-table-plus-${type}`}\n />\n </FloatingPopup>\n {hovered && <InsertCursor anchor={anchor} type={type} />}\n </>\n );\n },\n);\n"]}

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

@@ -1,9 +1,11 @@
 import { type FloatingPlusButtonProps } from "../FloatingPlusButton/index.js";
+type ControlType = FloatingPlusButtonProps['type'];
 export type FloatingPlusControlProps = {
-    type: FloatingPlusButtonProps['type'];
+    type: ControlType;
     index: number;
     cellElem: Element;
     tableElem: Element;
     onClick: (rowIdx: number) => void;
 };
 export declare const FloatingPlusControl: import("react").NamedExoticComponent<FloatingPlusControlProps>;
+export {};

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

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingPlusControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_use_1 = require("react-use");
+const use_raf_throttle_1 = require("../../hooks/use-raf-throttle.js");
 const FloatingPlusButton_1 = require("../FloatingPlusButton/index.js");
 exports.FloatingPlusControl = (0, react_1.memo)(function YfmTableRowFloatingPlusControl({ type, index, cellElem, tableElem, onClick }) {
     const anchor = (0, react_1.useMemo)(() => ({
@@ -33,6 +35,39 @@ exports.FloatingPlusControl = (0, react_1.memo)(function YfmTableRowFloatingPlus
                 };
         },
     }), [cellElem, tableElem, type]);
-    return (0, jsx_runtime_1.jsx)(FloatingPlusButton_1.FloatingPlusButton, { anchor: anchor, type: type, onClick: () => onClick(index) });
+    const [visible, setVisible] = (0, react_1.useState)(() => shouldBeVisible(type, cellElem, tableElem));
+    const buttonRef = (0, react_1.useRef)(null);
+    const updateVisibility = () => {
+        const newVisible = shouldBeVisible(type, cellElem, tableElem);
+        if (visible !== newVisible)
+            setVisible(newVisible);
+    };
+    const onChange = (0, use_raf_throttle_1.useRafThrottle)(() => {
+        buttonRef.current?.forceUpdate();
+        updateVisibility();
+    });
+    // Update after first render
+    (0, react_use_1.useEffectOnce)(updateVisibility);
+    (0, react_1.useEffect)(() => {
+        if (type !== 'column')
+            return undefined;
+        const observer = new ResizeObserver(onChange);
+        observer.observe(tableElem);
+        tableElem.addEventListener('scroll', onChange);
+        return () => {
+            observer.unobserve(tableElem);
+            tableElem.removeEventListener('scroll', onChange);
+        };
+    }, [tableElem, onChange, type]);
+    return ((0, jsx_runtime_1.jsx)(FloatingPlusButton_1.FloatingPlusButton, { ref: buttonRef, anchor: anchor, type: type, onClick: () => onClick(index), floatingStyles: visible ? undefined : { display: 'none' } }));
 });
+function shouldBeVisible(type, cellElem, tableElem) {
+    if (type !== 'column')
+        return true;
+    const THRESHOLD = 4; // px
+    const cellRect = cellElem.getBoundingClientRect();
+    const tableRect = tableElem.getBoundingClientRect();
+    return (tableRect.left - cellRect.right <= THRESHOLD &&
+        cellRect.right - tableRect.right <= THRESHOLD);
+}
 //# sourceMappingURL=FloatingPlusControl.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingPlusControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.tsx"],"names":[],"mappings":";;;;AAAA,~~iCAAoC~~;~~AAKpC~~,~~uEAAuF~~;~~AAU1E~~,QAAA,mBAAmB,GAAG,IAAA,YAAI,EACnC,SAAS,8BAA8B,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC;IAC/E,MAAM,MAAM,GAAG,IAAA,eAAO,EAClB,GAAG,EAAE,CAAC,CAAC;QACH,cAAc,EAAE,SAAS;QACzB,qBAAqB;YACjB,MAAM,QAAQ,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAEpD,OAAO,IAAI,KAAK,KAAK;gBACjB,CAAC,CAAC;oBACI,CAAC,EAAE,SAAS,CAAC,CAAC;oBACd,CAAC,EAAE,QAAQ,CAAC,CAAC;oBACb,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,MAAM,EAAE,QAAQ,CAAC,MAAM;oBACvB,GAAG,EAAE,QAAQ,CAAC,GAAG;oBACjB,IAAI,EAAE,SAAS,CAAC,IAAI;oBACpB,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,MAAM,EAAE,QAAQ,CAAC,GAAG;iBACvB;gBACH,CAAC,CAAC;oBACI,CAAC,EAAE,QAAQ,CAAC,CAAC;oBACb,CAAC,EAAE,SAAS,CAAC,CAAC;oBACd,KAAK,EAAE,QAAQ,CAAC,KAAK;oBACrB,MAAM,EAAE,SAAS,CAAC,MAAM;oBACxB,GAAG,EAAE,SAAS,CAAC,GAAG;oBAClB,IAAI,EAAE,QAAQ,CAAC,IAAI;oBACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;oBACrB,MAAM,EAAE,SAAS,CAAC,GAAG;iBACxB,CAAC;QACZ,CAAC;KACJ,CAAC,EACF,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAC9B,CAAC;IAEF,OAAO,~~uBAAC~~,~~uCAAkB~~,~~IAAC~~,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,~~GAAI~~,CAAC;~~AAC7F~~,CAAC,CACJ,CAAC","sourcesContent":["import {memo, useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {VirtualElement} from '@floating-ui/dom';\n\nimport {FloatingPlusButton, type ~~FloatingPlusButtonProps~~} from '../FloatingPlusButton';\n\nexport type FloatingPlusControlProps = {\n type: ~~FloatingPlusButtonProps['type']~~;\n index: number;\n cellElem: Element;\n tableElem: Element;\n onClick: (rowIdx: number) => void;\n};\n\nexport const FloatingPlusControl = memo<FloatingPlusControlProps>(\n function YfmTableRowFloatingPlusControl({type, index, cellElem, tableElem, onClick}) {\n const anchor = useMemo<VirtualElement>(\n () => ({\n contextElement: tableElem,\n getBoundingClientRect() {\n const cellRect = cellElem.getBoundingClientRect();\n const tableRect = tableElem.getBoundingClientRect();\n\n return type === 'row'\n ? {\n x: tableRect.x,\n y: cellRect.y,\n width: tableRect.width,\n height: cellRect.height,\n top: cellRect.top,\n left: tableRect.left,\n right: tableRect.right,\n bottom: cellRect.top,\n }\n : {\n x: cellRect.x,\n y: tableRect.y,\n width: cellRect.width,\n height: tableRect.height,\n top: tableRect.top,\n left: cellRect.left,\n right: cellRect.right,\n bottom: tableRect.top,\n };\n },\n }),\n [cellElem, tableElem, type],\n );\n\n return <FloatingPlusButton anchor={anchor} type={type} onClick={() => onClick(index)} ~~/>;\~~n },\n);\n"]}
1	+ {"version":3,"file":"FloatingPlusControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import {memo, useEffect, useMemo, useRef, useState} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {VirtualElement} from '@floating-ui/dom';\nimport {useEffectOnce} from 'react-use';\n\nimport {useRafThrottle} from '../../hooks/use-raf-throttle';\nimport {\n FloatingPlusButton,\n type FloatingPlusButtonProps,\n type FloatingPlusButtonRef,\n} from '../FloatingPlusButton';\n\ntype ControlType = FloatingPlusButtonProps['type'];\n\nexport type FloatingPlusControlProps = {\n type: ControlType;\n index: number;\n cellElem: Element;\n tableElem: Element;\n onClick: (rowIdx: number) => void;\n};\n\nexport const FloatingPlusControl = memo<FloatingPlusControlProps>(\n function YfmTableRowFloatingPlusControl({type, index, cellElem, tableElem, onClick}) {\n const anchor = useMemo<VirtualElement>(\n () => ({\n contextElement: tableElem,\n getBoundingClientRect() {\n const cellRect = cellElem.getBoundingClientRect();\n const tableRect = tableElem.getBoundingClientRect();\n\n return type === 'row'\n ? {\n x: tableRect.x,\n y: cellRect.y,\n width: tableRect.width,\n height: cellRect.height,\n top: cellRect.top,\n left: tableRect.left,\n right: tableRect.right,\n bottom: cellRect.top,\n }\n : {\n x: cellRect.x,\n y: tableRect.y,\n width: cellRect.width,\n height: tableRect.height,\n top: tableRect.top,\n left: cellRect.left,\n right: cellRect.right,\n bottom: tableRect.top,\n };\n },\n }),\n [cellElem, tableElem, type],\n );\n\n const [visible, setVisible] = useState(() => shouldBeVisible(type, cellElem, tableElem));\n const buttonRef = useRef<FloatingPlusButtonRef>(null);\n\n const updateVisibility = () => {\n const newVisible = shouldBeVisible(type, cellElem, tableElem);\n if (visible !== newVisible) setVisible(newVisible);\n };\n\n const onChange = useRafThrottle(() => {\n buttonRef.current?.forceUpdate();\n updateVisibility();\n });\n\n // Update after first render\n useEffectOnce(updateVisibility);\n\n useEffect(() => {\n if (type !== 'column') return undefined;\n\n const observer = new ResizeObserver(onChange);\n observer.observe(tableElem);\n tableElem.addEventListener('scroll', onChange);\n\n return () => {\n observer.unobserve(tableElem);\n tableElem.removeEventListener('scroll', onChange);\n };\n }, [tableElem, onChange, type]);\n\n return (\n <FloatingPlusButton\n ref={buttonRef}\n anchor={anchor}\n type={type}\n onClick={() => onClick(index)}\n floatingStyles={visible ? undefined : {display: 'none'}}\n />\n );\n },\n);\n\nfunction shouldBeVisible(type: ControlType, cellElem: Element, tableElem: Element): boolean {\n if (type !== 'column') return true;\n\n const THRESHOLD = 4; // px\n\n const cellRect = cellElem.getBoundingClientRect();\n const tableRect = tableElem.getBoundingClientRect();\n\n return (\n tableRect.left - cellRect.right <= THRESHOLD &&\n cellRect.right - tableRect.right <= THRESHOLD\n );\n}\n"]}