@gravity-ui/markdown-editor 15.19.1 → 15.21.0

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

@@ -0,0 +1,54 @@
+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';
+// 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) {
+    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({
+        nodeId,
+        open: props.open,
+        placement: props.placement,
+        middleware,
+    });
+    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 });
+        }
+        return node;
+    }
+    return wrapper(_jsx(FloatingNode, { id: nodeId, children: open ? (_jsx(Portal, { children: _jsx("div", { ref: refs.setFloating, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex,
+                    width: 'max-content',
+                    pointerEvents: 'auto',
+                    outline: 'none',
+                    ...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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPopup.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["///\n/// Fork of Popup component from @gravity-ui/uikit\n/// This fork does not use floating focus manager\n///\n\nimport {useEffect, useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {\n    FloatingNode,\n    FloatingTree,\n    type OffsetOptions,\n    type Placement,\n    type ReferenceType,\n    autoUpdate,\n    offset as offsetMiddleware,\n    useFloating,\n    useFloatingNodeId,\n    useFloatingParentNodeId,\n    useInteractions,\n} from '@floating-ui/react';\nimport {type DOMProps, Portal, type QAProps} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\n\nimport './FloatingPopup.scss';\n\nconst b = cn('yfm-table-floating-popup');\n\nexport type FloatingPopupProps = QAProps &\n    DOMProps & {\n        open?: boolean;\n        zIndex?: number;\n        placement: Placement;\n        offset?: OffsetOptions;\n        anchorElement: ReferenceType | undefined | null;\n        children: React.ReactNode;\n        floatingStyles?: React.CSSProperties;\n    };\n\nexport const FloatingPopup: React.FC<FloatingPopupProps> = function YfmTableFloatingPopup(\n    props: FloatingPopupProps,\n) {\n    const {\n        anchorElement,\n        zIndex = 1000,\n        style,\n        className,\n        qa,\n        children,\n        floatingStyles: floatingStylesFromProps,\n    } = props;\n\n    const nodeId = useFloatingNodeId();\n    const parentId = useFloatingParentNodeId();\n\n    const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);\n\n    const {\n        refs,\n        elements,\n        floatingStyles,\n        placement,\n        context: {open},\n        update,\n    } = useFloating({\n        nodeId,\n        open: props.open,\n        placement: props.placement,\n        middleware,\n    });\n\n    const {getFloatingProps} = useInteractions();\n\n    useEffect(() => {\n        if (anchorElement !== undefined && anchorElement !== refs.reference.current) {\n            refs.setReference(anchorElement);\n        }\n    }, [anchorElement, refs]);\n\n    useEffect(() => {\n        if (elements.reference && elements.floating) {\n            return autoUpdate(elements.reference, elements.floating, update);\n        }\n        return undefined;\n    }, [elements, update]);\n\n    function wrapper(node: JSX.Element) {\n        if (parentId === null) {\n            return <FloatingTree>{node}</FloatingTree>;\n        }\n\n        return node;\n    }\n\n    return wrapper(\n        <FloatingNode id={nodeId}>\n            {open ? (\n                <Portal>\n                    <div\n                        ref={refs.setFloating}\n                        style={{\n                            position: 'absolute',\n                            top: 0,\n                            left: 0,\n                            zIndex,\n                            width: 'max-content',\n                            pointerEvents: 'auto',\n                            outline: 'none',\n                            ...floatingStylesFromProps,\n                            ...floatingStyles,\n                        }}\n                        data-floating-ui-placement={placement}\n                        {...getFloatingProps()}\n                    >\n                        <div className={b(null, className)} style={style} data-qa={qa}>\n                            {children}\n                        </div>\n                    </div>\n                </Portal>\n            ) : null}\n        </FloatingNode>,\n    );\n};\n"]}

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

@@ -0,0 +1 @@
+export * from "./FloatingPopup.js";

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

@@ -0,0 +1,2 @@
+export * from "./FloatingPopup.js";
+//# sourceMappingURL=index.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/index.ts"],"names":[],"mappings":"AAAA,mCAAgC","sourcesContent":["export * from './FloatingPopup';\n"]}

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

@@ -0,0 +1,13 @@
+export declare const YfmTableDecorationTypeKey = "__yfm-table-deco-type";
+export declare const YfmTableDecorationUniqKey = "__yfm-table-deco-uniq-key";
+export declare enum YfmTableDecorationType {
+    FocusTable = "table--focus",
+    ShowRowControl = "cell--show-row-control",// to show the row control in the cell
+    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",
+    ActivateColumnCells = "cell--active-column",
+    ActivateDangerRow = "row--danger",
+    ActivateDangerColumnCells = "cell--danger-column"
+}

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

@@ -0,0 +1,15 @@
+export const YfmTableDecorationTypeKey = '__yfm-table-deco-type';
+export const YfmTableDecorationUniqKey = '__yfm-table-deco-uniq-key';
+export var YfmTableDecorationType;
+(function (YfmTableDecorationType) {
+    YfmTableDecorationType["FocusTable"] = "table--focus";
+    YfmTableDecorationType["ShowRowControl"] = "cell--show-row-control";
+    YfmTableDecorationType["ShowColumnControl"] = "cell--show-column-control";
+    YfmTableDecorationType["OpenRowMenu"] = "cell--open-row-menu";
+    YfmTableDecorationType["OpenColumnMenu"] = "cell--open-column-menu";
+    YfmTableDecorationType["ActivateRow"] = "row--active";
+    YfmTableDecorationType["ActivateColumnCells"] = "cell--active-column";
+    YfmTableDecorationType["ActivateDangerRow"] = "row--danger";
+    YfmTableDecorationType["ActivateDangerColumnCells"] = "cell--danger-column";
+})(YfmTableDecorationType || (YfmTableDecorationType = {}));
+//# sourceMappingURL=const.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","sourceRoot":"../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG,uBAAuB,CAAC;AACjE,MAAM,CAAC,MAAM,yBAAyB,GAAG,2BAA2B,CAAC;AAErE,MAAM,CAAN,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,KAAtB,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"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.d.ts

@@ -0,0 +1,36 @@
+import type { EditorView } from "../../../../../../pm/view.js";
+/** Same as `DropCursorOptions` from _prosemirror-dropcursor_ package */
+export type DropCursorParams = {
+    /** The color of the cursor. Defaults to `black`. Use `false` to apply no color and rely only on class. */
+    color?: string | false;
+    /** The precise width of the cursor in pixels. Defaults to 1. */
+    width?: number;
+    /** A CSS class name to add to the cursor element. */
+    class?: string;
+};
+type Rect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare class DropCursor {
+    protected readonly editorView: EditorView;
+    protected readonly width: number;
+    protected readonly color: string | undefined;
+    protected readonly class: string | undefined;
+    protected cursorElem: HTMLElement | null;
+    private cursorPos;
+    constructor(editorView: EditorView, params?: DropCursorParams);
+    getPos(): number | null;
+    setPos(val: number): void;
+    clear(): void;
+    update(): void;
+    protected render(rect: Rect, { isBlock }: {
+        isBlock: boolean;
+    }): void;
+}
+export declare class TableColumnDropCursor extends DropCursor {
+    update(): void;
+}
+export {};

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.js

@@ -0,0 +1,139 @@
+import { findParentNodeClosestToPos } from "../../../../../../pm/utils.js";
+import { isTableCellNode, isTableNode } from "../../../../../../table-utils/index.js";
+export class DropCursor {
+    editorView;
+    width;
+    color;
+    class;
+    cursorElem = null;
+    cursorPos = null;
+    constructor(editorView, params = {}) {
+        this.editorView = editorView;
+        this.width = params.width ?? 1;
+        this.color = params.color === false ? undefined : params.color || 'black';
+        this.class = params.class;
+    }
+    getPos() {
+        return this.cursorPos;
+    }
+    setPos(val) {
+        if (typeof val !== 'number' || isNaN(val))
+            throw new Error('"val" is not a number');
+        if (this.cursorPos === val)
+            return;
+        this.cursorPos = val;
+        this.update();
+    }
+    clear() {
+        this.cursorPos = null;
+        this.cursorElem?.remove();
+        this.cursorElem = null;
+    }
+    update() {
+        const { cursorPos } = this;
+        if (cursorPos === null)
+            return;
+        const $pos = this.editorView.state.doc.resolve(cursorPos);
+        const isBlock = !$pos.parent.inlineContent;
+        let rect;
+        if (isBlock) {
+            const before = $pos.nodeBefore, after = $pos.nodeAfter;
+            if (before || after) {
+                const node = this.editorView.nodeDOM(cursorPos - (before ? before.nodeSize : 0));
+                if (node) {
+                    const nodeRect = node.getBoundingClientRect();
+                    let top = before ? nodeRect.bottom : nodeRect.top;
+                    if (before && after)
+                        top =
+                            (top +
+                                this.editorView.nodeDOM(cursorPos).getBoundingClientRect().top) /
+                                2;
+                    rect = {
+                        left: nodeRect.left,
+                        right: nodeRect.right,
+                        top: top - this.width / 2,
+                        bottom: top + this.width / 2,
+                    };
+                }
+            }
+        }
+        if (!rect) {
+            const coords = this.editorView.coordsAtPos(cursorPos);
+            rect = {
+                left: coords.left - this.width / 2,
+                right: coords.left + this.width / 2,
+                top: coords.top,
+                bottom: coords.bottom,
+            };
+        }
+        this.render(rect, { isBlock });
+    }
+    render(rect, { isBlock }) {
+        const parent = this.editorView.dom.offsetParent;
+        if (!this.cursorElem) {
+            this.cursorElem = parent.appendChild(document.createElement('div'));
+            if (this.class)
+                this.cursorElem.className = this.class;
+            this.cursorElem.style.cssText =
+                'position: absolute; z-index: 50; pointer-events: none;';
+            if (this.color) {
+                this.cursorElem.style.backgroundColor = this.color;
+            }
+        }
+        this.cursorElem.classList.toggle('prosemirror-dropcursor-block', isBlock);
+        this.cursorElem.classList.toggle('prosemirror-dropcursor-inline', !isBlock);
+        let parentLeft, parentTop;
+        if (!parent ||
+            (parent === document.body && getComputedStyle(parent).position === 'static')) {
+            parentLeft = -pageXOffset;
+            parentTop = -pageYOffset;
+        }
+        else {
+            const rect = parent.getBoundingClientRect();
+            parentLeft = rect.left - parent.scrollLeft;
+            parentTop = rect.top - parent.scrollTop;
+        }
+        this.cursorElem.style.left = rect.left - parentLeft + 'px';
+        this.cursorElem.style.top = rect.top - parentTop + 'px';
+        this.cursorElem.style.width = rect.right - rect.left + 'px';
+        this.cursorElem.style.height = rect.bottom - rect.top + 'px';
+    }
+}
+export class TableColumnDropCursor extends DropCursor {
+    update() {
+        const cursorPos = this.getPos();
+        if (cursorPos === null)
+            return;
+        const $cursorPos = this.editorView.state.doc.resolve(cursorPos);
+        const parentTable = findParentNodeClosestToPos($cursorPos, isTableNode);
+        if (!parentTable)
+            return;
+        let side;
+        let tcellPos;
+        if ($cursorPos.nodeAfter && isTableCellNode($cursorPos.nodeAfter)) {
+            side = 'left';
+            tcellPos = cursorPos;
+        }
+        else if ($cursorPos.nodeBefore && isTableCellNode($cursorPos.nodeBefore)) {
+            side = 'right';
+            tcellPos = cursorPos - $cursorPos.nodeBefore.nodeSize;
+        }
+        else {
+            this.cursorElem?.remove();
+            this.cursorElem = null;
+            return;
+        }
+        const tdElem = this.editorView.nodeDOM(tcellPos);
+        const tableElem = this.editorView.nodeDOM(parentTable.pos);
+        const tdRect = tdElem.getBoundingClientRect();
+        const tableRect = tableElem.getBoundingClientRect();
+        const rect = {
+            left: tdRect[side] - this.width / 2,
+            right: tdRect[side] + this.width / 2,
+            top: tableRect.top,
+            bottom: tableRect.bottom,
+        };
+        this.render(rect, { isBlock: true });
+    }
+}
+//# sourceMappingURL=dnd-drop-cursor.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-drop-cursor.js","sourceRoot":"../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.ts"],"names":[],"mappings":"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","sourcesContent":["import {findParentNodeClosestToPos} from '#pm/utils';\nimport type {EditorView} from '#pm/view';\nimport {isTableCellNode, isTableNode} from 'src/table-utils';\n\n/** Same as `DropCursorOptions` from _prosemirror-dropcursor_ package */\nexport type DropCursorParams = {\n    /** The color of the cursor. Defaults to `black`. Use `false` to apply no color and rely only on class. */\n    color?: string | false;\n\n    /** The precise width of the cursor in pixels. Defaults to 1. */\n    width?: number;\n\n    /** A CSS class name to add to the cursor element. */\n    class?: string;\n};\n\ntype Rect = {\n    left: number;\n    right: number;\n    top: number;\n    bottom: number;\n};\n\nexport class DropCursor {\n    protected readonly editorView: EditorView;\n\n    protected readonly width: number;\n    protected readonly color: string | undefined;\n    protected readonly class: string | undefined;\n\n    protected cursorElem: HTMLElement | null = null;\n    private cursorPos: number | null = null;\n\n    constructor(editorView: EditorView, params: DropCursorParams = {}) {\n        this.editorView = editorView;\n        this.width = params.width ?? 1;\n        this.color = params.color === false ? undefined : params.color || 'black';\n        this.class = params.class;\n    }\n\n    getPos(): number | null {\n        return this.cursorPos;\n    }\n\n    setPos(val: number) {\n        if (typeof val !== 'number' || isNaN(val)) throw new Error('\"val\" is not a number');\n        if (this.cursorPos === val) return;\n        this.cursorPos = val;\n        this.update();\n    }\n\n    clear() {\n        this.cursorPos = null;\n        this.cursorElem?.remove();\n        this.cursorElem = null;\n    }\n\n    update() {\n        const {cursorPos} = this;\n        if (cursorPos === null) return;\n\n        const $pos = this.editorView.state.doc.resolve(cursorPos);\n        const isBlock = !$pos.parent.inlineContent;\n        let rect: Rect | undefined;\n        if (isBlock) {\n            const before = $pos.nodeBefore,\n                after = $pos.nodeAfter;\n            if (before || after) {\n                const node = this.editorView.nodeDOM(cursorPos - (before ? before.nodeSize : 0));\n                if (node) {\n                    const nodeRect = (node as HTMLElement).getBoundingClientRect();\n                    let top = before ? nodeRect.bottom : nodeRect.top;\n                    if (before && after)\n                        top =\n                            (top +\n                                (\n                                    this.editorView.nodeDOM(cursorPos) as HTMLElement\n                                ).getBoundingClientRect().top) /\n                            2;\n                    rect = {\n                        left: nodeRect.left,\n                        right: nodeRect.right,\n                        top: top - this.width / 2,\n                        bottom: top + this.width / 2,\n                    };\n                }\n            }\n        }\n        if (!rect) {\n            const coords = this.editorView.coordsAtPos(cursorPos);\n            rect = {\n                left: coords.left - this.width / 2,\n                right: coords.left + this.width / 2,\n                top: coords.top,\n                bottom: coords.bottom,\n            };\n        }\n\n        this.render(rect, {isBlock});\n    }\n\n    protected render(rect: Rect, {isBlock}: {isBlock: boolean}) {\n        const parent = this.editorView.dom.offsetParent!;\n        if (!this.cursorElem) {\n            this.cursorElem = parent.appendChild(document.createElement('div'));\n            if (this.class) this.cursorElem.className = this.class;\n            this.cursorElem.style.cssText =\n                'position: absolute; z-index: 50; pointer-events: none;';\n            if (this.color) {\n                this.cursorElem.style.backgroundColor = this.color;\n            }\n        }\n        this.cursorElem.classList.toggle('prosemirror-dropcursor-block', isBlock);\n        this.cursorElem.classList.toggle('prosemirror-dropcursor-inline', !isBlock);\n        let parentLeft, parentTop;\n        if (\n            !parent ||\n            (parent === document.body && getComputedStyle(parent).position === 'static')\n        ) {\n            parentLeft = -pageXOffset;\n            parentTop = -pageYOffset;\n        } else {\n            const rect = parent.getBoundingClientRect();\n            parentLeft = rect.left - parent.scrollLeft;\n            parentTop = rect.top - parent.scrollTop;\n        }\n        this.cursorElem.style.left = rect.left - parentLeft + 'px';\n        this.cursorElem.style.top = rect.top - parentTop + 'px';\n        this.cursorElem.style.width = rect.right - rect.left + 'px';\n        this.cursorElem.style.height = rect.bottom - rect.top + 'px';\n    }\n}\n\nexport class TableColumnDropCursor extends DropCursor {\n    update() {\n        const cursorPos = this.getPos();\n        if (cursorPos === null) return;\n\n        const $cursorPos = this.editorView.state.doc.resolve(cursorPos);\n        const parentTable = findParentNodeClosestToPos($cursorPos, isTableNode);\n        if (!parentTable) return;\n\n        let side: 'left' | 'right';\n        let tcellPos: number;\n        if ($cursorPos.nodeAfter && isTableCellNode($cursorPos.nodeAfter)) {\n            side = 'left';\n            tcellPos = cursorPos;\n        } else if ($cursorPos.nodeBefore && isTableCellNode($cursorPos.nodeBefore)) {\n            side = 'right';\n            tcellPos = cursorPos - $cursorPos.nodeBefore.nodeSize;\n        } else {\n            this.cursorElem?.remove();\n            this.cursorElem = null;\n            return;\n        }\n\n        const tdElem = this.editorView.nodeDOM(tcellPos);\n        const tableElem = this.editorView.nodeDOM(parentTable.pos);\n\n        const tdRect = (tdElem as HTMLElement).getBoundingClientRect();\n        const tableRect = (tableElem as HTMLElement).getBoundingClientRect();\n\n        const rect: Rect = {\n            left: tdRect[side] - this.width / 2,\n            right: tdRect[side] + this.width / 2,\n            top: tableRect.top,\n            bottom: tableRect.bottom,\n        };\n        this.render(rect, {isBlock: true});\n    }\n}\n"]}

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

@@ -0,0 +1,19 @@
+.g-md-yfm-table-dnd-cursor-background {
+  position: fixed;
+  z-index: 100500;
+  inset: 0;
+  overflow: hidden;
+  cursor: grabbing;
+  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.ProseMirror .g-md-yfm-table-active-row,
+.yfm.ProseMirror .g-md-yfm-table-active-column-cell {
+  background-color: var(--g-color-base-selection);
+}

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

@@ -0,0 +1,31 @@
+import { type Node } from "../../../../../../pm/model.js";
+import type { EditorView } from "../../../../../../pm/view.js";
+import type { Logger2 } from "../../../../../../logger.js";
+import { type DropCursorParams } from "./dnd-drop-cursor.js";
+import "./dnd.css";
+export type DnDControlHandler = {
+    canDrag(): boolean;
+    control_handleMouseDown: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseMove: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+};
+interface TableHandler {
+    update(node: Node): void;
+    destroy(): void;
+}
+export type YfmTableDnDHandlerParams = {
+    cellNode: Node;
+    cellGetPos: () => number | undefined;
+    logger: Logger2.ILogger;
+    dropCursor?: DropCursorParams;
+};
+export declare class YfmTableDnDHandler implements TableHandler {
+    private readonly _rowHandler;
+    private readonly _columnHandler;
+    get row(): DnDControlHandler;
+    get column(): DnDControlHandler;
+    constructor(view: EditorView, params: YfmTableDnDHandlerParams);
+    update(node: Node): void;
+    destroy(): void;
+}
+export {};