@qwanyx/ai-editor 1.1.0 → 1.2.0

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,158 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+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 { ImageLinkPlugin } from '../plugins/ImageLinkPlugin';
+import { SimpleLinkPlugin } from '../plugins/LinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@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: [
+            HeadingNode,
+            QuoteNode,
+            ListNode,
+            ListItemNode,
+            LinkNode,
+            ImageNode,
+            ImageLinkNode,
+            SimpleLinkNode,
+        ],
+    };
+}
+// Plugin to load content
+function ContentLoaderPlugin({ content }) {
+    const [editor] = useLexicalComposerContext();
+    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;
+}
+export function RichTextViewer({ content = '', className = '' }) {
+    // Don't render anything if no content
+    if (!content) {
+        return null;
+    }
+    return (_jsxs("div", { className: className, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: viewerStyles } }), _jsxs(LexicalComposer, { initialConfig: getViewerConfig(), children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "outline-none text-gray-900", style: { cursor: 'default' } }), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(ListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(ContentLoaderPlugin, { content: content }), _jsx(ImageLinkPlugin, {}), _jsx(SimpleLinkPlugin, {})] })] }));
+}

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,5 +1,7 @@
 // Main WYSIWYG editor component
 export { RichTextEditor } from './components/RichTextEditor';
+// Read-only viewer component
+export { RichTextViewer } from './components/RichTextViewer';
 // Toolbar component (for custom implementations)
 export { EditorToolbar } from './components/EditorToolbar';
 // Custom nodes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwanyx/ai-editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "AI-powered WYSIWYG rich text editor",
   "main": "./dist/index.js",
   "module": "./dist/index.js",