diff --git a/src/components/LexicalEditor/Index.jsx b/src/components/LexicalEditor/Index.jsx index 5ec8e92..2e4312c 100644 --- a/src/components/LexicalEditor/Index.jsx +++ b/src/components/LexicalEditor/Index.jsx @@ -43,6 +43,7 @@ import {useLexicalEditable} from '@lexical/react/useLexicalEditable'; import { $getRoot, $getSelection, $createParagraphNode } from 'lexical'; import { $generateHtmlFromNodes, $generateNodesFromDOM, } from '@lexical/html'; // import { } from '@lexical/clipboard'; +import { isEmpty } from '@/utils/commons'; import './styles.css'; @@ -87,7 +88,9 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) { if (clear) { root.clear(); } - // console.log(nodes); + console.log('default value:'); + console.log(value); + console.log(isEmpty(value)) const p = $createParagraphNode(); const _p = nodes.filter(n => n).forEach((n) => { @@ -100,41 +103,56 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) { // root.append(...nodes.filter(n => n)); }; + // 默认值设置只用初始化一次; + // 空值不更新 HTML; useEffect(() => { - if (editor && value) { + if (editor && !isEmpty(value)) { editor.update(() => { updateHTML(editor, value, true); }); } - }, [value]); + }, []); return null; } -function MyOnChangePlugin({ onChange }) { +function MyOnChangePlugin({ ignoreHistoryMergeTagChange = true, ignoreSelectionChange = true, onChange }) { const [editor] = useLexicalComposerContext(); useEffect(() => { - return editor.registerUpdateListener(({ editorState }) => { - // const editorStateJSON = editorState.toJSON(); - let html; - let textContent; - editorState.read(() => { - const root = $getRoot(); - const textContent = root.getTextContent(); - // console.log('textContent', textContent); - - const html = $generateHtmlFromNodes(editor); - // console.log('html', html); - - // setEditorContent(content); - if (typeof onChange === 'function') { - onChange({ editorState, html, textContent }); + if (onChange) { + return editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves, prevEditorState, tags}) => { + + if ( + (ignoreSelectionChange && + dirtyElements.size === 0 && + dirtyLeaves.size === 0) || + (ignoreHistoryMergeTagChange && tags.has('history-merge')) || + prevEditorState.isEmpty() + ) { + return; } + // const editorStateJSON = editorState.toJSON(); + let html; + let textContent; + editorState.read(() => { + const root = $getRoot(); + const textContent = root.getTextContent(); + // console.log('textContent', textContent); + + const html = $generateHtmlFromNodes(editor); + // console.log('html', html); + + // setEditorContent(content); + if (typeof onChange === 'function') { + onChange({ editorState, editor, tags, html, textContent }); + } + }); }); - }); - }, [editor, onChange]); + } + }, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]); + return null; } -export default function Editor({ isRichText, editorRef, onChange, initialValue, ...props }) { +export default function Editor({ isRichText, isDebug, editorRef, onChange, initialValue, ...props }) { return (
@@ -147,7 +165,7 @@ export default function Editor({ isRichText, editorRef, onChange, initialValue, } ErrorBoundary={LexicalErrorBoundary} /> )} - {import.meta.env.DEV && } + {(import.meta.env.DEV && isDebug) && }