From 732abba6768ef14cb1180c81eee89be408e0295a Mon Sep 17 00:00:00 2001
From: EK <1350074+ek68794998@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:20:37 -0700
Subject: [PATCH 1/3] Remove problematic call to `setIsValuePlaintext`

---
 libs/designer-ui/src/lib/html/index.tsx            |  1 -
 .../plugins/toolbar/helper/HTMLChangePlugin.tsx    | 14 ++------------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/libs/designer-ui/src/lib/html/index.tsx b/libs/designer-ui/src/lib/html/index.tsx
index 9b227f79f03..cfb10008b6c 100644
--- a/libs/designer-ui/src/lib/html/index.tsx
+++ b/libs/designer-ui/src/lib/html/index.tsx
@@ -44,7 +44,6 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
       <HTMLChangePlugin
         isValuePlaintext={isValuePlaintext}
         setIsSwitchFromPlaintextBlocked={setIsSwitchFromPlaintextBlocked}
-        setIsValuePlaintext={setIsValuePlaintext}
         setValue={onValueChange}
       />
     </EditorWrapper>
diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
index c95418571cb..6ea3723b652 100644
--- a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
+++ b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
@@ -22,29 +22,19 @@ 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;
+    const 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);
     });

From 559b55677092fbea42cae41166523e16e92e17fe Mon Sep 17 00:00:00 2001
From: EK <1350074+ek68794998@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:30:59 -0700
Subject: [PATCH 2/3] Clean up an unused variable

---
 .../src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
index 6ea3723b652..1fe8efad94d 100644
--- a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
+++ b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
@@ -28,7 +28,6 @@ export interface HTMLChangePluginProps {
 export const HTMLChangePlugin = ({ isValuePlaintext, setIsSwitchFromPlaintextBlocked, setValue }: HTMLChangePluginProps) => {
   const onChange = (editorState: EditorState, editor: LexicalEditor) => {
     const nodeMap = new Map<string, ValueSegment>();
-    const isNewValuePlaintext = isValuePlaintext;
 
     editorState.read(() => {
       const editorString = getChildrenNodes($getRoot(), nodeMap);
@@ -36,7 +35,7 @@ export const HTMLChangePlugin = ({ isValuePlaintext, setIsSwitchFromPlaintextBlo
 
       setIsSwitchFromPlaintextBlocked(!isSafeForLexical);
 
-      convertEditorState(editor, nodeMap, { isValuePlaintext: isNewValuePlaintext }).then(setValue);
+      convertEditorState(editor, nodeMap, { isValuePlaintext }).then(setValue);
     });
   };
   return <OnChangePlugin ignoreSelectionChange onChange={onChange} />;

From 4fc49bdf51e0274f9d1e56077e2c9571178ec4c7 Mon Sep 17 00:00:00 2001
From: EK <1350074+ek68794998@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:39:48 -0700
Subject: [PATCH 3/3] Ensure 'safe for lexical' is checked when switching view

---
 libs/designer-ui/src/lib/html/index.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/libs/designer-ui/src/lib/html/index.tsx b/libs/designer-ui/src/lib/html/index.tsx
index cfb10008b6c..ae536c5e0fd 100644
--- a/libs/designer-ui/src/lib/html/index.tsx
+++ b/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,7 +46,7 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
       }}
       isSwitchFromPlaintextBlocked={isSwitchFromPlaintextBlocked}
       onBlur={handleBlur}
-      setIsValuePlaintext={setIsValuePlaintext}
+      setIsValuePlaintext={handleSetIsValuePlaintext}
     >
       <HTMLChangePlugin
         isValuePlaintext={isValuePlaintext}