@liminis/editor 0.1.0-rc.1

package/dist/app/editor/SlashMenu.js

@@ -0,0 +1,494 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createParagraphNode, $createTextNode, $getSelection, $isRangeSelection, TextNode, } from 'lexical';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $createCodeNode } from '@lexical/code';
+import { $createHorizontalRuleNode, $createCalloutNode, $createToggleNode, $createEquationNode, $createMermaidNode, $createC4Node, $createCustomListNode, $createCustomListItemNode } from './nodes/index.js';
+import { $createTableNode, $createTableRowNode, $createTableCellNode, TableCellHeaderStates, } from '@lexical/table';
+import { INSERT_IMAGE_COMMAND } from './ImagePlugin.js';
+// Block options defined outside component to avoid recreation
+const BLOCK_OPTIONS = [
+    {
+        key: 'paragraph',
+        label: 'Paragraph',
+        description: 'Plain text',
+        icon: '¶',
+        keywords: ['text', 'plain', 'paragraph'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createParagraphNode();
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'heading1',
+        label: 'Heading 1',
+        description: 'Large heading',
+        icon: 'H1',
+        keywords: ['h1', 'heading', 'title', 'large'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createHeadingNode('h1');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'heading2',
+        label: 'Heading 2',
+        description: 'Medium heading',
+        icon: 'H2',
+        keywords: ['h2', 'heading', 'subtitle', 'medium'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createHeadingNode('h2');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'heading3',
+        label: 'Heading 3',
+        description: 'Small heading',
+        icon: 'H3',
+        keywords: ['h3', 'heading', 'small'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createHeadingNode('h3');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'bulletList',
+        label: 'Bullet List',
+        description: 'Unordered list',
+        icon: '•',
+        keywords: ['bullet', 'list', 'unordered', 'ul'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const list = $createCustomListNode('bullet');
+                    const item = $createCustomListItemNode();
+                    list.append(item);
+                    selection.insertNodes([list]);
+                }
+            });
+        },
+    },
+    {
+        key: 'numberedList',
+        label: 'Numbered List',
+        description: 'Ordered list',
+        icon: '1.',
+        keywords: ['numbered', 'list', 'ordered', 'ol'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const list = $createCustomListNode('number');
+                    const item = $createCustomListItemNode();
+                    list.append(item);
+                    selection.insertNodes([list]);
+                }
+            });
+        },
+    },
+    {
+        key: 'todoList',
+        label: 'Todo List',
+        description: 'Task list with checkboxes',
+        icon: '☐',
+        keywords: ['todo', 'task', 'checkbox', 'check'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const list = $createCustomListNode('check');
+                    // Explicit false (not the default undefined): once export reads
+                    // __taskChecked instead of Lexical's parent-type-gated
+                    // getChecked(), an implicit undefined would default to null (plain
+                    // bullet) and silently drop the checkbox on export.
+                    const item = $createCustomListItemNode(false);
+                    list.append(item);
+                    selection.insertNodes([list]);
+                }
+            });
+        },
+    },
+    {
+        key: 'quote',
+        label: 'Quote',
+        description: 'Blockquote',
+        icon: '"',
+        keywords: ['quote', 'blockquote', 'citation'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createQuoteNode();
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'code',
+        label: 'Code Block',
+        description: 'Code with syntax highlighting',
+        icon: '</>',
+        keywords: ['code', 'snippet', 'programming'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createCodeNode();
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'divider',
+        label: 'Divider',
+        description: 'Horizontal rule',
+        icon: '—',
+        keywords: ['divider', 'hr', 'line', 'horizontal'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createHorizontalRuleNode();
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'image',
+        label: 'Image',
+        description: 'Upload or embed an image',
+        icon: '🖼',
+        keywords: ['image', 'picture', 'photo', 'img', 'upload'],
+        onSelect: (editor) => {
+            editor.dispatchCommand(INSERT_IMAGE_COMMAND, undefined);
+        },
+    },
+    {
+        key: 'callout-note',
+        label: 'Note',
+        description: 'Info callout',
+        icon: 'ℹ',
+        keywords: ['note', 'info', 'callout', 'admonition'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createCalloutNode('note', '');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'callout-tip',
+        label: 'Tip',
+        description: 'Helpful tip',
+        icon: '💡',
+        keywords: ['tip', 'hint', 'callout'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createCalloutNode('tip', '');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'callout-warning',
+        label: 'Warning',
+        description: 'Warning callout',
+        icon: '⚠',
+        keywords: ['warning', 'caution', 'alert', 'callout'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createCalloutNode('warning', '');
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'toggle',
+        label: 'Toggle',
+        description: 'Collapsible section',
+        icon: '▶',
+        keywords: ['toggle', 'collapse', 'details', 'accordion'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createToggleNode('Toggle title', '', false);
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'table',
+        label: 'Table',
+        description: 'Insert a table',
+        icon: '⊞',
+        keywords: ['table', 'grid', 'matrix', 'spreadsheet'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    // Create a 3x3 table with header row
+                    const table = $createTableNode();
+                    // Header row
+                    const headerRow = $createTableRowNode();
+                    for (let col = 0; col < 3; col++) {
+                        const cell = $createTableCellNode(TableCellHeaderStates.ROW);
+                        const paragraph = $createParagraphNode();
+                        paragraph.append($createTextNode(`Header ${col + 1}`));
+                        cell.append(paragraph);
+                        headerRow.append(cell);
+                    }
+                    table.append(headerRow);
+                    // Data rows
+                    for (let row = 0; row < 2; row++) {
+                        const tableRow = $createTableRowNode();
+                        for (let col = 0; col < 3; col++) {
+                            const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+                            const paragraph = $createParagraphNode();
+                            paragraph.append($createTextNode(''));
+                            cell.append(paragraph);
+                            tableRow.append(cell);
+                        }
+                        table.append(tableRow);
+                    }
+                    selection.insertNodes([table]);
+                }
+            });
+        },
+    },
+    {
+        key: 'equation-inline',
+        label: 'Inline Equation',
+        description: 'Math formula inline with text',
+        icon: '∑',
+        keywords: ['math', 'equation', 'latex', 'katex', 'formula', 'inline'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createEquationNode('E = mc^2', true);
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'equation-block',
+        label: 'Block Equation',
+        description: 'Centered math formula',
+        icon: '∫',
+        keywords: ['math', 'equation', 'latex', 'katex', 'formula', 'block', 'display'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createEquationNode('\\int_{a}^{b} f(x) \\, dx', false);
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'mermaid',
+        label: 'Mermaid Diagram',
+        description: 'Flowchart, sequence, or other diagram',
+        icon: '📊',
+        keywords: ['mermaid', 'diagram', 'flowchart', 'sequence', 'graph', 'chart', 'uml'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createMermaidNode(`flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[OK]
+    B -->|No| D[End]`);
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+    {
+        key: 'c4',
+        label: 'C4 Architecture Diagram',
+        description: 'System context, container, or component diagram',
+        icon: '🏗',
+        keywords: ['c4', 'architecture', 'diagram', 'system', 'container', 'component'],
+        onSelect: (editor) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const node = $createC4Node(`Person(user, "User", "End user of the system")
+
+System_Boundary(mySystem, "My System") {
+  Container(web, "Web App", "React", "Delivers the UI")
+  Container(api, "API Server", "Node.js", "Business logic")
+  ContainerDb(db, "Database", "PostgreSQL", "Stores data")
+}
+
+Rel(user, web, "Uses", "HTTPS")
+Rel(web, api, "Calls", "REST/JSON")
+Rel(api, db, "Reads/Writes", "SQL")`);
+                    selection.insertNodes([node]);
+                }
+            });
+        },
+    },
+];
+export function SlashMenu({ isOpen, position, query, onClose }) {
+    const [editor] = useLexicalComposerContext();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const listRef = useRef(null);
+    const filteredOptions = useMemo(() => {
+        if (!query)
+            return BLOCK_OPTIONS;
+        const lowerQuery = query.toLowerCase();
+        // Filter and score options
+        const scored = BLOCK_OPTIONS
+            .map((option) => {
+            const labelLower = option.label.toLowerCase();
+            let score = 0;
+            // Exact label match gets highest score
+            if (labelLower === lowerQuery) {
+                score = 100;
+            }
+            // Label starts with query
+            else if (labelLower.startsWith(lowerQuery)) {
+                score = 80;
+            }
+            // Label contains query
+            else if (labelLower.includes(lowerQuery)) {
+                score = 60;
+            }
+            // Keyword starts with query
+            else if (option.keywords.some((kw) => kw.startsWith(lowerQuery))) {
+                score = 40;
+            }
+            // Keyword contains query
+            else if (option.keywords.some((kw) => kw.includes(lowerQuery))) {
+                score = 20;
+            }
+            return { option, score };
+        })
+            .filter(({ score }) => score > 0)
+            .sort((a, b) => b.score - a.score);
+        return scored.map(({ option }) => option);
+    }, [query]);
+    // Reset selection when query changes - use ref to track previous query
+    const prevQueryRef = useRef(query);
+    useEffect(() => {
+        if (query !== prevQueryRef.current) {
+            prevQueryRef.current = query;
+            // Use microtask to avoid setState during render cycle
+            queueMicrotask(() => setSelectedIndex(0));
+        }
+    }, [query]);
+    // Scroll selected item into view
+    useEffect(() => {
+        if (listRef.current && isOpen) {
+            const selectedItem = listRef.current.children[selectedIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [selectedIndex, isOpen]);
+    const handleSelect = useCallback((option) => {
+        // Remove the slash and query text before inserting
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                const anchorNode = anchor.getNode();
+                if (anchorNode instanceof TextNode) {
+                    const text = anchorNode.getTextContent();
+                    const slashIndex = text.lastIndexOf('/');
+                    if (slashIndex >= 0) {
+                        // Remove the "/" and query text
+                        const before = text.substring(0, slashIndex);
+                        anchorNode.setTextContent(before);
+                    }
+                }
+            }
+        });
+        option.onSelect(editor);
+        onClose();
+    }, [editor, onClose]);
+    // Handle keyboard navigation with native events (capture phase to intercept before Lexical)
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setSelectedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (filteredOptions[selectedIndex]) {
+                        handleSelect(filteredOptions[selectedIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onClose();
+                    break;
+            }
+        };
+        // Use capture phase to intercept events before they reach Lexical
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [isOpen, filteredOptions, selectedIndex, handleSelect, onClose]);
+    if (!isOpen || !position)
+        return null;
+    return (_jsxs("div", { className: "slash-menu", style: {
+            position: 'fixed',
+            top: position.top,
+            left: position.left,
+        }, children: [_jsx("div", { className: "slash-menu-header", children: "INSERT BLOCK" }), filteredOptions.length === 0 ? (_jsx("div", { className: "slash-menu-empty", children: "No matching blocks" })) : (_jsx("ul", { className: "slash-menu-list", role: "listbox", ref: listRef, children: filteredOptions.map((option, index) => (_jsxs("li", { role: "option", "aria-selected": index === selectedIndex, className: `slash-menu-item ${index === selectedIndex ? 'selected' : ''}`, onClick: () => handleSelect(option), onMouseEnter: () => setSelectedIndex(index), children: [_jsx("span", { className: "slash-menu-icon", children: option.icon }), _jsxs("div", { className: "slash-menu-content", children: [_jsx("span", { className: "slash-menu-label", children: option.label }), _jsx("span", { className: "slash-menu-description", children: option.description })] })] }, option.key))) }))] }));
+}

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

@@ -0,0 +1 @@
+export declare function SlashMenuPlugin(): import("react").JSX.Element;

package/dist/app/editor/SlashMenuPlugin.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, TextNode, } from 'lexical';
+import { SlashMenu } from './SlashMenu.js';
+// Compare positions with tolerance to avoid updates for sub-pixel differences
+function positionsEqual(a, b) {
+    if (a === null && b === null)
+        return true;
+    if (a === null || b === null)
+        return false;
+    return Math.abs(a.top - b.top) < 1 && Math.abs(a.left - b.left) < 1;
+}
+export function SlashMenuPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [menuState, setMenuState] = useState({
+        isOpen: false,
+        position: null,
+        query: '',
+    });
+    // Use refs to access state without causing effect re-registration
+    const menuStateRef = useRef(menuState);
+    // Sync state to ref in effect, not during render
+    useEffect(() => {
+        menuStateRef.current = menuState;
+    }, [menuState]);
+    const closeMenu = useCallback(() => {
+        setMenuState({ isOpen: false, position: null, query: '' });
+    }, []);
+    useEffect(() => {
+        const updateListener = editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+                    if (menuStateRef.current.isOpen) {
+                        closeMenu();
+                    }
+                    return;
+                }
+                const anchor = selection.anchor;
+                const anchorNode = anchor.getNode();
+                if (!(anchorNode instanceof TextNode)) {
+                    if (menuStateRef.current.isOpen) {
+                        closeMenu();
+                    }
+                    return;
+                }
+                const text = anchorNode.getTextContent();
+                const offset = anchor.offset;
+                const textBeforeCursor = text.substring(0, offset);
+                // Find the last "/" in the text before cursor
+                const slashIndex = textBeforeCursor.lastIndexOf('/');
+                if (slashIndex === -1) {
+                    if (menuStateRef.current.isOpen) {
+                        closeMenu();
+                    }
+                    return;
+                }
+                // Check if slash is at start of line or preceded by whitespace
+                const beforeSlash = textBeforeCursor.substring(0, slashIndex);
+                if (beforeSlash.length > 0 && !/\s$/.test(beforeSlash)) {
+                    if (menuStateRef.current.isOpen) {
+                        closeMenu();
+                    }
+                    return;
+                }
+                const query = textBeforeCursor.substring(slashIndex + 1);
+                // Don't show menu if there's a space in the query
+                if (/\s/.test(query)) {
+                    if (menuStateRef.current.isOpen) {
+                        closeMenu();
+                    }
+                    return;
+                }
+                // Get position for menu - position at the slash character
+                const nativeSelection = window.getSelection();
+                if (!nativeSelection || nativeSelection.rangeCount === 0) {
+                    return;
+                }
+                const range = nativeSelection.getRangeAt(0);
+                // Create a range that starts at the slash position
+                const slashRange = document.createRange();
+                const textNode = range.startContainer;
+                if (textNode.nodeType === Node.TEXT_NODE) {
+                    // Find the actual position of the slash in the text node
+                    const textContent = textNode.textContent || '';
+                    const slashPosInNode = textContent.lastIndexOf('/');
+                    if (slashPosInNode >= 0) {
+                        slashRange.setStart(textNode, slashPosInNode);
+                        slashRange.setEnd(textNode, slashPosInNode + 1);
+                    }
+                    else {
+                        slashRange.setStart(textNode, 0);
+                        slashRange.setEnd(textNode, 0);
+                    }
+                }
+                else {
+                    slashRange.setStart(textNode, 0);
+                    slashRange.setEnd(textNode, 0);
+                }
+                const rect = slashRange.getBoundingClientRect();
+                const menuHeight = 320; // max-height from CSS
+                const menuWidth = 280; // min-width from CSS
+                const padding = 4;
+                // Check if menu would overflow bottom of viewport
+                const spaceBelow = window.innerHeight - rect.bottom - padding;
+                const spaceAbove = rect.top - padding;
+                let top;
+                if (spaceBelow >= menuHeight) {
+                    // Enough space below - position below cursor
+                    top = rect.bottom + padding;
+                }
+                else if (spaceAbove >= menuHeight) {
+                    // Not enough below, but enough above - position above cursor
+                    top = rect.top - menuHeight - padding;
+                }
+                else {
+                    // Not enough space either way - position where there's more room
+                    top =
+                        spaceBelow > spaceAbove
+                            ? rect.bottom + padding
+                            : rect.top - menuHeight - padding;
+                }
+                // Check horizontal overflow
+                let left = rect.left;
+                if (left + menuWidth > window.innerWidth) {
+                    left = Math.max(padding, window.innerWidth - menuWidth - padding);
+                }
+                const newPosition = { top, left };
+                // Only update state if something changed
+                const currentState = menuStateRef.current;
+                if (!currentState.isOpen ||
+                    currentState.query !== query ||
+                    !positionsEqual(currentState.position, newPosition)) {
+                    setMenuState({
+                        isOpen: true,
+                        position: newPosition,
+                        query,
+                    });
+                }
+            });
+        });
+        return updateListener;
+    }, [editor, closeMenu]);
+    // Close menu on backspace if query is empty and menu is open
+    useEffect(() => {
+        return editor.registerCommand(KEY_BACKSPACE_COMMAND, () => {
+            if (menuStateRef.current.isOpen && menuStateRef.current.query === '') {
+                closeMenu();
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, closeMenu]);
+    // Close menu on click outside
+    useEffect(() => {
+        if (!menuState.isOpen)
+            return;
+        const handleClick = (event) => {
+            const target = event.target;
+            if (!target.closest('.slash-menu')) {
+                closeMenu();
+            }
+        };
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+    }, [menuState.isOpen, closeMenu]);
+    return (_jsx(SlashMenu, { isOpen: menuState.isOpen, position: menuState.position, query: menuState.query, onClose: closeMenu }));
+}

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

@@ -0,0 +1 @@
+export declare function TableActionsPlugin(): import("react").JSX.Element | null;