fix(designer-ui): Remove problematic call to setIsValuePlaintext (#…

…4979)

* Remove problematic call to `setIsValuePlaintext`

* Clean up an unused variable

* Ensure 'safe for lexical' is checked when switching view

libs/designer-ui/src/lib/html/index.tsx

@@ -6,12 +6,14 @@ import { HTMLChangePlugin } from './plugins/toolbar/helper/HTMLChangePlugin';
 import { isHtmlStringValueSafeForLexical } from './plugins/toolbar/helper/util';
 import { useState } from 'react';
 
+const isValueSafeForLexical = (value: ValueSegment[]) => {
+  const blankNodeMap = new Map<string, ValueSegment>();
+  const initialValueString = convertSegmentsToString(value, blankNodeMap);
+  return isHtmlStringValueSafeForLexical(initialValueString, blankNodeMap);
+};
+
 export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseEditorProps): JSX.Element => {
-  const [isValuePlaintext, setIsValuePlaintext] = useState(() => {
-    const blankNodeMap = new Map<string, ValueSegment>();
-    const initialValueString = convertSegmentsToString(initialValue, blankNodeMap);
-    return !isHtmlStringValueSafeForLexical(initialValueString, blankNodeMap);
-  });
+  const [isValuePlaintext, setIsValuePlaintext] = useState(() => !isValueSafeForLexical(initialValue));
   const [isSwitchFromPlaintextBlocked, setIsSwitchFromPlaintextBlocked] = useState(() => isValuePlaintext);
   const [value, setValue] = useState<ValueSegment[]>(initialValue);
 
@@ -23,6 +25,11 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
     onChange?.({ value: value });
   };
 
+  const handleSetIsValuePlaintext = (newIsPlaintext: boolean) => {
+    setIsValuePlaintext(newIsPlaintext);
+    setIsSwitchFromPlaintextBlocked(!isValueSafeForLexical(value));
+  };
+
   return (
     <EditorWrapper
       {...baseEditorProps}
@@ -39,12 +46,11 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
       }}
       isSwitchFromPlaintextBlocked={isSwitchFromPlaintextBlocked}
       onBlur={handleBlur}
-      setIsValuePlaintext={setIsValuePlaintext}
+      setIsValuePlaintext={handleSetIsValuePlaintext}
     >
       <HTMLChangePlugin
         isValuePlaintext={isValuePlaintext}
         setIsSwitchFromPlaintextBlocked={setIsSwitchFromPlaintextBlocked}
-        setIsValuePlaintext={setIsValuePlaintext}
         setValue={onValueChange}
       />
     </EditorWrapper>

libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx

@@ -22,31 +22,20 @@ import { $getRoot } from 'lexical';
 export interface HTMLChangePluginProps {
   isValuePlaintext: boolean;
   setIsSwitchFromPlaintextBlocked: (value: boolean) => void;
-  setIsValuePlaintext: (isValuePlaintext: boolean) => void;
   setValue: (newVal: ValueSegment[]) => void;
 }
 
-export const HTMLChangePlugin = ({
-  isValuePlaintext,
-  setIsSwitchFromPlaintextBlocked,
-  setIsValuePlaintext,
-  setValue,
-}: HTMLChangePluginProps) => {
+export const HTMLChangePlugin = ({ isValuePlaintext, setIsSwitchFromPlaintextBlocked, setValue }: HTMLChangePluginProps) => {
   const onChange = (editorState: EditorState, editor: LexicalEditor) => {
     const nodeMap = new Map<string, ValueSegment>();
-    let isNewValuePlaintext = isValuePlaintext;
 
     editorState.read(() => {
       const editorString = getChildrenNodes($getRoot(), nodeMap);
       const isSafeForLexical = isHtmlStringValueSafeForLexical(editorString, nodeMap);
 
       setIsSwitchFromPlaintextBlocked(!isSafeForLexical);
-      if (!isSafeForLexical) {
-        isNewValuePlaintext = true;
-        setIsValuePlaintext(isNewValuePlaintext);
-      }
 
-      convertEditorState(editor, nodeMap, { isValuePlaintext: isNewValuePlaintext }).then(setValue);
+      convertEditorState(editor, nodeMap, { isValuePlaintext }).then(setValue);
     });
   };
   return <OnChangePlugin ignoreSelectionChange onChange={onChange} />;