fix(lexical-editor): normalize input value and improve onChange execu…

…tion

packages/lexical-editor/src/components/Editor/RichTextEditor.tsx

@@ -13,25 +13,26 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { makeDecoratable } from "@webiny/react-composition";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { RichTextEditorProvider } from "~/context/RichTextEditorContext";
-import { isValidLexicalData } from "~/utils/isValidLexicalData";
-import { UpdateStatePlugin } from "~/plugins/LexicalUpdateStatePlugin";
-import { BlurEventPlugin } from "~/plugins/BlurEventPlugin/BlurEventPlugin";
-import { LexicalValue, ToolbarActionPlugin } from "~/types";
-import { Placeholder } from "~/ui/Placeholder";
-import { generateInitialLexicalValue } from "~/utils/generateInitialLexicalValue";
 import {
     createTheme,
     WebinyTheme,
     ThemeEmotionMap,
     toTypographyEmotionMap
 } from "@webiny/lexical-theme";
 import { allNodes } from "@webiny/lexical-nodes";
+import { RichTextEditorProvider } from "~/context/RichTextEditorContext";
+import { isValidLexicalData } from "~/utils/isValidLexicalData";
+import { UpdateStatePlugin } from "~/plugins/LexicalUpdateStatePlugin";
+import { BlurEventPlugin } from "~/plugins/BlurEventPlugin/BlurEventPlugin";
+import { LexicalValue, ToolbarActionPlugin } from "~/types";
+import { Placeholder } from "~/ui/Placeholder";
+import { generateInitialLexicalValue } from "~/utils/generateInitialLexicalValue";
 import { SharedHistoryContext, useSharedHistoryContext } from "~/context/SharedHistoryContext";
 import {
     LexicalEditorWithConfig,
     useLexicalEditorConfig
 } from "~/components/LexicalEditorConfig/LexicalEditorConfig";
+import { normalizeInputValue } from "./normalizeInputValue";
 
 export interface RichTextEditorProps {
     children?: React.ReactNode | React.ReactNode[];
@@ -52,15 +53,14 @@ export interface RichTextEditorProps {
     toolbarActionPlugins?: ToolbarActionPlugin[];
     themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
     toolbar?: React.ReactNode;
-    value: LexicalValue | null;
+    value: LexicalValue | null | undefined;
     width?: number | string;
 }
 
 const BaseRichTextEditor = ({
     toolbar,
     staticToolbar,
     onChange,
-    value,
     nodes,
     placeholder,
     children,
@@ -103,6 +103,7 @@ const BaseRichTextEditor = ({
         <Fragment key={plugin.name}>{plugin.element}</Fragment>
     ));
 
+    const value = normalizeInputValue(props.value);
     const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();
 
     const initialConfig = {
@@ -120,12 +121,12 @@ const BaseRichTextEditor = ({
         editorState.read(() => {
             if (typeof onChange === "function") {
                 const editorState = editor.getEditorState();
-                const isEmpty = $isRootTextContentEmpty(editor.isComposing(), true);
+                const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);
 
                 const newValue = JSON.stringify(editorState.toJSON());
 
-                // We don't want to call "onChange" if editor text is empty, and original `value` is `undefined`.
-                if (value === undefined && isEmpty) {
+                // We don't want to call "onChange" if editor text is empty, and original `value` is empty.
+                if (!value && isEditorEmpty) {
                     return;
                 }
 
@@ -151,7 +152,7 @@ const BaseRichTextEditor = ({
                     themeEmotionMap={themeEmotionMap}
                     toolbarActionPlugins={props.toolbarActionPlugins}
                 >
-                    {staticToolbar && staticToolbar}
+                    {staticToolbar ? staticToolbar : null}
                     <div
                         /* This className is necessary for targeting of editor container from CSS files. */
                         className={"editor-shell"}

packages/lexical-editor/src/components/Editor/normalizeInputValue.ts

@@ -0,0 +1,17 @@
+import { LexicalValue, NormalizedInputValue } from "~/types";
+
+const isValueEmpty = (value: any) => {
+    return [undefined, null, "", '""', "null"].includes(value);
+};
+
+/**
+ * Value passed to the `RichTextEditor` component can be anything. This function normalizes some of the more common shapes
+ * of input into a value that is either a `null` or a `LexicalValue`.
+ */
+export function normalizeInputValue(value: LexicalValue | null | undefined) {
+    if (isValueEmpty(value)) {
+        return null;
+    }
+
+    return value as NormalizedInputValue;
+}

packages/lexical-editor/src/types.ts

@@ -1,5 +1,7 @@
-export type ToolbarType = "heading" | "paragraph" | string;
 export type LexicalValue = string;
+
+export type NormalizedInputValue = LexicalValue | null;
+
 export { FontColorPicker } from "~/components/ToolbarActions/FontColorAction";
 
 export type ImageActionType = "image-action";