@revealui/core 0.0.1-pre.4 → 0.2.1

package/dist/client/richtext/RichTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/client/richtext/RichTextEditor.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAS,aAAa,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EACV,cAAc,IAAI,oBAAoB,EAEvC,MAAM,yBAAyB,CAAA;AAWhC,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,qBAAqB,GAAG,MAAM,GAAG,IAAI,CAAA;IACpD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAC9D,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAC1D,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACvD,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,QAAQ,CAAA;IACvE,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC9B,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA+ID,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AA2B1D,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,kBAAkB,EAClB,WAA+B,EAC/B,SAAc,EACd,QAAe,EACf,SAAiB,EACjB,OAAO,EACP,SAA4B,EAC5B,aAAqB,EACrB,UAAU,EACV,eAAe,EACf,eAAuB,EACvB,QAAQ,EACR,WAAW,EACX,UAAU,EACV,UAAU,GACX,EAAE,mBAAmB,2CA+GrB;AAMD,eAAO,MAAM,oBAAoB,0+FAmIhC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/client/richtext/RichTextEditor.js

@@ -0,0 +1,360 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RevealUI Rich Text Editor
+ *
+ * A production-ready Lexical-based rich text editor component.
+ * Supports configurable features, onChange callbacks, and initial state.
+ */
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { logger } from '@revealui/core/utils/logger';
+import { useCallback, useMemo } from 'react';
+// Image node for upload feature (imported conditionally)
+import { ImageNode } from './nodes/ImageNode.js';
+import { CollaborationPlugin } from './plugins/CollaborationPlugin.js';
+import { ImagePlugin } from './plugins/ImagePlugin.js';
+import { PastePlugin } from './plugins/PastePlugin.js';
+// ============================================
+// THEME
+// ============================================
+const defaultTheme = {
+    paragraph: 'editor-paragraph',
+    quote: 'editor-quote',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5',
+        h6: 'editor-heading-h6',
+    },
+    list: {
+        nested: {
+            listitem: 'editor-nested-listitem',
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul',
+        listitem: 'editor-listitem',
+        listitemChecked: 'editor-listitem-checked',
+        listitemUnchecked: 'editor-listitem-unchecked',
+    },
+    link: 'editor-link',
+    text: {
+        bold: 'editor-text-bold',
+        italic: 'editor-text-italic',
+        underline: 'editor-text-underline',
+        strikethrough: 'editor-text-strikethrough',
+        code: 'editor-text-code',
+        subscript: 'editor-text-subscript',
+        superscript: 'editor-text-superscript',
+    },
+    code: 'editor-code',
+    codeHighlight: {
+        atrule: 'editor-tokenAttr',
+        attr: 'editor-tokenAttr',
+        boolean: 'editor-tokenProperty',
+        builtin: 'editor-tokenSelector',
+        cdata: 'editor-tokenComment',
+        char: 'editor-tokenSelector',
+        class: 'editor-tokenFunction',
+        'class-name': 'editor-tokenFunction',
+        comment: 'editor-tokenComment',
+        constant: 'editor-tokenProperty',
+        deleted: 'editor-tokenProperty',
+        doctype: 'editor-tokenComment',
+        entity: 'editor-tokenOperator',
+        function: 'editor-tokenFunction',
+        important: 'editor-tokenVariable',
+        inserted: 'editor-tokenSelector',
+        keyword: 'editor-tokenAttr',
+        namespace: 'editor-tokenVariable',
+        number: 'editor-tokenProperty',
+        operator: 'editor-tokenOperator',
+        prolog: 'editor-tokenComment',
+        property: 'editor-tokenProperty',
+        punctuation: 'editor-tokenPunctuation',
+        regex: 'editor-tokenVariable',
+        selector: 'editor-tokenSelector',
+        string: 'editor-tokenSelector',
+        symbol: 'editor-tokenProperty',
+        tag: 'editor-tokenProperty',
+        url: 'editor-tokenOperator',
+        variable: 'editor-tokenVariable',
+    },
+};
+// ============================================
+// NODES CONFIGURATION
+// ============================================
+function getNodesFromFeatures(features) {
+    const nodeSet = new Set();
+    // Always include base nodes
+    nodeSet.add(HeadingNode);
+    nodeSet.add(QuoteNode);
+    // Check if upload feature is enabled (for ImageNode)
+    const hasUpload = features.some((f) => f.key === 'upload');
+    if (hasUpload) {
+        nodeSet.add(ImageNode);
+    }
+    features.forEach((feature) => {
+        switch (feature.key) {
+            case 'heading':
+                nodeSet.add(HeadingNode);
+                break;
+            case 'quote':
+                nodeSet.add(QuoteNode);
+                break;
+            case 'list':
+            case 'orderedList':
+            case 'unorderedList':
+            case 'checklist':
+                nodeSet.add(ListNode);
+                nodeSet.add(ListItemNode);
+                break;
+            case 'link':
+                nodeSet.add(LinkNode);
+                nodeSet.add(AutoLinkNode);
+                break;
+            case 'code':
+            case 'codeBlock':
+                nodeSet.add(CodeNode);
+                nodeSet.add(CodeHighlightNode);
+                break;
+            case 'horizontalRule':
+                nodeSet.add(HorizontalRuleNode);
+                break;
+            case 'table':
+                nodeSet.add(TableNode);
+                nodeSet.add(TableCellNode);
+                nodeSet.add(TableRowNode);
+                break;
+        }
+    });
+    return Array.from(nodeSet);
+}
+// ============================================
+// PLACEHOLDER COMPONENT
+// ============================================
+function Placeholder({ text }) {
+    return _jsx("div", { className: "editor-placeholder", children: text });
+}
+// ============================================
+// TOOLBAR COMPONENT
+// ============================================
+import { FloatingToolbarPlugin } from './plugins/FloatingToolbarPlugin.js';
+// Import the full-featured toolbar plugin
+import { ToolbarPlugin } from './plugins/ToolbarPlugin.js';
+export { FloatingToolbarPlugin } from './plugins/FloatingToolbarPlugin.js';
+export { ToolbarPlugin } from './plugins/ToolbarPlugin.js';
+// ============================================
+// FEATURE PLUGINS COMPONENT
+// ============================================
+function FeaturePlugins({ features }) {
+    const hasFeature = (key) => features.some((f) => f.key === key);
+    return (_jsxs(_Fragment, { children: [(hasFeature('list') || hasFeature('orderedList') || hasFeature('unorderedList')) && (_jsx(ListPlugin, {})), hasFeature('checklist') && _jsx(CheckListPlugin, {}), hasFeature('link') && _jsx(LinkPlugin, {}), hasFeature('upload') && _jsx(ImagePlugin, {}), hasFeature('table') && _jsx(TablePlugin, {}), _jsx(PastePlugin, {})] }));
+}
+// ============================================
+// MAIN EDITOR COMPONENT
+// ============================================
+export function RichTextEditor({ editorConfig, initialValue, onChange, onSerializedChange, placeholder = 'Start typing...', className = '', editable = true, autoFocus = false, onError, namespace = 'RevealUIEditor', collaborative = false, documentId, providerFactory, shouldBootstrap = false, username, cursorColor, clientType, agentModel, }) {
+    const features = editorConfig?.features ?? [];
+    // Build initial editor state from value
+    const initialEditorState = useMemo(() => {
+        if (!initialValue)
+            return undefined;
+        if (typeof initialValue === 'string') {
+            try {
+                return initialValue;
+            }
+            catch {
+                return undefined;
+            }
+        }
+        // SerializedEditorState - convert to string
+        return JSON.stringify(initialValue);
+    }, [initialValue]);
+    // Error handler
+    const handleError = useCallback((error, editor) => {
+        logger.error('RichTextEditor error', { error });
+        onError?.(error, editor);
+    }, [onError]);
+    // Change handler
+    const handleChange = useCallback((state, editor) => {
+        onChange?.(state, editor);
+        if (onSerializedChange) {
+            const json = state.toJSON();
+            onSerializedChange(json);
+        }
+    }, [onChange, onSerializedChange]);
+    // Build nodes from features
+    const nodes = useMemo(() => getNodesFromFeatures(features), [features]);
+    // Lexical config
+    const initialConfig = useMemo(() => ({
+        namespace,
+        theme: defaultTheme,
+        nodes,
+        editable,
+        editorState: collaborative ? null : initialEditorState,
+        onError: handleError,
+    }), [namespace, nodes, editable, collaborative, initialEditorState, handleError]);
+    // Determine toolbar variant from features
+    const hasFloatingToolbar = features.some((f) => (f.type === 'toolbar' && f.position === 'floating') ||
+        f.key === 'floatingToolbar' ||
+        f.key === 'floating-toolbar');
+    const hasFixedToolbar = features.some((f) => (f.type === 'toolbar' && f.position === 'fixed') ||
+        f.key === 'fixedToolbar' ||
+        f.key === 'fixed-toolbar' ||
+        (!f.position && f.type === 'toolbar'));
+    return (_jsx("div", { className: `revealui-rich-text-editor ${className}`, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [hasFixedToolbar && _jsx(ToolbarPlugin, { features: features, variant: "fixed" }), hasFloatingToolbar && _jsx(FloatingToolbarPlugin, { features: features }), _jsxs("div", { className: "editor-container", children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "editor-input", "aria-placeholder": placeholder, placeholder: _jsx(Placeholder, { text: placeholder }) }), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), collaborative && documentId && providerFactory ? (_jsx(CollaborationPlugin, { id: documentId, providerFactory: providerFactory, shouldBootstrap: shouldBootstrap, username: username, cursorColor: cursorColor, clientType: clientType, agentModel: agentModel })) : (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] })), _jsx(FeaturePlugins, { features: features }), autoFocus && _jsx(AutoFocusPlugin, {})] })] }) }));
+}
+// ============================================
+// STYLES (CSS-in-JS for standalone usage)
+// ============================================
+export const richTextEditorStyles = `
+.revealui-rich-text-editor {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.editor-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.editor-toolbar--floating {
+  border-bottom: none;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: white;
+  padding: 6px;
+  transition: opacity 0.2s ease;
+}
+
+.toolbar-btn {
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.15s ease;
+}
+
+.toolbar-btn:hover {
+  background: #f1f5f9;
+}
+
+.toolbar-btn.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.editor-container {
+  position: relative;
+  min-height: 150px;
+}
+
+.editor-input {
+  padding: 16px;
+  outline: none;
+  min-height: 150px;
+}
+
+.editor-placeholder {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: #94a3b8;
+  pointer-events: none;
+  user-select: none;
+}
+
+.editor-paragraph {
+  margin: 0 0 8px 0;
+}
+
+.editor-heading-h1 { font-size: 2em; font-weight: bold; margin: 0 0 12px 0; }
+.editor-heading-h2 { font-size: 1.5em; font-weight: bold; margin: 0 0 10px 0; }
+.editor-heading-h3 { font-size: 1.25em; font-weight: bold; margin: 0 0 8px 0; }
+.editor-heading-h4 { font-size: 1em; font-weight: bold; margin: 0 0 8px 0; }
+.editor-heading-h5 { font-size: 0.875em; font-weight: bold; margin: 0 0 8px 0; }
+.editor-heading-h6 { font-size: 0.75em; font-weight: bold; margin: 0 0 8px 0; }
+
+.editor-quote {
+  border-left: 4px solid #e2e8f0;
+  padding-left: 16px;
+  margin: 0 0 8px 0;
+  color: #64748b;
+}
+
+.editor-list-ol { list-style: decimal; padding-left: 24px; margin: 0 0 8px 0; }
+.editor-list-ul { list-style: disc; padding-left: 24px; margin: 0 0 8px 0; }
+.editor-listitem { margin: 4px 0; }
+
+.editor-link { color: #3b82f6; text-decoration: underline; }
+
+.editor-text-bold { font-weight: bold; }
+.editor-text-italic { font-style: italic; }
+.editor-text-underline { text-decoration: underline; }
+.editor-text-strikethrough { text-decoration: line-through; }
+.editor-text-code {
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+.editor-text-subscript { vertical-align: sub; font-size: smaller; }
+.editor-text-superscript { vertical-align: super; font-size: smaller; }
+
+.editor-code {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 16px;
+  border-radius: 4px;
+  font-family: monospace;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.collab-cursors-container {
+  position: relative;
+  pointer-events: none;
+}
+
+.cursor-agent {
+  animation: cursor-agent-pulse 2s ease-in-out infinite;
+}
+
+@keyframes cursor-agent-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.cursor-inactive {
+  opacity: 0.2;
+  transition: opacity 1s ease-out;
+}
+`;
+export default RichTextEditor;

package/dist/client/richtext/components/ImageNodeComponent.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { ImageNodeData } from '../nodes/ImageNode.js';
+type Props = {
+    data: ImageNodeData;
+    nodeKey: string;
+};
+export declare const ImageNodeComponent: React.FC<Props>;
+export {};
+//# sourceMappingURL=ImageNodeComponent.d.ts.map

package/dist/client/richtext/components/ImageNodeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageNodeComponent.d.ts","sourceRoot":"","sources":["../../../../src/client/richtext/components/ImageNodeComponent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAG1D,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0J9C,CAAA"}

package/dist/client/richtext/components/ImageNodeComponent.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RevealUI Rich Text Editor - Image Node Component
+ *
+ * React component for rendering and editing images in the editor.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey } from 'lexical';
+import { useCallback, useState } from 'react';
+import { OPEN_IMAGE_UPLOAD_COMMAND } from '../nodes/ImageNode.js';
+export const ImageNodeComponent = (props) => {
+    const { data, nodeKey } = props;
+    const [editor] = useLexicalComposerContext();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editAlt, setEditAlt] = useState(data.alt || '');
+    const removeImage = useCallback(() => {
+        editor.update(() => {
+            const foundNode = $getNodeByKey(nodeKey);
+            if (foundNode) {
+                foundNode.remove();
+            }
+        });
+    }, [editor, nodeKey]);
+    const updateAlt = useCallback(() => {
+        if (editAlt !== data.alt) {
+            editor.update(() => {
+                const foundNode = $getNodeByKey(nodeKey);
+                if (foundNode && 'setData' in foundNode) {
+                    ;
+                    foundNode.setData({
+                        ...data,
+                        alt: editAlt,
+                    });
+                }
+            });
+        }
+        setIsEditing(false);
+    }, [editor, nodeKey, editAlt, data]);
+    const handleEdit = useCallback(() => {
+        editor.dispatchCommand(OPEN_IMAGE_UPLOAD_COMMAND, {
+            data,
+            nodeKey,
+        });
+    }, [editor, data, nodeKey]);
+    const [showControls, setShowControls] = useState(false);
+    return (_jsxs("figure", { className: "editor-image-container", style: { margin: '16px 0', textAlign: 'center' }, children: [_jsxs("div", { className: "editor-image-wrapper", style: { position: 'relative', display: 'inline-block' }, onMouseEnter: () => setShowControls(true), onMouseLeave: () => setShowControls(false), children: [_jsx("img", { src: data.src, alt: data.alt || '', width: data.width, height: data.height, style: {
+                            maxWidth: '100%',
+                            height: 'auto',
+                            display: 'block',
+                        }, onError: (e) => {
+                            // Show placeholder on error
+                            const target = e.target;
+                            target.src =
+                                'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300"%3E%3Crect fill="%23e2e8f0" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" text-anchor="middle" dy=".3em" fill="%2394a3b8" font-family="sans-serif"%3EImage not found%3C/text%3E%3C/svg%3E';
+                        } }), _jsxs("div", { className: "editor-image-controls", style: {
+                            position: 'absolute',
+                            top: '8px',
+                            right: '8px',
+                            display: 'flex',
+                            gap: '4px',
+                            opacity: showControls ? 1 : 0,
+                            transition: 'opacity 0.2s',
+                            pointerEvents: showControls ? 'auto' : 'none',
+                        }, children: [_jsx("button", { type: "button", onClick: handleEdit, className: "editor-image-btn", style: {
+                                    padding: '4px 8px',
+                                    background: 'white',
+                                    border: '1px solid #e2e8f0',
+                                    borderRadius: '4px',
+                                    cursor: 'pointer',
+                                    fontSize: '12px',
+                                }, title: "Edit Image", "aria-label": "Edit Image", children: "\u270E" }), _jsx("button", { type: "button", onClick: removeImage, className: "editor-image-btn", style: {
+                                    padding: '4px 8px',
+                                    background: 'white',
+                                    border: '1px solid #e2e8f0',
+                                    borderRadius: '4px',
+                                    cursor: 'pointer',
+                                    fontSize: '12px',
+                                }, title: "Remove Image", "aria-label": "Remove Image", children: "\u00D7" })] })] }), isEditing ? (_jsx("input", { type: "text", value: editAlt, onChange: (e) => setEditAlt(e.target.value), onBlur: updateAlt, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        updateAlt();
+                    }
+                    else if (e.key === 'Escape') {
+                        setEditAlt(data.alt || '');
+                        setIsEditing(false);
+                    }
+                }, placeholder: "Image alt text", style: {
+                    width: '100%',
+                    marginTop: '8px',
+                    padding: '4px 8px',
+                    border: '1px solid #e2e8f0',
+                    borderRadius: '4px',
+                } })) : (data.caption && (_jsx("figcaption", { style: {
+                    marginTop: '8px',
+                    fontSize: '14px',
+                    color: '#64748b',
+                    fontStyle: 'italic',
+                }, children: data.caption })))] }));
+};

package/dist/client/richtext/components/ImageUploadButton.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+interface ImageUploadButtonProps {
+    onUploadStart?: () => void;
+    onUploadComplete?: (url: string) => void;
+    onUploadError?: (error: Error) => void;
+    uploadEndpoint?: string;
+    acceptedFileTypes?: string;
+}
+export declare const ImageUploadButton: React.FC<ImageUploadButtonProps>;
+export {};
+//# sourceMappingURL=ImageUploadButton.d.ts.map

package/dist/client/richtext/components/ImageUploadButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadButton.d.ts","sourceRoot":"","sources":["../../../../src/client/richtext/components/ImageUploadButton.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,sBAAsB;IAC9B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACtC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAqBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2H9D,CAAA"}

package/dist/client/richtext/components/ImageUploadButton.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RevealUI Rich Text Editor - Image Upload Button
+ *
+ * Component for uploading images and inserting them into the editor.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { logger } from '@revealui/core/utils/logger';
+import { useCallback, useRef, useState } from 'react';
+import { INSERT_IMAGE_COMMAND } from '../nodes/ImageNode.js';
+const getUploadUrl = (payload) => {
+    if (!payload || typeof payload !== 'object') {
+        return null;
+    }
+    const result = payload;
+    if (typeof result.url === 'string')
+        return result.url;
+    if (typeof result.src === 'string')
+        return result.src;
+    if (result.data && typeof result.data.url === 'string')
+        return result.data.url;
+    return null;
+};
+export const ImageUploadButton = ({ onUploadStart, onUploadComplete, onUploadError, uploadEndpoint = '/api/media', acceptedFileTypes = 'image/jpeg,image/jpg,image/png,image/webp,image/gif', }) => {
+    const [editor] = useLexicalComposerContext();
+    const fileInputRef = useRef(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const handleFileSelect = useCallback(async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            onUploadError?.(new Error('File must be an image'));
+            return;
+        }
+        // Validate file size (default 10MB limit)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            onUploadError?.(new Error('Image size must be less than 10MB'));
+            return;
+        }
+        setIsUploading(true);
+        onUploadStart?.();
+        try {
+            // Read image dimensions
+            const imageDimensions = await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => {
+                    resolve({ width: img.width, height: img.height });
+                };
+                img.onerror = reject;
+                img.src = URL.createObjectURL(file);
+            });
+            // Upload file
+            const formData = new FormData();
+            formData.append('file', file);
+            const response = await fetch(uploadEndpoint, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                // Don't set Content-Type - browser will set it with boundary for FormData
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Upload failed: ${response.statusText}`);
+            }
+            const result = (await response.json());
+            // Extract URL from response (adapt based on your API response structure)
+            const imageUrl = getUploadUrl(result);
+            if (!imageUrl) {
+                throw new Error('No URL returned from upload');
+            }
+            // Insert image into editor
+            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                src: imageUrl,
+                alt: file.name.replace(/\.[^/.]+$/, ''), // Remove extension for alt text
+                width: imageDimensions.width,
+                height: imageDimensions.height,
+            });
+            onUploadComplete?.(imageUrl);
+        }
+        catch (error) {
+            logger.error('Image upload error', { error });
+            onUploadError?.(error instanceof Error ? error : new Error('Upload failed'));
+        }
+        finally {
+            setIsUploading(false);
+            // Reset file input
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    }, [editor, uploadEndpoint, onUploadStart, onUploadComplete, onUploadError]);
+    const triggerFileSelect = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes, onChange: (event) => void handleFileSelect(event), style: { display: 'none' }, "aria-label": "Upload image" }), _jsx("button", { type: "button", onClick: triggerFileSelect, disabled: isUploading, className: "toolbar-btn", title: isUploading ? 'Uploading...' : 'Insert Image', "aria-label": "Insert Image", style: {
+                    opacity: isUploading ? 0.6 : 1,
+                    cursor: isUploading ? 'wait' : 'pointer',
+                }, children: isUploading ? '⏳' : '🖼️' })] }));
+};