$1
') + // .replace(/style="[^"]*white-space:\s*pre-wrap[^"]*"/g, '') + // Unwrap image-uploading spans that contain images (keep the image) + .replace( + /$1
', + ) + // Remove image-uploading spans with text/br content (no images) + .replace( + /$1
'); + + const parser = new DOMParser(); + const dom = parser.parseFromString(cleanedHtml, 'text/html'); + const nodes = $generateNodesFromDOM(editor, dom); + + // 🛠 Fix orphan text nodes being directly at root level + const fixedNodes: (LexicalNode | ParagraphNode)[] = []; + let buffer: LexicalNode[] = []; + + const flushBuffer = () => { + if (buffer.length > 0) { + const p = $createParagraphNode(); + buffer.forEach(n => p.append(n)); + fixedNodes.push(p); + buffer = []; + } + }; + + nodes.forEach(node => { + const type = node.getType?.(); + if (type === 'text' || type === 'linebreak' || type === 'link') { + buffer.push(node); + } else { + flushBuffer(); + fixedNodes.push(node); + } + }); + + flushBuffer(); + return fixedNodes; +} + +// Function to create initial editor state from HTML or text +function createInitialEditorState(content?: string) { + return (editor: any) => { + const root = $getRoot(); + if (!content || root.getFirstChild() !== null) return; + + try { + const fixedNodes = parseHtmlToLexicalNodes(editor, content); + + root.clear(); + root.append(...fixedNodes); + } catch (err) { + console.error('Error parsing HTML content:', err); + // Fallback to plain text paragraph + const paragraph = $createParagraphNode(); + paragraph.append($createTextNode(content || '')); + root.append(paragraph); + } + }; +} + +function EditorInitializer({ html }: { html?: string }) { + const [editor] = useLexicalComposerContext(); + const [isInitialized, setIsInitialized] = useState(false); + + useEffect(() => { + // Only run once on initial load, not on every content change + if (!html || isInitialized) return; + + editor.update(() => { + const root = $getRoot(); + root.clear(); + + const fixedNodes = parseHtmlToLexicalNodes(editor, html); + + root.clear(); + root.append(...fixedNodes); + }); + + setIsInitialized(true); + }, [editor, html, isInitialized]); + + return null; +} + +export default function RichTextLexicalEditor({ + initialValue, + onChange, + projectId, + maxLength, + setHasLimitError, + error, +}: { + initialValue?: string; + onChange?: (html: string) => void; + projectId?: string; + maxLength?: number; + setHasLimitError?: (hasLimitError: boolean) => void; + error?: string | FieldError | Merge$1
') + .replace( + /$1
', + ) + .replace( + /$1
'); + + const parser = new DOMParser(); + const dom = parser.parseFromString(cleanedHtml, 'text/html'); + const nodes = $generateNodesFromDOM(editor, dom); + + const fixedNodes: (LexicalNode | ParagraphNode)[] = []; + let buffer: LexicalNode[] = []; + + const flushBuffer = () => { + if (buffer.length > 0) { + const p = $createParagraphNode(); + buffer.forEach(n => p.append(n)); + fixedNodes.push(p); + buffer = []; + } + }; + + nodes.forEach(node => { + const type = node.getType?.(); + if (type === 'text' || type === 'linebreak' || type === 'link') { + buffer.push(node); + } else { + flushBuffer(); + fixedNodes.push(node); + } + }); + + flushBuffer(); + return fixedNodes; +} + +function ContentInitializer({ html }: { html?: string }) { + const [editor] = useLexicalComposerContext(); + const [initializedHtml, setInitializedHtml] = useState< + string | undefined + >(); + + useEffect(() => { + if (!html || initializedHtml === html) return; + + editor.update(() => { + const root = $getRoot(); + root.clear(); + + try { + const fixedNodes = parseHtmlToLexicalNodes(editor, html); + root.append(...fixedNodes); + } catch (err) { + console.error('Error parsing HTML content:', err); + const paragraph = $createParagraphNode(); + paragraph.append($createTextNode(html || '')); + root.append(paragraph); + } + }); + + setInitializedHtml(html); + }, [editor, html, initializedHtml]); + + return null; +} + +export default function RichTextLexicalViewer({ + content, +}: { + content?: string; +}) { + if (!content) { + return null; + } + + const initialConfig = { + namespace: 'RichTextViewer', + nodes: [...PlaygroundNodes], + editable: false, // Read-only mode + onError: (error: Error) => { + console.error('Lexical viewer error:', error); + }, + theme: PlaygroundEditorTheme, + html: { import: buildImportMap() }, + }; + + return ( +