@gravity-ui/markdown-editor 15.21.0 → 15.22.0

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

@@ -14,13 +14,16 @@ const PlusButton = function YfmTablePlusButton({ qa, onClick, onHoverChange, })
     return ((0, jsx_runtime_1.jsx)(uikit_1.Flex, { centerContent: true, width: 20, height: 20, onMouseEnter: setHovered, onMouseLeave: unsetHovered, style: {
             borderRadius: '100px', // button circle border radius
             backgroundColor: hovered ? 'var(--g-color-base-background)' : undefined,
-        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: qa, size: "xs", pin: "circle-circle", view: hovered ? 'outlined-action' : 'normal', onClick: onClick, style: {
-                '--g-button-height': hovered ? undefined : '4px',
-                '--_--background-color-hover': hovered
-                    ? 'var(--g-color-base-background)'
-                    : undefined,
-                color: hovered ? undefined : 'var(--g-color-base-generic)',
-            }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: qa, size: "xs", pin: "circle-circle", view: hovered ? 'outlined-action' : 'normal', onClick: onClick, style: hovered
+                ? {
+                    '--g-button-background-color-hover': 'var(--g-color-base-background)',
+                }
+                : {
+                    color: 'transparent',
+                    '--g-button-height': '4px',
+                    '--g-button-background-color': 'var(--g-color-line-generic-accent)',
+                    '--g-button-border-color': 'var(--g-color-line-generic-accent)',
+                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) }) }));
 };
 exports.PlusButton = PlusButton;
 //# sourceMappingURL=PlusButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/PlusButton.tsx"],"names":[],"mappings":";;;;AAAA,iCAAgC;AAEhC,6CAAmD;AACnD,6CAAmE;AAEnE,2EAAgD;AAOzC,MAAM,UAAU,GAA8B,SAAS,kBAAkB,CAAC,EAC7E,EAAE,EACF,OAAO,EACP,aAAa,GAChB;IACG,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,IAAA,6BAAe,EAAC,KAAK,CAAC,CAAC;IACnE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO,CACH,uBAAC,YAAI,IACD,aAAa,QACb,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;YACH,YAAY,EAAE,OAAO,EAAE,8BAA8B;YACrD,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS;SAC1E,YAED,uBAAC,cAAM,IACH,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,IAAI,EACT,GAAG,EAAC,eAAe,EACnB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,EAC5C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;gBACH,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;gBAChD,6BAA6B,EAAE,OAAO;oBAClC,CAAC,CAAC,gCAAgC;oBAClC,CAAC,CAAC,SAAS;gBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,6BAA6B;aAC7D,YAED,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAQ,GAAI,GACnB,GACN,CACV,CAAC;AACN,CAAC,CAAC;AAxCW,QAAA,UAAU,cAwCrB","sourcesContent":["import {useEffect} from 'react';\n\nimport {Plus as PlusIcon} from '@gravity-ui/icons';\nimport {Button, Flex, Icon, type QAProps} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nexport type PlusButtonProps = QAProps & {\n    onClick: () => void;\n    onHoverChange: (hover: boolean) => void;\n};\n\nexport const PlusButton: React.FC<PlusButtonProps> = function YfmTablePlusButton({\n    qa,\n    onClick,\n    onHoverChange,\n}) {\n    const [hovered, setHovered, unsetHovered] = useBooleanState(false);\n    useEffect(() => {\n        onHoverChange(hovered);\n    }, [hovered, onHoverChange]);\n\n    return (\n        <Flex\n            centerContent\n            width={20} // xs button\n            height={20} // xs button\n            onMouseEnter={setHovered}\n            onMouseLeave={unsetHovered}\n            style={{\n                borderRadius: '100px', // button circle border radius\n                backgroundColor: hovered ? 'var(--g-color-base-background)' : undefined,\n            }}\n        >\n            <Button\n                qa={qa}\n                size=\"xs\"\n                pin=\"circle-circle\"\n                view={hovered ? 'outlined-action' : 'normal'}\n                onClick={onClick}\n                style={{\n                    '--g-button-height': hovered ? undefined : '4px',\n                    '--_--background-color-hover': hovered\n                        ? 'var(--g-color-base-background)'\n                        : undefined,\n                    color: hovered ? undefined : 'var(--g-color-base-generic)',\n                }}\n            >\n                <Icon data={PlusIcon} />\n            </Button>\n        </Flex>\n    );\n};\n"]}
+{"version":3,"file":"PlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/PlusButton.tsx"],"names":[],"mappings":";;;;AAAA,iCAAgC;AAEhC,6CAAmD;AACnD,6CAAmE;AAEnE,2EAAgD;AAOzC,MAAM,UAAU,GAA8B,SAAS,kBAAkB,CAAC,EAC7E,EAAE,EACF,OAAO,EACP,aAAa,GAChB;IACG,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,IAAA,6BAAe,EAAC,KAAK,CAAC,CAAC;IACnE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO,CACH,uBAAC,YAAI,IACD,aAAa,QACb,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;YACH,YAAY,EAAE,OAAO,EAAE,8BAA8B;YACrD,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS;SAC1E,YAED,uBAAC,cAAM,IACH,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,IAAI,EACT,GAAG,EAAC,eAAe,EACnB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,EAC5C,OAAO,EAAE,OAAO,EAChB,KAAK,EACD,OAAO;gBACH,CAAC,CAAC;oBACI,mCAAmC,EAAE,gCAAgC;iBACxE;gBACH,CAAC,CAAC;oBACI,KAAK,EAAE,aAAa;oBACpB,mBAAmB,EAAE,KAAK;oBAC1B,6BAA6B,EAAE,oCAAoC;oBACnE,yBAAyB,EAAE,oCAAoC;iBAClE,YAGX,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAQ,GAAI,GACnB,GACN,CACV,CAAC;AACN,CAAC,CAAC;AA7CW,QAAA,UAAU,cA6CrB","sourcesContent":["import {useEffect} from 'react';\n\nimport {Plus as PlusIcon} from '@gravity-ui/icons';\nimport {Button, Flex, Icon, type QAProps} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nexport type PlusButtonProps = QAProps & {\n    onClick: () => void;\n    onHoverChange: (hover: boolean) => void;\n};\n\nexport const PlusButton: React.FC<PlusButtonProps> = function YfmTablePlusButton({\n    qa,\n    onClick,\n    onHoverChange,\n}) {\n    const [hovered, setHovered, unsetHovered] = useBooleanState(false);\n    useEffect(() => {\n        onHoverChange(hovered);\n    }, [hovered, onHoverChange]);\n\n    return (\n        <Flex\n            centerContent\n            width={20} // xs button\n            height={20} // xs button\n            onMouseEnter={setHovered}\n            onMouseLeave={unsetHovered}\n            style={{\n                borderRadius: '100px', // button circle border radius\n                backgroundColor: hovered ? 'var(--g-color-base-background)' : undefined,\n            }}\n        >\n            <Button\n                qa={qa}\n                size=\"xs\"\n                pin=\"circle-circle\"\n                view={hovered ? 'outlined-action' : 'normal'}\n                onClick={onClick}\n                style={\n                    hovered\n                        ? {\n                              '--g-button-background-color-hover': 'var(--g-color-base-background)',\n                          }\n                        : {\n                              color: 'transparent',\n                              '--g-button-height': '4px',\n                              '--g-button-background-color': 'var(--g-color-line-generic-accent)',\n                              '--g-button-border-color': 'var(--g-color-line-generic-accent)',\n                          }\n                }\n            >\n                <Icon data={PlusIcon} />\n            </Button>\n        </Flex>\n    );\n};\n"]}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/const.d.ts

@@ -6,8 +6,8 @@ export declare enum YfmTableDecorationType {
     ShowColumnControl = "cell--show-column-control",// to show the column control in the cell
     OpenRowMenu = "cell--open-row-menu",// sign of opening the row menu in the cell
     OpenColumnMenu = "cell--open-column-menu",// sign of opening the column menu in the cell
-    ActivateRow = "row--active",
+    ActivateRowCells = "cell--active-row",
     ActivateColumnCells = "cell--active-column",
-    ActivateDangerRow = "row--danger",
+    ActivateDangerRowCells = "cell--danger-row",
     ActivateDangerColumnCells = "cell--danger-column"
 }

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/const.js

@@ -10,9 +10,9 @@ var YfmTableDecorationType;
     YfmTableDecorationType["ShowColumnControl"] = "cell--show-column-control";
     YfmTableDecorationType["OpenRowMenu"] = "cell--open-row-menu";
     YfmTableDecorationType["OpenColumnMenu"] = "cell--open-column-menu";
-    YfmTableDecorationType["ActivateRow"] = "row--active";
+    YfmTableDecorationType["ActivateRowCells"] = "cell--active-row";
     YfmTableDecorationType["ActivateColumnCells"] = "cell--active-column";
-    YfmTableDecorationType["ActivateDangerRow"] = "row--danger";
+    YfmTableDecorationType["ActivateDangerRowCells"] = "cell--danger-row";
     YfmTableDecorationType["ActivateDangerColumnCells"] = "cell--danger-column";
 })(YfmTableDecorationType || (exports.YfmTableDecorationType = YfmTableDecorationType = {}));
 //# sourceMappingURL=const.js.map

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sourceRoot":"../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/const.ts"],"names":[],"mappings":";;;AAAa,QAAA,yBAAyB,GAAG,uBAAuB,CAAC;AACpD,QAAA,yBAAyB,GAAG,2BAA2B,CAAC;AAErE,IAAY,sBAcX;AAdD,WAAY,sBAAsB;IAC9B,qDAA2B,CAAA;IAE3B,mEAAyC,CAAA;IACzC,yEAA+C,CAAA;IAE/C,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IAEzC,qDAA2B,CAAA;IAC3B,qEAA2C,CAAA;IAE3C,2DAAiC,CAAA;IACjC,2EAAiD,CAAA;AACrD,CAAC,EAdW,sBAAsB,sCAAtB,sBAAsB,QAcjC","sourcesContent":["export const YfmTableDecorationTypeKey = '__yfm-table-deco-type';\nexport const YfmTableDecorationUniqKey = '__yfm-table-deco-uniq-key';\n\nexport enum YfmTableDecorationType {\n    FocusTable = 'table--focus',\n\n    ShowRowControl = 'cell--show-row-control', // to show the row control in the cell\n    ShowColumnControl = 'cell--show-column-control', // to show the column control in the cell\n\n    OpenRowMenu = 'cell--open-row-menu', // sign of opening the row menu in the cell\n    OpenColumnMenu = 'cell--open-column-menu', // sign of opening the column menu in the cell\n\n    ActivateRow = 'row--active',\n    ActivateColumnCells = 'cell--active-column',\n\n    ActivateDangerRow = 'row--danger',\n    ActivateDangerColumnCells = 'cell--danger-column',\n}\n"]}
+{"version":3,"file":"const.js","sourceRoot":"../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/const.ts"],"names":[],"mappings":";;;AAAa,QAAA,yBAAyB,GAAG,uBAAuB,CAAC;AACpD,QAAA,yBAAyB,GAAG,2BAA2B,CAAC;AAErE,IAAY,sBAcX;AAdD,WAAY,sBAAsB;IAC9B,qDAA2B,CAAA;IAE3B,mEAAyC,CAAA;IACzC,yEAA+C,CAAA;IAE/C,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IAEzC,+DAAqC,CAAA;IACrC,qEAA2C,CAAA;IAE3C,qEAA2C,CAAA;IAC3C,2EAAiD,CAAA;AACrD,CAAC,EAdW,sBAAsB,sCAAtB,sBAAsB,QAcjC","sourcesContent":["export const YfmTableDecorationTypeKey = '__yfm-table-deco-type';\nexport const YfmTableDecorationUniqKey = '__yfm-table-deco-uniq-key';\n\nexport enum YfmTableDecorationType {\n    FocusTable = 'table--focus',\n\n    ShowRowControl = 'cell--show-row-control', // to show the row control in the cell\n    ShowColumnControl = 'cell--show-column-control', // to show the column control in the cell\n\n    OpenRowMenu = 'cell--open-row-menu', // sign of opening the row menu in the cell\n    OpenColumnMenu = 'cell--open-column-menu', // sign of opening the column menu in the cell\n\n    ActivateRowCells = 'cell--active-row',\n    ActivateColumnCells = 'cell--active-column',\n\n    ActivateDangerRowCells = 'cell--danger-row',\n    ActivateDangerColumnCells = 'cell--danger-column',\n}\n"]}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.d.ts

@@ -0,0 +1,31 @@
+import type { EditorView } from "../../../../../../pm/view.js";
+import type { TableDescBinded } from "../../../../../../table-utils/table-desc.js";
+type Event = Pick<MouseEvent, 'clientX' | 'clientY' | 'target'>;
+export type YfmTableDnDGhostParams = {
+    initial: Event;
+    type: 'row' | 'column';
+    rangeIdx: number;
+    tableDesc: TableDescBinded;
+};
+export declare class YfmTableDnDGhost {
+    private _x;
+    private _y;
+    private readonly _dndBackgroundElem;
+    private readonly _ghostTable;
+    private readonly _ghostButton;
+    private readonly _tblShiftX;
+    private readonly _tblShiftY;
+    private readonly _btnShiftX;
+    private readonly _btnShiftY;
+    private _rafId;
+    constructor(view: EditorView, params: YfmTableDnDGhostParams);
+    move(event: Event): void;
+    destroy(): void;
+    private _startAnimation;
+    private _updatePositions;
+    private _buildRowGhost;
+    private _buildColumnGhost;
+    private _buildGhostButton;
+    private _buildGhostContainer;
+}
+export {};

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmTableDnDGhost = void 0;
+class YfmTableDnDGhost {
+    _x;
+    _y;
+    _dndBackgroundElem;
+    _ghostTable;
+    _ghostButton = null;
+    _tblShiftX;
+    _tblShiftY;
+    _btnShiftX = 0;
+    _btnShiftY = 0;
+    _rafId;
+    constructor(view, params) {
+        this._x = params.initial.clientX;
+        this._y = params.initial.clientY;
+        const document = view.dom.ownerDocument;
+        this._dndBackgroundElem = document.createElement('div');
+        this._dndBackgroundElem.classList.add('g-md-yfm-table-dnd-cursor-background');
+        {
+            const res = this._buildGhostButton(params);
+            if (res) {
+                this._ghostButton = res.domElement;
+                this._btnShiftX = res.shiftX;
+                this._btnShiftY = res.shiftY;
+                this._dndBackgroundElem.appendChild(this._ghostButton);
+            }
+        }
+        {
+            const { domElement, shiftX, shiftY } = params.type === 'row'
+                ? this._buildRowGhost(view, params)
+                : this._buildColumnGhost(view, params);
+            this._ghostTable = domElement;
+            this._tblShiftX = shiftX;
+            this._tblShiftY = shiftY;
+            this._dndBackgroundElem.appendChild(this._ghostTable);
+        }
+        this._updatePositions();
+        this._rafId = requestAnimationFrame(() => {
+            document.body.append(this._dndBackgroundElem);
+            this._startAnimation();
+        });
+    }
+    move(event) {
+        this._x = event.clientX;
+        this._y = event.clientY;
+    }
+    destroy() {
+        cancelAnimationFrame(this._rafId);
+        this._dndBackgroundElem.remove();
+    }
+    _startAnimation() {
+        const self = this;
+        let last = { x: self._x, y: self._y };
+        self._rafId = requestAnimationFrame(function update() {
+            if (self._x !== last.x || self._y !== last.y) {
+                last = { x: self._x, y: self._y };
+                self._updatePositions();
+            }
+            self._rafId = requestAnimationFrame(update);
+        });
+    }
+    _updatePositions() {
+        {
+            const tx = this._x + this._tblShiftX;
+            const ty = this._y + this._tblShiftY;
+            this._ghostTable.style.transform = `translate(${tx}px, ${ty}px)`;
+        }
+        if (this._ghostButton) {
+            const tx = this._x + this._btnShiftX;
+            const ty = this._y + this._btnShiftY;
+            this._ghostButton.style.transform = `translate(${tx}px, ${ty}px)`;
+        }
+    }
+    _buildRowGhost(view, { tableDesc, rangeIdx }) {
+        let shiftX = 0;
+        let shiftY = 0;
+        const document = view.dom.ownerDocument;
+        const container = this._buildGhostContainer(view);
+        const table = container.appendChild(document.createElement('table'));
+        const tbody = table.appendChild(document.createElement('tbody'));
+        {
+            const tablePos = tableDesc.pos;
+            const tableNode = view.domAtPos(tablePos + 1).node;
+            const rect = tableNode.getBoundingClientRect();
+            table.style.width = rect.width + 'px';
+        }
+        const range = tableDesc.base.getRowRanges()[rangeIdx];
+        for (let rowIdx = range.startIdx; rowIdx <= range.endIdx; rowIdx++) {
+            const tr = tbody.appendChild(document.createElement('tr'));
+            for (let colIdx = 0; colIdx < tableDesc.cols; colIdx++) {
+                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
+                if (cellPos.type === 'real') {
+                    const origNode = view.domAtPos(cellPos.from + 1).node;
+                    const cloned = tr.appendChild(origNode.cloneNode(true));
+                    const rect = origNode.getBoundingClientRect();
+                    cloned.style.width = rect.width + 'px';
+                    cloned.style.height = rect.height + 'px';
+                    if (rowIdx === range.startIdx && colIdx === 0) {
+                        shiftX = rect.left - this._x;
+                        shiftY = rect.top - this._y;
+                    }
+                }
+            }
+        }
+        removeIdAttributes(table);
+        return { domElement: container, shiftX, shiftY };
+    }
+    _buildColumnGhost(view, { tableDesc, rangeIdx }) {
+        let shiftX = 0;
+        let shiftY = 0;
+        const document = view.dom.ownerDocument;
+        const container = this._buildGhostContainer(view);
+        {
+            const tablePos = tableDesc.pos;
+            const table = view.domAtPos(tablePos + 1).node;
+            const rect = table.getBoundingClientRect();
+            container.style.height = rect.height + 'px';
+        }
+        const table = container.appendChild(document.createElement('table'));
+        const tbody = table.appendChild(document.createElement('tbody'));
+        const range = tableDesc.base.getColumnRanges()[rangeIdx];
+        for (let rowIdx = 0; rowIdx < tableDesc.rows; rowIdx++) {
+            const tr = tbody.appendChild(document.createElement('tr'));
+            for (let colIdx = range.startIdx; colIdx <= range.endIdx; colIdx++) {
+                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
+                if (cellPos.type === 'real') {
+                    const origNode = view.domAtPos(cellPos.from + 1).node;
+                    const cloned = tr.appendChild(origNode.cloneNode(true));
+                    const rect = origNode.getBoundingClientRect();
+                    cloned.style.width = rect.width + 'px';
+                    cloned.style.height = rect.height + 'px';
+                    if (rowIdx === 0 && colIdx === range.startIdx) {
+                        container.style.minWidth = rect.width + 'px';
+                        shiftX = rect.left - this._x;
+                        shiftY = rect.top - this._y;
+                    }
+                }
+            }
+        }
+        removeIdAttributes(table);
+        return { domElement: container, shiftX, shiftY };
+    }
+    _buildGhostButton({ initial: { target }, }) {
+        if (!(target instanceof Element))
+            return null;
+        const button = target.closest('.g-button');
+        if (!button)
+            return null;
+        const container = button.ownerDocument.createElement('div');
+        container.classList.add('g-md-yfm-table-dnd-ghost-button');
+        const rect = button.getBoundingClientRect();
+        const cloned = container.appendChild(button.cloneNode(true));
+        removeIdAttributes(cloned);
+        cloned.style.cursor = '';
+        cloned.style.pointerEvents = 'none';
+        return {
+            domElement: container,
+            shiftX: rect.left - this._x,
+            shiftY: rect.top - this._y,
+        };
+    }
+    _buildGhostContainer(view) {
+        const container = view.dom.ownerDocument.createElement('div');
+        container.setAttribute('aria-hidden', 'true');
+        const yfmClasses = Array.from(view.dom.classList).filter((val) => val.startsWith('yfm_'));
+        container.classList.add('g-md-yfm-table-dnd-ghost', 'yfm', ...yfmClasses);
+        return container;
+    }
+}
+exports.YfmTableDnDGhost = YfmTableDnDGhost;
+function removeIdAttributes(elem) {
+    elem.removeAttribute('id');
+    elem.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+}
+//# sourceMappingURL=dnd-ghost.js.map

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-ghost.js","sourceRoot":"../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.ts"],"names":[],"mappings":"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","sourcesContent":["import type {EditorView} from '#pm/view';\nimport type {TableDescBinded} from 'src/table-utils/table-desc';\n\ntype Event = Pick<MouseEvent, 'clientX' | 'clientY' | 'target'>;\n\ntype BuildGhostResult = {\n    domElement: HTMLElement;\n    shiftX: number;\n    shiftY: number;\n};\n\nexport type YfmTableDnDGhostParams = {\n    initial: Event;\n    type: 'row' | 'column';\n    rangeIdx: number;\n    tableDesc: TableDescBinded;\n};\n\nexport class YfmTableDnDGhost {\n    private _x: number;\n    private _y: number;\n\n    private readonly _dndBackgroundElem: HTMLElement;\n    private readonly _ghostTable: HTMLElement;\n    private readonly _ghostButton: HTMLElement | null = null;\n\n    private readonly _tblShiftX: number;\n    private readonly _tblShiftY: number;\n\n    private readonly _btnShiftX: number = 0;\n    private readonly _btnShiftY: number = 0;\n\n    private _rafId: number;\n\n    constructor(view: EditorView, params: YfmTableDnDGhostParams) {\n        this._x = params.initial.clientX;\n        this._y = params.initial.clientY;\n\n        const document = view.dom.ownerDocument;\n\n        this._dndBackgroundElem = document.createElement('div');\n        this._dndBackgroundElem.classList.add('g-md-yfm-table-dnd-cursor-background');\n\n        {\n            const res = this._buildGhostButton(params);\n            if (res) {\n                this._ghostButton = res.domElement;\n                this._btnShiftX = res.shiftX;\n                this._btnShiftY = res.shiftY;\n                this._dndBackgroundElem.appendChild(this._ghostButton);\n            }\n        }\n\n        {\n            const {domElement, shiftX, shiftY} =\n                params.type === 'row'\n                    ? this._buildRowGhost(view, params)\n                    : this._buildColumnGhost(view, params);\n\n            this._ghostTable = domElement;\n            this._tblShiftX = shiftX;\n            this._tblShiftY = shiftY;\n            this._dndBackgroundElem.appendChild(this._ghostTable);\n        }\n\n        this._updatePositions();\n\n        this._rafId = requestAnimationFrame(() => {\n            document.body.append(this._dndBackgroundElem);\n            this._startAnimation();\n        });\n    }\n\n    move(event: Event) {\n        this._x = event.clientX;\n        this._y = event.clientY;\n    }\n\n    destroy() {\n        cancelAnimationFrame(this._rafId);\n        this._dndBackgroundElem.remove();\n    }\n\n    private _startAnimation() {\n        const self = this;\n        let last = {x: self._x, y: self._y};\n\n        self._rafId = requestAnimationFrame(function update() {\n            if (self._x !== last.x || self._y !== last.y) {\n                last = {x: self._x, y: self._y};\n                self._updatePositions();\n            }\n            self._rafId = requestAnimationFrame(update);\n        });\n    }\n\n    private _updatePositions() {\n        {\n            const tx = this._x + this._tblShiftX;\n            const ty = this._y + this._tblShiftY;\n            this._ghostTable.style.transform = `translate(${tx}px, ${ty}px)`;\n        }\n\n        if (this._ghostButton) {\n            const tx = this._x + this._btnShiftX;\n            const ty = this._y + this._btnShiftY;\n            this._ghostButton.style.transform = `translate(${tx}px, ${ty}px)`;\n        }\n    }\n\n    private _buildRowGhost(\n        view: EditorView,\n        {tableDesc, rangeIdx}: YfmTableDnDGhostParams,\n    ): BuildGhostResult {\n        let shiftX = 0;\n        let shiftY = 0;\n\n        const document = view.dom.ownerDocument;\n        const container = this._buildGhostContainer(view);\n\n        const table = container.appendChild(document.createElement('table'));\n        const tbody = table.appendChild(document.createElement('tbody'));\n\n        {\n            const tablePos = tableDesc.pos;\n            const tableNode = view.domAtPos(tablePos + 1).node;\n            const rect = (tableNode as Element).getBoundingClientRect();\n            table.style.width = rect.width + 'px';\n        }\n\n        const range = tableDesc.base.getRowRanges()[rangeIdx];\n        for (let rowIdx = range.startIdx; rowIdx <= range.endIdx; rowIdx++) {\n            const tr = tbody.appendChild(document.createElement('tr'));\n\n            for (let colIdx = 0; colIdx < tableDesc.cols; colIdx++) {\n                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);\n                if (cellPos.type === 'real') {\n                    const origNode = view.domAtPos(cellPos.from + 1).node as HTMLElement;\n                    const cloned = tr.appendChild(origNode.cloneNode(true));\n\n                    const rect = origNode.getBoundingClientRect();\n                    (cloned as HTMLElement).style.width = rect.width + 'px';\n                    (cloned as HTMLElement).style.height = rect.height + 'px';\n\n                    if (rowIdx === range.startIdx && colIdx === 0) {\n                        shiftX = rect.left - this._x;\n                        shiftY = rect.top - this._y;\n                    }\n                }\n            }\n        }\n\n        removeIdAttributes(table);\n\n        return {domElement: container, shiftX, shiftY};\n    }\n\n    private _buildColumnGhost(\n        view: EditorView,\n        {tableDesc, rangeIdx}: YfmTableDnDGhostParams,\n    ): BuildGhostResult {\n        let shiftX = 0;\n        let shiftY = 0;\n\n        const document = view.dom.ownerDocument;\n        const container = this._buildGhostContainer(view);\n\n        {\n            const tablePos = tableDesc.pos;\n            const table = view.domAtPos(tablePos + 1).node;\n            const rect = (table as Element).getBoundingClientRect();\n            container.style.height = rect.height + 'px';\n        }\n\n        const table = container.appendChild(document.createElement('table'));\n        const tbody = table.appendChild(document.createElement('tbody'));\n\n        const range = tableDesc.base.getColumnRanges()[rangeIdx];\n        for (let rowIdx = 0; rowIdx < tableDesc.rows; rowIdx++) {\n            const tr = tbody.appendChild(document.createElement('tr'));\n\n            for (let colIdx = range.startIdx; colIdx <= range.endIdx; colIdx++) {\n                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);\n                if (cellPos.type === 'real') {\n                    const origNode = view.domAtPos(cellPos.from + 1).node as HTMLElement;\n                    const cloned = tr.appendChild(origNode.cloneNode(true));\n\n                    const rect = origNode.getBoundingClientRect();\n                    (cloned as HTMLElement).style.width = rect.width + 'px';\n                    (cloned as HTMLElement).style.height = rect.height + 'px';\n\n                    if (rowIdx === 0 && colIdx === range.startIdx) {\n                        container.style.minWidth = rect.width + 'px';\n\n                        shiftX = rect.left - this._x;\n                        shiftY = rect.top - this._y;\n                    }\n                }\n            }\n        }\n\n        removeIdAttributes(table);\n\n        return {domElement: container, shiftX, shiftY};\n    }\n\n    private _buildGhostButton({\n        initial: {target},\n    }: YfmTableDnDGhostParams): BuildGhostResult | null {\n        if (!(target instanceof Element)) return null;\n\n        const button = target.closest('.g-button');\n        if (!button) return null;\n\n        const container = button.ownerDocument.createElement('div');\n        container.classList.add('g-md-yfm-table-dnd-ghost-button');\n\n        const rect = button.getBoundingClientRect();\n        const cloned = container.appendChild(button.cloneNode(true) as HTMLElement);\n\n        removeIdAttributes(cloned);\n        cloned.style.cursor = '';\n        cloned.style.pointerEvents = 'none';\n\n        return {\n            domElement: container,\n            shiftX: rect.left - this._x,\n            shiftY: rect.top - this._y,\n        };\n    }\n\n    private _buildGhostContainer(view: EditorView): HTMLElement {\n        const container = view.dom.ownerDocument.createElement('div');\n        container.setAttribute('aria-hidden', 'true');\n\n        const yfmClasses = Array.from(view.dom.classList).filter((val) => val.startsWith('yfm_'));\n        container.classList.add('g-md-yfm-table-dnd-ghost', 'yfm', ...yfmClasses);\n\n        return container;\n    }\n}\n\nfunction removeIdAttributes(elem: HTMLElement) {\n    elem.removeAttribute('id');\n    elem.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));\n}\n"]}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.css

@@ -7,13 +7,78 @@
   background: transparent;
 }
 
-.yfm.ProseMirror .g-md-yfm-table-dnd-dragged-row,
-.yfm.ProseMirror .g-md-yfm-table-dnd-dragged-column-cell {
-  opacity: 0.3;
-  background-color: var(--g-color-base-selection);
+.yfm.g-md-yfm-table-dnd-ghost,
+.g-md-yfm-table-dnd-ghost-button {
+  position: fixed;
+  cursor: grabbing;
+  pointer-events: none;
+  transition: none;
+  will-change: transform;
+}
+
+.yfm.g-md-yfm-table-dnd-ghost > table {
+  border-color: var(--g-color-line-brand);
+  box-shadow: 0 8px 20px 1px var(--g-color-sfx-shadow);
+}
+.yfm.g-md-yfm-table-dnd-ghost > table > tbody > tr > td {
+  border-color: var(--g-color-line-brand);
+}
+
+.g-md-yfm-table-dnd-ghost-button {
+  --g-button-background-color-hover: var(--g-color-base-background);
+  --g-button-background-color: var(--g-color-base-background);
+  --g-button-border-color: var(--g-color-line-brand);
+  --g-button-text-color: var(--g-color-text-brand);
+  z-index: 2;
 }
 
-.yfm.ProseMirror .g-md-yfm-table-active-row,
-.yfm.ProseMirror .g-md-yfm-table-active-column-cell {
+.yfm.ProseMirror table td {
+  position: relative;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell {
+  overflow: unset;
+  border-color: var(--g-color-line-brand);
   background-color: var(--g-color-base-selection);
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell::after {
+  position: absolute;
+  z-index: 2;
+  inset: -1px;
+  display: inline-block;
+  content: "";
+  pointer-events: none;
+  border: 1px solid var(--g-color-line-brand);
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_first-row::after {
+  top: 0;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_last-row::after {
+  bottom: 0;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_first-column::after {
+  left: 0;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_last-column::after {
+  right: 0;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_first-row.g-md-yfm-table-selected-cell_first-column::after {
+  border-top-left-radius: 8px;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_first-row.g-md-yfm-table-selected-cell_last-column::after {
+  border-top-right-radius: 8px;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_last-row.g-md-yfm-table-selected-cell_first-column::after {
+  border-bottom-left-radius: 8px;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell_last-row.g-md-yfm-table-selected-cell_last-column::after {
+  border-bottom-right-radius: 8px;
+}
+.yfm.ProseMirror table td.g-md-yfm-table-selected-cell.dragged-cell::before {
+  position: absolute;
+  inset: 0;
+  display: inline-block;
+  content: "";
+  pointer-events: none;
+  opacity: 0.7;
+  background-color: var(--g-color-base-background);
 }

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.d.ts

@@ -8,6 +8,7 @@ export type DnDControlHandler = {
     control_handleMouseDown: React.MouseEventHandler<HTMLButtonElement>;
     control_handleMouseMove: React.MouseEventHandler<HTMLButtonElement>;
     control_handleMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseLeave: React.MouseEventHandler<HTMLButtonElement>;
 };
 interface TableHandler {
     update(node: Node): void;

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.js

@@ -10,7 +10,9 @@ const table_desc_1 = require("../../../../../../table-utils/table-desc.js");
 const YfmTableSpecs_1 = require("../../../YfmTableSpecs/index.js");
 const dnd_plugin_1 = require("../plugins/dnd-plugin.js");
 const focus_plugin_1 = require("../plugins/focus-plugin.js");
+const utils_2 = require("../utils.js");
 const dnd_drop_cursor_1 = require("./dnd-drop-cursor.js");
+const dnd_ghost_1 = require("./dnd-ghost.js");
 require("./dnd.css");
 const MOUSE_MOVE_DEBOUNCE = 100; // ms
 const DRAG_START_THRESHOLD = 4; // px
@@ -67,12 +69,15 @@ class YfmTableDnDAbstractHandler {
     control_handleMouseUp = () => {
         this.__dragMouseDown = false;
     };
+    control_handleMouseLeave = () => {
+        this.__dragMouseDown = false;
+    };
     control_handleMouseMove = (event) => {
         if (!this._dragMouseDown || !isDragThresholdPassed(this._dragMouseDown, event))
             return;
         if (this._editorView.dragging || this._dragging)
             return;
-        this._startDragging();
+        this._startDragging(event);
     };
     get _cellNode() {
         return this.__cellNode;
@@ -129,7 +134,7 @@ class YfmTableRowDnDHandler extends YfmTableDnDAbstractHandler {
         const rowRange = res.tableDesc.base.getRowRangeByRowIdx(res.cellInfo.row);
         return rowRange.safeTopBoundary && rowRange.safeBottomBoundary;
     }
-    _startDragging = () => {
+    _startDragging = (event) => {
         const info = this._getTableDescAndCellInfo();
         if (!info)
             return;
@@ -143,7 +148,7 @@ class YfmTableRowDnDHandler extends YfmTableDnDAbstractHandler {
         {
             const { tr } = this._editorView.state;
             (0, focus_plugin_1.hideHoverDecos)(tr);
-            (0, dnd_plugin_1.selectDraggedRow)(tr, (0, lodash_1.range)(currRowRange.startIdx, currRowRange.endIdx + 1).map((rowIdx) => tableDesc.getPosForRow(rowIdx)));
+            (0, dnd_plugin_1.selectDraggedRow)(tr, (0, utils_2.getSelectedCellsForRows)(info.tableDesc, currRowRange));
             this._editorView.dispatch(tr);
         }
         {
@@ -154,20 +159,27 @@ class YfmTableRowDnDHandler extends YfmTableDnDAbstractHandler {
                 slice: this._editorView.state.doc.slice(from, to, false),
             };
         }
-        const dndBackground = document.createElement('div');
-        dndBackground.classList.add('g-md-yfm-table-dnd-cursor-background');
-        document.body.append(dndBackground);
         const draggedRangeIdx = rowRanges.indexOf(currRowRange);
-        const onMove = (0, lodash_1.debounce)((event) => {
+        const ghost = new dnd_ghost_1.YfmTableDnDGhost(this._editorView, {
+            type: 'row',
+            initial: event,
+            rangeIdx: draggedRangeIdx,
+            tableDesc,
+        });
+        const onMoveDebounced = (0, lodash_1.debounce)((event) => {
             this._moveDragging(event, {
                 rangeIdx: draggedRangeIdx,
                 tableDesc,
             });
         }, MOUSE_MOVE_DEBOUNCE, { maxWait: MOUSE_MOVE_DEBOUNCE });
+        const onMove = (event) => {
+            ghost.move(event);
+            onMoveDebounced(event);
+        };
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', () => {
-            onMove.flush();
-            dndBackground.remove();
+            onMoveDebounced.flush();
+            ghost.destroy();
             document.removeEventListener('mousemove', onMove);
             this._endDragging(currRowRange, tableDesc);
         }, { once: true });
@@ -285,7 +297,7 @@ class YfmTableColumnDnDHandler extends YfmTableDnDAbstractHandler {
         const rowRange = res.tableDesc.base.getColumnRangeByColumnIdx(res.cellInfo.column);
         return rowRange.safeLeftBoundary && rowRange.safeRightBoundary;
     }
-    _startDragging() {
+    _startDragging(event) {
         const info = this._getTableDescAndCellInfo();
         if (!info)
             return;
@@ -297,14 +309,9 @@ class YfmTableColumnDnDHandler extends YfmTableDnDAbstractHandler {
         this._dragging = true;
         this._logger.event({ event: 'column-drag-start' });
         {
-            const columnCellsPos = [];
-            for (const i of (0, lodash_1.range)(currColumnRange.startIdx, currColumnRange.endIdx + 1)) {
-                columnCellsPos.push(...tableDesc.getPosForColumn(i));
-            }
-            const realPos = columnCellsPos.filter((cell) => cell.type === 'real');
             const { tr } = this._editorView.state;
             (0, focus_plugin_1.hideHoverDecos)(tr);
-            (0, dnd_plugin_1.selectDraggedColumn)(tr, realPos);
+            (0, dnd_plugin_1.selectDraggedColumn)(tr, (0, utils_2.getSelectedCellsForColumns)(tableDesc, currColumnRange));
             this._editorView.dispatch(tr);
         }
         {
@@ -313,20 +320,27 @@ class YfmTableColumnDnDHandler extends YfmTableDnDAbstractHandler {
                 slice: model_1.Slice.empty,
             };
         }
-        const dndBackground = document.createElement('div');
-        dndBackground.classList.add('g-md-yfm-table-dnd-cursor-background');
-        document.body.append(dndBackground);
         const draggedRangeIdx = columnRanges.indexOf(currColumnRange);
-        const onMove = (0, lodash_1.debounce)((event) => {
+        const ghost = new dnd_ghost_1.YfmTableDnDGhost(this._editorView, {
+            type: 'column',
+            initial: event,
+            rangeIdx: draggedRangeIdx,
+            tableDesc,
+        });
+        const onMoveDebounced = (0, lodash_1.debounce)((event) => {
             this._moveDragging(event, {
                 rangeIdx: draggedRangeIdx,
                 tableDesc,
             });
         }, MOUSE_MOVE_DEBOUNCE, { maxWait: MOUSE_MOVE_DEBOUNCE });
+        const onMove = (event) => {
+            ghost.move(event);
+            onMoveDebounced(event);
+        };
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', () => {
-            onMove.flush();
-            dndBackground.remove();
+            onMoveDebounced.flush();
+            ghost.destroy();
             document.removeEventListener('mousemove', onMove);
             this._endDragging(currColumnRange, tableDesc);
         }, { once: true });