@qwanyx/ai-editor 1.1.0 → 1.2.1

package/dist/components/PromptModal.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-export function PromptModal({ isOpen, onClose, onSubmit, selectedText, isLoading }) {
-    const [prompt, setPrompt] = useState('');
-    const inputRef = useRef(null);
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptModal = PromptModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function PromptModal({ isOpen, onClose, onSubmit, selectedText, isLoading }) {
+    const [prompt, setPrompt] = (0, react_1.useState)('');
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
         if (isOpen && inputRef.current) {
             inputRef.current.focus();
         }
     }, [isOpen]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape' && isOpen) {
                 onClose();
@@ -26,13 +29,13 @@ export function PromptModal({ isOpen, onClose, onSubmit, selectedText, isLoading
     };
     if (!isOpen)
         return null;
-    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: _jsxs("div", { className: "bg-white rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden", children: [_jsxs("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Instruction IA" }), _jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 transition-colors", children: _jsx("span", { className: "material-icons", children: "close" }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "p-6", children: [selectedText && (_jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Texte s\u00E9lectionn\u00E9" }), _jsx("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-gray-700 max-h-32 overflow-y-auto", children: selectedText.length > 200
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900", children: "Instruction IA" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 transition-colors", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", children: "close" }) })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "p-6", children: [selectedText && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Texte s\u00E9lectionn\u00E9" }), (0, jsx_runtime_1.jsx)("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-gray-700 max-h-32 overflow-y-auto", children: selectedText.length > 200
                                         ? `${selectedText.substring(0, 200)}...`
-                                        : selectedText })] })), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: selectedText ? 'Que voulez-vous faire avec ce texte ?' : 'Instruction pour l\'IA' }), _jsx("textarea", { ref: inputRef, value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Ex: Rends ce texte plus concis, ajoute des exemples, traduis en anglais...", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 resize-none", rows: 3, disabled: isLoading })] }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium text-gray-500 mb-2", children: "Actions rapides" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [
+                                        : selectedText })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: selectedText ? 'Que voulez-vous faire avec ce texte ?' : 'Instruction pour l\'IA' }), (0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Ex: Rends ce texte plus concis, ajoute des exemples, traduis en anglais...", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 resize-none", rows: 3, disabled: isLoading })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-500 mb-2", children: "Actions rapides" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: [
                                         'Rends plus concis',
                                         'Ajoute des détails',
                                         'Simplifie le vocabulaire',
                                         'Traduis en anglais',
                                         'Reformule autrement'
-                                    ].map((action) => (_jsx("button", { type: "button", onClick: () => setPrompt(action), className: "px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors", children: action }, action))) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-gray-600 hover:text-gray-900 transition-colors", disabled: isLoading, children: "Annuler" }), _jsx("button", { type: "submit", disabled: !prompt.trim() || isLoading, className: "px-6 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "material-icons text-sm animate-spin", children: "sync" }), "Traitement..."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "material-icons text-sm", children: "send" }), "Appliquer"] })) })] })] })] }) }));
+                                    ].map((action) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setPrompt(action), className: "px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors", children: action }, action))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-gray-600 hover:text-gray-900 transition-colors", disabled: isLoading, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !prompt.trim() || isLoading, className: "px-6 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons text-sm animate-spin", children: "sync" }), "Traitement..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons text-sm", children: "send" }), "Appliquer"] })) })] })] })] }) }));
 }

package/dist/components/RichTextEditor.js

@@ -1,26 +1,62 @@
+"use strict";
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect } from 'react';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { ListNode, ListItemNode } from '@lexical/list';
-import { LinkNode } from '@lexical/link';
-import { ImageNode } from '../nodes/ImageNode';
-import { ImageLinkNode } from '../nodes/ImageLinkNode';
-import { SimpleLinkNode } from '../nodes/LinkNode';
-import { InsertObjectPlugin } from '../plugins/InsertObjectPlugin';
-import { ImageLinkPlugin } from '../plugins/ImageLinkPlugin';
-import { SimpleLinkPlugin } from '../plugins/LinkPlugin';
-import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import { $getRoot, $getSelection, $isRangeSelection, $createParagraphNode, $createTextNode } from 'lexical';
-import { EditorToolbar } from './EditorToolbar';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditor = RichTextEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
+const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
+const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalOnChangePlugin_1 = require("@lexical/react/LexicalOnChangePlugin");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
+const rich_text_1 = require("@lexical/rich-text");
+const list_1 = require("@lexical/list");
+const link_1 = require("@lexical/link");
+const ImageNode_1 = require("../nodes/ImageNode");
+const ImageLinkNode_1 = require("../nodes/ImageLinkNode");
+const LinkNode_1 = require("../nodes/LinkNode");
+const InsertObjectPlugin_1 = require("../plugins/InsertObjectPlugin");
+const ImageLinkPlugin_1 = require("../plugins/ImageLinkPlugin");
+const LinkPlugin_1 = require("../plugins/LinkPlugin");
+const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
+const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
+const lexical_1 = require("lexical");
+const EditorToolbar_1 = require("./EditorToolbar");
 // Theme for Lexical editor
 const editorTheme = {
     paragraph: 'editor-paragraph',
@@ -123,22 +159,22 @@ function getEditorConfig(initialContent) {
             console.error('Lexical error:', error);
         },
         nodes: [
-            HeadingNode,
-            QuoteNode,
-            ListNode,
-            ListItemNode,
-            LinkNode,
-            ImageNode,
-            ImageLinkNode,
-            SimpleLinkNode,
+            rich_text_1.HeadingNode,
+            rich_text_1.QuoteNode,
+            list_1.ListNode,
+            list_1.ListItemNode,
+            link_1.LinkNode,
+            ImageNode_1.ImageNode,
+            ImageLinkNode_1.ImageLinkNode,
+            LinkNode_1.SimpleLinkNode,
         ],
     };
 }
 // Plugin to set initial content (supports both JSON and plain text)
 function InitialContentPlugin({ content }) {
-    const [editor] = useLexicalComposerContext();
-    const isFirstRender = React.useRef(true);
-    useEffect(() => {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const isFirstRender = react_1.default.useRef(true);
+    (0, react_1.useEffect)(() => {
         if (isFirstRender.current && content) {
             isFirstRender.current = false;
             // Try to parse as JSON (Lexical state)
@@ -156,10 +192,10 @@ function InitialContentPlugin({ content }) {
             }
             // Fallback: plain text
             editor.update(() => {
-                const root = $getRoot();
+                const root = (0, lexical_1.$getRoot)();
                 root.clear();
-                const paragraph = $createParagraphNode();
-                paragraph.append($createTextNode(content));
+                const paragraph = (0, lexical_1.$createParagraphNode)();
+                paragraph.append((0, lexical_1.$createTextNode)(content));
                 root.append(paragraph);
             });
         }
@@ -168,24 +204,24 @@ function InitialContentPlugin({ content }) {
 }
 // Plugin to get editor reference
 function EditorRefPlugin({ editorRef }) {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
         editorRef.current = editor;
     }, [editor, editorRef]);
     return null;
 }
-export function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholder = 'Commencez à écrire...', className = '', minHeight = '300px' }) {
-    const editorRef = React.useRef(null);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [isFullscreen, setIsFullscreen] = React.useState(false);
-    const toggleFullscreen = useCallback(() => {
+function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholder = 'Commencez à écrire...', className = '', minHeight = '300px' }) {
+    const editorRef = react_1.default.useRef(null);
+    const [isLoading, setIsLoading] = react_1.default.useState(false);
+    const [isFullscreen, setIsFullscreen] = react_1.default.useState(false);
+    const toggleFullscreen = (0, react_1.useCallback)(() => {
         setIsFullscreen(prev => !prev);
     }, []);
     // Handle editor changes
-    const handleChange = useCallback((editorState, editor) => {
+    const handleChange = (0, react_1.useCallback)((editorState, editor) => {
         editorState.read(() => {
             // Get HTML
-            const root = $getRoot();
+            const root = (0, lexical_1.$getRoot)();
             const textContent = root.getTextContent();
             // Get JSON
             const json = JSON.stringify(editorState.toJSON());
@@ -194,30 +230,30 @@ export function RichTextEditor({ initialContent = '', onChange, onAIRequest, pla
         });
     }, [onChange]);
     // Get selected text for AI operations
-    const getSelectedText = useCallback(() => {
+    const getSelectedText = (0, react_1.useCallback)(() => {
         if (!editorRef.current)
             return undefined;
         let selectedText;
         editorRef.current.getEditorState().read(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
+            const selection = (0, lexical_1.$getSelection)();
+            if ((0, lexical_1.$isRangeSelection)(selection)) {
                 selectedText = selection.getTextContent();
             }
         });
         return selectedText || undefined;
     }, []);
     // Get full text for AI operations
-    const getFullText = useCallback(() => {
+    const getFullText = (0, react_1.useCallback)(() => {
         if (!editorRef.current)
             return '';
         let fullText = '';
         editorRef.current.getEditorState().read(() => {
-            fullText = $getRoot().getTextContent();
+            fullText = (0, lexical_1.$getRoot)().getTextContent();
         });
         return fullText;
     }, []);
     // Handle AI actions
-    const handleAIAction = useCallback(async (action, customPrompt) => {
+    const handleAIAction = (0, react_1.useCallback)(async (action, customPrompt) => {
         if (!onAIRequest || !editorRef.current)
             return;
         setIsLoading(true);
@@ -232,10 +268,10 @@ export function RichTextEditor({ initialContent = '', onChange, onAIRequest, pla
             });
             // Replace content with AI result
             editorRef.current.update(() => {
-                const root = $getRoot();
+                const root = (0, lexical_1.$getRoot)();
                 root.clear();
-                const paragraph = $createParagraphNode();
-                paragraph.append($createTextNode(result));
+                const paragraph = (0, lexical_1.$createParagraphNode)();
+                paragraph.append((0, lexical_1.$createTextNode)(result));
                 root.append(paragraph);
             });
         }
@@ -249,5 +285,5 @@ export function RichTextEditor({ initialContent = '', onChange, onAIRequest, pla
     const fullscreenClasses = isFullscreen
         ? 'fixed inset-0 z-50'
         : '';
-    return (_jsxs("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col ${fullscreenClasses} ${className}`, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), _jsxs(LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [_jsx(EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }), _jsxs("div", { className: "relative flex-1 overflow-auto", style: minHeight && !isFullscreen ? { minHeight } : {}, children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "outline-none p-4 text-gray-900 h-full min-h-full" }), placeholder: _jsx("div", { className: "absolute top-4 left-4 text-gray-400 pointer-events-none", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(InitialContentPlugin, { content: initialContent }), _jsx(EditorRefPlugin, { editorRef: editorRef }), _jsx(InsertObjectPlugin, {}), _jsx(ImageLinkPlugin, {}), _jsx(SimpleLinkPlugin, {}), isLoading && (_jsx("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: _jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [_jsx("span", { className: "material-icons animate-spin", children: "sync" }), _jsx("span", { children: "L'IA travaille..." })] }) }))] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col ${fullscreenClasses} ${className}`, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [(0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 overflow-auto", style: minHeight && !isFullscreen ? { minHeight } : {}, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none p-4 text-gray-900 h-full min-h-full" }), placeholder: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-4 text-gray-400 pointer-events-none", children: placeholder }), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalOnChangePlugin_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(InitialContentPlugin, { content: initialContent }), (0, jsx_runtime_1.jsx)(EditorRefPlugin, { editorRef: editorRef }), (0, jsx_runtime_1.jsx)(InsertObjectPlugin_1.InsertObjectPlugin, {}), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {}), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-blue-600", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons animate-spin", children: "sync" }), (0, jsx_runtime_1.jsx)("span", { children: "L'IA travaille..." })] }) }))] })] })] }));
 }

package/dist/components/RichTextViewer.d.ts

@@ -0,0 +1,6 @@
+export interface RichTextViewerProps {
+    content?: string;
+    className?: string;
+}
+export declare function RichTextViewer({ content, className }: RichTextViewerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=RichTextViewer.d.ts.map

package/dist/components/RichTextViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../src/components/RichTextViewer.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4ID,wBAAgB,cAAc,CAAC,EAC7B,OAAY,EACZ,SAAc,EACf,EAAE,mBAAmB,kDA4BrB"}

package/dist/components/RichTextViewer.js

@@ -0,0 +1,161 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextViewer = RichTextViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
+const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
+const rich_text_1 = require("@lexical/rich-text");
+const list_1 = require("@lexical/list");
+const link_1 = require("@lexical/link");
+const ImageNode_1 = require("../nodes/ImageNode");
+const ImageLinkNode_1 = require("../nodes/ImageLinkNode");
+const LinkNode_1 = require("../nodes/LinkNode");
+const ImageLinkPlugin_1 = require("../plugins/ImageLinkPlugin");
+const LinkPlugin_1 = require("../plugins/LinkPlugin");
+const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
+const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
+// Theme for Lexical viewer (same as editor)
+const viewerTheme = {
+    paragraph: 'editor-paragraph',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+    },
+    text: {
+        bold: 'editor-text-bold',
+        italic: 'editor-text-italic',
+        underline: 'editor-text-underline',
+        strikethrough: 'editor-text-strikethrough',
+    },
+    list: {
+        ul: 'editor-list-ul',
+        ol: 'editor-list-ol',
+        listitem: 'editor-listitem',
+        nested: {
+            listitem: 'editor-nested-listitem',
+        },
+    },
+    quote: 'editor-quote',
+    link: 'editor-link',
+};
+// CSS styles for the viewer (same as editor)
+const viewerStyles = `
+  .editor-paragraph {
+    margin-bottom: 8px;
+  }
+  .editor-heading-h1 {
+    font-size: 1.875rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+    margin-top: 24px;
+  }
+  .editor-heading-h2 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 12px;
+    margin-top: 20px;
+  }
+  .editor-heading-h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+    margin-top: 16px;
+  }
+  .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-list-ul {
+    list-style-type: disc;
+    margin-left: 24px;
+    margin-bottom: 8px;
+    padding-left: 0;
+  }
+  .editor-list-ol {
+    list-style-type: decimal;
+    margin-left: 24px;
+    margin-bottom: 8px;
+    padding-left: 0;
+  }
+  .editor-listitem {
+    margin-bottom: 4px;
+  }
+  .editor-nested-listitem {
+    list-style-type: none;
+  }
+  .editor-quote {
+    border-left: 4px solid #d1d5db;
+    padding-left: 16px;
+    font-style: italic;
+    color: #6b7280;
+    margin: 16px 0;
+  }
+  .editor-link {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+  .editor-link:hover {
+    color: #1e40af;
+  }
+`;
+// Viewer config
+function getViewerConfig() {
+    return {
+        namespace: 'RichTextViewer',
+        theme: viewerTheme,
+        editable: false,
+        onError: (error) => {
+            console.error('Lexical viewer error:', error);
+        },
+        nodes: [
+            rich_text_1.HeadingNode,
+            rich_text_1.QuoteNode,
+            list_1.ListNode,
+            list_1.ListItemNode,
+            link_1.LinkNode,
+            ImageNode_1.ImageNode,
+            ImageLinkNode_1.ImageLinkNode,
+            LinkNode_1.SimpleLinkNode,
+        ],
+    };
+}
+// Plugin to load content
+function ContentLoaderPlugin({ content }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        if (content) {
+            try {
+                const parsed = JSON.parse(content);
+                if (parsed.root) {
+                    const editorState = editor.parseEditorState(parsed);
+                    editor.setEditorState(editorState);
+                }
+            }
+            catch {
+                // Not valid JSON, ignore
+            }
+        }
+    }, [editor, content]);
+    return null;
+}
+function RichTextViewer({ content = '', className = '' }) {
+    // Don't render anything if no content
+    if (!content) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: viewerStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getViewerConfig(), children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none text-gray-900", style: { cursor: 'default' } }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(ContentLoaderPlugin, { content: content }), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {})] })] }));
+}

package/dist/hooks/useAIEditor.js

@@ -1,18 +1,21 @@
-import { useState, useCallback, useRef } from 'react';
-export function useAIEditor(initialContent = '') {
-    const [content, setContentState] = useState(initialContent);
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAIEditor = useAIEditor;
+const react_1 = require("react");
+function useAIEditor(initialContent = '') {
+    const [content, setContentState] = (0, react_1.useState)(initialContent);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
     // History for undo/redo
-    const historyRef = useRef([{ content: initialContent, timestamp: Date.now() }]);
-    const historyIndexRef = useRef(0);
-    const [canUndo, setCanUndo] = useState(false);
-    const [canRedo, setCanRedo] = useState(false);
-    const updateUndoRedoState = useCallback(() => {
+    const historyRef = (0, react_1.useRef)([{ content: initialContent, timestamp: Date.now() }]);
+    const historyIndexRef = (0, react_1.useRef)(0);
+    const [canUndo, setCanUndo] = (0, react_1.useState)(false);
+    const [canRedo, setCanRedo] = (0, react_1.useState)(false);
+    const updateUndoRedoState = (0, react_1.useCallback)(() => {
         setCanUndo(historyIndexRef.current > 0);
         setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
     }, []);
-    const setContent = useCallback((newContent) => {
+    const setContent = (0, react_1.useCallback)((newContent) => {
         // Add to history, removing any future states
         historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
         historyRef.current.push({ content: newContent, timestamp: Date.now() });
@@ -20,21 +23,21 @@ export function useAIEditor(initialContent = '') {
         setContentState(newContent);
         updateUndoRedoState();
     }, [updateUndoRedoState]);
-    const undo = useCallback(() => {
+    const undo = (0, react_1.useCallback)(() => {
         if (historyIndexRef.current > 0) {
             historyIndexRef.current--;
             setContentState(historyRef.current[historyIndexRef.current].content);
             updateUndoRedoState();
         }
     }, [updateUndoRedoState]);
-    const redo = useCallback(() => {
+    const redo = (0, react_1.useCallback)(() => {
         if (historyIndexRef.current < historyRef.current.length - 1) {
             historyIndexRef.current++;
             setContentState(historyRef.current[historyIndexRef.current].content);
             updateUndoRedoState();
         }
     }, [updateUndoRedoState]);
-    const applyAIEdit = useCallback((newContent) => {
+    const applyAIEdit = (0, react_1.useCallback)((newContent) => {
         setContent(newContent);
         setIsLoading(false);
         setError(null);

package/dist/hooks/useSelection.js

@@ -1,7 +1,10 @@
-import { useState, useCallback, useEffect } from 'react';
-export function useSelection(containerRef) {
-    const [selection, setSelection] = useState(null);
-    const handleSelectionChange = useCallback(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelection = useSelection;
+const react_1 = require("react");
+function useSelection(containerRef) {
+    const [selection, setSelection] = (0, react_1.useState)(null);
+    const handleSelectionChange = (0, react_1.useCallback)(() => {
         const sel = window.getSelection();
         if (!sel || sel.isCollapsed || !containerRef.current) {
             setSelection(null);
@@ -31,13 +34,13 @@ export function useSelection(containerRef) {
             originalEnd: startOffset + text.length
         });
     }, [containerRef]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         document.addEventListener('selectionchange', handleSelectionChange);
         return () => {
             document.removeEventListener('selectionchange', handleSelectionChange);
         };
     }, [handleSelectionChange]);
-    const clearSelection = useCallback(() => {
+    const clearSelection = (0, react_1.useCallback)(() => {
         setSelection(null);
         window.getSelection()?.removeAllRanges();
     }, []);

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { RichTextEditor } from './components/RichTextEditor';
 export type { RichTextEditorProps } from './components/RichTextEditor';
+export { RichTextViewer } from './components/RichTextViewer';
+export type { RichTextViewerProps } from './components/RichTextViewer';
 export { EditorToolbar } from './components/EditorToolbar';
 export type { EditorToolbarProps } from './components/EditorToolbar';
 export { ImageNode, $createImageNode, $isImageNode } from './nodes/ImageNode';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGtE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAGpE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC7E,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACxH,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAA;AACvH,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGvD,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGtE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGtE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAGpE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC7E,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACxH,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAA;AACvH,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGvD,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/index.js

@@ -1,14 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AIEditor = exports.SimpleLinkPlugin = exports.ImageLinkPlugin = exports.INSERT_OBJECT_COMMAND = exports.InsertObjectPlugin = exports.$wrapSelectionInSimpleLink = exports.$isSimpleLinkNode = exports.$createSimpleLinkNode = exports.SimpleLinkNode = exports.$wrapSelectionInImageLink = exports.$isImageLinkNode = exports.$createImageLinkNode = exports.ImageLinkNode = exports.$isImageNode = exports.$createImageNode = exports.ImageNode = exports.EditorToolbar = exports.RichTextViewer = exports.RichTextEditor = void 0;
 // Main WYSIWYG editor component
-export { RichTextEditor } from './components/RichTextEditor';
+var RichTextEditor_1 = require("./components/RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
+// Read-only viewer component
+var RichTextViewer_1 = require("./components/RichTextViewer");
+Object.defineProperty(exports, "RichTextViewer", { enumerable: true, get: function () { return RichTextViewer_1.RichTextViewer; } });
 // Toolbar component (for custom implementations)
-export { EditorToolbar } from './components/EditorToolbar';
+var EditorToolbar_1 = require("./components/EditorToolbar");
+Object.defineProperty(exports, "EditorToolbar", { enumerable: true, get: function () { return EditorToolbar_1.EditorToolbar; } });
 // Custom nodes
-export { ImageNode, $createImageNode, $isImageNode } from './nodes/ImageNode';
-export { ImageLinkNode, $createImageLinkNode, $isImageLinkNode, $wrapSelectionInImageLink } from './nodes/ImageLinkNode';
-export { SimpleLinkNode, $createSimpleLinkNode, $isSimpleLinkNode, $wrapSelectionInSimpleLink } from './nodes/LinkNode';
+var ImageNode_1 = require("./nodes/ImageNode");
+Object.defineProperty(exports, "ImageNode", { enumerable: true, get: function () { return ImageNode_1.ImageNode; } });
+Object.defineProperty(exports, "$createImageNode", { enumerable: true, get: function () { return ImageNode_1.$createImageNode; } });
+Object.defineProperty(exports, "$isImageNode", { enumerable: true, get: function () { return ImageNode_1.$isImageNode; } });
+var ImageLinkNode_1 = require("./nodes/ImageLinkNode");
+Object.defineProperty(exports, "ImageLinkNode", { enumerable: true, get: function () { return ImageLinkNode_1.ImageLinkNode; } });
+Object.defineProperty(exports, "$createImageLinkNode", { enumerable: true, get: function () { return ImageLinkNode_1.$createImageLinkNode; } });
+Object.defineProperty(exports, "$isImageLinkNode", { enumerable: true, get: function () { return ImageLinkNode_1.$isImageLinkNode; } });
+Object.defineProperty(exports, "$wrapSelectionInImageLink", { enumerable: true, get: function () { return ImageLinkNode_1.$wrapSelectionInImageLink; } });
+var LinkNode_1 = require("./nodes/LinkNode");
+Object.defineProperty(exports, "SimpleLinkNode", { enumerable: true, get: function () { return LinkNode_1.SimpleLinkNode; } });
+Object.defineProperty(exports, "$createSimpleLinkNode", { enumerable: true, get: function () { return LinkNode_1.$createSimpleLinkNode; } });
+Object.defineProperty(exports, "$isSimpleLinkNode", { enumerable: true, get: function () { return LinkNode_1.$isSimpleLinkNode; } });
+Object.defineProperty(exports, "$wrapSelectionInSimpleLink", { enumerable: true, get: function () { return LinkNode_1.$wrapSelectionInSimpleLink; } });
 // Plugins
-export { InsertObjectPlugin, INSERT_OBJECT_COMMAND } from './plugins/InsertObjectPlugin';
-export { ImageLinkPlugin } from './plugins/ImageLinkPlugin';
-export { SimpleLinkPlugin } from './plugins/LinkPlugin';
+var InsertObjectPlugin_1 = require("./plugins/InsertObjectPlugin");
+Object.defineProperty(exports, "InsertObjectPlugin", { enumerable: true, get: function () { return InsertObjectPlugin_1.InsertObjectPlugin; } });
+Object.defineProperty(exports, "INSERT_OBJECT_COMMAND", { enumerable: true, get: function () { return InsertObjectPlugin_1.INSERT_OBJECT_COMMAND; } });
+var ImageLinkPlugin_1 = require("./plugins/ImageLinkPlugin");
+Object.defineProperty(exports, "ImageLinkPlugin", { enumerable: true, get: function () { return ImageLinkPlugin_1.ImageLinkPlugin; } });
+var LinkPlugin_1 = require("./plugins/LinkPlugin");
+Object.defineProperty(exports, "SimpleLinkPlugin", { enumerable: true, get: function () { return LinkPlugin_1.SimpleLinkPlugin; } });
 // Alias for backwards compatibility
-export { RichTextEditor as AIEditor } from './components/RichTextEditor';
+var RichTextEditor_2 = require("./components/RichTextEditor");
+Object.defineProperty(exports, "AIEditor", { enumerable: true, get: function () { return RichTextEditor_2.RichTextEditor; } });