@liminis/editor 0.1.0-rc.1

package/dist/app/editor/TableActionsPlugin.js

@@ -0,0 +1,398 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createParagraphNode, $createTextNode, $getRoot, } from 'lexical';
+import { $createTableCellNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, } from '@lexical/table';
+function TableActionsMenu({ tableNode, rowIndex, colIndex, position, onClose }) {
+    const [editor] = useLexicalComposerContext();
+    const menuRef = useRef(null);
+    // Close on click outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+    // Close on escape
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+    const getColumnCount = useCallback(() => {
+        return editor.getEditorState().read(() => {
+            const rows = tableNode.getChildren();
+            if (rows.length > 0 && $isTableRowNode(rows[0])) {
+                return rows[0].getChildren().length;
+            }
+            return 0;
+        });
+    }, [editor, tableNode]);
+    const isHeaderRow = useCallback(() => {
+        return editor.getEditorState().read(() => {
+            const rows = tableNode.getChildren();
+            const row = rows[rowIndex];
+            if ($isTableRowNode(row)) {
+                const cells = row.getChildren();
+                if (cells.length > 0 && $isTableCellNode(cells[0])) {
+                    return cells[0].hasHeaderState(TableCellHeaderStates.ROW);
+                }
+            }
+            return false;
+        });
+    }, [editor, tableNode, rowIndex]);
+    const addRowAbove = useCallback(() => {
+        editor.update(() => {
+            const columnCount = getColumnCount();
+            const rows = tableNode.getChildren();
+            // Check if we're adding above the header row
+            const targetRow = rows[rowIndex];
+            const isInsertingAboveHeader = rowIndex === 0 && $isTableRowNode(targetRow);
+            const newRow = $createTableRowNode();
+            for (let i = 0; i < columnCount; i++) {
+                // If inserting above header, new row becomes the header
+                const headerState = isInsertingAboveHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
+                const cell = $createTableCellNode(headerState);
+                const paragraph = $createParagraphNode();
+                paragraph.append($createTextNode(''));
+                cell.append(paragraph);
+                newRow.append(cell);
+            }
+            if (rowIndex === 0) {
+                tableNode.getFirstChild()?.insertBefore(newRow);
+                // Convert old header row to regular row
+                if ($isTableRowNode(targetRow)) {
+                    for (const cell of targetRow.getChildren()) {
+                        if ($isTableCellNode(cell)) {
+                            cell.setHeaderStyles(TableCellHeaderStates.NO_STATUS);
+                        }
+                    }
+                }
+            }
+            else {
+                const targetRow = rows[rowIndex];
+                if (targetRow) {
+                    targetRow.insertBefore(newRow);
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, getColumnCount, onClose]);
+    const addRowBelow = useCallback(() => {
+        editor.update(() => {
+            const columnCount = getColumnCount();
+            const rows = tableNode.getChildren();
+            const newRow = $createTableRowNode();
+            for (let i = 0; i < columnCount; i++) {
+                const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+                const paragraph = $createParagraphNode();
+                paragraph.append($createTextNode(''));
+                cell.append(paragraph);
+                newRow.append(cell);
+            }
+            const targetRow = rows[rowIndex];
+            if (targetRow) {
+                targetRow.insertAfter(newRow);
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, getColumnCount, onClose]);
+    const addColumnLeft = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    const isHeader = i === 0;
+                    const headerState = isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
+                    const newCell = $createTableCellNode(headerState);
+                    const paragraph = $createParagraphNode();
+                    paragraph.append($createTextNode(isHeader ? 'Header' : ''));
+                    newCell.append(paragraph);
+                    if (colIndex === 0) {
+                        row.getFirstChild()?.insertBefore(newCell);
+                    }
+                    else {
+                        const targetCell = cells[colIndex];
+                        if (targetCell) {
+                            targetCell.insertBefore(newCell);
+                        }
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, colIndex, onClose]);
+    const addColumnRight = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    const isHeader = i === 0;
+                    const headerState = isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
+                    const newCell = $createTableCellNode(headerState);
+                    const paragraph = $createParagraphNode();
+                    paragraph.append($createTextNode(isHeader ? 'Header' : ''));
+                    newCell.append(paragraph);
+                    const targetCell = cells[colIndex];
+                    if (targetCell) {
+                        targetCell.insertAfter(newCell);
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, colIndex, onClose]);
+    const deleteRow = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            // Don't delete if it's the only row
+            if (rows.length <= 1) {
+                return;
+            }
+            const targetRow = rows[rowIndex];
+            if (targetRow && $isTableRowNode(targetRow)) {
+                // If deleting header row, make next row the header
+                if (rowIndex === 0 && rows.length > 1) {
+                    const nextRow = rows[1];
+                    if ($isTableRowNode(nextRow)) {
+                        for (const cell of nextRow.getChildren()) {
+                            if ($isTableCellNode(cell)) {
+                                cell.setHeaderStyles(TableCellHeaderStates.ROW);
+                            }
+                        }
+                    }
+                }
+                targetRow.remove();
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, onClose]);
+    const deleteColumn = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            // Don't delete if it's the only column
+            if (rows.length > 0 && $isTableRowNode(rows[0])) {
+                const columnCount = rows[0].getChildren().length;
+                if (columnCount <= 1) {
+                    return;
+                }
+            }
+            for (const row of rows) {
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    const targetCell = cells[colIndex];
+                    if (targetCell) {
+                        targetCell.remove();
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, colIndex, onClose]);
+    const toggleHeaderRow = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            const currentRow = rows[rowIndex];
+            if ($isTableRowNode(currentRow)) {
+                const currentIsHeader = isHeaderRow();
+                const newHeaderState = currentIsHeader
+                    ? TableCellHeaderStates.NO_STATUS
+                    : TableCellHeaderStates.ROW;
+                for (const cell of currentRow.getChildren()) {
+                    if ($isTableCellNode(cell)) {
+                        cell.setHeaderStyles(newHeaderState);
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, isHeaderRow, onClose]);
+    const moveRowUp = useCallback(() => {
+        editor.update(() => {
+            if (rowIndex === 0)
+                return; // Can't move first row up
+            const rows = tableNode.getChildren();
+            const currentRow = rows[rowIndex];
+            const previousRow = rows[rowIndex - 1];
+            if ($isTableRowNode(currentRow) && $isTableRowNode(previousRow)) {
+                previousRow.insertBefore(currentRow);
+                // Handle header state changes
+                if (rowIndex === 1) {
+                    // Moving to first position, make it header
+                    for (const cell of currentRow.getChildren()) {
+                        if ($isTableCellNode(cell)) {
+                            cell.setHeaderStyles(TableCellHeaderStates.ROW);
+                        }
+                    }
+                    // Remove header from old first row
+                    for (const cell of previousRow.getChildren()) {
+                        if ($isTableCellNode(cell)) {
+                            cell.setHeaderStyles(TableCellHeaderStates.NO_STATUS);
+                        }
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, onClose]);
+    const moveRowDown = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            if (rowIndex >= rows.length - 1)
+                return; // Can't move last row down
+            const currentRow = rows[rowIndex];
+            const nextRow = rows[rowIndex + 1];
+            if ($isTableRowNode(currentRow) && $isTableRowNode(nextRow)) {
+                nextRow.insertAfter(currentRow);
+                // Handle header state changes
+                if (rowIndex === 0) {
+                    // Moving away from first position, remove header
+                    for (const cell of currentRow.getChildren()) {
+                        if ($isTableCellNode(cell)) {
+                            cell.setHeaderStyles(TableCellHeaderStates.NO_STATUS);
+                        }
+                    }
+                    // Make new first row the header
+                    for (const cell of nextRow.getChildren()) {
+                        if ($isTableCellNode(cell)) {
+                            cell.setHeaderStyles(TableCellHeaderStates.ROW);
+                        }
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, rowIndex, onClose]);
+    const moveColumnLeft = useCallback(() => {
+        editor.update(() => {
+            if (colIndex === 0)
+                return; // Can't move first column left
+            const rows = tableNode.getChildren();
+            for (const row of rows) {
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    const currentCell = cells[colIndex];
+                    const previousCell = cells[colIndex - 1];
+                    if (currentCell && previousCell) {
+                        previousCell.insertBefore(currentCell);
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, colIndex, onClose]);
+    const moveColumnRight = useCallback(() => {
+        editor.update(() => {
+            const rows = tableNode.getChildren();
+            if (rows.length === 0)
+                return;
+            const firstRow = rows[0];
+            if (!$isTableRowNode(firstRow))
+                return;
+            if (colIndex >= firstRow.getChildren().length - 1)
+                return; // Can't move last column right
+            for (const row of rows) {
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    const currentCell = cells[colIndex];
+                    const nextCell = cells[colIndex + 1];
+                    if (currentCell && nextCell) {
+                        nextCell.insertAfter(currentCell);
+                    }
+                }
+            }
+        });
+        onClose();
+    }, [editor, tableNode, colIndex, onClose]);
+    const deleteTable = useCallback(() => {
+        editor.update(() => {
+            tableNode.remove();
+        });
+        onClose();
+    }, [editor, tableNode, onClose]);
+    return (_jsxs("div", { ref: menuRef, className: "table-actions-menu", style: {
+            position: 'fixed',
+            top: position.top,
+            left: position.left,
+        }, children: [_jsxs("div", { className: "table-actions-section", children: [_jsx("div", { className: "table-actions-header", children: "Row" }), _jsxs("button", { className: "table-actions-button", onClick: addRowAbove, children: [_jsx("span", { className: "table-actions-icon", children: "\u2191" }), "Add row above"] }), _jsxs("button", { className: "table-actions-button", onClick: addRowBelow, children: [_jsx("span", { className: "table-actions-icon", children: "\u2193" }), "Add row below"] }), _jsxs("button", { className: "table-actions-button", onClick: moveRowUp, children: [_jsx("span", { className: "table-actions-icon", children: "\u2B06" }), "Move row up"] }), _jsxs("button", { className: "table-actions-button", onClick: moveRowDown, children: [_jsx("span", { className: "table-actions-icon", children: "\u2B07" }), "Move row down"] }), _jsxs("button", { className: "table-actions-button", onClick: toggleHeaderRow, children: [_jsx("span", { className: "table-actions-icon", children: isHeaderRow() ? '☐' : '☑' }), isHeaderRow() ? 'Remove header' : 'Make header'] }), _jsxs("button", { className: "table-actions-button table-actions-danger", onClick: deleteRow, children: [_jsx("span", { className: "table-actions-icon", children: "\u2715" }), "Delete row"] })] }), _jsx("div", { className: "table-actions-divider" }), _jsxs("div", { className: "table-actions-section", children: [_jsx("div", { className: "table-actions-header", children: "Column" }), _jsxs("button", { className: "table-actions-button", onClick: addColumnLeft, children: [_jsx("span", { className: "table-actions-icon", children: "\u2190" }), "Add column left"] }), _jsxs("button", { className: "table-actions-button", onClick: addColumnRight, children: [_jsx("span", { className: "table-actions-icon", children: "\u2192" }), "Add column right"] }), _jsxs("button", { className: "table-actions-button", onClick: moveColumnLeft, children: [_jsx("span", { className: "table-actions-icon", children: "\u2B05" }), "Move column left"] }), _jsxs("button", { className: "table-actions-button", onClick: moveColumnRight, children: [_jsx("span", { className: "table-actions-icon", children: "\u27A1" }), "Move column right"] }), _jsxs("button", { className: "table-actions-button table-actions-danger", onClick: deleteColumn, children: [_jsx("span", { className: "table-actions-icon", children: "\u2715" }), "Delete column"] })] }), _jsx("div", { className: "table-actions-divider" }), _jsx("div", { className: "table-actions-section", children: _jsxs("button", { className: "table-actions-button table-actions-danger", onClick: deleteTable, children: [_jsx("span", { className: "table-actions-icon", children: "\uD83D\uDDD1" }), "Delete table"] }) })] }));
+}
+export function TableActionsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [menuState, setMenuState] = useState(null);
+    useEffect(() => {
+        const handleContextMenu = (e) => {
+            const target = e.target;
+            const cellElement = target.closest('td, th');
+            if (!cellElement)
+                return;
+            // Find the table element
+            const tableElement = cellElement.closest('table');
+            if (!tableElement)
+                return;
+            e.preventDefault();
+            // Find the row and column indices from the DOM
+            const rowElement = cellElement.closest('tr');
+            if (!rowElement)
+                return;
+            const rows = Array.from(tableElement.querySelectorAll(':scope > tbody > tr, :scope > tr'));
+            const rowIndex = rows.indexOf(rowElement);
+            const cells = Array.from(rowElement.querySelectorAll(':scope > td, :scope > th'));
+            const colIndex = cells.indexOf(cellElement);
+            if (rowIndex === -1 || colIndex === -1)
+                return;
+            // Find which table this is by checking all tables in the editor
+            const editorElement = editor.getRootElement();
+            if (!editorElement)
+                return;
+            const allTables = Array.from(editorElement.querySelectorAll('table'));
+            const tableIndex = allTables.indexOf(tableElement);
+            if (tableIndex === -1)
+                return;
+            editor.getEditorState().read(() => {
+                // Find all table nodes in the editor
+                const root = $getRoot();
+                const tableNodes = [];
+                for (const child of root.getChildren()) {
+                    if ($isTableNode(child)) {
+                        tableNodes.push(child);
+                    }
+                }
+                const tableNode = tableNodes[tableIndex];
+                if (!tableNode)
+                    return;
+                setMenuState({
+                    tableNode,
+                    rowIndex,
+                    colIndex,
+                    position: {
+                        top: e.clientY,
+                        left: e.clientX,
+                    },
+                });
+            });
+        };
+        const editorElement = editor.getRootElement();
+        if (editorElement) {
+            editorElement.addEventListener('contextmenu', handleContextMenu);
+            return () => editorElement.removeEventListener('contextmenu', handleContextMenu);
+        }
+    }, [editor]);
+    const handleClose = useCallback(() => {
+        setMenuState(null);
+    }, []);
+    if (!menuState)
+        return null;
+    return (_jsx(TableActionsMenu, { tableNode: menuState.tableNode, rowIndex: menuState.rowIndex, colIndex: menuState.colIndex, position: menuState.position, onClose: handleClose }));
+}

package/dist/app/editor/TogglePlugin.d.ts

@@ -0,0 +1 @@
+export declare function TogglePlugin(): null;

package/dist/app/editor/TogglePlugin.js

@@ -0,0 +1,159 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey, $getRoot, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, $getSelection, $isRangeSelection, } from 'lexical';
+import { $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, } from './nodes/index.js';
+export function TogglePlugin() {
+    const [editor] = useLexicalComposerContext();
+    // Handle click on toggle arrow to expand/collapse
+    useEffect(() => {
+        const handleClick = (event) => {
+            const target = event.target;
+            // Check if clicked on toggle-title
+            const toggleTitle = target.closest('.toggle-title');
+            if (!toggleTitle)
+                return;
+            // Check if the click is on the arrow area (first 32px)
+            const rect = toggleTitle.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            // Only toggle on arrow click (first 32px) to allow editing title text
+            if (clickX > 32)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            // Find the toggle container DOM element
+            const container = toggleTitle.closest('.toggle-container');
+            if (!container)
+                return;
+            // Find the corresponding Lexical node by traversing editor state
+            editor.update(() => {
+                const root = $getRoot();
+                // Walk through all nodes to find toggle containers
+                const findToggleContainer = (element) => {
+                    // Try to get the node key from the element
+                    const key = element.getAttribute('data-lexical-node-key');
+                    if (key) {
+                        const node = $getNodeByKey(key);
+                        if ($isToggleContainerNode(node)) {
+                            return node;
+                        }
+                    }
+                    // Fallback: search for the toggle container by matching DOM elements
+                    for (const child of root.getChildren()) {
+                        if ($isToggleContainerNode(child)) {
+                            const domElement = editor.getElementByKey(child.getKey());
+                            if (domElement === container) {
+                                return child;
+                            }
+                        }
+                    }
+                    return null;
+                };
+                const toggleNode = findToggleContainer(container);
+                if (toggleNode) {
+                    toggleNode.toggleOpen();
+                }
+            });
+        };
+        const rootElement = editor.getRootElement();
+        if (rootElement) {
+            rootElement.addEventListener('click', handleClick);
+            return () => {
+                rootElement.removeEventListener('click', handleClick);
+            };
+        }
+    }, [editor]);
+    // Handle arrow key navigation between title and content
+    useEffect(() => {
+        const handleArrowDown = () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return false;
+            const anchorNode = selection.anchor.getNode();
+            // Check if we're in a paragraph that's inside a toggle title
+            let titleNode = null;
+            let node = anchorNode;
+            while (node) {
+                const parent = node.getParent();
+                if ($isToggleTitleNode(parent)) {
+                    titleNode = parent;
+                    break;
+                }
+                if ($isToggleTitleNode(node)) {
+                    titleNode = node;
+                    break;
+                }
+                node = parent;
+            }
+            if (titleNode) {
+                const containerNode = titleNode.getParent();
+                if ($isToggleContainerNode(containerNode)) {
+                    // Open if closed
+                    if (!containerNode.getOpen()) {
+                        containerNode.setOpen(true);
+                    }
+                    // Find content node
+                    const children = containerNode.getChildren();
+                    const contentNode = children.find($isToggleContentNode);
+                    if (contentNode) {
+                        const firstChild = contentNode.getFirstChild();
+                        if (firstChild) {
+                            firstChild.selectStart();
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        const handleArrowUp = () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return false;
+            const anchorNode = selection.anchor.getNode();
+            // Check if we're in a paragraph that's inside toggle content, at the start
+            let contentNode = null;
+            let node = anchorNode;
+            while (node) {
+                const parent = node.getParent();
+                if ($isToggleContentNode(parent)) {
+                    contentNode = parent;
+                    break;
+                }
+                if ($isToggleContentNode(node)) {
+                    contentNode = node;
+                    break;
+                }
+                node = parent;
+            }
+            if (contentNode && selection.anchor.offset === 0) {
+                const containerNode = contentNode.getParent();
+                const firstContentChild = contentNode.getFirstChild();
+                // Only move if we're at the very start of the first child
+                if ($isToggleContainerNode(containerNode) && firstContentChild) {
+                    // Check if anchor is at start of first element
+                    const anchorTop = anchorNode.getTopLevelElement?.() || anchorNode.getParent();
+                    if (anchorTop === firstContentChild || anchorNode === firstContentChild) {
+                        // Find title node
+                        const children = containerNode.getChildren();
+                        const titleNode = children.find($isToggleTitleNode);
+                        if (titleNode) {
+                            const titleParagraph = titleNode.getFirstChild();
+                            if (titleParagraph) {
+                                titleParagraph.selectEnd();
+                                return true;
+                            }
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        const removeDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, handleArrowDown, COMMAND_PRIORITY_LOW);
+        const removeUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, handleArrowUp, COMMAND_PRIORITY_LOW);
+        return () => {
+            removeDown();
+            removeUp();
+        };
+    }, [editor]);
+    return null;
+}

package/dist/app/editor/Toolbar.d.ts

@@ -0,0 +1,10 @@
+/** One toolbar-surfaced annotation kind's affordance, plain data only (FR-001/FR-009). */
+export interface ToolbarAnnotationAffordance {
+    kind: string;
+    label: string;
+}
+interface ToolbarProps {
+    annotationAffordances?: ToolbarAnnotationAffordance[];
+}
+export declare function Toolbar({ annotationAffordances }: ToolbarProps): import("react").JSX.Element | null;
+export {};