kabulmark/dist/plugins/OnChangePlugin.js

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

import { $generateHtmlFromNodes } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { useEffect } from "react";
function cleanHtml(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const elements = doc.querySelectorAll("*[class], *[style], *[dir]");
    elements.forEach((el) => {
        el.removeAttribute("class");
        el.removeAttribute("style");
        el.removeAttribute("dir");
    });
    return doc.body.innerHTML;
}
export default function OnChangePlugin({ onChange }) {
    const [editor] = useLexicalComposerContext();
    useEffect(() => {
        if (!onChange)
            return;
        return editor.registerUpdateListener(({ editorState }) => {
            editorState.read(() => {
                const html = $generateHtmlFromNodes(editor, null);
                const clean = cleanHtml(html);
                onChange(clean);
            });
        });
    }, [editor, onChange]);
    return null;
}