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

package/dist/RichTextEditor/Components/LinkEditor.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { ExternalLinkIcon, SaveIcon, UnlinkIcon } from "lucide-react";
+import Input from "../../Input";
+import { Button } from "../../Button";
+import { getLinkAttributes, normalizeLinkUrl, openLink, } from "../Utils/linkUtils";
+const LinkEditorContent = styled.form `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 280px;
+`;
+const LinkInput = styled(Input) `
+  min-width: 190px;
+`;
+const LinkActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const LinkEditorButton = styled(Button) `
+  padding: 0 6px;
+`;
+const getInitialHref = (editor) => editor.getAttributes("link").href || "";
+export const LinkEditor = ({ editor, onClose, autoFocus, }) => {
+    const inputRef = useRef(null);
+    const [href, setHref] = useState(() => getInitialHref(editor));
+    const currentHref = getInitialHref(editor);
+    const normalizedLink = useMemo(() => normalizeLinkUrl(href), [href]);
+    const hasLink = Boolean(currentHref);
+    useEffect(() => {
+        setHref(getInitialHref(editor));
+    }, [editor, editor.state.selection.from, editor.state.selection.to]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        window.requestAnimationFrame(() => {
+            var _a, _b;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+        });
+    }, [autoFocus]);
+    const handleSave = () => {
+        if (!normalizedLink.isValid)
+            return;
+        const { from, to, empty } = editor.state.selection;
+        const attributes = getLinkAttributes(normalizedLink.href);
+        if (empty && hasLink) {
+            editor.chain().focus().extendMarkRange("link").setLink(attributes).run();
+        }
+        else if (empty) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: "text",
+                text: normalizedLink.href,
+                marks: [
+                    {
+                        type: "link",
+                        attrs: attributes,
+                    },
+                ],
+            })
+                .run();
+        }
+        else {
+            editor
+                .chain()
+                .focus()
+                .setTextSelection({ from, to })
+                .setLink(attributes)
+                .run();
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleRemove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        handleSave();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (_jsxs(LinkEditorContent, { onSubmit: handleSubmit, children: [_jsx(LinkInput, { ref: inputRef, "aria-label": "Enter URL", placeholder: "https://example.com/", size: "xs", variant: "outlined", value: href, onChange: (event) => setHref(event.target.value), onKeyDown: handleKeyDown }), _jsxs(LinkActions, { children: [hasLink && (_jsxs(_Fragment, { children: [_jsx(LinkEditorButton, { "aria-label": "Open link", title: "Open link", size: "xs", variant: "subtle", type: "button", onClick: () => openLink(currentHref), children: _jsx(ExternalLinkIcon, { size: 14 }) }), _jsx(LinkEditorButton, { "aria-label": "Remove link", title: "Remove link", size: "xs", variant: "subtle", type: "button", onClick: handleRemove, children: _jsx(UnlinkIcon, { size: 14 }) })] })), _jsx(LinkEditorButton, { "aria-label": "Save link", title: "Save link", size: "xs", variant: "subtle", type: "submit", disabled: !normalizedLink.isValid, children: _jsx(SaveIcon, { size: 14 }) })] })] }));
+};
+export default LinkEditor;

package/dist/RichTextEditor/Components/TableCornerMenu.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/react";
+import type { MouseEvent as ReactMouseEvent } from "react";
+import type { TableRailTarget } from "./TableTools";
+type TableCornerMenuProps = {
+    editor: Editor | null;
+    target: TableRailTarget;
+    opened: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onAction: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onMouseDown: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+export declare const TableCornerMenu: ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }: TableCornerMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/RichTextEditor/Components/TableCornerMenu.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextSelection } from "@tiptap/pm/state";
+import { CopyIcon, EraserIcon, TablePropertiesIcon, Trash2Icon, } from "lucide-react";
+import styled from "styled-components";
+import { Button } from "../../Button";
+import { getControlSizeTokens } from "../../core";
+import { Popover } from "../../Popover";
+const CORNER_BUTTON_SIZE = 18;
+const VIEWPORT_PADDING = 8;
+const clearTableContents = (editor, target) => {
+    if (!editor)
+        return false;
+    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
+    if (!paragraph)
+        return false;
+    const tr = editor.state.tr;
+    const { tableContext } = target;
+    const cells = 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))
+        .sort((a, b) => b.pos - a.pos);
+    cells.forEach((cell) => {
+        const from = tableContext.start + cell.pos + 1;
+        const to = tableContext.start + cell.pos + cell.node.nodeSize - 1;
+        tr.replaceWith(from, to, paragraph);
+    });
+    editor.view.dispatch(tr);
+    return true;
+};
+const duplicateTable = (editor, target) => {
+    if (!editor)
+        return false;
+    const { tableContext } = target;
+    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
+    if (!paragraph)
+        return false;
+    const insertPosition = tableContext.pos + tableContext.node.nodeSize;
+    const duplicatedTable = tableContext.node.copy(tableContext.node.content);
+    const tr = editor.state.tr.insert(insertPosition, [
+        paragraph,
+        duplicatedTable,
+    ]);
+    const firstCellPosition = tableContext.map.positionAt(0, 0, duplicatedTable);
+    if (firstCellPosition !== null) {
+        const duplicatePosition = insertPosition + paragraph.nodeSize;
+        const firstCellContentPosition = duplicatePosition + 1 + firstCellPosition + 1;
+        tr.setSelection(TextSelection.near(tr.doc.resolve(firstCellContentPosition)));
+    }
+    editor.view.dispatch(tr.scrollIntoView());
+    return true;
+};
+const deleteTable = (editor, target) => {
+    if (!editor)
+        return false;
+    const { tableContext } = target;
+    editor.view.dispatch(editor.state.tr
+        .delete(tableContext.pos, tableContext.pos + tableContext.node.nodeSize)
+        .scrollIntoView());
+    return true;
+};
+const getTableActionGroups = (editor, target) => [
+    {
+        label: "Content",
+        actions: [
+            {
+                label: "Clear table contents",
+                leftSection: _jsx(EraserIcon, { size: 14 }),
+                onClick: () => clearTableContents(editor, target),
+            },
+            {
+                label: "Duplicate table",
+                leftSection: _jsx(CopyIcon, { size: 14 }),
+                onClick: () => duplicateTable(editor, target),
+            },
+        ],
+    },
+    {
+        label: "Delete",
+        actions: [
+            {
+                label: "Delete table",
+                leftSection: _jsx(Trash2Icon, { size: 14 }),
+                danger: true,
+                onClick: () => deleteTable(editor, target),
+            },
+        ],
+    },
+];
+const getCornerRect = (target) => ({
+    top: Math.max(VIEWPORT_PADDING, target.tableRect.top - CORNER_BUTTON_SIZE),
+    left: Math.max(VIEWPORT_PADDING, target.tableRect.left - CORNER_BUTTON_SIZE),
+});
+const CornerRoot = styled.div `
+  display: flex;
+  position: fixed;
+  top: ${({ $top }) => `${$top}px`};
+  left: ${({ $left }) => `${$left}px`};
+  z-index: 1500;
+  width: ${CORNER_BUTTON_SIZE}px;
+  height: ${CORNER_BUTTON_SIZE}px;
+
+  button {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    border-radius: 6px;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      color: white;
+    }
+  }
+`;
+const TableMenuPanel = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+const TableMenuDropdown = 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 TableMenuGroup = 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 TableMenuButton = 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;
+  }
+`;
+const TableMenu = ({ groups, onAction, }) => (_jsx(TableMenuPanel, { children: groups.map((group, index) => (_jsx(TableMenuGroup, { "$withDivider": index > 0, children: group.actions.map((action) => (_jsx(TableMenuButton, { "$danger": action.danger, size: "sm", variant: "subtle", leftSection: action.leftSection, justify: "start", onClick: () => {
+                action.onClick();
+                onAction();
+            }, children: action.label }, action.label))) }, group.label))) }));
+export const TableCornerMenu = ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }) => {
+    const rect = getCornerRect(target);
+    const groups = getTableActionGroups(editor, target);
+    return (_jsx(CornerRoot, { "data-monolith-table-rail": true, "$top": rect.top, "$left": rect.left, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsxs(Popover, { opened: opened, onChange: (nextOpened) => {
+                if (nextOpened) {
+                    onOpen();
+                    return;
+                }
+                onClose();
+            }, position: "bottom-start", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: "Table options", "aria-label": "Table options", selected: opened, onMouseDown: onMouseDown, children: _jsx(TablePropertiesIcon, { size: 12 }) }) }), _jsx(TableMenuDropdown, { children: _jsx(TableMenu, { groups: groups, onAction: onAction }) })] }) }));
+};

package/dist/RichTextEditor/Components/TableTools/TableCornerMenu.d.ts

@@ -0,0 +1,2 @@
+import type { TableCornerMenuProps } from "./TableTools.types";
+export declare const TableCornerMenu: ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }: TableCornerMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableCornerMenu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TablePropertiesIcon } from "lucide-react";
+import { Button } from "../../../Button";
+import { Popover } from "../../../Popover";
+import { getTableActionGroups } from "./TableTools.actions";
+import { CornerRoot, MenuDropdown } from "./TableTools.styled";
+import { getCornerRect } from "./TableTools.geometry";
+import { TableToolMenu } from "./TableToolMenu";
+export const TableCornerMenu = ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }) => {
+    const rect = getCornerRect(target);
+    const groups = getTableActionGroups(editor, target);
+    return (_jsx(CornerRoot, { "data-monolith-table-rail": true, "$top": rect.top, "$left": rect.left, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsxs(Popover, { opened: opened, onChange: (nextOpened) => {
+                if (nextOpened) {
+                    onOpen();
+                    return;
+                }
+                onClose();
+            }, position: "bottom-start", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: "Table options", "aria-label": "Table options", selected: opened, onMouseDown: onMouseDown, children: _jsx(TablePropertiesIcon, { size: 12 }) }) }), _jsx(MenuDropdown, { children: _jsx(TableToolMenu, { groups: groups, onAction: onAction }) })] }) }));
+};

package/dist/RichTextEditor/Components/TableTools/TableInsertControls.d.ts

@@ -0,0 +1,2 @@
+import type { TableToolsContentProps } from "./TableTools.types";
+export declare const TableToolsContent: ({ editor, showInsert, onInsert, onAction, }: TableToolsContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableInsertControls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../../Button";
+import Input from "../../../Input";
+import { Switch } from "../../../Switch";
+import { Field, InsertGrid, SwitchRow, TableToolsPanel, TableToolsSection, TableToolsSectionTitle, } from "./TableTools.styled";
+import { DEFAULT_TABLE_OPTIONS, MAX_TABLE_SIZE, MIN_TABLE_SIZE, } from "./TableTools.constants";
+import { runTableCommand } from "./TableTools.commands";
+import { clampTableSize, hasTableExtension } from "./TableTools.selectors";
+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();
+        onAction === null || onAction === void 0 ? void 0 : onAction();
+    };
+    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" })] })] })) }));
+};

package/dist/RichTextEditor/Components/TableTools/TableRails.d.ts

@@ -0,0 +1,2 @@
+import type { TableRailsProps } from "./TableTools.types";
+export declare const TableRails: ({ editor }: TableRailsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/RichTextEditor/Components/TableTools/TableRails.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MoreHorizontalIcon, MoreVerticalIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../../../Button";
+import { Popover } from "../../../Popover";
+import { TableCornerMenu } from "./TableCornerMenu";
+import { getColumnActionGroups, getRowActionGroups, } from "./TableTools.actions";
+import { RAIL_HIDE_DELAY } from "./TableTools.constants";
+import { getRailRect, getRailTargetFromCell } from "./TableTools.geometry";
+import { MenuDropdown, RailRoot } from "./TableTools.styled";
+import { getCellsInTableTarget, getCellsInTarget, hasTableExtension, } from "./TableTools.selectors";
+import { TableToolMenu } from "./TableToolMenu";
+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(MenuDropdown, { children: _jsx(TableToolMenu, { 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")] }));
+};

package/dist/RichTextEditor/Components/TableTools/TableToolMenu.d.ts

@@ -0,0 +1,5 @@
+import type { TableToolActionGroup } from "./TableTools.types";
+export declare const TableToolMenu: ({ groups, onAction, }: {
+    groups: TableToolActionGroup[];
+    onAction: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableToolMenu.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuButton, MenuGroup, MenuPanel } from "./TableTools.styled";
+export const TableToolMenu = ({ groups, onAction, }) => (_jsx(MenuPanel, { children: groups.map((group, index) => (_jsx(MenuGroup, { "$withDivider": index > 0, children: group.actions.map((action) => (_jsx(MenuButton, { "$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))) }));

package/dist/RichTextEditor/Components/TableTools/TableTools.actions.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from "@tiptap/react";
+import type { RailTarget, TableRailTarget, TableToolActionGroup } from "./TableTools.types";
+export declare const getColumnActionGroups: (editor: Editor | null, target: RailTarget) => TableToolActionGroup[];
+export declare const getRowActionGroups: (editor: Editor | null, target: RailTarget) => TableToolActionGroup[];
+export declare const getTableActionGroups: (editor: Editor | null, target: TableRailTarget) => TableToolActionGroup[];