kabulmark/dist/plugins/HtmlOutput.js

A React-based rich text editor built as a wrapper over Meta's Lexical library.

import { jsx as _jsx } from "react/jsx-runtime";
import { $generateHtmlFromNodes } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { useEffect, useState } from "react";
import km from "../shared/km";
/**
 * 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: km("bg-gray-900 border border-gray-700 p-4 rounded-lg h-[300px] overflow-y-auto shadow-inner"), children: _jsx("pre", { className: km("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;