@liminis/editor 0.1.0-rc.1

package/dist/app/editor/ImagePlugin.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey, $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { ImageModal } from './ImageModal.js';
+import { $createImageNode } from './nodes/index.js';
+import { useEditorHost } from '../../host/context.js';
+import { useHostMessages } from '../../host/messages.js';
+// eslint-disable-next-line react-refresh/only-export-components
+export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
+const HANDLED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
+export function ImagePlugin() {
+    const [editor] = useLexicalComposerContext();
+    const { bridge } = useEditorHost();
+    const { writeAsset } = useHostMessages();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const pendingQueueRef = useRef([]);
+    // Listen for INSERT_IMAGE_COMMAND
+    useEffect(() => {
+        return editor.registerCommand(INSERT_IMAGE_COMMAND, () => {
+            setIsModalOpen(true);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    // Listen for ASSET_WRITTEN messages
+    useEffect(() => {
+        const removeHandler = bridge.addMessageHandler((message) => {
+            if (message.type === 'ASSET_WRITTEN' && pendingQueueRef.current.length > 0) {
+                const item = pendingQueueRef.current.shift();
+                const { alt, dropTargetKey } = item;
+                const relPath = message.relPath;
+                const webviewUri = message.webviewUri;
+                editor.update(() => {
+                    if (dropTargetKey !== null) {
+                        const node = $getNodeByKey(dropTargetKey);
+                        if (node)
+                            node.selectEnd();
+                    }
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        const imageNode = $createImageNode(relPath, alt, { displaySrc: webviewUri });
+                        selection.insertNodes([imageNode]);
+                    }
+                });
+            }
+            else if (message.type === 'ASSET_WRITE_FAILED' && pendingQueueRef.current.length > 0) {
+                pendingQueueRef.current.shift();
+            }
+        });
+        return removeHandler;
+    }, [editor, bridge]);
+    // Clipboard paste interceptor: captures image/* paste events before Lexical sees them
+    useEffect(() => {
+        const rootElement = editor.getRootElement();
+        if (!rootElement)
+            return;
+        function handlePaste(e) {
+            const items = e.clipboardData?.items;
+            if (!items)
+                return;
+            let imageFile = null;
+            for (const item of items) {
+                if (item.kind === 'file' && HANDLED_IMAGE_TYPES.includes(item.type)) {
+                    const file = item.getAsFile();
+                    if (file) {
+                        imageFile = file;
+                        break;
+                    }
+                }
+            }
+            if (!imageFile)
+                return;
+            // Suppress the paste event whenever an image is present — even if oversized —
+            // so Lexical's default handler never inserts a broken blob URL.
+            e.preventDefault();
+            e.stopPropagation();
+            if (imageFile.size > MAX_IMAGE_SIZE) {
+                console.warn('ImagePlugin: pasted image exceeds 5 MB limit, ignoring');
+                return;
+            }
+            const file = imageFile;
+            const reader = new FileReader();
+            reader.onload = () => {
+                const dataUri = reader.result;
+                const rawExt = file.type.split('/')[1];
+                const ext = rawExt === 'jpeg' ? 'jpg' : rawExt;
+                const suggestedName = `pasted-image-${Date.now()}-${Math.random().toString(36).slice(2, 8)}.${ext}`;
+                pendingQueueRef.current.push({ alt: '', dropTargetKey: null });
+                writeAsset(dataUri, suggestedName);
+            };
+            reader.readAsDataURL(file);
+        }
+        rootElement.addEventListener('paste', handlePaste, { capture: true });
+        return () => rootElement.removeEventListener('paste', handlePaste, { capture: true });
+    }, [editor, writeAsset]);
+    // Drag-drop interceptor: handles external image file drops
+    useEffect(() => {
+        const rootElement = editor.getRootElement();
+        if (!rootElement)
+            return;
+        function handleDragOver(e) {
+            const items = e.dataTransfer?.items;
+            if (!items)
+                return;
+            let hasImage = false;
+            for (const item of Array.from(items)) {
+                if (item.kind === 'file' && HANDLED_IMAGE_TYPES.includes(item.type)) {
+                    hasImage = true;
+                    break;
+                }
+            }
+            if (hasImage) {
+                e.preventDefault();
+                if (e.dataTransfer)
+                    e.dataTransfer.dropEffect = 'copy';
+            }
+        }
+        function handleDrop(e) {
+            const files = Array.from(e.dataTransfer?.files ?? []);
+            const imageFile = files.find(f => HANDLED_IMAGE_TYPES.includes(f.type));
+            if (!imageFile)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (imageFile.size > MAX_IMAGE_SIZE) {
+                console.warn('ImagePlugin: dropped image exceeds 5 MB limit, ignoring');
+                return;
+            }
+            // Attempt to find the Lexical node key at the drop position
+            let dropTargetKey = null;
+            if (typeof document.caretRangeFromPoint === 'function') {
+                const range = document.caretRangeFromPoint(e.clientX, e.clientY);
+                if (range) {
+                    const domNode = range.startContainer instanceof Element
+                        ? range.startContainer
+                        : range.startContainer.parentElement;
+                    if (domNode) {
+                        editor.getEditorState().read(() => {
+                            const lexNode = $getNearestNodeFromDOMNode(domNode);
+                            if (lexNode)
+                                dropTargetKey = lexNode.getKey();
+                        });
+                    }
+                }
+            }
+            const file = imageFile;
+            const dot = file.name.lastIndexOf('.');
+            const nameBase = dot > 0 ? file.name.slice(0, dot) : file.name;
+            const nameExt = dot > 0 ? file.name.slice(dot) : '';
+            const sanitizedName = nameBase.replace(/[^a-zA-Z0-9._-]/g, '-').slice(0, 95) + nameExt.slice(0, 10);
+            const reader = new FileReader();
+            reader.onload = () => {
+                const dataUri = reader.result;
+                pendingQueueRef.current.push({ alt: '', dropTargetKey });
+                writeAsset(dataUri, sanitizedName);
+            };
+            reader.readAsDataURL(file);
+        }
+        rootElement.addEventListener('dragover', handleDragOver);
+        rootElement.addEventListener('drop', handleDrop);
+        return () => {
+            rootElement.removeEventListener('dragover', handleDragOver);
+            rootElement.removeEventListener('drop', handleDrop);
+        };
+    }, [editor, writeAsset]);
+    const handleClose = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    const handleInsert = useCallback((data) => {
+        if (data.isLocal && data.dataUri) {
+            pendingQueueRef.current.push({ alt: data.alt, dropTargetKey: null });
+            writeAsset(data.dataUri);
+        }
+        else {
+            // Direct URL — insert immediately without going through the asset pipeline
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const imageNode = $createImageNode(data.src, data.alt);
+                    selection.insertNodes([imageNode]);
+                }
+            });
+        }
+    }, [editor, writeAsset]);
+    return (_jsx(ImageModal, { isOpen: isModalOpen, onClose: handleClose, onInsert: handleInsert }));
+}

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

@@ -0,0 +1,23 @@
+interface LinkClickPluginProps {
+    /** When false (read-only mode), clicks follow links immediately without requiring modifier key */
+    editable?: boolean;
+}
+/**
+ * LinkClickPlugin - Controls link click behavior
+ *
+ * In editable mode:
+ * - Regular click: Edit the link (prevents default navigation)
+ * - Cmd+click (Mac) / Ctrl+click (Windows/Linux): Open the link
+ *
+ * In read-only mode:
+ * - Regular click: Open the link immediately (no modifier key required)
+ *
+ * Links:
+ * - Wiki-links (.md files): Opens the linked document in the editor
+ * - External URLs (http/https): Opens in default browser
+ *
+ * Also provides visual feedback: cursor changes to pointer when hovering over a link
+ * (in read-only mode) or when Cmd/Ctrl is held (in editable mode).
+ */
+export declare function LinkClickPlugin({ editable }: LinkClickPluginProps): null;
+export {};

package/dist/app/editor/LinkClickPlugin.js

@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useHostMessages } from '../../host/messages.js';
+/**
+ * LinkClickPlugin - Controls link click behavior
+ *
+ * In editable mode:
+ * - Regular click: Edit the link (prevents default navigation)
+ * - Cmd+click (Mac) / Ctrl+click (Windows/Linux): Open the link
+ *
+ * In read-only mode:
+ * - Regular click: Open the link immediately (no modifier key required)
+ *
+ * Links:
+ * - Wiki-links (.md files): Opens the linked document in the editor
+ * - External URLs (http/https): Opens in default browser
+ *
+ * Also provides visual feedback: cursor changes to pointer when hovering over a link
+ * (in read-only mode) or when Cmd/Ctrl is held (in editable mode).
+ */
+export function LinkClickPlugin({ editable = true }) {
+    const [editor] = useLexicalComposerContext();
+    const { openLink } = useHostMessages();
+    useEffect(() => {
+        const rootElement = editor.getRootElement();
+        if (!rootElement)
+            return;
+        const handleClick = (event) => {
+            // Find if we clicked on a link
+            const target = event.target;
+            const linkElement = target.closest('a');
+            if (!linkElement)
+                return;
+            // Check for modifier key (Cmd on Mac, Ctrl on Windows/Linux)
+            const isModifierClick = event.metaKey || event.ctrlKey;
+            // In read-only mode: click opens link immediately
+            // In editable mode: need modifier key to open link
+            const shouldOpenLink = !editable || isModifierClick;
+            if (shouldOpenLink) {
+                // Open the link
+                event.preventDefault();
+                event.stopPropagation();
+                // URL is stored in data-href (not href) to prevent webview interception
+                const url = linkElement.getAttribute('data-href');
+                if (url) {
+                    openLink(url);
+                }
+            }
+            // In editable mode without modifier: No action needed - since there's no href,
+            // the browser won't navigate, and the editor handles placing the cursor normally
+        };
+        // Handle modifier key state for cursor feedback (only needed in editable mode)
+        const handleKeyDown = (event) => {
+            if (editable && (event.metaKey || event.ctrlKey)) {
+                rootElement.classList.add('modifier-held');
+            }
+        };
+        const handleKeyUp = (event) => {
+            // Remove class when Cmd/Ctrl is released
+            if (event.key === 'Meta' || event.key === 'Control') {
+                rootElement.classList.remove('modifier-held');
+            }
+        };
+        // Also handle when window loses focus (user switches apps while holding Cmd)
+        const handleBlur = () => {
+            rootElement.classList.remove('modifier-held');
+        };
+        // In read-only mode, always show pointer cursor on links
+        if (!editable) {
+            rootElement.classList.add('links-clickable');
+        }
+        else {
+            rootElement.classList.remove('links-clickable');
+        }
+        // Use capture phase to intercept before the link's default behavior
+        rootElement.addEventListener('click', handleClick, { capture: true });
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        window.addEventListener('blur', handleBlur);
+        return () => {
+            rootElement.removeEventListener('click', handleClick, { capture: true });
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+            window.removeEventListener('blur', handleBlur);
+            rootElement.classList.remove('modifier-held');
+            rootElement.classList.remove('links-clickable');
+        };
+    }, [editor, editable, openLink]);
+    return null;
+}

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

@@ -0,0 +1,49 @@
+import { type ElementTransformer } from '@lexical/markdown';
+import type { TextFormatType } from 'lexical';
+export declare const UNORDERED_LIST: ElementTransformer;
+export declare const ORDERED_LIST: ElementTransformer;
+export declare const CHECK_LIST: ElementTransformer;
+/**
+ * Parses a wiki link alias and extracts format markers.
+ * Supports nested formats like ***bold italic***.
+ *
+ * @param alias - The raw alias text potentially containing format markers
+ * @returns Object with the plain text and array of formats to apply
+ *
+ * @example
+ * parseFormattedAlias('**bold**')     // { text: 'bold', formats: ['bold'] }
+ * parseFormattedAlias('*italic*')     // { text: 'italic', formats: ['italic'] }
+ * parseFormattedAlias('***both***')   // { text: 'both', formats: ['bold', 'italic'] }
+ * parseFormattedAlias('~~strike~~')   // { text: 'strike', formats: ['strikethrough'] }
+ */
+export declare function parseFormattedAlias(alias: string): {
+    text: string;
+    formats: TextFormatType[];
+};
+/**
+ * Plugin that enables markdown shortcuts for block types and inline formatting.
+ *
+ * Block shortcuts (triggered at start of line):
+ * - "- " or "* " → Bulleted list
+ * - "1. " → Numbered list
+ * - "[] " or "[ ] " → Todo/checkbox list
+ * - "# ", "## ", "### " → Headings (h1-h6)
+ * - "> " → Block quote
+ * - "```" → Code block
+ *
+ * Inline formatting (Slack-style - transforms when closing delimiter is typed):
+ * - *text* → Italic
+ * - **text** → Bold
+ * - ***text*** → Bold + Italic
+ * - _text_ → Italic
+ * - __text__ → Bold
+ * - ___text___ → Bold + Italic
+ * - `text` → Inline code
+ * - ~~text~~ → Strikethrough
+ * - [text](url) → Link
+ * - [[target|alias]] → Wiki-link (Obsidian/Foam style)
+ * - ![alt](url) → Image
+ * - $equation$ → Inline math (KaTeX)
+ * - $$equation$$ → Block math (KaTeX)
+ */
+export declare function MarkdownShortcutsPlugin(): null;