@monolith-forensics/monolith-ui 1.9.1-dev.8 → 1.9.3-dev.0

package/dist/RichTextEditor/Components/TableTools.js

@@ -0,0 +1,790 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "@tiptap/pm/model";
+import { addColumn, addRow, findCellPos, findTable, removeColumn, removeRow, rowIsHeader, TableMap, } from "@tiptap/pm/tables";
+import { ArrowDownToLineIcon, ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, CopyIcon, EraserIcon, MoveDownIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveLeftIcon, MoveRightIcon, MoveUpIcon, PanelTopIcon, Table2Icon, Trash2Icon, } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { Button } from "../../Button";
+import { getControlSizeTokens } from "../../core";
+import Input from "../../Input";
+import { Switch } from "../../Switch";
+import { Popover } from "../../Popover";
+import { TableCornerMenu } from "./TableCornerMenu";
+import FieldLabel from "../../FieldLabel";
+const DEFAULT_TABLE_OPTIONS = {
+    rows: 3,
+    cols: 3,
+    withHeaderRow: true,
+};
+const MIN_TABLE_SIZE = 1;
+const MAX_TABLE_SIZE = 20;
+const RAIL_THICKNESS = 8;
+const RAIL_HIDE_DELAY = 250;
+const VIEWPORT_PADDING = 8;
+const clampTableSize = (value) => {
+    if (Number.isNaN(value))
+        return MIN_TABLE_SIZE;
+    return Math.min(MAX_TABLE_SIZE, Math.max(MIN_TABLE_SIZE, value));
+};
+export const hasTableExtension = (editor) => Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => extension.name === "table"));
+export const isTableActive = (editor) => Boolean((editor === null || editor === void 0 ? void 0 : editor.isActive("table")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableRow")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableCell")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableHeader")));
+const runTableCommand = (editor, command, args = []) => {
+    const chain = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
+    if (!(chain === null || chain === void 0 ? void 0 : chain[command]))
+        return;
+    chain[command](...args).run();
+};
+const toRect = (rect) => ({
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+});
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const getTableRect = (tableContext) => ({
+    left: 0,
+    top: 0,
+    right: tableContext.map.width,
+    bottom: tableContext.map.height,
+    tableStart: tableContext.start,
+    map: tableContext.map,
+    table: tableContext.node,
+});
+const getRowStartOffset = (table, rowIndex) => {
+    let offset = 0;
+    for (let index = 0; index < rowIndex; index += 1) {
+        offset += table.child(index).nodeSize;
+    }
+    return offset;
+};
+const getCellChildIndex = (table, rowIndex, cellPos) => {
+    const row = table.child(rowIndex);
+    let offset = getRowStartOffset(table, rowIndex) + 1;
+    for (let index = 0; index < row.childCount; index += 1) {
+        if (offset === cellPos)
+            return index;
+        offset += row.child(index).nodeSize;
+    }
+    return -1;
+};
+const getCellsInTarget = (target) => {
+    const { tableContext } = target;
+    return tableContext.map
+        .cellsInRect(target.kind === "row"
+        ? {
+            left: 0,
+            right: tableContext.map.width,
+            top: target.rowIndex,
+            bottom: target.rowIndex + 1,
+        }
+        : {
+            left: target.colIndex,
+            right: target.colIndex + 1,
+            top: 0,
+            bottom: tableContext.map.height,
+        })
+        .map((pos) => ({
+        pos,
+        node: tableContext.node.nodeAt(pos),
+    }))
+        .filter((cell) => Boolean(cell.node));
+};
+const getCellsInTableTarget = (target) => {
+    const { tableContext } = target;
+    return tableContext.map
+        .cellsInRect({
+        left: 0,
+        right: tableContext.map.width,
+        top: 0,
+        bottom: tableContext.map.height,
+    })
+        .map((pos) => ({
+        pos,
+        node: tableContext.node.nodeAt(pos),
+    }))
+        .filter((cell) => Boolean(cell.node));
+};
+const hasRiskyMergedCells = (target) => {
+    return getCellsInTarget(target).some((cell) => cell.node.attrs.rowspan > 1 || cell.node.attrs.colspan > 1);
+};
+const getTopRowIsHeader = (target) => rowIsHeader(target.tableContext.map, target.tableContext.node, 0);
+const insertRowAt = (editor, target, row) => {
+    if (!editor)
+        return false;
+    editor.view.dispatch(addRow(editor.state.tr, getTableRect(target.tableContext), row));
+    return true;
+};
+const insertColumnAt = (editor, target, column) => {
+    if (!editor)
+        return false;
+    editor.view.dispatch(addColumn(editor.state.tr, getTableRect(target.tableContext), column));
+    return true;
+};
+const deleteRowAt = (editor, target) => {
+    if (!editor || target.tableContext.map.height <= 1)
+        return false;
+    const tr = editor.state.tr;
+    removeRow(tr, getTableRect(target.tableContext), target.rowIndex);
+    editor.view.dispatch(tr);
+    return true;
+};
+const deleteColumnAt = (editor, target) => {
+    if (!editor || target.tableContext.map.width <= 1)
+        return false;
+    const tr = editor.state.tr;
+    removeColumn(tr, getTableRect(target.tableContext), target.colIndex);
+    editor.view.dispatch(tr);
+    return true;
+};
+const clearTargetContents = (editor, target) => {
+    if (!editor)
+        return false;
+    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
+    if (!paragraph)
+        return false;
+    const tr = editor.state.tr;
+    const cells = getCellsInTarget(target).sort((a, b) => b.pos - a.pos);
+    cells.forEach((cell) => {
+        const from = target.tableContext.start + cell.pos + 1;
+        const to = target.tableContext.start + cell.pos + cell.node.nodeSize - 1;
+        tr.replaceWith(from, to, paragraph);
+    });
+    editor.view.dispatch(tr);
+    return true;
+};
+const duplicateRow = (editor, target) => {
+    if (!editor)
+        return false;
+    const row = target.tableContext.node.child(target.rowIndex);
+    const insertPosition = target.tableContext.start +
+        getRowStartOffset(target.tableContext.node, target.rowIndex + 1);
+    editor.view.dispatch(editor.state.tr.insert(insertPosition, row.copy(row.content)));
+    return true;
+};
+const duplicateColumn = (editor, target) => {
+    if (!editor)
+        return false;
+    const tr = editor.state.tr;
+    const inserts = [];
+    for (let row = 0; row < target.tableContext.map.height; row += 1) {
+        const cellPos = target.tableContext.map.positionAt(row, target.colIndex, target.tableContext.node);
+        const cell = target.tableContext.node.nodeAt(cellPos);
+        if (cell) {
+            inserts.push({
+                pos: target.tableContext.start + cellPos + cell.nodeSize,
+                node: cell.copy(cell.content),
+            });
+        }
+    }
+    inserts
+        .sort((a, b) => b.pos - a.pos)
+        .forEach((insert) => tr.insert(insert.pos, insert.node));
+    editor.view.dispatch(tr);
+    return true;
+};
+const moveRow = (editor, target, direction) => {
+    if (!editor)
+        return false;
+    const to = target.rowIndex + direction;
+    if (to < 0 || to >= target.tableContext.map.height)
+        return false;
+    const rows = [];
+    target.tableContext.node.forEach((row) => {
+        rows.push(row);
+    });
+    const [row] = rows.splice(target.rowIndex, 1);
+    rows.splice(to, 0, row);
+    const nextTable = target.tableContext.node.copy(Fragment.from(rows));
+    editor.view.dispatch(editor.state.tr.replaceWith(target.tableContext.pos, target.tableContext.pos + target.tableContext.node.nodeSize, nextTable));
+    return true;
+};
+const moveColumn = (editor, target, direction) => {
+    if (!editor)
+        return false;
+    const to = target.colIndex + direction;
+    if (to < 0 || to >= target.tableContext.map.width)
+        return false;
+    const rows = [];
+    for (let row = 0; row < target.tableContext.map.height; row += 1) {
+        const rowNode = target.tableContext.node.child(row);
+        const cells = [];
+        const cellPos = target.tableContext.map.positionAt(row, target.colIndex, target.tableContext.node);
+        const cellIndex = getCellChildIndex(target.tableContext.node, row, cellPos);
+        rowNode.forEach((cell) => {
+            cells.push(cell);
+        });
+        if (cellIndex < 0) {
+            rows.push(rowNode);
+            continue;
+        }
+        const [cell] = cells.splice(cellIndex, 1);
+        const insertIndex = direction > 0 ? cellIndex + 1 : cellIndex - 1;
+        cells.splice(insertIndex, 0, cell);
+        rows.push(rowNode.copy(Fragment.from(cells)));
+    }
+    const nextTable = target.tableContext.node.copy(Fragment.from(rows));
+    editor.view.dispatch(editor.state.tr.replaceWith(target.tableContext.pos, target.tableContext.pos + target.tableContext.node.nodeSize, nextTable));
+    return true;
+};
+const toggleTopHeaderRow = (editor, target) => {
+    if (!editor || target.rowIndex !== 0)
+        return false;
+    const headerType = editor.state.schema.nodes.tableHeader;
+    const cellType = editor.state.schema.nodes.tableCell;
+    if (!headerType || !cellType)
+        return false;
+    const makeHeader = !getTopRowIsHeader(target);
+    const tr = editor.state.tr;
+    const cells = getCellsInTarget(target);
+    cells.forEach((cell) => {
+        tr.setNodeMarkup(target.tableContext.start + cell.pos, makeHeader ? headerType : cellType, cell.node.attrs);
+    });
+    editor.view.dispatch(tr);
+    return true;
+};
+const TableToolsPanel = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 250px;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+const TableToolsSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+const TableToolsSectionTitle = styled(FieldLabel) `
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1rem;
+  text-transform: uppercase;
+`;
+const InsertGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+`;
+const Field = styled.label `
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.75rem;
+  line-height: 1rem;
+`;
+const SwitchRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.75rem;
+  line-height: 1rem;
+`;
+const RailRoot = styled.div `
+  display: flex;
+  position: fixed;
+  top: ${({ $rect }) => `${$rect.top}px`};
+  left: ${({ $rect }) => `${$rect.left}px`};
+  z-index: 1500;
+  width: ${({ $rect }) => `${$rect.width}px`};
+  height: ${({ $rect }) => `${$rect.height}px`};
+
+  top: ${({ $rect, $kind }) => $kind === "column" ? `${$rect.top + 5}px` : `${$rect.top}px`};
+
+  left: ${({ $rect, $kind }) => $kind === "row" ? `${$rect.left + 4}px` : `${$rect.left}px`};
+
+  button {
+    margin: auto;
+    width: 100%;
+    height: 100%;
+
+    width: ${({ $kind }) => $kind === "column" ? "30px" : RAIL_THICKNESS + "px"};
+
+    height: ${({ $kind }) => $kind === "row" ? "30px" : RAIL_THICKNESS + "px"};
+
+    min-height: 0;
+    padding: 0;
+    border-radius: 10px;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      color: white;
+    }
+  }
+`;
+const RailMenuPanel = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+const RailMenuDropdown = styled(Popover.Dropdown) `
+  min-width: 180px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  background-color: ${({ theme }) => theme.palette.input.background};
+  box-shadow: none;
+  padding: 5px;
+`;
+const RailMenuGroup = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
+  margin-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
+  border-top: ${({ $withDivider, theme }) => $withDivider ? `1px solid ${theme.palette.divider}` : 0};
+`;
+const RailMenuButton = styled(Button) `
+  min-width: 100%;
+  height: ${getControlSizeTokens("sm").menuRowHeight}px;
+  min-height: ${getControlSizeTokens("sm").menuRowHeight}px;
+  padding: 0 ${getControlSizeTokens("sm").menuItemPaddingX}px;
+  border: none;
+  border-radius: 3px;
+  color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
+  font-weight: normal;
+  justify-content: flex-start;
+  width: 100%;
+
+  .button-label {
+    display: inline-block;
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-position="left"] {
+    color: currentColor;
+    opacity: 0.8;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
+  }
+
+  &:active {
+    translate: none;
+  }
+
+  &:focus {
+    text-decoration: none;
+  }
+`;
+export const TableToolsContent = ({ editor, showInsert = false, onInsert, onAction, }) => {
+    const [insertOptions, setInsertOptions] = useState(DEFAULT_TABLE_OPTIONS);
+    const tableAvailable = hasTableExtension(editor) && (editor === null || editor === void 0 ? void 0 : editor.isEditable);
+    const updateInsertOption = (key, value) => {
+        setInsertOptions((current) => (Object.assign(Object.assign({}, current), { [key]: typeof value === "number" ? clampTableSize(value) : value })));
+    };
+    const insertTable = () => {
+        if (!tableAvailable)
+            return;
+        runTableCommand(editor, "insertTable", [insertOptions]);
+        onInsert === null || onInsert === void 0 ? void 0 : onInsert();
+    };
+    return (_jsx(TableToolsPanel, { children: showInsert && (_jsxs(TableToolsSection, { children: [_jsx(TableToolsSectionTitle, { description: "Create and insert a table at the current editor position.", children: "Insert Table" }), _jsxs(TableToolsSection, { style: { gap: "1rem" }, children: [_jsxs(InsertGrid, { children: [_jsxs(Field, { children: ["Rows", _jsx(Input, { type: "number", min: MIN_TABLE_SIZE, max: MAX_TABLE_SIZE, size: "xs", value: insertOptions.rows, onChange: (event) => updateInsertOption("rows", Number(event.target.value)) })] }), _jsxs(Field, { children: ["Columns", _jsx(Input, { type: "number", min: MIN_TABLE_SIZE, max: MAX_TABLE_SIZE, size: "xs", value: insertOptions.cols, onChange: (event) => updateInsertOption("cols", Number(event.target.value)) })] })] }), _jsx(SwitchRow, { children: _jsx(Switch, { size: "xs", label: "Include Header Row", description: "The first row will be formatted as a header.", value: insertOptions.withHeaderRow, onChange: (checked) => updateInsertOption("withHeaderRow", checked) }) }), _jsx(Button, { size: "xs", variant: "outlined", fullWidth: true, disabled: !tableAvailable, onClick: insertTable, children: "Insert Table" })] })] })) }));
+};
+export const TableToolsPopover = ({ editor }) => {
+    const [opened, setOpened] = useState(false);
+    const selected = opened || isTableActive(editor);
+    return (_jsxs(Popover, { opened: opened, onChange: setOpened, position: "bottom", width: 285, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Table", "aria-label": "Table", selected: selected, disabled: !hasTableExtension(editor), style: { padding: "1px 6px" }, children: _jsx(Table2Icon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: _jsx(TableToolsContent, { editor: editor, showInsert: true, onInsert: () => setOpened(false) }) })] }));
+};
+const RailMenu = ({ groups, onAction, }) => {
+    return (_jsx(RailMenuPanel, { children: groups.map((group, index) => (_jsx(RailMenuGroup, { "$withDivider": index > 0, children: group.actions.map((action) => (_jsx(RailMenuButton, { "$danger": action.danger, size: "sm", variant: "subtle", leftSection: action.leftSection, disabled: action.disabled, justify: "start", onClick: () => {
+                    action.onClick();
+                    onAction();
+                }, children: action.label }, action.label))) }, group.label))) }));
+};
+const getColumnActionGroups = (editor, target) => {
+    const risky = hasRiskyMergedCells(target);
+    const lastColumn = target.tableContext.map.width - 1;
+    return [
+        {
+            label: "Move",
+            actions: [
+                {
+                    label: "Move column left",
+                    leftSection: _jsx(MoveLeftIcon, { size: 14 }),
+                    disabled: risky || target.colIndex === 0,
+                    onClick: () => moveColumn(editor, target, -1),
+                },
+                {
+                    label: "Move column right",
+                    leftSection: _jsx(MoveRightIcon, { size: 14 }),
+                    disabled: risky || target.colIndex === lastColumn,
+                    onClick: () => moveColumn(editor, target, 1),
+                },
+            ],
+        },
+        {
+            label: "Insert",
+            actions: [
+                {
+                    label: "Insert column left",
+                    leftSection: _jsx(ArrowLeftToLineIcon, { size: 14 }),
+                    onClick: () => insertColumnAt(editor, target, target.colIndex),
+                },
+                {
+                    label: "Insert column right",
+                    leftSection: _jsx(ArrowRightToLineIcon, { size: 14 }),
+                    onClick: () => insertColumnAt(editor, target, target.colIndex + 1),
+                },
+            ],
+        },
+        {
+            label: "Content",
+            actions: [
+                {
+                    label: "Clear column contents",
+                    leftSection: _jsx(EraserIcon, { size: 14 }),
+                    disabled: risky,
+                    onClick: () => clearTargetContents(editor, target),
+                },
+                {
+                    label: "Duplicate column",
+                    leftSection: _jsx(CopyIcon, { size: 14 }),
+                    disabled: risky,
+                    onClick: () => duplicateColumn(editor, target),
+                },
+            ],
+        },
+        {
+            label: "Delete",
+            actions: [
+                {
+                    label: "Delete column",
+                    leftSection: _jsx(Trash2Icon, { size: 14 }),
+                    danger: true,
+                    disabled: risky || target.tableContext.map.width <= 1,
+                    onClick: () => deleteColumnAt(editor, target),
+                },
+            ],
+        },
+    ];
+};
+const getRowActionGroups = (editor, target) => {
+    const risky = hasRiskyMergedCells(target);
+    const topRowIsHeader = getTopRowIsHeader(target);
+    const lastRow = target.tableContext.map.height - 1;
+    return [
+        {
+            label: "Header",
+            actions: [
+                {
+                    label: topRowIsHeader ? "Unset header row" : "Set header row",
+                    leftSection: _jsx(PanelTopIcon, { size: 14 }),
+                    disabled: target.rowIndex !== 0,
+                    onClick: () => toggleTopHeaderRow(editor, target),
+                },
+            ],
+        },
+        {
+            label: "Move",
+            actions: [
+                {
+                    label: "Move row up",
+                    leftSection: _jsx(MoveUpIcon, { size: 14 }),
+                    disabled: risky ||
+                        target.rowIndex === 0 ||
+                        (topRowIsHeader && target.rowIndex === 1),
+                    onClick: () => moveRow(editor, target, -1),
+                },
+                {
+                    label: "Move row down",
+                    leftSection: _jsx(MoveDownIcon, { size: 14 }),
+                    disabled: risky ||
+                        target.rowIndex === lastRow ||
+                        (topRowIsHeader && target.rowIndex === 0),
+                    onClick: () => moveRow(editor, target, 1),
+                },
+            ],
+        },
+        {
+            label: "Insert",
+            actions: [
+                {
+                    label: "Insert row above",
+                    leftSection: _jsx(ArrowUpToLineIcon, { size: 14 }),
+                    disabled: topRowIsHeader && target.rowIndex === 0,
+                    onClick: () => insertRowAt(editor, target, target.rowIndex),
+                },
+                {
+                    label: "Insert row below",
+                    leftSection: _jsx(ArrowDownToLineIcon, { size: 14 }),
+                    onClick: () => insertRowAt(editor, target, target.rowIndex + 1),
+                },
+            ],
+        },
+        {
+            label: "Content",
+            actions: [
+                {
+                    label: "Clear row contents",
+                    leftSection: _jsx(EraserIcon, { size: 14 }),
+                    disabled: risky,
+                    onClick: () => clearTargetContents(editor, target),
+                },
+                {
+                    label: "Duplicate row",
+                    leftSection: _jsx(CopyIcon, { size: 14 }),
+                    disabled: risky,
+                    onClick: () => duplicateRow(editor, target),
+                },
+            ],
+        },
+        {
+            label: "Delete",
+            actions: [
+                {
+                    label: "Delete row",
+                    leftSection: _jsx(Trash2Icon, { size: 14 }),
+                    danger: true,
+                    disabled: risky || target.tableContext.map.height <= 1,
+                    onClick: () => deleteRowAt(editor, target),
+                },
+            ],
+        },
+    ];
+};
+const getRailTargetFromCell = (editor, cell) => {
+    const tableElement = cell.closest("table");
+    const rowElement = cell.closest("tr");
+    if (!tableElement || !rowElement || !editor.view.dom.contains(tableElement)) {
+        return null;
+    }
+    const cellPosition = editor.view.posAtDOM(cell, 0);
+    const $cell = findCellPos(editor.state.doc, cellPosition);
+    if (!$cell)
+        return null;
+    const table = findTable($cell);
+    if (!table)
+        return null;
+    const map = TableMap.get(table.node);
+    const cellRect = map.findCell($cell.pos - table.start);
+    const tableRect = toRect(tableElement.getBoundingClientRect());
+    const rowRect = toRect(rowElement.getBoundingClientRect());
+    const columnRect = toRect(cell.getBoundingClientRect());
+    if (tableRect.width <= 0 ||
+        tableRect.height <= 0 ||
+        rowRect.width <= 0 ||
+        rowRect.height <= 0 ||
+        columnRect.width <= 0 ||
+        columnRect.height <= 0) {
+        return null;
+    }
+    return {
+        kind: "column",
+        rowIndex: cellRect.top,
+        colIndex: cellRect.left,
+        tableElement,
+        tableRect,
+        tableContext: {
+            node: table.node,
+            pos: table.pos,
+            start: table.start,
+            map,
+        },
+        rowRect,
+        columnRect,
+    };
+};
+const getRailRect = (target, kind) => {
+    if (kind === "column") {
+        const width = target.columnRect.width;
+        const left = clamp(target.columnRect.left, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, window.innerWidth - width - VIEWPORT_PADDING));
+        return {
+            top: Math.max(VIEWPORT_PADDING, target.tableRect.top - RAIL_THICKNESS),
+            left,
+            width,
+            height: RAIL_THICKNESS,
+        };
+    }
+    const height = target.rowRect.height;
+    const top = clamp(target.rowRect.top, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, window.innerHeight - height - VIEWPORT_PADDING));
+    return {
+        top,
+        left: Math.max(VIEWPORT_PADDING, target.rowRect.left - RAIL_THICKNESS),
+        width: RAIL_THICKNESS,
+        height,
+    };
+};
+export const TableRails = ({ editor }) => {
+    const [hoverTarget, setHoverTarget] = useState(null);
+    const [lockedTarget, setLockedTarget] = useState(null);
+    const [openRail, setOpenRail] = useState(null);
+    const hideTimerRef = useRef(null);
+    const lastPointerRef = useRef(null);
+    const activeTarget = openRail && lockedTarget ? lockedTarget : hoverTarget;
+    const clearHideTimer = useCallback(() => {
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const clearTarget = useCallback(() => {
+        var _a;
+        clearHideTimer();
+        if (!openRail) {
+            const pointer = lastPointerRef.current;
+            const element = pointer
+                ? document.elementFromPoint(pointer.x, pointer.y)
+                : null;
+            if ((_a = element === null || element === void 0 ? void 0 : element.closest) === null || _a === void 0 ? void 0 : _a.call(element, "[data-monolith-table-rail]")) {
+                return;
+            }
+            setHoverTarget(null);
+        }
+    }, [clearHideTimer, openRail]);
+    const scheduleClearTarget = useCallback(() => {
+        clearHideTimer();
+        hideTimerRef.current = setTimeout(clearTarget, RAIL_HIDE_DELAY);
+    }, [clearHideTimer, clearTarget]);
+    const refreshTargetFromPoint = useCallback(() => {
+        var _a, _b;
+        if (!editor || !lastPointerRef.current) {
+            setHoverTarget(null);
+            return;
+        }
+        const element = document.elementFromPoint(lastPointerRef.current.x, lastPointerRef.current.y);
+        if ((_a = element === null || element === void 0 ? void 0 : element.closest) === null || _a === void 0 ? void 0 : _a.call(element, "[data-monolith-table-rail]")) {
+            return;
+        }
+        const cell = (_b = element === null || element === void 0 ? void 0 : element.closest) === null || _b === void 0 ? void 0 : _b.call(element, "td, th");
+        if (cell instanceof HTMLTableCellElement &&
+            editor.view.dom.contains(cell)) {
+            const target = getRailTargetFromCell(editor, cell);
+            setHoverTarget(target);
+            return;
+        }
+        setHoverTarget(null);
+    }, [editor]);
+    const closeMenu = useCallback(() => {
+        setOpenRail(null);
+        setLockedTarget(null);
+        requestAnimationFrame(refreshTargetFromPoint);
+    }, [refreshTargetFromPoint]);
+    useEffect(() => {
+        if (!editor || !hasTableExtension(editor))
+            return;
+        const handleMouseMove = (event) => {
+            var _a, _b;
+            const target = event.target;
+            const cell = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, "td, th");
+            lastPointerRef.current = { x: event.clientX, y: event.clientY };
+            if ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, "[data-monolith-table-rail]")) {
+                clearHideTimer();
+                return;
+            }
+            if (openRail) {
+                clearHideTimer();
+                return;
+            }
+            if (!(cell instanceof HTMLTableCellElement) ||
+                !editor.view.dom.contains(cell)) {
+                if (!openRail) {
+                    scheduleClearTarget();
+                }
+                return;
+            }
+            const railTarget = getRailTargetFromCell(editor, cell);
+            if (railTarget) {
+                clearHideTimer();
+                setHoverTarget(railTarget);
+            }
+        };
+        const handleMouseLeave = () => {
+            if (!openRail) {
+                scheduleClearTarget();
+            }
+        };
+        editor.view.dom.addEventListener("mousemove", handleMouseMove);
+        editor.view.dom.addEventListener("mouseleave", handleMouseLeave);
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("scroll", refreshTargetFromPoint, true);
+        window.addEventListener("resize", refreshTargetFromPoint);
+        return () => {
+            editor.view.dom.removeEventListener("mousemove", handleMouseMove);
+            editor.view.dom.removeEventListener("mouseleave", handleMouseLeave);
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("scroll", refreshTargetFromPoint, true);
+            window.removeEventListener("resize", refreshTargetFromPoint);
+            clearHideTimer();
+        };
+    }, [
+        clearHideTimer,
+        editor,
+        openRail,
+        refreshTargetFromPoint,
+        scheduleClearTarget,
+    ]);
+    useEffect(() => {
+        const highlighted = Array.from(document.querySelectorAll(".monolith-table-rail-target"));
+        highlighted.forEach((element) => element.classList.remove("monolith-table-rail-target"));
+        if (!activeTarget || !openRail)
+            return;
+        const cells = openRail === "table"
+            ? getCellsInTableTarget(activeTarget)
+            : getCellsInTarget(Object.assign(Object.assign({}, activeTarget), { kind: openRail }));
+        cells.forEach((cell) => {
+            const dom = editor === null || editor === void 0 ? void 0 : editor.view.nodeDOM(activeTarget.tableContext.start + cell.pos);
+            if (dom instanceof HTMLElement) {
+                dom.classList.add("monolith-table-rail-target");
+            }
+        });
+        return () => {
+            cells.forEach((cell) => {
+                const dom = editor === null || editor === void 0 ? void 0 : editor.view.nodeDOM(activeTarget.tableContext.start + cell.pos);
+                if (dom instanceof HTMLElement) {
+                    dom.classList.remove("monolith-table-rail-target");
+                }
+            });
+        };
+    }, [activeTarget, editor, openRail]);
+    const keepEditorSelection = (event) => {
+        event.preventDefault();
+    };
+    if (!activeTarget || !(editor === null || editor === void 0 ? void 0 : editor.isEditable))
+        return null;
+    const keepTargetVisible = () => {
+        clearHideTimer();
+    };
+    const scheduleTargetClearIfClosed = () => {
+        if (!openRail) {
+            scheduleClearTarget();
+        }
+    };
+    const renderRail = (kind) => {
+        const railTarget = Object.assign(Object.assign({}, activeTarget), { kind });
+        const groups = kind === "column"
+            ? getColumnActionGroups(editor, railTarget)
+            : getRowActionGroups(editor, railTarget);
+        return (_jsx(RailRoot, { "data-monolith-table-rail": true, "$kind": kind, "$rect": getRailRect(activeTarget, kind), onMouseEnter: keepTargetVisible, onMouseLeave: scheduleTargetClearIfClosed, children: _jsxs(Popover, { opened: openRail === kind, onChange: (opened) => {
+                    if (opened) {
+                        clearHideTimer();
+                        setLockedTarget(railTarget);
+                        setOpenRail(kind);
+                        return;
+                    }
+                    setOpenRail(null);
+                    setLockedTarget(null);
+                    refreshTargetFromPoint();
+                }, position: kind === "column" ? "bottom" : "right", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: kind === "column" ? "Column options" : "Row options", "aria-label": kind === "column" ? "Column options" : "Row options", selected: openRail === kind, onMouseDown: keepEditorSelection, children: kind === "column" ? (_jsx(MoreHorizontalIcon, { size: 14 })) : (_jsx(MoreVerticalIcon, { size: 14 })) }) }), _jsx(RailMenuDropdown, { children: _jsx(RailMenu, { groups: groups, onAction: closeMenu }) })] }) }, kind));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TableCornerMenu, { editor: editor, target: activeTarget, opened: openRail === "table", onOpen: () => {
+                    clearHideTimer();
+                    setLockedTarget(activeTarget);
+                    setOpenRail("table");
+                }, onClose: closeMenu, onAction: closeMenu, onMouseEnter: keepTargetVisible, onMouseLeave: scheduleTargetClearIfClosed, onMouseDown: keepEditorSelection }), renderRail("column"), renderRail("row")] }));
+};