@liminis/editor 0.1.0-rc.1

package/dist/app/editor/FrontmatterPlugin.js

@@ -0,0 +1,301 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * FrontmatterPlugin - Shows frontmatter in a collapsible tray overlay
+ *
+ * The actual FrontmatterNode is hidden via CSS but remains in the Lexical tree.
+ * This plugin provides a UI to view/edit frontmatter in a sliding tray.
+ *
+ * The toggle button is rendered externally (in the editor header).
+ * This plugin communicates via Zustand store for state management.
+ *
+ * For .mdc files (Cursor rules), a specialized form UI is shown with:
+ * - alwaysApply dropdown (true/false)
+ * - description text input
+ * - globs array editor
+ */
+import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot, $getNodeByKey, $createTextNode, $isElementNode } from 'lexical';
+import { $isFrontmatterNode } from './nodes/index.js';
+import { useEditorStore } from '../../stores/editorStore.js';
+function parseMdcFrontmatter(content) {
+    const lines = content.split('\n');
+    const result = {
+        description: '',
+        alwaysApply: null,
+        globs: [],
+        otherLines: [],
+    };
+    let inGlobs = false;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        // Check for description
+        const descMatch = /^description:\s*(.*)$/.exec(line);
+        if (descMatch) {
+            result.description = descMatch[1].trim().replace(/^["']|["']$/g, '');
+            inGlobs = false;
+            continue;
+        }
+        // Check for alwaysApply
+        const alwaysApplyMatch = /^alwaysApply:\s*(.*)$/.exec(line);
+        if (alwaysApplyMatch) {
+            const value = alwaysApplyMatch[1].trim().toLowerCase();
+            result.alwaysApply = value === 'true';
+            inGlobs = false;
+            continue;
+        }
+        // Check for globs array start
+        if (/^globs:\s*$/.exec(line)) {
+            inGlobs = true;
+            continue;
+        }
+        // Check for globs inline array: globs: ["*.ts", "*.tsx"]
+        const inlineGlobsMatch = /^globs:\s*\[(.*)\]$/.exec(line);
+        if (inlineGlobsMatch) {
+            const items = inlineGlobsMatch[1].split(',').map(s => s.trim().replace(/^["']|["']$/g, '')).filter(s => s);
+            result.globs = items;
+            inGlobs = false;
+            continue;
+        }
+        // If we're inside globs array, parse array items
+        if (inGlobs && trimmed.startsWith('-')) {
+            const item = trimmed.slice(1).trim().replace(/^["']|["']$/g, '');
+            if (item) {
+                result.globs.push(item);
+            }
+            continue;
+        }
+        // Any other non-empty line that's not a continuation of globs
+        if (trimmed && !inGlobs) {
+            inGlobs = false;
+            result.otherLines.push(line);
+        }
+        else if (trimmed && inGlobs && !trimmed.startsWith('-')) {
+            // Non-array item while in globs means globs section ended
+            inGlobs = false;
+            result.otherLines.push(line);
+        }
+    }
+    return result;
+}
+function serializeMdcFrontmatter(fm) {
+    const lines = [];
+    // Description first if set
+    if (fm.description) {
+        // Quote the description if it contains special characters
+        const needsQuotes = /[:#[\]{}|>&*!?,]/.test(fm.description);
+        lines.push(`description: ${needsQuotes ? `"${fm.description}"` : fm.description}`);
+    }
+    // alwaysApply if set
+    if (fm.alwaysApply !== null) {
+        lines.push(`alwaysApply: ${fm.alwaysApply}`);
+    }
+    // Globs array
+    if (fm.globs.length > 0) {
+        lines.push('globs:');
+        for (const glob of fm.globs) {
+            lines.push(`  - ${glob}`);
+        }
+    }
+    // Preserve other lines
+    for (const line of fm.otherLines) {
+        lines.push(line);
+    }
+    return lines.join('\n');
+}
+// Find frontmatter node in the tree (should only be one, at the start)
+function findFrontmatterNode(node) {
+    if ($isFrontmatterNode(node)) {
+        return node;
+    }
+    if ($isElementNode(node)) {
+        for (const child of node.getChildren()) {
+            const found = findFrontmatterNode(child);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function getRuleType(fm) {
+    if (fm.alwaysApply === true)
+        return 'always';
+    if (fm.globs.length > 0)
+        return 'auto-attach';
+    if (fm.description)
+        return 'intelligent';
+    return 'manual';
+}
+const RULE_TYPE_INFO = {
+    'always': {
+        label: 'Always Apply',
+        description: 'Included in every chat session automatically',
+        cursorLabel: 'Always Apply'
+    },
+    'auto-attach': {
+        label: 'Auto-Attach to Files',
+        description: 'Applied when files matching glob patterns are in context',
+        cursorLabel: 'Apply to Specific Files'
+    },
+    'intelligent': {
+        label: 'Agent Decides',
+        description: 'Agent decides relevance based on description',
+        cursorLabel: 'Apply Intelligently'
+    },
+    'manual': {
+        label: 'Manual Only',
+        description: 'Only applied when @-mentioned (e.g., @rule-name)',
+        cursorLabel: 'Apply Manually'
+    }
+};
+function MdcFrontmatterForm({ content, onContentChange }) {
+    const parsed = useMemo(() => parseMdcFrontmatter(content), [content]);
+    const [newGlob, setNewGlob] = useState('');
+    const currentRuleType = useMemo(() => getRuleType(parsed), [parsed]);
+    const handleDescriptionChange = useCallback((e) => {
+        const updated = { ...parsed, description: e.target.value };
+        onContentChange(serializeMdcFrontmatter(updated));
+    }, [parsed, onContentChange]);
+    const handleRuleTypeChange = useCallback((e) => {
+        const newType = e.target.value;
+        const updated = { ...parsed };
+        switch (newType) {
+            case 'always':
+                updated.alwaysApply = true;
+                // Keep existing globs and description, they're just ignored
+                break;
+            case 'auto-attach':
+                updated.alwaysApply = null; // Remove alwaysApply
+                // If no globs, add a placeholder to show intent
+                if (updated.globs.length === 0) {
+                    updated.globs = ['**/*.md']; // Example pattern
+                }
+                break;
+            case 'intelligent':
+                updated.alwaysApply = false;
+                updated.globs = []; // Clear globs
+                // Ensure description exists
+                if (!updated.description) {
+                    updated.description = 'Describe when this rule should apply...';
+                }
+                break;
+            case 'manual':
+                updated.alwaysApply = false;
+                updated.globs = [];
+                updated.description = ''; // Clear description
+                break;
+        }
+        onContentChange(serializeMdcFrontmatter(updated));
+    }, [parsed, onContentChange]);
+    const handleRemoveGlob = useCallback((index) => {
+        const newGlobs = parsed.globs.filter((_, i) => i !== index);
+        const updated = { ...parsed, globs: newGlobs };
+        onContentChange(serializeMdcFrontmatter(updated));
+    }, [parsed, onContentChange]);
+    const handleAddGlob = useCallback(() => {
+        if (!newGlob.trim())
+            return;
+        const updated = { ...parsed, globs: [...parsed.globs, newGlob.trim()] };
+        onContentChange(serializeMdcFrontmatter(updated));
+        setNewGlob('');
+    }, [parsed, newGlob, onContentChange]);
+    const handleGlobKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddGlob();
+        }
+    }, [handleAddGlob]);
+    const info = RULE_TYPE_INFO[currentRuleType];
+    return (_jsxs("div", { className: "mdc-form", children: [_jsxs("div", { className: "mdc-form-field", children: [_jsxs("label", { htmlFor: "mdc-rule-type", className: "mdc-form-label", children: ["Rule Type", _jsxs("span", { className: "mdc-form-label-cursor", children: ["(Cursor: ", info.cursorLabel, ")"] })] }), _jsxs("select", { id: "mdc-rule-type", className: "mdc-form-select", value: currentRuleType, onChange: handleRuleTypeChange, children: [_jsx("option", { value: "always", children: "Always Apply \u2014 every chat session" }), _jsx("option", { value: "auto-attach", children: "Auto-Attach \u2014 when files match globs" }), _jsx("option", { value: "intelligent", children: "Agent Decides \u2014 based on description" }), _jsx("option", { value: "manual", children: "Manual Only \u2014 requires @mention" })] }), _jsx("span", { className: "mdc-form-hint mdc-form-hint-info", children: info.description })] }), _jsxs("div", { className: "mdc-form-field", children: [_jsxs("label", { htmlFor: "mdc-description", className: "mdc-form-label", children: ["Description", currentRuleType === 'intelligent' && _jsx("span", { className: "mdc-form-required", children: "*" })] }), _jsx("input", { id: "mdc-description", type: "text", className: "mdc-form-input", value: parsed.description, onChange: handleDescriptionChange, placeholder: currentRuleType === 'intelligent'
+                            ? "Required: describe when this rule should apply..."
+                            : "Optional: describe what this rule does" }), currentRuleType === 'intelligent' && (_jsx("span", { className: "mdc-form-hint mdc-form-hint-warn", children: "\u26A0\uFE0F Agent uses this to decide relevance \u2014 be specific!" }))] }), currentRuleType === 'auto-attach' && (_jsxs("div", { className: "mdc-form-field", children: [_jsxs("label", { className: "mdc-form-label", children: ["File Patterns (globs)", _jsx("span", { className: "mdc-form-required", children: "*" })] }), _jsx("div", { className: "mdc-globs-list", children: parsed.globs.map((glob, index) => (_jsxs("div", { className: "mdc-glob-item", children: [_jsx("code", { className: "mdc-glob-pattern", children: glob }), _jsx("button", { type: "button", className: "mdc-glob-remove", onClick: () => handleRemoveGlob(index), title: "Remove glob", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }, index))) }), _jsxs("div", { className: "mdc-glob-add", children: [_jsx("input", { type: "text", className: "mdc-form-input", value: newGlob, onChange: (e) => setNewGlob(e.target.value), onKeyDown: handleGlobKeyDown, placeholder: "e.g., **/*.ts or src/components/**" }), _jsx("button", { type: "button", className: "mdc-glob-add-btn", onClick: handleAddGlob, disabled: !newGlob.trim(), children: "Add" })] }), _jsx("span", { className: "mdc-form-hint", children: "Rule auto-attaches when files matching these patterns are in context" })] })), parsed.otherLines.length > 0 && (_jsxs("div", { className: "mdc-form-field", children: [_jsx("label", { className: "mdc-form-label", children: "Other Fields (raw YAML)" }), _jsx("pre", { className: "mdc-other-yaml", children: parsed.otherLines.join('\n') })] }))] }));
+}
+function FrontmatterTray({ isOpen, content, onClose, onContentChange, isMdcFile }) {
+    const textareaRef = useRef(null);
+    const [showRaw, setShowRaw] = useState(false);
+    // Auto-resize textarea to fit content
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+        }
+    }, [content, isOpen, showRaw]);
+    // Focus textarea when tray opens (only in raw mode)
+    useEffect(() => {
+        if (isOpen && textareaRef.current && (!isMdcFile || showRaw)) {
+            textareaRef.current.focus();
+        }
+    }, [isOpen, isMdcFile, showRaw]);
+    return (_jsxs("div", { className: `frontmatter-tray ${isOpen ? 'frontmatter-tray-open' : ''}`, children: [_jsxs("div", { className: "frontmatter-tray-header", children: [_jsx("span", { className: "frontmatter-tray-title", children: isMdcFile ? 'Cursor Rule Config' : 'Frontmatter' }), _jsxs("div", { className: "frontmatter-tray-actions", children: [isMdcFile && (_jsx("button", { className: "frontmatter-tray-toggle-raw", onClick: () => setShowRaw(!showRaw), title: showRaw ? 'Show form view' : 'Show raw YAML', children: showRaw ? 'Form' : 'Raw' })), _jsx("button", { className: "frontmatter-tray-close", onClick: onClose, title: "Close", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsx("div", { className: "frontmatter-tray-content", children: isMdcFile && !showRaw ? (_jsx(MdcFrontmatterForm, { content: content, onContentChange: onContentChange })) : (_jsx("textarea", { ref: textareaRef, className: "frontmatter-tray-textarea", value: content, onChange: (e) => onContentChange(e.target.value), placeholder: "---\ntitle: Document Title\n---", spellCheck: false })) })] }));
+}
+export function FrontmatterPlugin({ filePath }) {
+    const [editor] = useLexicalComposerContext();
+    const [frontmatterContent, setFrontmatterContent] = useState('');
+    const [frontmatterNodeKey, setFrontmatterNodeKey] = useState(null);
+    // Use Zustand store for state management
+    const setHasFrontmatter = useEditorStore((state) => state.setHasFrontmatter);
+    const setFrontmatterOpen = useEditorStore((state) => state.setFrontmatterOpen);
+    const isFrontmatterOpen = useEditorStore((state) => state.isFrontmatterOpen);
+    // Detect if we're editing an MDC file (Cursor rules)
+    const isMdcFile = useMemo(() => {
+        return filePath?.endsWith('.mdc') ?? false;
+    }, [filePath]);
+    // Track frontmatter node and content
+    useEffect(() => {
+        const updateFrontmatter = () => {
+            editor.getEditorState().read(() => {
+                const root = $getRoot();
+                const frontmatterNode = findFrontmatterNode(root);
+                if (frontmatterNode) {
+                    setHasFrontmatter(true);
+                    setFrontmatterContent(frontmatterNode.getTextContent());
+                    setFrontmatterNodeKey(frontmatterNode.getKey());
+                }
+                else {
+                    setHasFrontmatter(false);
+                    setFrontmatterContent('');
+                    setFrontmatterNodeKey(null);
+                }
+            });
+        };
+        // Initial check
+        updateFrontmatter();
+        // Listen for updates
+        const unsubscribe = editor.registerUpdateListener(() => {
+            updateFrontmatter();
+        });
+        return unsubscribe;
+    }, [editor, setHasFrontmatter]);
+    // Listen for toggle commands from the UI
+    useEffect(() => {
+        // Subscribe to store changes to detect toggle requests
+        // The toggle function in the store handles the state change
+        // We don't need to do anything here as the state is already managed
+    }, []);
+    // Update frontmatter content in the Lexical node
+    const handleContentChange = useCallback((newContent) => {
+        setFrontmatterContent(newContent);
+        if (!frontmatterNodeKey)
+            return;
+        editor.update(() => {
+            const node = $getNodeByKey(frontmatterNodeKey);
+            if (node && $isFrontmatterNode(node)) {
+                // Clear existing children and add new content
+                node.clear();
+                if (newContent) {
+                    node.append($createTextNode(newContent));
+                }
+            }
+        });
+    }, [editor, frontmatterNodeKey]);
+    const handleClose = useCallback(() => {
+        setFrontmatterOpen(false);
+    }, [setFrontmatterOpen]);
+    // Get hasFrontmatter from store
+    const hasFrontmatter = useEditorStore((state) => state.hasFrontmatter);
+    // Don't render anything if no frontmatter
+    if (!hasFrontmatter) {
+        return null;
+    }
+    return (_jsx(FrontmatterTray, { isOpen: isFrontmatterOpen, content: frontmatterContent, onClose: handleClose, onContentChange: handleContentChange, isMdcFile: isMdcFile }));
+}

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

@@ -0,0 +1,13 @@
+export interface ImageData {
+    src: string;
+    alt: string;
+    isLocal: boolean;
+    dataUri?: string;
+}
+interface ImageModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onInsert: (data: ImageData) => void;
+}
+export declare function ImageModal({ isOpen, onClose, onInsert }: ImageModalProps): import("react").JSX.Element | null;
+export {};

package/dist/app/editor/ImageModal.js

@@ -0,0 +1,267 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+// SECURITY: Maximum file size for uploaded images (5MB)
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
+// SECURITY: Maximum URL length
+const MAX_URL_LENGTH = 2048;
+/**
+ * Check if a path is a relative/local path (not an absolute URL)
+ */
+function isRelativePath(path) {
+    // Relative paths don't start with a protocol
+    if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(path)) {
+        return false;
+    }
+    // Common relative path patterns
+    return path.startsWith('./') ||
+        path.startsWith('../') ||
+        path.startsWith('assets/') ||
+        path.startsWith('images/') ||
+        // Any path that looks like a file path (contains / but no protocol)
+        (/^[^:]+\/[^:]*$/.test(path) && !path.includes('://'));
+}
+/**
+ * SECURITY: Validate image URL or path
+ * - Allows http/https protocols for remote images
+ * - Allows relative paths for local images (e.g., assets/image.png)
+ * - Blocks dangerous protocols (javascript:, data:, file:)
+ */
+function validateImageUrl(url) {
+    if (!url) {
+        return { valid: false, error: 'URL or path is required' };
+    }
+    if (url.length > MAX_URL_LENGTH) {
+        return { valid: false, error: `Path is too long. Maximum ${MAX_URL_LENGTH} characters.` };
+    }
+    // Check if it's a relative/local path
+    if (isRelativePath(url)) {
+        // Basic validation for relative paths
+        // SECURITY: Block path traversal attempts that try to escape the workspace
+        const normalizedPath = url.replace(/\\/g, '/');
+        // Count how many directories up we go vs down
+        const parts = normalizedPath.split('/');
+        let depth = 0;
+        for (const part of parts) {
+            if (part === '..') {
+                depth--;
+                if (depth < -2) {
+                    // Allow some traversal (e.g., ../assets/) but not excessive
+                    return { valid: false, error: 'Path traversal not allowed' };
+                }
+            }
+            else if (part && part !== '.') {
+                depth++;
+            }
+        }
+        return { valid: true, isLocal: true };
+    }
+    // It's an absolute URL - validate it
+    try {
+        const parsed = new URL(url);
+        // SECURITY: Block dangerous protocols
+        const blockedProtocols = ['javascript:', 'data:', 'file:', 'vbscript:'];
+        if (blockedProtocols.includes(parsed.protocol)) {
+            return { valid: false, error: 'This URL protocol is not allowed' };
+        }
+        // Only allow http/https protocols for remote URLs
+        if (!['http:', 'https:'].includes(parsed.protocol)) {
+            return { valid: false, error: 'Only http:// and https:// URLs are allowed for remote images' };
+        }
+        return { valid: true, isLocal: false };
+    }
+    catch {
+        // If URL parsing fails but it looks like a path, treat as relative
+        if (url.includes('/') || url.includes('.')) {
+            return { valid: true, isLocal: true };
+        }
+        return { valid: false, error: 'Invalid URL or path format' };
+    }
+}
+export function ImageModal({ isOpen, onClose, onInsert }) {
+    const [activeTab, setActiveTab] = useState('upload');
+    const [url, setUrl] = useState('');
+    const [alt, setAlt] = useState('');
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [dragOver, setDragOver] = useState(false);
+    const [error, setError] = useState(null);
+    const fileInputRef = useRef(null);
+    const modalRef = useRef(null);
+    const selectedFileRef = useRef(null);
+    // Reset state when modal opens - track previous isOpen to detect open transition
+    const prevIsOpenRef = useRef(isOpen);
+    useEffect(() => {
+        // Only reset when transitioning from closed to open
+        if (isOpen && !prevIsOpenRef.current) {
+            // Use microtask to avoid setState during render
+            queueMicrotask(() => {
+                setUrl('');
+                setAlt('');
+                setPreviewUrl(null);
+                setError(null);
+                setActiveTab('upload');
+                selectedFileRef.current = null;
+            });
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen]);
+    // Keyboard handling: Escape to close, Enter to submit
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (modalRef.current && !modalRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        // Delay adding the listener to avoid immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose]);
+    const handleFileSelect = useCallback((file) => {
+        if (!file.type.startsWith('image/')) {
+            setError('Please select an image file');
+            return;
+        }
+        // SECURITY: Check file size before reading
+        if (file.size > MAX_IMAGE_SIZE) {
+            setError(`Image too large. Maximum size is ${MAX_IMAGE_SIZE / (1024 * 1024)}MB`);
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const dataUri = e.target?.result;
+            selectedFileRef.current = { dataUri, name: file.name };
+            setPreviewUrl(dataUri);
+            setError(null);
+            // Auto-generate alt text from filename (without extension)
+            if (!alt) {
+                const nameWithoutExt = file.name.replace(/\.[^/.]+$/, '').replace(/[-_]/g, ' ');
+                setAlt(nameWithoutExt);
+            }
+        };
+        reader.onerror = () => {
+            setError('Failed to read file');
+        };
+        reader.readAsDataURL(file);
+    }, [alt]);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+        const file = e.dataTransfer.files[0];
+        if (file) {
+            handleFileSelect(file);
+        }
+    }, [handleFileSelect]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+    }, []);
+    const handleFileInputChange = useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            handleFileSelect(file);
+        }
+    }, [handleFileSelect]);
+    const handleUrlChange = useCallback((e) => {
+        const newUrl = e.target.value;
+        setUrl(newUrl);
+        setError(null);
+        // SECURITY: Validate URL before showing preview
+        if (newUrl) {
+            const validation = validateImageUrl(newUrl);
+            if (validation.valid) {
+                // For local paths, we can't preview them directly in the modal
+                // (they need to be resolved through the asset context)
+                // For remote URLs, show the preview
+                if (!validation.isLocal) {
+                    setPreviewUrl(newUrl);
+                }
+                else {
+                    // Local path - no preview available, but it's valid
+                    setPreviewUrl(null);
+                }
+            }
+            else {
+                setPreviewUrl(null);
+                // Don't show error while typing, only on submit
+            }
+        }
+        else {
+            setPreviewUrl(null);
+        }
+    }, []);
+    const handleInsert = useCallback(() => {
+        if (activeTab === 'url') {
+            if (!url) {
+                setError('Please enter an image URL or local path');
+                return;
+            }
+            // SECURITY: Validate URL before inserting
+            const validation = validateImageUrl(url);
+            if (!validation.valid) {
+                setError(validation.error || 'Invalid URL or path');
+                return;
+            }
+            onInsert({
+                src: url,
+                alt: alt || '',
+                isLocal: validation.isLocal || false,
+            });
+        }
+        else {
+            if (!selectedFileRef.current) {
+                setError('Please select an image');
+                return;
+            }
+            onInsert({
+                src: '', // Will be set after upload
+                alt: alt || '',
+                isLocal: true,
+                dataUri: selectedFileRef.current.dataUri,
+            });
+        }
+        onClose();
+    }, [activeTab, url, alt, onInsert, onClose]);
+    // Handle Enter key to submit
+    const handleKeyPress = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleInsert();
+        }
+    }, [handleInsert]);
+    const handleTabChange = useCallback((tab) => {
+        setActiveTab(tab);
+        setError(null);
+        setPreviewUrl(null);
+        if (tab === 'url') {
+            selectedFileRef.current = null;
+        }
+    }, []);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "image-modal-overlay", children: _jsxs("div", { className: "image-modal", ref: modalRef, onKeyDown: handleKeyPress, children: [_jsxs("div", { className: "image-modal-header", children: [_jsx("h3", { children: "Insert Image" }), _jsx("button", { className: "image-modal-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "image-modal-tabs", children: [_jsx("button", { className: `image-modal-tab ${activeTab === 'upload' ? 'active' : ''}`, onClick: () => handleTabChange('upload'), children: "Upload" }), _jsx("button", { className: `image-modal-tab ${activeTab === 'url' ? 'active' : ''}`, onClick: () => handleTabChange('url'), children: "URL / Path" })] }), _jsxs("div", { className: "image-modal-content", children: [activeTab === 'upload' ? (_jsxs("div", { className: `image-modal-dropzone ${dragOver ? 'drag-over' : ''} ${previewUrl ? 'has-preview' : ''}`, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: () => fileInputRef.current?.click(), children: [previewUrl ? (_jsx("img", { src: previewUrl, alt: "Preview", className: "image-modal-preview" })) : (_jsxs("div", { className: "image-modal-dropzone-content", children: [_jsx("span", { className: "image-modal-dropzone-icon", children: "\uD83D\uDDBC" }), _jsx("span", { children: "Drop an image here or click to browse" }), _jsxs("span", { className: "image-modal-size-hint", children: ["Maximum size: ", MAX_IMAGE_SIZE / (1024 * 1024), "MB"] })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileInputChange, style: { display: 'none' } })] })) : (_jsxs("div", { className: "image-modal-url-section", children: [_jsx("input", { type: "text", className: "image-modal-input", placeholder: "assets/image.png or https://example.com/image.png", value: url, onChange: handleUrlChange, autoFocus: true }), previewUrl && (_jsx("div", { className: "image-modal-url-preview", children: _jsx("img", { src: previewUrl, alt: "Preview", className: "image-modal-preview", onError: () => setPreviewUrl(null) }) }))] })), _jsxs("div", { className: "image-modal-alt-section", children: [_jsx("label", { htmlFor: "image-alt", className: "image-modal-label", children: "Alt text (optional)" }), _jsx("input", { id: "image-alt", type: "text", className: "image-modal-input", placeholder: "Describe the image for accessibility", value: alt, onChange: (e) => setAlt(e.target.value) })] }), error && _jsx("div", { className: "image-modal-error", children: error })] }), _jsxs("div", { className: "image-modal-footer", children: [_jsx("button", { className: "image-modal-button secondary", onClick: onClose, children: "Cancel" }), _jsx("button", { className: "image-modal-button primary", onClick: handleInsert, children: "Insert" })] })] }) }));
+}

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

@@ -0,0 +1,3 @@
+import { LexicalCommand } from 'lexical';
+export declare const INSERT_IMAGE_COMMAND: LexicalCommand<void>;
+export declare function ImagePlugin(): import("react").JSX.Element;