kabulmark
Version:
A React-based rich text editor built as a wrapper over Meta's Lexical library.
23 lines (22 loc) • 1.12 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { $generateHtmlFromNodes } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { useEffect, useState } from "react";
/**
* This plugin is used to generate HTML from the editor content.
* It is used or the debugging purpose.
*/
const HtmlOutput = () => {
const [editor] = useLexicalComposerContext();
const [htmlContent, setHtmlContent] = useState("");
useEffect(() => {
return editor.registerUpdateListener(({ editorState }) => {
editorState.read(() => {
const html = $generateHtmlFromNodes(editor, null);
setHtmlContent(html);
});
});
}, [editor]);
return (_jsx("div", { className: "bg-gray-900 border border-gray-700 p-4 rounded-lg h-[300px] overflow-y-auto shadow-inner", children: _jsx("pre", { className: "text-sm text-gray-100 whitespace-pre-wrap font-mono leading-relaxed", dir: "ltr", children: _jsx("code", { className: "language-html", children: htmlContent }) }) }));
};
export default HtmlOutput;