@liminis/editor 0.1.0-rc.1

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

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey } from 'lexical';
+import { $isImageNode } from './ImageNode.js';
+import { useAssetContext } from '../AssetContext.js';
+import { DiagramContextMenu } from './DiagramContextMenu.js';
+import { useEditorHost } from '../../../host/context.js';
+function isAbsoluteUrl(path) {
+    return (path.startsWith('http://') ||
+        path.startsWith('https://') ||
+        path.startsWith('data:') ||
+        path.startsWith('blob:') ||
+        path.startsWith('vscode-webview-resource:'));
+}
+export function ImageComponent({ src, alt, title, width, height, nodeKey, }) {
+    const [editor] = useLexicalComposerContext();
+    const { resolveAssetPath, resolveLocalAsset } = useAssetContext();
+    const { notifyError } = useEditorHost();
+    const imageRef = useRef(null);
+    // Resolve the src path for display
+    const resolvedSrc = resolveAssetPath(src);
+    const [localDataUrl, setLocalDataUrl] = useState(null);
+    const [loadError, setLoadError] = useState(false);
+    useEffect(() => {
+        if (isAbsoluteUrl(resolvedSrc) || !resolveLocalAsset) {
+            setLocalDataUrl(null);
+            setLoadError(false);
+            return;
+        }
+        let cancelled = false;
+        setLoadError(false);
+        resolveLocalAsset(resolvedSrc).then((dataUrl) => {
+            if (!cancelled) {
+                if (dataUrl) {
+                    setLocalDataUrl(dataUrl);
+                }
+                else {
+                    setLoadError(true);
+                }
+            }
+        }).catch(() => {
+            if (!cancelled)
+                setLoadError(true);
+        });
+        return () => { cancelled = true; };
+    }, [resolvedSrc, resolveLocalAsset]);
+    // Use local data URL for relative paths, otherwise use the resolved src directly
+    const displaySrc = isAbsoluteUrl(resolvedSrc) ? resolvedSrc : (localDataUrl ?? resolvedSrc);
+    // Context menu state
+    const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+    }, []);
+    const handleCopyImage = useCallback(async () => {
+        const img = imageRef.current;
+        if (!img) {
+            setContextMenu((prev) => ({ ...prev, visible: false }));
+            return;
+        }
+        try {
+            // Use rendered size (not naturalWidth which can be 0 for viewBox-only SVGs)
+            const scale = window.devicePixelRatio || 2;
+            const rect = img.getBoundingClientRect();
+            const w = rect.width;
+            const h = rect.height;
+            if (!w || !h) {
+                setContextMenu((prev) => ({ ...prev, visible: false }));
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            const canvasWidth = Math.round(w * scale);
+            const canvasHeight = Math.round(h * scale);
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            const ctx = canvas.getContext('2d');
+            ctx.scale(canvasWidth / w, canvasHeight / h);
+            ctx.drawImage(img, 0, 0, w, h);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((b) => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
+            });
+            await navigator.clipboard.write([
+                new ClipboardItem({ 'image/png': blob })
+            ]);
+        }
+        catch (err) {
+            console.error('Failed to copy image to clipboard:', err);
+            // The <img> no longer requests CORS mode (see crossOrigin removal below),
+            // so drawing a cross-origin image onto the canvas taints it and toBlob()
+            // rejects with a SecurityError. That's an accepted tradeoff: display
+            // wins over copy for remote images that don't support CORS. Since this
+            // is now the primary expected trigger for this catch (rather than an
+            // edge case), give it a message that explains the cause instead of the
+            // generic DOMException text.
+            const isTaintedCanvas = err instanceof DOMException && err.name === 'SecurityError';
+            notifyError('Failed to copy image', isTaintedCanvas
+                ? 'This image is hosted on another site that does not allow copying — try saving it instead.'
+                : err instanceof Error ? err.message : String(err));
+        }
+        setContextMenu((prev) => ({ ...prev, visible: false }));
+    }, [notifyError]);
+    const [isResizing, setIsResizing] = useState(false);
+    const [isSelected, setIsSelected] = useState(false);
+    const [currentWidth, setCurrentWidth] = useState(width);
+    const [naturalWidth, setNaturalWidth] = useState(0);
+    const [naturalHeight, setNaturalHeight] = useState(0);
+    // Track resize start position
+    const resizeStartRef = useRef(null);
+    // Update current width when prop changes
+    useEffect(() => {
+        setCurrentWidth(width);
+    }, [width]);
+    // Handle image load to get natural dimensions
+    const handleImageLoad = useCallback(() => {
+        if (imageRef.current) {
+            setNaturalWidth(imageRef.current.naturalWidth);
+            setNaturalHeight(imageRef.current.naturalHeight);
+        }
+    }, []);
+    // Handle click to select image
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        setIsSelected(true);
+    }, []);
+    // Handle click outside to deselect
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (imageRef.current && !imageRef.current.parentElement?.contains(e.target)) {
+                setIsSelected(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Handle resize start
+    const handleResizeStart = useCallback((e, corner) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const startWidth = currentWidth || imageRef.current?.offsetWidth || naturalWidth;
+        resizeStartRef.current = {
+            startX: e.clientX,
+            startWidth,
+            corner,
+        };
+        setIsResizing(true);
+    }, [currentWidth, naturalWidth]);
+    // Use refs for values accessed in event handlers to avoid effect re-registration
+    const currentWidthRef = useRef(currentWidth);
+    currentWidthRef.current = currentWidth;
+    const naturalWidthRef = useRef(naturalWidth);
+    naturalWidthRef.current = naturalWidth;
+    const naturalHeightRef = useRef(naturalHeight);
+    naturalHeightRef.current = naturalHeight;
+    // Handle resize move
+    useEffect(() => {
+        if (!isResizing)
+            return;
+        const handleMouseMove = (e) => {
+            if (!resizeStartRef.current)
+                return;
+            const { startX, startWidth, corner } = resizeStartRef.current;
+            let deltaX = e.clientX - startX;
+            // For left corners, invert the delta
+            if (corner === 'nw' || corner === 'sw') {
+                deltaX = -deltaX;
+            }
+            const newWidth = Math.max(50, startWidth + deltaX);
+            setCurrentWidth(newWidth);
+        };
+        const handleMouseUp = () => {
+            const width = currentWidthRef.current;
+            const natWidth = naturalWidthRef.current;
+            const natHeight = naturalHeightRef.current;
+            if (resizeStartRef.current && width) {
+                // Calculate proportional height
+                const aspectRatio = natHeight / natWidth;
+                const newHeight = Math.round(width * aspectRatio);
+                // Update the node with new dimensions
+                editor.update(() => {
+                    const node = $getNodeByKey(nodeKey);
+                    if ($isImageNode(node)) {
+                        node.setWidth(width);
+                        node.setHeight(newHeight);
+                    }
+                });
+            }
+            resizeStartRef.current = null;
+            setIsResizing(false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, editor, nodeKey]);
+    // Calculate display dimensions
+    const displayWidth = currentWidth || width;
+    const displayHeight = displayWidth && naturalWidth && naturalHeight
+        ? Math.round(displayWidth * (naturalHeight / naturalWidth))
+        : height;
+    // Show placeholder while loading local assets
+    if (!isAbsoluteUrl(resolvedSrc) && resolveLocalAsset && !localDataUrl && !loadError) {
+        return (_jsx("div", { className: "image-wrapper", children: _jsx("div", { className: "image-placeholder", style: { padding: '1em', opacity: 0.5 }, children: "Loading image\u2026" }) }));
+    }
+    if (loadError) {
+        return (_jsx("div", { className: "image-wrapper", children: _jsxs("div", { className: "image-placeholder", style: { padding: '1em', opacity: 0.5 }, children: ["Image not found: ", src] }) }));
+    }
+    return (_jsxs("div", { className: `image-wrapper ${isSelected ? 'selected' : ''} ${isResizing ? 'resizing' : ''} ${!displayWidth ? 'no-dimensions' : ''}`, onClick: handleClick, onContextMenu: handleContextMenu, children: [_jsx("img", { ref: imageRef, src: displaySrc, alt: alt, title: title, draggable: false, 
+                // No crossOrigin attribute: requesting CORS mode makes display of a
+                // remote image depend on the host sending Access-Control-Allow-Origin,
+                // which most ordinary image hosts (e.g. shields.io badges) don't do —
+                // the browser would render nothing instead of the image. The only
+                // consumer of an untainted canvas is handleCopyImage's clipboard
+                // read-back above, which already handles (and now surfaces) failure
+                // when a cross-origin image taints the canvas.
+                onLoad: handleImageLoad, style: {
+                    // If an explicit width is set (from resize), use it.
+                    // Otherwise, let the image display at natural size but cap at 100%
+                    // of the container — raster images should never scale up beyond
+                    // their natural dimensions.
+                    width: displayWidth ? `${displayWidth}px` : undefined,
+                    height: displayHeight ? `${displayHeight}px` : undefined,
+                    maxWidth: '100%',
+                } }), isSelected && (_jsxs(_Fragment, { children: [_jsx("div", { className: "image-resize-handle nw", onMouseDown: (e) => handleResizeStart(e, 'nw') }), _jsx("div", { className: "image-resize-handle ne", onMouseDown: (e) => handleResizeStart(e, 'ne') }), _jsx("div", { className: "image-resize-handle sw", onMouseDown: (e) => handleResizeStart(e, 'sw') }), _jsx("div", { className: "image-resize-handle se", onMouseDown: (e) => handleResizeStart(e, 'se') })] })), isSelected && displayWidth && (_jsxs("div", { className: "image-size-badge", children: [displayWidth, " \u00D7 ", displayHeight] })), _jsx(DiagramContextMenu, { visible: contextMenu.visible, x: contextMenu.x, y: contextMenu.y, onCopyImage: handleCopyImage, onClose: () => setContextMenu((prev) => ({ ...prev, visible: false })) })] }));
+}

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

@@ -0,0 +1,53 @@
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+export type SerializedImageNode = Spread<{
+    src: string;
+    alt: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    linkUrl?: string;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __alt: string;
+    __title: string | undefined;
+    __displaySrc: string | undefined;
+    __width: number | undefined;
+    __height: number | undefined;
+    __linkUrl: string | undefined;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    constructor(src: string, alt: string, options?: {
+        title?: string;
+        linkUrl?: string;
+        key?: NodeKey;
+    });
+    getSrc(): string;
+    getAlt(): string;
+    getTitle(): string | undefined;
+    setSrc(src: string): void;
+    setAlt(alt: string): void;
+    setTitle(title: string | undefined): void;
+    getDisplaySrc(): string;
+    setDisplaySrc(displaySrc: string | undefined): void;
+    getWidth(): number | undefined;
+    setWidth(width: number | undefined): void;
+    getHeight(): number | undefined;
+    setHeight(height: number | undefined): void;
+    getLinkUrl(): string | undefined;
+    setLinkUrl(linkUrl: string | undefined): void;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportJSON(): SerializedImageNode;
+    decorate(): JSX.Element;
+    isInline(): boolean;
+}
+export declare function $createImageNode(src: string, alt: string, options?: {
+    title?: string;
+    displaySrc?: string;
+    linkUrl?: string;
+}): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

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

@@ -0,0 +1,183 @@
+import { DecoratorNode, } from 'lexical';
+import { createElement } from 'react';
+import { ImageComponent } from './ImageComponent.js';
+export class ImageNode extends DecoratorNode {
+    __src; // Relative path for markdown (e.g., "assets/image.png")
+    __alt;
+    __title;
+    __displaySrc; // Webview URI for display
+    __width;
+    __height;
+    __linkUrl; // Optional URL to link to when clicked
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        const cloned = new ImageNode(node.__src, node.__alt, {
+            title: node.__title,
+            linkUrl: node.__linkUrl,
+            key: node.__key,
+        });
+        cloned.__displaySrc = node.__displaySrc;
+        cloned.__width = node.__width;
+        cloned.__height = node.__height;
+        return cloned;
+    }
+    constructor(src, alt, options) {
+        super(options?.key);
+        this.__src = src;
+        this.__alt = alt;
+        this.__title = options?.title;
+        this.__linkUrl = options?.linkUrl;
+        this.__displaySrc = undefined;
+        this.__width = undefined;
+        this.__height = undefined;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    getAlt() {
+        return this.__alt;
+    }
+    getTitle() {
+        return this.__title;
+    }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    setAlt(alt) {
+        const writable = this.getWritable();
+        writable.__alt = alt;
+    }
+    setTitle(title) {
+        const writable = this.getWritable();
+        writable.__title = title;
+    }
+    getDisplaySrc() {
+        // Return displaySrc if set, otherwise fall back to src (for URLs)
+        return this.__displaySrc || this.__src;
+    }
+    setDisplaySrc(displaySrc) {
+        const writable = this.getWritable();
+        writable.__displaySrc = displaySrc;
+    }
+    getWidth() {
+        return this.__width;
+    }
+    setWidth(width) {
+        const writable = this.getWritable();
+        writable.__width = width;
+    }
+    getHeight() {
+        return this.__height;
+    }
+    setHeight(height) {
+        const writable = this.getWritable();
+        writable.__height = height;
+    }
+    getLinkUrl() {
+        return this.__linkUrl;
+    }
+    setLinkUrl(linkUrl) {
+        const writable = this.getWritable();
+        writable.__linkUrl = linkUrl;
+    }
+    createDOM() {
+        const element = document.createElement('figure');
+        element.className = 'image-block';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {
+            img: () => ({
+                conversion: (domNode) => {
+                    const img = domNode;
+                    const src = img.getAttribute('src') || '';
+                    const alt = img.getAttribute('alt') || '';
+                    const title = img.getAttribute('title') || undefined;
+                    const widthAttr = img.getAttribute('width');
+                    const heightAttr = img.getAttribute('height');
+                    const node = new ImageNode(src, alt, { title });
+                    if (widthAttr) {
+                        node.__width = parseInt(widthAttr, 10);
+                    }
+                    if (heightAttr) {
+                        node.__height = parseInt(heightAttr, 10);
+                    }
+                    return { node };
+                },
+                priority: 0,
+            }),
+        };
+    }
+    exportDOM() {
+        const figure = document.createElement('figure');
+        figure.className = 'image-block';
+        const img = document.createElement('img');
+        img.src = this.__src;
+        img.alt = this.__alt;
+        if (this.__title) {
+            img.title = this.__title;
+        }
+        if (this.__width) {
+            img.width = this.__width;
+        }
+        if (this.__height) {
+            img.height = this.__height;
+        }
+        figure.appendChild(img);
+        return { element: figure };
+    }
+    static importJSON(serializedNode) {
+        const node = new ImageNode(serializedNode.src, serializedNode.alt, {
+            title: serializedNode.title,
+            linkUrl: serializedNode.linkUrl,
+        });
+        if (serializedNode.width) {
+            node.__width = serializedNode.width;
+        }
+        if (serializedNode.height) {
+            node.__height = serializedNode.height;
+        }
+        return node;
+    }
+    exportJSON() {
+        return {
+            type: 'image',
+            src: this.__src,
+            alt: this.__alt,
+            title: this.__title,
+            width: this.__width,
+            height: this.__height,
+            linkUrl: this.__linkUrl,
+            version: 1,
+        };
+    }
+    decorate() {
+        return createElement(ImageComponent, {
+            src: this.getDisplaySrc(),
+            alt: this.__alt,
+            title: this.__title,
+            width: this.__width,
+            height: this.__height,
+            nodeKey: this.__key,
+        });
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createImageNode(src, alt, options) {
+    const node = new ImageNode(src, alt, { title: options?.title, linkUrl: options?.linkUrl });
+    if (options?.displaySrc) {
+        node.__displaySrc = options.displaySrc;
+    }
+    return node;
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

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

@@ -0,0 +1,42 @@
+/**
+ * ListItemParagraphBreakNode — inline sentinel marking the boundary between two
+ * consecutive mdast paragraphs flattened onto a single ListItemNode (see
+ * convertListItem in mdastToLexical.ts). @lexical/list's ListItemNode.append()
+ * unwraps a directly-appended ParagraphNode, flattening its inline content onto the
+ * item, so this marker is what convertListItem inserts instead to record where one
+ * paragraph ends and the next begins.
+ *
+ * Its own node type — distinct from LineBreakNode — makes it structurally
+ * impossible to collide with a genuine hard break (however many appear
+ * consecutively): $isLineBreakNode and $isListItemParagraphBreakNode are mutually
+ * exclusive by construction. This replaces the earlier two-consecutive-
+ * LineBreakNode marker, which was ambiguous with a real double hard break inside a
+ * single mdast paragraph (see #902).
+ *
+ * Modeled as an inline ElementNode (the same shape @lexical/link's LinkNode uses to
+ * sit inline among TextNode siblings) rather than extending LexicalNode directly —
+ * the `lexical` package's entry point re-exports LexicalNode via `export type`
+ * only (see node_modules/lexical/index.d.ts), so it's usable here solely as a
+ * TypeScript type annotation (as every other custom node in this directory does),
+ * never as a runtime value in an `extends` clause. ListItemNode.append() only unwraps
+ * ListItemNode/ParagraphNode children (see its canMergeWith override in
+ * @lexical/list), so this node — being neither — is never merged or unwrapped when
+ * appended directly to a list item. ElementNode's default canBeEmpty() is already
+ * `true`, so a childless instance is never garbage-collected by reconciliation
+ * either.
+ */
+import { DOMConversionMap, DOMExportOutput, ElementNode, LexicalNode, SerializedElementNode } from 'lexical';
+export type SerializedListItemParagraphBreakNode = SerializedElementNode;
+export declare class ListItemParagraphBreakNode extends ElementNode {
+    static getType(): string;
+    static clone(node: ListItemParagraphBreakNode): ListItemParagraphBreakNode;
+    isInline(): boolean;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedListItemParagraphBreakNode): ListItemParagraphBreakNode;
+    exportJSON(): SerializedListItemParagraphBreakNode;
+}
+export declare function $createListItemParagraphBreakNode(): ListItemParagraphBreakNode;
+export declare function $isListItemParagraphBreakNode(node: LexicalNode | null | undefined): node is ListItemParagraphBreakNode;

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

@@ -0,0 +1,95 @@
+/**
+ * ListItemParagraphBreakNode — inline sentinel marking the boundary between two
+ * consecutive mdast paragraphs flattened onto a single ListItemNode (see
+ * convertListItem in mdastToLexical.ts). @lexical/list's ListItemNode.append()
+ * unwraps a directly-appended ParagraphNode, flattening its inline content onto the
+ * item, so this marker is what convertListItem inserts instead to record where one
+ * paragraph ends and the next begins.
+ *
+ * Its own node type — distinct from LineBreakNode — makes it structurally
+ * impossible to collide with a genuine hard break (however many appear
+ * consecutively): $isLineBreakNode and $isListItemParagraphBreakNode are mutually
+ * exclusive by construction. This replaces the earlier two-consecutive-
+ * LineBreakNode marker, which was ambiguous with a real double hard break inside a
+ * single mdast paragraph (see #902).
+ *
+ * Modeled as an inline ElementNode (the same shape @lexical/link's LinkNode uses to
+ * sit inline among TextNode siblings) rather than extending LexicalNode directly —
+ * the `lexical` package's entry point re-exports LexicalNode via `export type`
+ * only (see node_modules/lexical/index.d.ts), so it's usable here solely as a
+ * TypeScript type annotation (as every other custom node in this directory does),
+ * never as a runtime value in an `extends` clause. ListItemNode.append() only unwraps
+ * ListItemNode/ParagraphNode children (see its canMergeWith override in
+ * @lexical/list), so this node — being neither — is never merged or unwrapped when
+ * appended directly to a list item. ElementNode's default canBeEmpty() is already
+ * `true`, so a childless instance is never garbage-collected by reconciliation
+ * either.
+ */
+import { ElementNode, } from 'lexical';
+const MARKER_ATTRIBUTE = 'data-list-item-paragraph-break';
+function $convertListItemParagraphBreakElement(_domNode) {
+    return { node: $createListItemParagraphBreakNode() };
+}
+export class ListItemParagraphBreakNode extends ElementNode {
+    static getType() {
+        return 'list-item-paragraph-break';
+    }
+    static clone(node) {
+        return new ListItemParagraphBreakNode(node.__key);
+    }
+    // Sits inline within a ListItemNode's flattened children, alongside TextNode and
+    // CustomLinkNode siblings, never as a block-level sibling of its own.
+    isInline() {
+        return true;
+    }
+    // Renders two <br> elements — the same visual gap the previous two-LineBreakNode
+    // marker produced — so a list item with consecutive paragraphs still shows a
+    // blank-line-like separator while editing, instead of the paragraphs visually
+    // running together with no boundary at all.
+    createDOM() {
+        const el = document.createElement('span');
+        el.setAttribute(MARKER_ATTRIBUTE, '');
+        el.appendChild(document.createElement('br'));
+        el.appendChild(document.createElement('br'));
+        return el;
+    }
+    updateDOM() {
+        return false;
+    }
+    exportDOM() {
+        const el = document.createElement('span');
+        el.setAttribute(MARKER_ATTRIBUTE, '');
+        el.appendChild(document.createElement('br'));
+        el.appendChild(document.createElement('br'));
+        return { element: el };
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute(MARKER_ATTRIBUTE))
+                    return null;
+                return { conversion: $convertListItemParagraphBreakElement, priority: 1 };
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        const node = $createListItemParagraphBreakNode();
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'list-item-paragraph-break',
+            version: 1,
+        };
+    }
+}
+export function $createListItemParagraphBreakNode() {
+    return new ListItemParagraphBreakNode();
+}
+export function $isListItemParagraphBreakNode(node) {
+    return node instanceof ListItemParagraphBreakNode;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * MermaidComponent - React component for rendering and editing Mermaid diagrams
+ * Uses Shadow DOM for style isolation
+ */
+import { NodeKey } from 'lexical';
+interface MermaidComponentProps {
+    code: string;
+    nodeKey: NodeKey;
+}
+export default function MermaidComponent({ code, nodeKey, }: MermaidComponentProps): JSX.Element;
+export {};