Excalidraw fixes (facebook#2711)

dosatross · Jul 26, 2022 · a81e37c · a81e37c
1 parent 506704b
commit a81e37c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx
@@ -10,7 +10,7 @@ import './ExcalidrawModal.css';
 
 import Excalidraw from '@excalidraw/excalidraw';
 import * as React from 'react';
-import {ReactPortal, useEffect, useRef, useState} from 'react';
+import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 
 import Button from '../../ui/Button';
@@ -34,10 +34,6 @@ type Props = {
    * Completely remove Excalidraw component
    */
   onDelete: () => void;
-  /**
-   * Handle modal closing
-   */
-  onHide: () => void;
   /**
    * Callback when the save button is clicked
    */
@@ -54,10 +50,10 @@ export default function ExcalidrawModal({
   onSave,
   initialElements,
   isShown = false,
-  onHide,
   onDelete,
 }: Props): ReactPortal | null {
   const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);
+
   const [discardModalOpen, setDiscardModalOpen] = useState(false);
   const [elements, setElements] =
     useState<ReadonlyArray<ExcalidrawElementFragment>>(initialElements);
@@ -70,6 +66,7 @@ export default function ExcalidrawModal({
 
   useEffect(() => {
     let modalOverlayElement: HTMLElement | null = null;
+
     const clickOutsideHandler = (event: MouseEvent) => {
       const target = event.target;
       if (
@@ -80,6 +77,7 @@ export default function ExcalidrawModal({
         onDelete();
       }
     };
+
     if (excaliDrawModelRef.current !== null) {
       modalOverlayElement = excaliDrawModelRef.current?.parentElement;
       if (modalOverlayElement !== null) {
@@ -94,14 +92,31 @@ export default function ExcalidrawModal({
     };
   }, [closeOnClickOutside, onDelete]);
 
+  useLayoutEffect(() => {
+    const currentModalRef = excaliDrawModelRef.current;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      onDelete();
+    };
+
+    if (currentModalRef !== null) {
+      currentModalRef.addEventListener('keydown', onKeyDown);
+    }
+
+    return () => {
+      if (currentModalRef !== null) {
+        currentModalRef.removeEventListener('keydown', onKeyDown);
+      }
+    };
+  }, [elements, onDelete]);
+
   const save = () => {
     if (elements.filter((el) => !el.isDeleted).length > 0) {
       onSave(elements);
     } else {
       // delete node if the scene is clear
       onDelete();
     }
-    onHide();
   };
 
   const discard = () => {
@@ -127,7 +142,7 @@ export default function ExcalidrawModal({
           <Button
             onClick={() => {
               setDiscardModalOpen(false);
-              onHide();
+              onDelete();
             }}>
             Discard
           </Button>{' '}

diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/index.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/index.tsx
@@ -166,10 +166,6 @@ function ExcalidrawComponent({
         initialElements={elements}
         isShown={isModalOpen}
         onDelete={deleteNode}
-        onHide={() => {
-          editor.setReadOnly(false);
-          setModalOpen(false);
-        }}
         onSave={(newData) => {
           editor.setReadOnly(false);
           setData(newData);

diff --git a/packages/lexical-playground/src/plugins/ExcalidrawPlugin/index.ts b/packages/lexical-playground/src/plugins/ExcalidrawPlugin/index.ts
@@ -22,7 +22,8 @@ import {
 } from '../../nodes/ExcalidrawNode';
 
 export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand();
-export default function ExcalidrawPlugin(): JSX.Element | null {
+
+export default function ExcalidrawPlugin(): null {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     if (!editor.hasNodes([ExcalidrawNode])) {