@liminis/editor 0.1.0-rc.1

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

@@ -0,0 +1,45 @@
+/**
+ * Shared context menu overlay for diagram nodes (C4, Mermaid).
+ * Provides "Copy image to clipboard" and optional diagram-specific actions.
+ */
+export interface DiagramContextMenuState {
+    visible: boolean;
+    x: number;
+    y: number;
+    containerRef: React.RefObject<HTMLElement | null> | null;
+}
+export interface DiagramContextMenuProps {
+    visible: boolean;
+    x: number;
+    y: number;
+    onCopyImage: () => void;
+    onClose: () => void;
+    /** Optional: enter DSL text editor (double-click equivalent) */
+    onEditText?: () => void;
+    /** Optional: toggle drag layout mode */
+    onEditLayout?: () => void;
+    /** Optional: reset to auto layout */
+    onResetLayout?: () => void;
+    /** Whether drag layout mode is currently active */
+    isEditingLayout?: boolean;
+    /** Whether manual layout exists (show reset option) */
+    hasManualLayout?: boolean;
+}
+/**
+ * Hook to manage diagram context menu state.
+ */
+export declare function useDiagramContextMenu(): {
+    show: (e: React.MouseEvent, containerRef: React.RefObject<HTMLElement | null>) => void;
+    props: {
+        visible: boolean;
+        x: number;
+        y: number;
+        onCopyImage: () => Promise<void>;
+        onClose: () => void;
+    };
+};
+/**
+ * Context menu overlay component. Uses CSS variables for theming
+ * with light/dark hex fallbacks for environments without VS Code vars.
+ */
+export declare function DiagramContextMenu({ visible, x, y, onCopyImage, onClose, onEditText, onEditLayout, onResetLayout, isEditingLayout, hasManualLayout, }: DiagramContextMenuProps): JSX.Element | null;

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Shared context menu overlay for diagram nodes (C4, Mermaid).
+ * Provides "Copy image to clipboard" and optional diagram-specific actions.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { copyDiagramToClipboard } from './diagram-context-menu.js';
+/**
+ * Hook to manage diagram context menu state.
+ */
+export function useDiagramContextMenu() {
+    const [state, setState] = useState({
+        visible: false,
+        x: 0,
+        y: 0,
+        containerRef: null,
+    });
+    const show = useCallback((e, containerRef) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setState({
+            visible: true,
+            x: e.clientX,
+            y: e.clientY,
+            containerRef,
+        });
+    }, []);
+    const close = useCallback(() => {
+        setState((prev) => ({ ...prev, visible: false }));
+    }, []);
+    const handleCopyImage = useCallback(async () => {
+        if (state.containerRef?.current) {
+            await copyDiagramToClipboard(state.containerRef.current);
+        }
+        close();
+    }, [state.containerRef, close]);
+    return {
+        show,
+        props: {
+            visible: state.visible,
+            x: state.x,
+            y: state.y,
+            onCopyImage: handleCopyImage,
+            onClose: close,
+        },
+    };
+}
+const menuStyle = {
+    position: 'fixed',
+    zIndex: 10000,
+    borderRadius: '6px',
+    padding: '4px 0',
+    minWidth: '180px',
+};
+const itemStyle = {
+    display: 'block',
+    width: '100%',
+    padding: '6px 12px',
+    background: 'transparent',
+    border: 'none',
+    fontSize: '13px',
+    textAlign: 'left',
+    cursor: 'pointer',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+};
+const separatorStyle = {
+    height: '1px',
+    margin: '4px 8px',
+};
+/**
+ * Context menu overlay component. Uses CSS variables for theming
+ * with light/dark hex fallbacks for environments without VS Code vars.
+ */
+export function DiagramContextMenu({ visible, x, y, onCopyImage, onClose, onEditText, onEditLayout, onResetLayout, isEditingLayout, hasManualLayout, }) {
+    const menuRef = useRef(null);
+    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+    const bgColor = `var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'})`;
+    const borderColor = `var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'})`;
+    const textColor = `var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'})`;
+    const hoverBg = `var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'})`;
+    const separatorColor = `var(--vscode-menu-separatorBackground, ${isDark ? '#454545' : '#d4d4d4'})`;
+    // Close on click outside or Escape
+    useEffect(() => {
+        if (!visible)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        const handleKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [visible, onClose]);
+    if (!visible)
+        return null;
+    const handleHover = (e, entering) => {
+        e.currentTarget.style.background = entering ? hoverBg : 'transparent';
+    };
+    return (_jsxs("div", { ref: menuRef, style: {
+            ...menuStyle,
+            left: x,
+            top: y,
+            background: bgColor,
+            border: `1px solid ${borderColor}`,
+            boxShadow: isDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.12)',
+        }, children: [onEditText && (_jsx("button", { onClick: () => { onEditText(); onClose(); }, style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: "Edit text\u2026" })), onEditLayout && (_jsx("button", { onClick: () => { onEditLayout(); onClose(); }, style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: isEditingLayout ? 'Exit layout mode' : 'Edit layout' })), onResetLayout && hasManualLayout && (_jsx("button", { onClick: () => { onResetLayout(); onClose(); }, style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: "Reset to auto layout" })), (onEditText || onEditLayout) && (_jsx("div", { style: { ...separatorStyle, background: separatorColor } })), _jsx("button", { onClick: onCopyImage, style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: "Copy image to clipboard" })] }));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * EquationComponent - React component for rendering and editing LaTeX equations
+ * Ported from Lexical playground with modifications for SlashMD
+ *
+ * TODO: Block math equations should be centered but centering doesn't work properly.
+ * The issue is likely related to Shadow DOM style inheritance - the :host(.block)
+ * selector and text-align: center are set but not taking effect. May need to
+ * investigate the container element structure or use a different centering approach.
+ */
+import { NodeKey } from 'lexical';
+interface EquationComponentProps {
+    equation: string;
+    inline: boolean;
+    nodeKey: NodeKey;
+}
+export default function EquationComponent({ equation, inline, nodeKey, }: EquationComponentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EquationComponent - React component for rendering and editing LaTeX equations
+ * Ported from Lexical playground with modifications for SlashMD
+ *
+ * TODO: Block math equations should be centered but centering doesn't work properly.
+ * The issue is likely related to Shadow DOM style inheritance - the :host(.block)
+ * selector and text-align: center are set but not taking effect. May need to
+ * investigate the container element structure or use a different centering approach.
+ */
+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, forwardRef } from 'react';
+import { createBrowserAdaptorDocument } from '../../../mathjax-config.js';
+import { $isEquationNode } from './EquationNode.js';
+// Initialize MathJax once for the renderer process
+const { adaptor: mathjaxAdaptor, document: mathjaxDocument } = createBrowserAdaptorDocument(document);
+// MathJax SVG Renderer component — replaces KaTeX with MathJax for higher quality rendering
+function MathJaxRenderer({ equation, inline, onDoubleClick, }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        try {
+            // Normalize escaped backslashes from markdown sources
+            const renderEquation = equation.replace(/\\\\([a-zA-Z])/g, '\\$1');
+            // Clear previous render
+            container.innerHTML = '';
+            // Render with MathJax
+            const node = mathjaxDocument.convert(renderEquation, { display: !inline });
+            // MathJax returns an element — append it directly
+            if (node instanceof Node) {
+                container.appendChild(node);
+            }
+            else {
+                // Fallback: use innerHTML from adaptor
+                container.innerHTML = mathjaxAdaptor.innerHTML(node);
+            }
+        }
+        catch {
+            container.textContent = equation;
+        }
+    }, [equation, inline]);
+    return (_jsx("span", { role: "button", tabIndex: -1, onDoubleClick: onDoubleClick, ref: containerRef, className: `equation-renderer ${inline ? 'inline' : 'block'}`, style: { display: inline ? 'inline' : 'block', textAlign: inline ? 'inherit' : 'center' } }));
+}
+const EquationEditor = forwardRef(function EquationEditor({ equation, setEquation, inline }, forwardedRef) {
+    const onChange = (event) => {
+        setEquation(event.target.value);
+    };
+    if (inline) {
+        return (_jsxs("span", { className: "equation-editor-background", children: [_jsx("span", { className: "equation-dollar-sign", children: "$" }), _jsx("input", { className: "equation-inline-editor", value: equation, onChange: onChange, autoFocus: true, ref: forwardedRef }), _jsx("span", { className: "equation-dollar-sign", children: "$" })] }));
+    }
+    return (_jsxs("div", { className: "equation-editor-background", children: [_jsx("span", { className: "equation-dollar-sign", children: '$$' }), _jsx("textarea", { className: "equation-block-editor", value: equation, onChange: onChange, autoFocus: true, ref: forwardedRef }), _jsx("span", { className: "equation-dollar-sign", children: '$$' })] }));
+});
+export default function EquationComponent({ equation, inline, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const [equationValue, setEquationValue] = useState(equation);
+    const [showEquationEditor, setShowEquationEditor] = useState(false);
+    const inputRef = useRef(null);
+    // Listen for editable changes
+    useEffect(() => {
+        return editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        });
+    }, [editor]);
+    const onHide = useCallback((restoreSelection) => {
+        setShowEquationEditor(false);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isEquationNode(node)) {
+                node.setEquation(equationValue);
+                if (restoreSelection) {
+                    node.selectNext(0, 0);
+                }
+            }
+        });
+    }, [editor, equationValue, nodeKey]);
+    useEffect(() => {
+        if (!showEquationEditor && equationValue !== equation) {
+            setEquationValue(equation);
+        }
+    }, [showEquationEditor, equation, equationValue]);
+    useEffect(() => {
+        if (!isEditable) {
+            return;
+        }
+        if (showEquationEditor) {
+            return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+                const activeElement = document.activeElement;
+                const inputElem = inputRef.current;
+                if (inputElem !== activeElement) {
+                    onHide();
+                }
+                return false;
+            }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+                const activeElement = document.activeElement;
+                const inputElem = inputRef.current;
+                if (inputElem === activeElement) {
+                    onHide(true);
+                    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) {
+                    setShowEquationEditor(true);
+                }
+            });
+        }
+    }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
+    if (showEquationEditor && isEditable) {
+        return (_jsx(EquationEditor, { equation: equationValue, setEquation: setEquationValue, inline: inline, ref: inputRef }));
+    }
+    return (_jsx(MathJaxRenderer, { equation: equationValue, inline: inline, onDoubleClick: () => {
+            if (isEditable) {
+                setShowEquationEditor(true);
+            }
+        } }));
+}

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

@@ -0,0 +1,43 @@
+/**
+ * EquationNode - Renders LaTeX math equations using KaTeX
+ * Ported from Lexical playground with modifications for SlashMD
+ */
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread, TextFormatType } from 'lexical';
+export type SerializedEquationNode = Spread<{
+    equation: string;
+    inline: boolean;
+    format?: number;
+    strongMarker?: '_' | '*' | null;
+    emphasisMarker?: '_' | '*' | null;
+}, SerializedLexicalNode>;
+export declare class EquationNode extends DecoratorNode<JSX.Element> {
+    __equation: string;
+    __inline: boolean;
+    __format: number;
+    __strongMarker: '_' | '*' | null;
+    __emphasisMarker: '_' | '*' | null;
+    static getType(): string;
+    static clone(node: EquationNode): EquationNode;
+    constructor(equation: string, inline?: boolean, key?: NodeKey);
+    static importJSON(serializedNode: SerializedEquationNode): EquationNode;
+    exportJSON(): SerializedEquationNode;
+    getFormat(): number;
+    hasFormat(type: TextFormatType): boolean;
+    setFormat(format: number): this;
+    toggleFormat(type: TextFormatType): this;
+    getStrongMarker(): '_' | '*' | null;
+    setStrongMarker(marker: '_' | '*' | null): this;
+    getEmphasisMarker(): '_' | '*' | null;
+    setEmphasisMarker(marker: '_' | '*' | null): this;
+    createDOM(): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(prevNode: EquationNode): boolean;
+    getTextContent(): string;
+    getEquation(): string;
+    setEquation(equation: string): void;
+    isInline(): boolean;
+    decorate(): JSX.Element;
+}
+export declare function $createEquationNode(equation?: string, inline?: boolean): EquationNode;
+export declare function $isEquationNode(node: LexicalNode | null | undefined): node is EquationNode;

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

@@ -0,0 +1,179 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * EquationNode - Renders LaTeX math equations using KaTeX
+ * Ported from Lexical playground with modifications for SlashMD
+ */
+import { DecoratorNode, TEXT_TYPE_TO_FORMAT, toggleTextFormatType, $applyNodeReplacement, } from 'lexical';
+import { createElement, lazy, Suspense } from 'react';
+import { createLiteAdaptorDocument } from '../../../mathjax-config.js';
+// Lightweight MathJax instance for DOM export (copy/paste serialization)
+const { adaptor: exportAdaptor, document: exportDocument } = createLiteAdaptorDocument({ fontCache: 'none' });
+const EquationComponent = lazy(() => import('./EquationComponent.js'));
+function $convertEquationElement(domNode) {
+    let equation = domNode.getAttribute('data-lexical-equation');
+    const inline = domNode.getAttribute('data-lexical-inline') === 'true';
+    // Decode the equation from base64
+    equation = atob(equation || '');
+    if (equation) {
+        const node = $createEquationNode(equation, inline);
+        return { node };
+    }
+    return null;
+}
+export class EquationNode extends DecoratorNode {
+    __equation;
+    __inline;
+    __format;
+    __strongMarker;
+    __emphasisMarker;
+    static getType() {
+        return 'equation';
+    }
+    static clone(node) {
+        const cloned = new EquationNode(node.__equation, node.__inline, node.__key);
+        cloned.__format = node.__format;
+        cloned.__strongMarker = node.__strongMarker;
+        cloned.__emphasisMarker = node.__emphasisMarker;
+        return cloned;
+    }
+    constructor(equation, inline, key) {
+        super(key);
+        this.__equation = equation;
+        this.__inline = inline ?? false;
+        this.__format = 0;
+        this.__strongMarker = null;
+        this.__emphasisMarker = null;
+    }
+    static importJSON(serializedNode) {
+        const node = $createEquationNode(serializedNode.equation, serializedNode.inline).setFormat(serializedNode.format ?? 0);
+        if (serializedNode.strongMarker) {
+            node.setStrongMarker(serializedNode.strongMarker);
+        }
+        if (serializedNode.emphasisMarker) {
+            node.setEmphasisMarker(serializedNode.emphasisMarker);
+        }
+        return node;
+    }
+    exportJSON() {
+        return {
+            type: 'equation',
+            version: 1,
+            equation: this.getEquation(),
+            inline: this.__inline,
+            format: this.__format,
+            strongMarker: this.__strongMarker,
+            emphasisMarker: this.__emphasisMarker,
+        };
+    }
+    // Mirrors TextNode's format bitmask API so this node can carry
+    // bold/italic/strikethrough state through the mdast<->Lexical round-trip.
+    getFormat() {
+        return this.getLatest().__format;
+    }
+    hasFormat(type) {
+        const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+        return (this.getFormat() & formatFlag) !== 0;
+    }
+    setFormat(format) {
+        const self = this.getWritable();
+        self.__format = format;
+        return self;
+    }
+    toggleFormat(type) {
+        const format = this.getFormat();
+        const newFormat = toggleTextFormatType(format, type, null);
+        return this.setFormat(newFormat);
+    }
+    // Mirrors TextNode's --md-strong-marker/--md-emphasis-marker style hooks
+    // (via setMarkdownMarker/getMarkdownMarker in the mappers) so a bare
+    // `_$O(n)$_`/`__$O(n)__` span with no text sibling can still recover its
+    // original underscore-vs-asterisk marker on export.
+    getStrongMarker() {
+        return this.getLatest().__strongMarker;
+    }
+    setStrongMarker(marker) {
+        const self = this.getWritable();
+        self.__strongMarker = marker;
+        return self;
+    }
+    getEmphasisMarker() {
+        return this.getLatest().__emphasisMarker;
+    }
+    setEmphasisMarker(marker) {
+        const self = this.getWritable();
+        self.__emphasisMarker = marker;
+        return self;
+    }
+    createDOM() {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        element.className = 'editor-equation';
+        return element;
+    }
+    exportDOM() {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        // Encode the equation as base64 to avoid issues with special characters
+        const equation = btoa(this.__equation);
+        element.setAttribute('data-lexical-equation', equation);
+        element.setAttribute('data-lexical-inline', `${this.__inline}`);
+        try {
+            const node = exportDocument.convert(this.__equation, { display: !this.__inline });
+            element.innerHTML = exportAdaptor.innerHTML(node);
+        }
+        catch {
+            element.textContent = this.__equation;
+        }
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-equation')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertEquationElement,
+                    priority: 2,
+                };
+            },
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-equation')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertEquationElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM(prevNode) {
+        return this.__inline !== prevNode.__inline;
+    }
+    getTextContent() {
+        return this.__equation;
+    }
+    getEquation() {
+        return this.__equation;
+    }
+    setEquation(equation) {
+        const writable = this.getWritable();
+        writable.__equation = equation;
+    }
+    isInline() {
+        return this.__inline;
+    }
+    decorate() {
+        return createElement(Suspense, { fallback: null }, createElement(EquationComponent, {
+            equation: this.__equation,
+            inline: this.__inline,
+            nodeKey: this.__key,
+        }));
+    }
+}
+export function $createEquationNode(equation = '', inline = false) {
+    const equationNode = new EquationNode(equation, inline);
+    return $applyNodeReplacement(equationNode);
+}
+export function $isEquationNode(node) {
+    return node instanceof EquationNode;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * FootnoteNode — Inline decorator node for footnote references ([^id]).
+ * Renders as a superscript label and preserves the footnote identifier
+ * for correct round-trip serialization back to markdown.
+ */
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread, TextFormatType } from 'lexical';
+export type SerializedFootnoteNode = Spread<{
+    footnoteId: string;
+    format?: number;
+    strongMarker?: '_' | '*' | null;
+    emphasisMarker?: '_' | '*' | null;
+}, SerializedLexicalNode>;
+export declare class FootnoteNode extends DecoratorNode<JSX.Element> {
+    __footnoteId: string;
+    __format: number;
+    __strongMarker: '_' | '*' | null;
+    __emphasisMarker: '_' | '*' | null;
+    static getType(): string;
+    static clone(node: FootnoteNode): FootnoteNode;
+    constructor(footnoteId: string, key?: NodeKey);
+    getFootnoteId(): string;
+    isInline(): boolean;
+    static importJSON(serializedNode: SerializedFootnoteNode): FootnoteNode;
+    exportJSON(): SerializedFootnoteNode;
+    getFormat(): number;
+    hasFormat(type: TextFormatType): boolean;
+    setFormat(format: number): this;
+    toggleFormat(type: TextFormatType): this;
+    getStrongMarker(): '_' | '*' | null;
+    setStrongMarker(marker: '_' | '*' | null): this;
+    getEmphasisMarker(): '_' | '*' | null;
+    setEmphasisMarker(marker: '_' | '*' | null): this;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    decorate(): JSX.Element;
+}
+export declare function $createFootnoteNode(footnoteId: string): FootnoteNode;
+export declare function $isFootnoteNode(node: LexicalNode | null | undefined): node is FootnoteNode;