From 4e1a3f43955bd103686731a89fa3dd3a1494684b Mon Sep 17 00:00:00 2001
From: Neysan Foo <neysanfoo@gmail.com>
Date: Tue, 22 Oct 2024 08:51:19 +0800
Subject: [PATCH] [lexical-playground] Bug Fix: Disable editing of Excalidraw
 Component in Read-Only Mode (#6704)

Co-authored-by: Bob Ippolito <bob@redivi.com>
---
 .../ExcalidrawNode/ExcalidrawComponent.tsx    | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
index 646d0004a38..5a45068469e 100644
--- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
@@ -11,6 +11,7 @@ import type {NodeKey} from 'lexical';
 
 import {AppState, BinaryFiles} from '@excalidraw/excalidraw/types/types';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
 import {mergeRegister} from '@lexical/utils';
 import {
@@ -40,6 +41,7 @@ export default function ExcalidrawComponent({
   height: 'inherit' | number;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
   const [isModalOpen, setModalOpen] = useState<boolean>(
     data === '[]' && editor.isEditable(),
   );
@@ -66,16 +68,13 @@ export default function ExcalidrawComponent({
     [editor, isSelected, nodeKey],
   );
 
-  // Set editor to readOnly if Excalidraw is open to prevent unwanted changes
   useEffect(() => {
-    if (isModalOpen) {
-      editor.setEditable(false);
-    } else {
-      editor.setEditable(true);
+    if (!isEditable) {
+      if (isSelected) {
+        clearSelection();
+      }
+      return;
     }
-  }, [isModalOpen, editor]);
-
-  useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CLICK_COMMAND,
@@ -113,7 +112,15 @@ export default function ExcalidrawComponent({
         COMMAND_PRIORITY_LOW,
       ),
     );
-  }, [clearSelection, editor, isSelected, isResizing, $onDelete, setSelected]);
+  }, [
+    clearSelection,
+    editor,
+    isSelected,
+    isResizing,
+    $onDelete,
+    setSelected,
+    isEditable,
+  ]);
 
   const deleteNode = useCallback(() => {
     setModalOpen(false);
@@ -130,9 +137,6 @@ export default function ExcalidrawComponent({
     aps: Partial<AppState>,
     fls: BinaryFiles,
   ) => {
-    if (!editor.isEditable()) {
-      return;
-    }
     return editor.update(() => {
       const node = $getNodeByKey(nodeKey);
       if ($isExcalidrawNode(node)) {
@@ -198,20 +202,21 @@ export default function ExcalidrawComponent({
 
   return (
     <>
-      <ExcalidrawModal
-        initialElements={elements}
-        initialFiles={files}
-        initialAppState={appState}
-        isShown={isModalOpen}
-        onDelete={deleteNode}
-        onClose={closeModal}
-        onSave={(els, aps, fls) => {
-          editor.setEditable(true);
-          setData(els, aps, fls);
-          setModalOpen(false);
-        }}
-        closeOnClickOutside={false}
-      />
+      {isEditable && isModalOpen && (
+        <ExcalidrawModal
+          initialElements={elements}
+          initialFiles={files}
+          initialAppState={appState}
+          isShown={isModalOpen}
+          onDelete={deleteNode}
+          onClose={closeModal}
+          onSave={(els, aps, fls) => {
+            setData(els, aps, fls);
+            setModalOpen(false);
+          }}
+          closeOnClickOutside={false}
+        />
+      )}
       {elements.length > 0 && (
         <button
           ref={buttonRef}
@@ -225,7 +230,7 @@ export default function ExcalidrawComponent({
             width={width}
             height={height}
           />
-          {isSelected && (
+          {isSelected && isEditable && (
             <div
               className="image-edit-button"
               role="button"
@@ -234,7 +239,7 @@ export default function ExcalidrawComponent({
               onClick={openModal}
             />
           )}
-          {(isSelected || isResizing) && (
+          {(isSelected || isResizing) && isEditable && (
             <ImageResizer
               buttonRef={captionButtonRef}
               showCaption={true}