@liminis/editor 0.1.0-rc.1

package/dist/app/editor/nodes/MermaidComponent.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MermaidComponent - React component for rendering and editing Mermaid diagrams
+ * Uses Shadow DOM for style isolation
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { useHostMessages } from '../../../host/messages.js';
+import { $isMermaidNode } from './MermaidNode.js';
+import { DiagramContextMenu, useDiagramContextMenu } from './DiagramContextMenu.js';
+// Initialize mermaid with default config
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    securityLevel: 'strict',
+    fontFamily: 'inherit',
+});
+// Mermaid Renderer component using Shadow DOM
+function MermaidRenderer({ code, onDoubleClick, }) {
+    const containerRef = useRef(null);
+    const shadowRootRef = useRef(null);
+    const renderIdRef = useRef(0);
+    const linkHandlerRef = useRef(null);
+    const contextMenu = useDiagramContextMenu();
+    const { openLink } = useHostMessages();
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        // Create shadow root if it doesn't exist
+        if (!shadowRootRef.current) {
+            shadowRootRef.current = container.attachShadow({ mode: 'open' });
+            // Add basic styles for the shadow DOM
+            const style = document.createElement('style');
+            style.textContent = `
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .mermaid-container {
+          display: flex;
+          justify-content: center;
+          padding: 1rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 8px;
+          overflow-x: auto;
+        }
+        .mermaid-container svg {
+          max-width: 100%;
+          height: auto;
+        }
+        .mermaid-error {
+          color: #ff6b6b;
+          padding: 1rem;
+          font-family: monospace;
+          white-space: pre-wrap;
+        }
+      `;
+            shadowRootRef.current.appendChild(style);
+            // Intercept link clicks inside Mermaid SVGs and open externally
+            const handleLinkClick = (event) => {
+                const target = event.target;
+                const anchor = target?.closest?.('a');
+                if (!anchor)
+                    return;
+                const href = anchor.getAttribute('href') ||
+                    anchor.getAttribute('xlink:href') ||
+                    anchor.href?.baseVal;
+                if (!href)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                openLink(href);
+            };
+            linkHandlerRef.current = handleLinkClick;
+            shadowRootRef.current.addEventListener('click', handleLinkClick);
+            const handlePointerMove = (event) => {
+                const target = event.target;
+                const anchor = target?.closest?.('a');
+                container.style.cursor = anchor ? 'pointer' : 'default';
+            };
+            const handlePointerLeave = () => {
+                container.style.cursor = 'default';
+            };
+            shadowRootRef.current.addEventListener('mousemove', handlePointerMove);
+            shadowRootRef.current.addEventListener('mouseleave', handlePointerLeave);
+        }
+        const shadowRoot = shadowRootRef.current;
+        // Clear previous content (except style)
+        const existingContainer = shadowRoot.querySelector('.mermaid-container, .mermaid-error');
+        if (existingContainer) {
+            existingContainer.remove();
+        }
+        // Render the diagram
+        const renderDiagram = async () => {
+            const currentRenderId = ++renderIdRef.current;
+            try {
+                // Validate syntax first
+                await mermaid.parse(code);
+                // Check if this render is still current
+                if (currentRenderId !== renderIdRef.current)
+                    return;
+                // Generate unique ID for this render
+                const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                // Render the diagram
+                const { svg } = await mermaid.render(id, code);
+                // Check again if this render is still current
+                if (currentRenderId !== renderIdRef.current)
+                    return;
+                // Create container and add SVG
+                const renderContainer = document.createElement('div');
+                renderContainer.className = 'mermaid-container';
+                renderContainer.innerHTML = svg;
+                shadowRoot.appendChild(renderContainer);
+            }
+            catch (e) {
+                if (currentRenderId !== renderIdRef.current)
+                    return;
+                const errorMessage = e instanceof Error ? e.message : 'Failed to render diagram';
+                // Show error in shadow DOM
+                const errorContainer = document.createElement('div');
+                errorContainer.className = 'mermaid-error';
+                errorContainer.textContent = `Mermaid Error: ${errorMessage}`;
+                shadowRoot.appendChild(errorContainer);
+            }
+        };
+        void renderDiagram();
+    }, [code, openLink]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { role: "button", tabIndex: -1, onDoubleClick: onDoubleClick, onContextMenu: (e) => contextMenu.show(e, containerRef), ref: containerRef, className: "mermaid-renderer", style: {
+                    display: 'block',
+                    cursor: 'pointer',
+                    minHeight: '100px',
+                } }), _jsx(DiagramContextMenu, { ...contextMenu.props })] }));
+}
+// Mermaid Editor component
+function MermaidEditor({ code, setCode, onClose, }) {
+    const textareaRef = useRef(null);
+    useEffect(() => {
+        // Focus textarea on mount
+        textareaRef.current?.focus();
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    return (_jsxs("div", { className: "mermaid-editor-container", children: [_jsxs("div", { className: "mermaid-editor-header", children: [_jsx("span", { className: "mermaid-editor-label", children: "```mermaid" }), _jsx("button", { className: "mermaid-editor-close", onClick: onClose, title: "Close editor (Esc)", children: "\u2715" })] }), _jsx("textarea", { ref: textareaRef, className: "mermaid-editor-textarea", value: code, onChange: (e) => setCode(e.target.value), onKeyDown: handleKeyDown, placeholder: "Enter Mermaid diagram code...", spellCheck: false }), _jsx("div", { className: "mermaid-editor-footer", children: _jsx("span", { className: "mermaid-editor-label", children: "```" }) })] }));
+}
+export default function MermaidComponent({ code, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const [codeValue, setCodeValue] = useState(code);
+    const [showEditor, setShowEditor] = useState(false);
+    // Listen for editable changes
+    useEffect(() => {
+        return editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        });
+    }, [editor]);
+    const onHide = useCallback(() => {
+        setShowEditor(false);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isMermaidNode(node)) {
+                node.setCode(codeValue);
+            }
+        });
+    }, [editor, codeValue, nodeKey]);
+    useEffect(() => {
+        if (!showEditor && codeValue !== code) {
+            setCodeValue(code);
+        }
+    }, [showEditor, code, codeValue]);
+    useEffect(() => {
+        if (!isEditable) {
+            return;
+        }
+        if (showEditor) {
+            return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+                // Don't close on selection change while editing
+                return false;
+            }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+                if (showEditor) {
+                    onHide();
+                    return true;
+                }
+                return false;
+            }, COMMAND_PRIORITY_HIGH));
+        }
+        else {
+            return editor.registerUpdateListener(({ editorState }) => {
+                const isSelected = editorState.read(() => {
+                    const selection = $getSelection();
+                    return ($isNodeSelection(selection) &&
+                        selection.has(nodeKey) &&
+                        selection.getNodes().length === 1);
+                });
+                if (isSelected) {
+                    setShowEditor(true);
+                }
+            });
+        }
+    }, [editor, nodeKey, onHide, showEditor, isEditable]);
+    if (showEditor && isEditable) {
+        return (_jsx(MermaidEditor, { code: codeValue, setCode: setCodeValue, onClose: onHide }));
+    }
+    return (_jsx(MermaidRenderer, { code: codeValue, onDoubleClick: () => {
+            if (isEditable) {
+                setShowEditor(true);
+            }
+        } }));
+}

package/dist/app/editor/nodes/MermaidNode.d.ts

@@ -0,0 +1,27 @@
+/**
+ * MermaidNode - Renders Mermaid diagrams
+ * Uses DecoratorNode pattern similar to EquationNode
+ */
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+export type SerializedMermaidNode = Spread<{
+    code: string;
+}, SerializedLexicalNode>;
+export declare class MermaidNode extends DecoratorNode<JSX.Element> {
+    __code: string;
+    static getType(): string;
+    static clone(node: MermaidNode): MermaidNode;
+    constructor(code: string, key?: NodeKey);
+    static importJSON(serializedNode: SerializedMermaidNode): MermaidNode;
+    exportJSON(): SerializedMermaidNode;
+    createDOM(): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(): boolean;
+    isInline(): boolean;
+    getTextContent(): string;
+    getCode(): string;
+    setCode(code: string): void;
+    decorate(): JSX.Element;
+}
+export declare function $createMermaidNode(code?: string): MermaidNode;
+export declare function $isMermaidNode(node: LexicalNode | null | undefined): node is MermaidNode;

package/dist/app/editor/nodes/MermaidNode.js

@@ -0,0 +1,96 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * MermaidNode - Renders Mermaid diagrams
+ * Uses DecoratorNode pattern similar to EquationNode
+ */
+import { DecoratorNode, $applyNodeReplacement, } from 'lexical';
+import { createElement, lazy, Suspense } from 'react';
+const MermaidComponent = lazy(() => import('./MermaidComponent.js'));
+function $convertMermaidElement(domNode) {
+    const code = domNode.getAttribute('data-lexical-mermaid');
+    if (code) {
+        // Decode from base64
+        const decodedCode = atob(code);
+        const node = $createMermaidNode(decodedCode);
+        return { node };
+    }
+    return null;
+}
+export class MermaidNode extends DecoratorNode {
+    __code;
+    static getType() {
+        return 'mermaid';
+    }
+    static clone(node) {
+        return new MermaidNode(node.__code, node.__key);
+    }
+    constructor(code, key) {
+        super(key);
+        this.__code = code;
+    }
+    static importJSON(serializedNode) {
+        return $createMermaidNode(serializedNode.code);
+    }
+    exportJSON() {
+        return {
+            type: 'mermaid',
+            version: 1,
+            code: this.getCode(),
+        };
+    }
+    createDOM() {
+        const element = document.createElement('div');
+        element.className = 'editor-mermaid';
+        return element;
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        // Encode as base64 to avoid issues with special characters
+        element.setAttribute('data-lexical-mermaid', btoa(this.__code));
+        element.className = 'mermaid-export';
+        element.textContent = this.__code;
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-mermaid')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertMermaidElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    updateDOM() {
+        return false;
+    }
+    isInline() {
+        return false;
+    }
+    getTextContent() {
+        return this.__code;
+    }
+    getCode() {
+        return this.__code;
+    }
+    setCode(code) {
+        const writable = this.getWritable();
+        writable.__code = code;
+    }
+    decorate() {
+        return createElement(Suspense, { fallback: createElement('div', { className: 'mermaid-loading' }, 'Loading diagram...') }, createElement(MermaidComponent, {
+            code: this.__code,
+            nodeKey: this.__key,
+        }));
+    }
+}
+export function $createMermaidNode(code = '') {
+    const mermaidNode = new MermaidNode(code);
+    return $applyNodeReplacement(mermaidNode);
+}
+export function $isMermaidNode(node) {
+    return node instanceof MermaidNode;
+}

package/dist/app/editor/nodes/ToggleNode.d.ts

@@ -0,0 +1,56 @@
+import { DOMConversionMap, DOMExportOutput, EditorConfig, ElementNode, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread } from 'lexical';
+export type SerializedToggleContainerNode = Spread<{
+    open: boolean;
+}, SerializedElementNode>;
+export declare class ToggleContainerNode extends ElementNode {
+    __open: boolean;
+    static getType(): string;
+    static clone(node: ToggleContainerNode): ToggleContainerNode;
+    constructor(open?: boolean, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: ToggleContainerNode, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedToggleContainerNode): ToggleContainerNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedToggleContainerNode;
+    setOpen(open: boolean): void;
+    getOpen(): boolean;
+    toggleOpen(): void;
+    isShadowRoot(): boolean;
+    canBeEmpty(): boolean;
+}
+export declare function $createToggleContainerNode(open?: boolean): ToggleContainerNode;
+export declare function $isToggleContainerNode(node: LexicalNode | null | undefined): node is ToggleContainerNode;
+export type SerializedToggleTitleNode = SerializedElementNode;
+export declare class ToggleTitleNode extends ElementNode {
+    static getType(): string;
+    static clone(node: ToggleTitleNode): ToggleTitleNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedToggleTitleNode): ToggleTitleNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedToggleTitleNode;
+    collapseAtStart(_selection: RangeSelection): boolean;
+    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): null | ElementNode;
+}
+export declare function $createToggleTitleNode(): ToggleTitleNode;
+export declare function $isToggleTitleNode(node: LexicalNode | null | undefined): node is ToggleTitleNode;
+export type SerializedToggleContentNode = SerializedElementNode;
+export declare class ToggleContentNode extends ElementNode {
+    static getType(): string;
+    static clone(node: ToggleContentNode): ToggleContentNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedToggleContentNode): ToggleContentNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedToggleContentNode;
+    isShadowRoot(): boolean;
+}
+export declare function $createToggleContentNode(): ToggleContentNode;
+export declare function $isToggleContentNode(node: LexicalNode | null | undefined): node is ToggleContentNode;
+export declare function $createToggleNode(summaryText?: string, contentText?: string, open?: boolean): ToggleContainerNode;
+export declare function $isToggleNode(node: LexicalNode | null | undefined): node is ToggleContainerNode;
+export type ToggleNode = ToggleContainerNode;
+export type SerializedToggleNode = SerializedToggleContainerNode;

package/dist/app/editor/nodes/ToggleNode.js

@@ -0,0 +1,237 @@
+import { $createParagraphNode, $createTextNode, ElementNode, } from 'lexical';
+export class ToggleContainerNode extends ElementNode {
+    __open;
+    static getType() {
+        return 'toggle-container';
+    }
+    static clone(node) {
+        return new ToggleContainerNode(node.__open, node.__key);
+    }
+    constructor(open = false, key) {
+        super(key);
+        this.__open = open;
+    }
+    createDOM(config) {
+        void config;
+        const dom = document.createElement('div');
+        dom.classList.add('toggle-container');
+        if (this.__open) {
+            dom.classList.add('toggle-container--open');
+        }
+        return dom;
+    }
+    updateDOM(prevNode, dom) {
+        if (prevNode.__open !== this.__open) {
+            dom.classList.toggle('toggle-container--open', this.__open);
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            details: (domNode) => {
+                void domNode;
+                return {
+                    conversion: convertDetailsElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        void serializedNode;
+        const node = $createToggleContainerNode(serializedNode.open);
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('details');
+        if (this.__open) {
+            element.setAttribute('open', '');
+        }
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'toggle-container',
+            open: this.__open,
+            version: 1,
+        };
+    }
+    setOpen(open) {
+        const writable = this.getWritable();
+        writable.__open = open;
+    }
+    getOpen() {
+        return this.__open;
+    }
+    toggleOpen() {
+        this.setOpen(!this.getOpen());
+    }
+    // This prevents direct selection in the container
+    isShadowRoot() {
+        return true;
+    }
+    canBeEmpty() {
+        return false;
+    }
+}
+function convertDetailsElement(domNode) {
+    const isOpen = domNode.hasAttribute('open');
+    const node = $createToggleContainerNode(isOpen);
+    return { node };
+}
+export function $createToggleContainerNode(open = false) {
+    return new ToggleContainerNode(open);
+}
+export function $isToggleContainerNode(node) {
+    return node instanceof ToggleContainerNode;
+}
+export class ToggleTitleNode extends ElementNode {
+    static getType() {
+        return 'toggle-title';
+    }
+    static clone(node) {
+        return new ToggleTitleNode(node.__key);
+    }
+    createDOM(config) {
+        void config;
+        const dom = document.createElement('div');
+        dom.classList.add('toggle-title');
+        return dom;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {
+            summary: () => ({
+                conversion: convertSummaryElement,
+                priority: 1,
+            }),
+        };
+    }
+    static importJSON(serializedNode) {
+        void serializedNode;
+        return $createToggleTitleNode();
+    }
+    exportDOM() {
+        const element = document.createElement('summary');
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'toggle-title',
+            version: 1,
+        };
+    }
+    // Collapse at start collapses the entire toggle
+    collapseAtStart(_selection) {
+        this.getParentOrThrow().insertBefore(this);
+        return true;
+    }
+    // Prevent inserting nodes that aren't allowed
+    insertNewAfter(_, restoreSelection) {
+        void restoreSelection;
+        const containerNode = this.getParentOrThrow();
+        if (!$isToggleContainerNode(containerNode)) {
+            throw new Error('ToggleTitleNode must be a child of ToggleContainerNode');
+        }
+        // If closed, open it
+        if (!containerNode.getOpen()) {
+            containerNode.toggleOpen();
+        }
+        // Find or create content node
+        const children = containerNode.getChildren();
+        const contentNode = children.find($isToggleContentNode);
+        if (contentNode) {
+            const firstChild = contentNode.getFirstChild();
+            if (firstChild) {
+                firstChild.selectStart();
+            }
+            else {
+                const paragraph = $createParagraphNode();
+                contentNode.append(paragraph);
+                paragraph.selectStart();
+            }
+        }
+        return null;
+    }
+}
+function convertSummaryElement() {
+    const node = $createToggleTitleNode();
+    return { node };
+}
+export function $createToggleTitleNode() {
+    return new ToggleTitleNode();
+}
+export function $isToggleTitleNode(node) {
+    return node instanceof ToggleTitleNode;
+}
+export class ToggleContentNode extends ElementNode {
+    static getType() {
+        return 'toggle-content';
+    }
+    static clone(node) {
+        return new ToggleContentNode(node.__key);
+    }
+    createDOM(config) {
+        void config;
+        const dom = document.createElement('div');
+        dom.classList.add('toggle-content-area');
+        return dom;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return null;
+    }
+    static importJSON(serializedNode) {
+        void serializedNode;
+        return $createToggleContentNode();
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        return { element };
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'toggle-content',
+            version: 1,
+        };
+    }
+    isShadowRoot() {
+        return true;
+    }
+}
+export function $createToggleContentNode() {
+    return new ToggleContentNode();
+}
+export function $isToggleContentNode(node) {
+    return node instanceof ToggleContentNode;
+}
+// ==================== Helper Functions ====================
+export function $createToggleNode(summaryText = 'Toggle', contentText = '', open = false) {
+    const container = $createToggleContainerNode(open);
+    const title = $createToggleTitleNode();
+    const titleParagraph = $createParagraphNode();
+    if (summaryText) {
+        titleParagraph.append($createTextNode(summaryText));
+    }
+    title.append(titleParagraph);
+    const content = $createToggleContentNode();
+    const contentParagraph = $createParagraphNode();
+    if (contentText) {
+        contentParagraph.append($createTextNode(contentText));
+    }
+    content.append(contentParagraph);
+    container.append(title);
+    container.append(content);
+    return container;
+}
+// Legacy compatibility - now just checks for container
+export function $isToggleNode(node) {
+    return $isToggleContainerNode(node);
+}

package/dist/app/editor/nodes/diagram-context-menu.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared "Copy image to clipboard" for diagram nodes (C4, Mermaid).
+ *
+ * Converts the diagram SVG to a high-res PNG and writes it to the
+ * clipboard. Uses devicePixelRatio for crisp retina output.
+ */
+/**
+ * Copy the diagram to the clipboard as a high-res PNG.
+ * Returns true on success, false on failure.
+ */
+export declare function copyDiagramToClipboard(container: HTMLElement): Promise<boolean>;