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

@gravity-ui/markdown-editor 15.24.1 → 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 (244) hide show

package/build/esm/extensions/yfm/YfmCut/const.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { CutNode, cutType, cutTitleType, cutContentType } from "./YfmCutSpecs/const.js";
+export { CutNode, CutAttr, cutType, cutTitleType, cutContentType } from "./YfmCutSpecs/const.js";
 export declare const YfmCutClassName: {
     readonly TitleInner: "g-md-yfm-cut-title-inner";
     readonly Open: "yfm-cut-open";

package/build/esm/extensions/yfm/YfmCut/const.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { YfmCutClassName as YfmCutClassNameSpecs } from "./YfmCutSpecs/const.js";
-export { CutNode, cutType, cutTitleType, cutContentType } from "./YfmCutSpecs/const.js";
+export { CutNode, CutAttr, cutType, cutTitleType, cutContentType } from "./YfmCutSpecs/const.js";
 export const YfmCutClassName = {
     ...YfmCutClassNameSpecs,
     TitleInner: 'g-md-yfm-cut-title-inner',

package/build/esm/extensions/yfm/YfmCut/const.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.js","sourceRoot":"../../../../../src","sources":["extensions/yfm/YfmCut/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,IAAI,oBAAoB,EAAC,+BAA4B;AAE5E,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAC,+BAA4B;~~AAEnF~~,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,GAAG,oBAAoB;IACvB,UAAU,EAAE,0BAA0B;IACtC,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,gBAAgB;CAClB,CAAC","sourcesContent":["import {YfmCutClassName as YfmCutClassNameSpecs} from './YfmCutSpecs/const';\n\nexport {CutNode, cutType, cutTitleType, cutContentType} from './YfmCutSpecs/const';\n\nexport const YfmCutClassName = {\n ...YfmCutClassNameSpecs,\n TitleInner: 'g-md-yfm-cut-title-inner',\n Open: 'yfm-cut-open',\n Active: 'yfm-cut-active',\n} as const;\n"]}
1	+ {"version":3,"file":"const.js","sourceRoot":"../../../../../src","sources":["extensions/yfm/YfmCut/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,IAAI,oBAAoB,EAAC,+BAA4B;AAE5E,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAC,+BAA4B;AAE5F,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,GAAG,oBAAoB;IACvB,UAAU,EAAE,0BAA0B;IACtC,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,gBAAgB;CAClB,CAAC","sourcesContent":["import {YfmCutClassName as YfmCutClassNameSpecs} from './YfmCutSpecs/const';\n\nexport {CutNode, CutAttr, cutType, cutTitleType, cutContentType} from './YfmCutSpecs/const';\n\nexport const YfmCutClassName = {\n ...YfmCutClassNameSpecs,\n TitleInner: 'g-md-yfm-cut-title-inner',\n Open: 'yfm-cut-open',\n Active: 'yfm-cut-active',\n} as const;\n"]}

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { YfmCutClassName } from "../const.js";
+import { CutAttr, YfmCutClassName } from "../const.js";
 import "./yfm-cut-title.css";
 export class YfmCutTitleNodeView {
     dom;
@@ -9,6 +9,7 @@ export class YfmCutTitleNodeView {
         this.dom = document.createElement('div');
         this.dom.classList.add(YfmCutClassName.Title);
         this.dom.addEventListener('click', this._onTitleClick);
+        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
         this.contentDOM = this.dom.appendChild(document.createElement('div'));
         this.contentDOM.classList.add(YfmCutClassName.TitleInner);
         this.contentDOM.addEventListener('click', this._onTitleInnerClick);
@@ -17,6 +18,7 @@ export class YfmCutTitleNodeView {
         if (this.node.type !== node.type)
             return false;
         this.node = node;
+        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
         return true;
     }
     destroy() {
@@ -40,4 +42,12 @@ export class YfmCutTitleNodeView {
         e.preventDefault();
     };
 }
+function updateDomAttribute(elem, attr, value) {
+    if (value) {
+        elem.setAttribute(attr, value);
+    }
+    else {
+        elem.removeAttribute(attr);
+    }
+}
 //# sourceMappingURL=yfm-cut-title.js.map

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"yfm-cut-title.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,eAAe,EAAC,oBAAiB;~~AAEzC~~,6BAA8B;AAE9B,MAAM,OAAO,mBAAmB;IACnB,GAAG,CAAc;IACjB,UAAU,CAAc;IAEzB,IAAI,CAAO;IAEnB,YAAY,IAAU;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;~~QAEvD~~,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACvE,CAAC;IAED,MAAM,CAAC,IAAU;QACb,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO;QACH,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1E,CAAC;IAEO,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;QACtC,MAAM,EAAC,aAAa,EAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,aAAa,YAAY,WAAW,EAAE,CAAC;YACvC,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC;YAC3C,IAAI,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClD,yDAAyD;gBACzD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAClD,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC3C,uCAAuC;QACvC,2DAA2D;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,CAAC;CACL","sourcesContent":["import type {Node} from '#pm/model';\nimport type {NodeView} from '#pm/view';\n\nimport {YfmCutClassName} from '../const';\n\nimport './yfm-cut-title.scss';\n\nexport class YfmCutTitleNodeView implements NodeView {\n readonly dom: HTMLElement;\n readonly contentDOM: HTMLElement;\n\n private node: Node;\n\n constructor(node: Node) {\n this.node = node;\n\n this.dom = document.createElement('div');\n this.dom.classList.add(YfmCutClassName.Title);\n this.dom.addEventListener('click', this._onTitleClick);\n\n this.contentDOM = this.dom.appendChild(document.createElement('div'));\n this.contentDOM.classList.add(YfmCutClassName.TitleInner);\n this.contentDOM.addEventListener('click', this._onTitleInnerClick);\n }\n\n update(node: Node): boolean {\n if (this.node.type !== node.type) return false;\n this.node = node;\n return true;\n }\n\n destroy() {\n this.dom.removeEventListener('click', this._onTitleClick);\n this.contentDOM.removeEventListener('click', this._onTitleInnerClick);\n }\n\n private _onTitleClick = (e: MouseEvent) => {\n const {currentTarget} = e;\n if (currentTarget instanceof HTMLElement) {\n const parent = currentTarget.parentElement;\n if (parent?.classList.contains(YfmCutClassName.Cut)) {\n // TODO: toggle open classname via prosemirror decoration\n parent.classList.toggle(YfmCutClassName.Open);\n }\n }\n };\n\n private _onTitleInnerClick = (e: MouseEvent) => {\n // ignore clicking on the title content\n // you can open/close yfm-cut by clicking on the arrow icon\n e.stopPropagation();\n e.preventDefault();\n };\n}\n"]}
1	+ {"version":3,"file":"yfm-cut-title.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,OAAO,EAAE,eAAe,EAAC,oBAAiB;AAElD,6BAA8B;AAE9B,MAAM,OAAO,mBAAmB;IACnB,GAAG,CAAc;IACjB,UAAU,CAAc;IAEzB,IAAI,CAAO;IAEnB,YAAY,IAAU;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACvD,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACvE,CAAC;IAED,MAAM,CAAC,IAAU;QACb,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACrE,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO;QACH,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1E,CAAC;IAEO,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;QACtC,MAAM,EAAC,aAAa,EAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,aAAa,YAAY,WAAW,EAAE,CAAC;YACvC,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC;YAC3C,IAAI,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClD,yDAAyD;gBACzD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAClD,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC3C,uCAAuC;QACvC,2DAA2D;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,CAAC;CACL;AAED,SAAS,kBAAkB,CAAC,IAAa,EAAE,IAAY,EAAE,KAAgC;IACrF,IAAI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;SAAM,CAAC;QACJ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;AACL,CAAC","sourcesContent":["import type {Node} from '#pm/model';\nimport type {NodeView} from '#pm/view';\n\nimport {CutAttr, YfmCutClassName} from '../const';\n\nimport './yfm-cut-title.scss';\n\nexport class YfmCutTitleNodeView implements NodeView {\n readonly dom: HTMLElement;\n readonly contentDOM: HTMLElement;\n\n private node: Node;\n\n constructor(node: Node) {\n this.node = node;\n\n this.dom = document.createElement('div');\n this.dom.classList.add(YfmCutClassName.Title);\n this.dom.addEventListener('click', this._onTitleClick);\n updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);\n\n this.contentDOM = this.dom.appendChild(document.createElement('div'));\n this.contentDOM.classList.add(YfmCutClassName.TitleInner);\n this.contentDOM.addEventListener('click', this._onTitleInnerClick);\n }\n\n update(node: Node): boolean {\n if (this.node.type !== node.type) return false;\n this.node = node;\n updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);\n return true;\n }\n\n destroy() {\n this.dom.removeEventListener('click', this._onTitleClick);\n this.contentDOM.removeEventListener('click', this._onTitleInnerClick);\n }\n\n private _onTitleClick = (e: MouseEvent) => {\n const {currentTarget} = e;\n if (currentTarget instanceof HTMLElement) {\n const parent = currentTarget.parentElement;\n if (parent?.classList.contains(YfmCutClassName.Cut)) {\n // TODO: toggle open classname via prosemirror decoration\n parent.classList.toggle(YfmCutClassName.Open);\n }\n }\n };\n\n private _onTitleInnerClick = (e: MouseEvent) => {\n // ignore clicking on the title content\n // you can open/close yfm-cut by clicking on the arrow icon\n e.stopPropagation();\n e.preventDefault();\n };\n}\n\nfunction updateDomAttribute(elem: Element, attr: string, value: string \| null \| undefined) {\n if (value) {\n elem.setAttribute(attr, value);\n } else {\n elem.removeAttribute(attr);\n }\n}\n"]}

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/const.d.ts CHANGED Viewed

@@ -5,5 +5,6 @@ export declare enum NoteNode {
 }
 export declare enum NoteAttrs {
     Class = "class",
-    Type = "note-type"
+    Type = "note-type",
+    Line = "data-line"
 }

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/const.js CHANGED Viewed

@@ -8,5 +8,6 @@ export var NoteAttrs;
 (function (NoteAttrs) {
     NoteAttrs["Class"] = "class";
     NoteAttrs["Type"] = "note-type";
+    NoteAttrs["Line"] = "data-line";
 })(NoteAttrs || (NoteAttrs = {}));
 //# sourceMappingURL=const.js.map

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/const.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,6BAAiB,CAAA;IACjB,wCAA4B,CAAA;IAC5B,4CAAgC,CAAA;AACpC,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,CAAN,IAAY,~~SAGX~~;~~AAHD~~,WAAY,SAAS;IACjB,4BAAe,CAAA;IACf,+BAAkB,CAAA;AACtB,CAAC,~~EAHW~~,SAAS,KAAT,SAAS,~~QAGpB~~","sourcesContent":["export enum NoteNode {\n Note = 'yfm_note',\n NoteTitle = 'yfm_note_title',\n NoteContent = 'yfm_note_content',\n}\n\nexport enum NoteAttrs {\n Class = 'class',\n Type = 'note-type',\n}\n"]}
1	+ {"version":3,"file":"const.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,6BAAiB,CAAA;IACjB,wCAA4B,CAAA;IAC5B,4CAAgC,CAAA;AACpC,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACjB,4BAAe,CAAA;IACf,+BAAkB,CAAA;IAClB,+BAAkB,CAAA;AACtB,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB","sourcesContent":["export enum NoteNode {\n Note = 'yfm_note',\n NoteTitle = 'yfm_note_title',\n NoteContent = 'yfm_note_content',\n}\n\nexport enum NoteAttrs {\n Class = 'class',\n Type = 'note-type',\n Line = 'data-line',\n}\n"]}

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/parser.js CHANGED Viewed

@@ -1,11 +1,24 @@
-import { NoteNode } from "./const.js";
+import { NoteAttrs, NoteNode } from "./const.js";
 export const parserTokens = {
     [NoteNode.Note]: {
         name: NoteNode.Note,
         type: 'block',
         getAttrs: (token) => (token.attrs ? Object.fromEntries(token.attrs) : {}),
     },
-    [NoteNode.NoteTitle]: { name: NoteNode.NoteTitle, type: 'block' },
+    [NoteNode.NoteTitle]: {
+        name: NoteNode.NoteTitle,
+        type: 'block',
+        getAttrs: (token, tokens, index) => {
+            let dataLine = token.attrGet('data-line');
+            if (!dataLine) {
+                const prevToken = tokens[index - 1];
+                if (prevToken?.type === 'yfm_note_open') {
+                    dataLine = prevToken.attrGet('data-line');
+                }
+            }
+            return { [NoteAttrs.Line]: dataLine };
+        },
+    },
     [NoteNode.NoteContent]: { name: NoteNode.NoteContent, type: 'block' },
 };
 //# sourceMappingURL=parser.js.map

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/parser.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"parser.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/parser.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,mBAAgB;~~AAEjC~~,MAAM,CAAC,MAAM,YAAY,GAAkC;IACvD,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACb,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC5E;IACD,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,~~EAAC~~,IAAI,EAAE,QAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAC;~~IAC/D~~,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,EAAC,IAAI,EAAE,QAAQ,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAC;CACtE,CAAC","sourcesContent":["import type {ParserToken} from '../../../../core';\n\nimport {NoteNode} from './const';\n\nexport const parserTokens: Record<NoteNode, ParserToken> = {\n [NoteNode.Note]: {\n name: NoteNode.Note,\n type: 'block',\n getAttrs: (token) => (token.attrs ? Object.fromEntries(token.attrs) : {}),\n },\n [NoteNode.NoteTitle]: {name: NoteNode.NoteTitle, type: 'block'},\n [NoteNode.NoteContent]: {name: NoteNode.NoteContent, type: 'block'},\n};\n"]}
1	+ {"version":3,"file":"parser.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/parser.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,mBAAgB;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAkC;IACvD,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACb,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC5E;IACD,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QAClB,IAAI,EAAE,QAAQ,CAAC,SAAS;QACxB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACZ,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACpC,IAAI,SAAS,EAAE,IAAI,KAAK,eAAe,EAAE,CAAC;oBACtC,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;gBAC9C,CAAC;YACL,CAAC;YACD,OAAO,EAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAC,CAAC;QACxC,CAAC;KACJ;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,EAAC,IAAI,EAAE,QAAQ,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAC;CACtE,CAAC","sourcesContent":["import type {ParserToken} from '../../../../core';\n\nimport {NoteAttrs, NoteNode} from './const';\n\nexport const parserTokens: Record<NoteNode, ParserToken> = {\n [NoteNode.Note]: {\n name: NoteNode.Note,\n type: 'block',\n getAttrs: (token) => (token.attrs ? Object.fromEntries(token.attrs) : {}),\n },\n [NoteNode.NoteTitle]: {\n name: NoteNode.NoteTitle,\n type: 'block',\n getAttrs: (token, tokens, index) => {\n let dataLine = token.attrGet('data-line');\n if (!dataLine) {\n const prevToken = tokens[index - 1];\n if (prevToken?.type === 'yfm_note_open') {\n dataLine = prevToken.attrGet('data-line');\n }\n }\n return {[NoteAttrs.Line]: dataLine};\n },\n },\n [NoteNode.NoteContent]: {name: NoteNode.NoteContent, type: 'block'},\n};\n"]}

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/schema.js CHANGED Viewed

@@ -27,6 +27,7 @@ export const getSchemaSpecs = (opts, placeholder) => ({
         complex: 'root',
     },
     [NoteNode.NoteTitle]: {
+        attrs: { [NoteAttrs.Line]: { default: null } },
         content: 'inline*',
         group: 'block yfm-note',
         parseDOM: [
@@ -35,8 +36,8 @@ export const getSchemaSpecs = (opts, placeholder) => ({
                 priority: 100,
             },
         ],
-        toDOM() {
-            return ['p', { class: 'yfm-note-title' }, 0];
+        toDOM(node) {
+            return ['p', { class: 'yfm-note-title', ...node.attrs }, 0];
         },
         selectable: false,
         allowSelection: false,

package/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/schema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,mBAAgB;AAI5C,MAAM,yBAAyB,GAAG,MAAM,CAAC;AACzC,MAAM,2BAA2B,GAAG,cAAc,CAAC;AAEnD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC1B,IAA0B,EAC1B,WAAgC,EACN,EAAE,CAAC,CAAC;IAC9B,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACb,KAAK,EAAE;YACH,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,0BAA0B,EAAC;YACxD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;SACtC;QACD,OAAO,EAAE,GAAG,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,WAAW,EAAE;QACxD,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,cAAc;gBACnB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;oBACxE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAAM;iBAC7E,CAAC;aACL;SACJ;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QAClB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,kBAAkB;gBACvB,QAAQ,EAAE,GAAG;aAChB;SACJ;QACD,KAAK;~~YACD~~,OAAO,CAAC,GAAG,EAAE,EAAC,KAAK,EAAE,gBAAgB,EAAC,EAAE,CAAC,CAAC,CAAC;~~QAC/C~~,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE;YACT,OAAO,EACH,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;gBACjC,IAAI,EAAE,uBAAuB;gBAC7B,yBAAyB;YAC7B,aAAa,EAAE,IAAI;SACtB;QACD,OAAO,EAAE,MAAM;KAClB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;QACpB,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,sBAAsB;gBAC3B,QAAQ,EAAE,GAAG;aAChB;SACJ;QACD,KAAK;YACD,OAAO,CAAC,KAAK,EAAE,EAAC,KAAK,EAAE,kBAAkB,EAAC,EAAE,CAAC,CAAC,CAAC;QACnD,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE;YACT,OAAO,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,2BAA2B;YAC3E,aAAa,EAAE,IAAI;SACtB;QACD,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC","sourcesContent":["import type {NodeSpec} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {NoteAttrs, NoteNode} from './const';\n\nimport type {YfmNoteSpecsOptions} from './index';\n\nconst DEFAULT_TITLE_PLACEHOLDER = 'Note';\nconst DEFAULT_CONTENT_PLACEHOLDER = 'Note content';\n\nexport const getSchemaSpecs = (\n opts?: YfmNoteSpecsOptions,\n placeholder?: PlaceholderOptions,\n): Record<NoteNode, NodeSpec> => ({\n [NoteNode.Note]: {\n attrs: {\n [NoteAttrs.Class]: {default: 'yfm-note yfm-accent-info'},\n [NoteAttrs.Type]: {default: 'info'},\n },\n content: `${NoteNode.NoteTitle} ${NoteNode.NoteContent}`,\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'div.yfm-note',\n priority: 100,\n getAttrs: (node) => ({\n [NoteAttrs.Class]: (node as Element).getAttribute(NoteAttrs.Class) \|\| '',\n [NoteAttrs.Type]: (node as Element).getAttribute(NoteAttrs.Type) \|\| 'info',\n }),\n },\n ],\n toDOM(node) {\n return ['div', node.attrs, 0];\n },\n selectable: true,\n allowSelection: true,\n complex: 'root',\n },\n\n [NoteNode.NoteTitle]: {\n content: 'inline*',\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'p.yfm-note-title',\n priority: 100,\n },\n ],\n toDOM() {\n return ['p', {class: 'yfm-note-title'}, 0];\n },\n selectable: false,\n allowSelection: false,\n placeholder: {\n content:\n placeholder?.[NoteNode.NoteTitle] ??\n opts?.yfmNoteTitlePlaceholder ??\n DEFAULT_TITLE_PLACEHOLDER,\n alwaysVisible: true,\n },\n complex: 'leaf',\n },\n [NoteNode.NoteContent]: {\n content: '(block \| paragraph)+',\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'div.yfm-note-content',\n priority: 100,\n },\n ],\n toDOM() {\n return ['div', {class: 'yfm-note-content'}, 0];\n },\n selectable: false,\n allowSelection: false,\n placeholder: {\n content: placeholder?.[NoteNode.NoteContent] ?? DEFAULT_CONTENT_PLACEHOLDER,\n alwaysVisible: true,\n },\n complex: 'leaf',\n },\n});\n"]}
1	+ {"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/YfmNote/YfmNoteSpecs/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,mBAAgB;AAI5C,MAAM,yBAAyB,GAAG,MAAM,CAAC;AACzC,MAAM,2BAA2B,GAAG,cAAc,CAAC;AAEnD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC1B,IAA0B,EAC1B,WAAgC,EACN,EAAE,CAAC,CAAC;IAC9B,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACb,KAAK,EAAE;YACH,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,0BAA0B,EAAC;YACxD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;SACtC;QACD,OAAO,EAAE,GAAG,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,WAAW,EAAE;QACxD,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,cAAc;gBACnB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;oBACxE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAAM;iBAC7E,CAAC;aACL;SACJ;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QAClB,KAAK,EAAE,EAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,EAAC;QAC1C,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,kBAAkB;gBACvB,QAAQ,EAAE,GAAG;aAChB;SACJ;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,GAAG,EAAE,EAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC,CAAC;QAC9D,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE;YACT,OAAO,EACH,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;gBACjC,IAAI,EAAE,uBAAuB;gBAC7B,yBAAyB;YAC7B,aAAa,EAAE,IAAI;SACtB;QACD,OAAO,EAAE,MAAM;KAClB;IACD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;QACpB,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,sBAAsB;gBAC3B,QAAQ,EAAE,GAAG;aAChB;SACJ;QACD,KAAK;YACD,OAAO,CAAC,KAAK,EAAE,EAAC,KAAK,EAAE,kBAAkB,EAAC,EAAE,CAAC,CAAC,CAAC;QACnD,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,WAAW,EAAE;YACT,OAAO,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,2BAA2B;YAC3E,aAAa,EAAE,IAAI;SACtB;QACD,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC","sourcesContent":["import type {NodeSpec} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {NoteAttrs, NoteNode} from './const';\n\nimport type {YfmNoteSpecsOptions} from './index';\n\nconst DEFAULT_TITLE_PLACEHOLDER = 'Note';\nconst DEFAULT_CONTENT_PLACEHOLDER = 'Note content';\n\nexport const getSchemaSpecs = (\n opts?: YfmNoteSpecsOptions,\n placeholder?: PlaceholderOptions,\n): Record<NoteNode, NodeSpec> => ({\n [NoteNode.Note]: {\n attrs: {\n [NoteAttrs.Class]: {default: 'yfm-note yfm-accent-info'},\n [NoteAttrs.Type]: {default: 'info'},\n },\n content: `${NoteNode.NoteTitle} ${NoteNode.NoteContent}`,\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'div.yfm-note',\n priority: 100,\n getAttrs: (node) => ({\n [NoteAttrs.Class]: (node as Element).getAttribute(NoteAttrs.Class) \|\| '',\n [NoteAttrs.Type]: (node as Element).getAttribute(NoteAttrs.Type) \|\| 'info',\n }),\n },\n ],\n toDOM(node) {\n return ['div', node.attrs, 0];\n },\n selectable: true,\n allowSelection: true,\n complex: 'root',\n },\n\n [NoteNode.NoteTitle]: {\n attrs: {[NoteAttrs.Line]: {default: null}},\n content: 'inline*',\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'p.yfm-note-title',\n priority: 100,\n },\n ],\n toDOM(node) {\n return ['p', {class: 'yfm-note-title', ...node.attrs}, 0];\n },\n selectable: false,\n allowSelection: false,\n placeholder: {\n content:\n placeholder?.[NoteNode.NoteTitle] ??\n opts?.yfmNoteTitlePlaceholder ??\n DEFAULT_TITLE_PLACEHOLDER,\n alwaysVisible: true,\n },\n complex: 'leaf',\n },\n [NoteNode.NoteContent]: {\n content: '(block \| paragraph)+',\n group: 'block yfm-note',\n parseDOM: [\n {\n tag: 'div.yfm-note-content',\n priority: 100,\n },\n ],\n toDOM() {\n return ['div', {class: 'yfm-note-content'}, 0];\n },\n selectable: false,\n allowSelection: false,\n placeholder: {\n content: placeholder?.[NoteNode.NoteContent] ?? DEFAULT_CONTENT_PLACEHOLDER,\n alwaysVisible: true,\n },\n complex: 'leaf',\n },\n});\n"]}

package/build/esm/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/esm/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,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,IAAI,UAAU,EAAE,cAAc,IAAI,UAAU,EAAC,MAAM,mBAAmB,CAAC;AACvF,OAAO,EACH,MAAM,EAEN,YAAY,EAEZ,IAAI,EACJ,IAAI,GACP,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,eAAe,EAAC,kDAAwB;AAEhD,OAAO,EAAC,aAAa,~~EAA0B~~,kCAAyB;~~AAExE~~,MAAM,WAAW,GAAiC;IAC9C,QAAQ,EAAE,CAAC,GAAG;CACjB,CAAC;AAcF,MAAM,CAAC,MAAM,YAAY,GAAgC,SAAS,oBAAoB,CAAC,KAAK;IACxF,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,YAAY,EAAC,GACpF,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,cAAc,GAAG,YAAY,IAAI,SAAS,CAAC;IACjD,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,CAAC;IAEpC,OAAO,CACH,KAAC,aAAa,IACV,IAAI,QACJ,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACrC,cAAc,EAAE;YACZ,UAAU,EAAE,SAAS;SACxB,EACD,KAAK,EAAE;YACH,eAAe,EAAE,aAAa;SACjC,YAED,KAAC,YAAY,IACT,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE;gBACtB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACvB,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;YAC1B,CAAC,EACD,cAAc,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CAC/B,KAAC,IAAI,IACD,aAAa,QACb,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE;oBACH,YAAY,EAAE,2BAA2B;oBACzC,eAAe,EAAE,cAAc;wBAC3B,CAAC,CAAC,gCAAgC;wBAClC,CAAC,CAAC,SAAS;iBAClB,EACD,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,YAE1B,KAAC,MAAM,IACH,KAAK,EAAE;wBACH,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;wBACpC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;wBAClD,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;wBACvD,uBAAuB,EAAE,cAAc;4BACnC,CAAC,CAAC,SAAS;4BACX,CAAC,CAAC,gCAAgC;qBACzC,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,EACnD,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EACrD,IAAI,EAAC,IAAI,EACT,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,2BAA2B,KAClE,aAAa,KACb,kBAAkB,YAErB,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAAI,CACpD,CAAC,CAAC,CAAC,CACA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,WAAW;qBACxC,GACI,GACN,CACV,EACD,UAAU,EAAE;gBACR,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc;aACxD,EACD,SAAS,EAAE,EAAC,EAAE,EAAE,kBAAkB,OAAO,OAAO,EAAC,EACjD,KAAK,EAAE,aAAa,GACtB,GACU,CACnB,CAAC;AACN,CAAC,CAAC","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/esm/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/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, BroomMotion as ClearCells, T
 import { Icon } from '@gravity-ui/uikit';
 import { i18n } from "../../../../../../../i18n/yfm-table/index.js";
 import { FloatingMenu } from "../FloatingMenu/FloatingMenu.js";
-export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, acnhorElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
+export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, cellElement, tableElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
     const dropdownItems = useMemo(() => [
         [
             {
@@ -52,7 +52,8 @@ export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type,
         onRemoveRangeClick,
         onRemoveTableClick,
     ]);
-    return (_jsx(FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: acnhorElement, switcherMouseProps: dndHandler
+    const anchor = useMemo(() => getVirtualAnchor(type, tableElement, cellElement), [type, tableElement, cellElement]);
+    return (_jsx(FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: anchor, switcherMouseProps: dndHandler
             ? {
                 onMouseLeave: dndHandler.control_handleMouseLeave,
                 onMouseDown: dndHandler.control_handleMouseDown,
@@ -61,4 +62,60 @@ export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type,
             }
             : undefined, dropdownItems: dropdownItems }));
 };
+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/esm/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":"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","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/esm/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/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { FloatingPopup } from "../FloatingPopup/index.js";
 import { InsertCursor } from "./InsertCursor.js";
 import { PlusButton } from "./PlusButton.js";
@@ -15,8 +15,8 @@ const offsetByType = {
     row: { alignmentAxis: -10 },
     column: { alignmentAxis: -10 },
 };
-export const FloatingPlusButton = function YfmTableFloatingPlusButton({ anchor, type, ...btnProps }) {
+export const FloatingPlusButton = forwardRef(function YfmTableFloatingPlusButton({ anchor, type, floatingStyles, ...btnProps }, ref) {
     const [hovered, setHovered] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(FloatingPopup, { open: true, anchorElement: anchor, placement: placementByType[type], offset: offsetByType[type], style: styles, children: _jsx(PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && _jsx(InsertCursor, { anchor: anchor, type: type })] }));
-};
+    return (_jsxs(_Fragment, { children: [_jsx(FloatingPopup, { open: true, ref: ref, anchorElement: anchor, floatingStyles: floatingStyles, placement: placementByType[type], offset: offsetByType[type], style: styles, children: _jsx(PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && _jsx(InsertCursor, { anchor: anchor, type: type })] }));
+});
 //# sourceMappingURL=FloatingPlusButton.js.map

package/build/esm/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,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;~~AAE/B~~,OAAO,EAAC,aAAa,~~EAA0B~~,kCAAyB;~~AAExE~~,OAAO,EAAC,YAAY,EAAyB,0BAAuB;AACpE,OAAO,EAAC,UAAU,EAAuB,wBAAqB;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;~~AAKF~~,MAAM,CAAC,MAAM,kBAAkB,~~GAC3B~~,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAC;~~IAC3D~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,8BACI,KAAC,aAAa,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,KAAC,UAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,CACN,CAAC;AACN,CAAC,CAAC","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,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAC,aAAa,EAAiD,kCAAyB;AAE/F,OAAO,EAAC,YAAY,EAAyB,0BAAuB;AACpE,OAAO,EAAC,UAAU,EAAuB,wBAAqB;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;AAQF,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CACxC,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,EAAE,GAAG;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,8BACI,KAAC,aAAa,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,KAAC,UAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,KAAC,YAAY,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/esm/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/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
-import { FloatingPlusButton } from "../FloatingPlusButton/index.js";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffectOnce } from 'react-use';
+import { useRafThrottle } from "../../hooks/use-raf-throttle.js";
+import { FloatingPlusButton, } from "../FloatingPlusButton/index.js";
 export const FloatingPlusControl = memo(function YfmTableRowFloatingPlusControl({ type, index, cellElem, tableElem, onClick }) {
     const anchor = useMemo(() => ({
         contextElement: tableElem,
@@ -30,6 +32,39 @@ export const FloatingPlusControl = memo(function YfmTableRowFloatingPlusControl(
                 };
         },
     }), [cellElem, tableElem, type]);
-    return _jsx(FloatingPlusButton, { anchor: anchor, type: type, onClick: () => onClick(index) });
+    const [visible, setVisible] = useState(() => shouldBeVisible(type, cellElem, tableElem));
+    const buttonRef = useRef(null);
+    const updateVisibility = () => {
+        const newVisible = shouldBeVisible(type, cellElem, tableElem);
+        if (visible !== newVisible)
+            setVisible(newVisible);
+    };
+    const onChange = useRafThrottle(() => {
+        buttonRef.current?.forceUpdate();
+        updateVisibility();
+    });
+    // Update after first render
+    useEffectOnce(updateVisibility);
+    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 (_jsx(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/esm/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,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;~~AAKpC~~,OAAO,EAAC,kBAAkB,~~EAA+B~~,uCAA8B;~~AAUvF~~,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CACnC,SAAS,8BAA8B,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC;IAC/E,MAAM,MAAM,GAAG,OAAO,CAClB,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,~~KAAC~~,~~kBAAkB~~,~~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":";AAAA,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAExC,OAAO,EAAC,cAAc,EAAC,wCAAqC;AAC5D,OAAO,EACH,kBAAkB,GAGrB,uCAA8B;AAY/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CACnC,SAAS,8BAA8B,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC;IAC/E,MAAM,MAAM,GAAG,OAAO,CAClB,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,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEtD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC1B,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QAC9D,IAAI,OAAO,KAAK,UAAU;YAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;QACjC,gBAAgB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,4BAA4B;IAC5B,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,KAAK,QAAQ;YAAE,OAAO,SAAS,CAAC;QAExC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC9C,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAC5B,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;YAC9B,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACtD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAEhC,OAAO,CACH,KAAC,kBAAkB,IACf,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,MAAM,EAAC,GACzD,CACL,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,SAAS,eAAe,CAAC,IAAiB,EAAE,QAAiB,EAAE,SAAkB;IAC7E,IAAI,IAAI,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAEnC,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK;IAE1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAEpD,OAAO,CACH,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,IAAI,SAAS;QAC5C,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,SAAS,CAChD,CAAC;AACN,CAAC","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"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import { type OffsetOptions, type Placement, type ReferenceType } from '@floating-ui/react';
 import { type DOMProps, type QAProps } from '@gravity-ui/uikit';
 import "./FloatingPopup.css";
+export type { ReferenceType };
+export type FloatingPopupRef = {
+    forceUpdate: () => void;
+};
 export type FloatingPopupProps = QAProps & DOMProps & {
     open?: boolean;
     zIndex?: number;
@@ -10,4 +14,12 @@ export type FloatingPopupProps = QAProps & DOMProps & {
     children: React.ReactNode;
     floatingStyles?: React.CSSProperties;
 };
-export declare const FloatingPopup: React.FC<FloatingPopupProps>;
+export declare const FloatingPopup: import("react").ForwardRefExoticComponent<QAProps & DOMProps & {
+    open?: boolean;
+    zIndex?: number;
+    placement: Placement;
+    offset?: OffsetOptions;
+    anchorElement: ReferenceType | undefined | null;
+    children: React.ReactNode;
+    floatingStyles?: React.CSSProperties;
+} & import("react").RefAttributes<FloatingPopupRef>>;

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.js CHANGED Viewed

@@ -3,36 +3,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /// Fork of Popup component from @gravity-ui/uikit
 /// This fork does not use floating focus manager
 ///
-import { useEffect, useMemo } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FloatingNode, FloatingTree, autoUpdate, offset as offsetMiddleware, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, } from '@floating-ui/react';
 import { Portal } from '@gravity-ui/uikit';
 import { cn } from "../../../../../../../classname.js";
 import "./FloatingPopup.css";
 const b = cn('yfm-table-floating-popup');
-export const FloatingPopup = function YfmTableFloatingPopup(props) {
+export const FloatingPopup = forwardRef(function YfmTableFloatingPopup(props, ref) {
     const { anchorElement, zIndex = 1000, style, className, qa, children, floatingStyles: floatingStylesFromProps, } = props;
     const nodeId = useFloatingNodeId();
     const parentId = useFloatingParentNodeId();
     const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);
-    const { refs, elements, floatingStyles, placement, context: { open }, update, } = useFloating({
+    const { refs, floatingStyles, placement, context: { open }, update, } = useFloating({
         nodeId,
         open: props.open,
         placement: props.placement,
         middleware,
+        whileElementsMounted: autoUpdate,
     });
+    useImperativeHandle(ref, () => ({
+        forceUpdate: update,
+    }), [update]);
     const { getFloatingProps } = useInteractions();
     useEffect(() => {
         if (anchorElement !== undefined && anchorElement !== refs.reference.current) {
             refs.setReference(anchorElement);
         }
     }, [anchorElement, refs]);
-    useEffect(() => {
-        if (elements.reference && elements.floating) {
-            return autoUpdate(elements.reference, elements.floating, update);
-        }
-        return undefined;
-    }, [elements, update]);
     function wrapper(node) {
         if (parentId === null) {
             return _jsx(FloatingTree, { children: node });
@@ -50,5 +48,5 @@ export const FloatingPopup = function YfmTableFloatingPopup(props) {
                     ...floatingStylesFromProps,
                     ...floatingStyles,
                 }, "data-floating-ui-placement": placement, ...getFloatingProps(), children: _jsx("div", { className: b(null, className), style: style, "data-qa": qa, children: children }) }) })) : null }));
-};
+});
 //# sourceMappingURL=FloatingPopup.js.map