From 91864ff43640732d319fa62b6f2e4d6547aa2b5b Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Thu, 23 Nov 2023 03:44:23 +0000
Subject: [PATCH] Move to new Excalidraw APIs for 0.17 update (#5277)

---
 package-lock.json                             | 16 ++++++-------
 packages/lexical-playground/package.json      |  2 +-
 .../nodes/ExcalidrawNode/ExcalidrawModal.tsx  | 24 +++++++++++--------
 packages/lexical-playground/vite.config.js    |  3 +++
 .../lexical-playground/vite.prod.config.js    |  3 +++
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 60f8591bc58..eb09156e281 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2400,9 +2400,9 @@
       }
     },
     "node_modules/@excalidraw/excalidraw": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.15.3.tgz",
-      "integrity": "sha512-/gpY7fgMO/AEaFLWnPqzbY8H7ly+/zocFf7D0Is5sWNMD2mhult5tana12lXKLSJ6EAz7ubo1A7LajXzvJXJDA==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz",
+      "integrity": "sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==",
       "peerDependencies": {
         "react": "^17.0.2 || ^18.2.0",
         "react-dom": "^17.0.2 || ^18.2.0"
@@ -22894,7 +22894,7 @@
     "packages/lexical-playground": {
       "version": "0.12.4",
       "dependencies": {
-        "@excalidraw/excalidraw": "^0.15.3",
+        "@excalidraw/excalidraw": "^0.17.0",
         "@lexical/clipboard": "0.12.4",
         "@lexical/code": "0.12.4",
         "@lexical/file": "0.12.4",
@@ -25675,9 +25675,9 @@
       }
     },
     "@excalidraw/excalidraw": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.15.3.tgz",
-      "integrity": "sha512-/gpY7fgMO/AEaFLWnPqzbY8H7ly+/zocFf7D0Is5sWNMD2mhult5tana12lXKLSJ6EAz7ubo1A7LajXzvJXJDA=="
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz",
+      "integrity": "sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
@@ -35352,7 +35352,7 @@
     "lexical-playground": {
       "version": "file:packages/lexical-playground",
       "requires": {
-        "@excalidraw/excalidraw": "^0.15.3",
+        "@excalidraw/excalidraw": "^0.17.0",
         "@lexical/clipboard": "0.12.4",
         "@lexical/code": "0.12.4",
         "@lexical/file": "0.12.4",
diff --git a/packages/lexical-playground/package.json b/packages/lexical-playground/package.json
index b915e7869d0..68446679ebc 100644
--- a/packages/lexical-playground/package.json
+++ b/packages/lexical-playground/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@excalidraw/excalidraw": "^0.15.3",
+    "@excalidraw/excalidraw": "^0.17.0",
     "@lexical/clipboard": "0.12.4",
     "@lexical/code": "0.12.4",
     "@lexical/file": "0.12.4",
diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx
index 7435a771193..bc6059c4fe5 100644
--- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx
+++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawModal.tsx
@@ -61,6 +61,16 @@ type Props = {
   ) => void;
 };
 
+export const useCallbackRefState = () => {
+  const [refValue, setRefValue] =
+    React.useState<ExcalidrawImperativeAPI | null>(null);
+  const refCallback = React.useCallback(
+    (value: ExcalidrawImperativeAPI | null) => setRefValue(value),
+    [],
+  );
+  return [refValue, refCallback] as const;
+};
+
 /**
  * @explorer-desc
  * A component which renders a modal with Excalidraw (a painting app)
@@ -77,7 +87,7 @@ export default function ExcalidrawModal({
   onClose,
 }: Props): ReactPortal | null {
   const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);
-  const excaliDrawSceneRef = useRef<ExcalidrawImperativeAPI>(null);
+  const [excalidrawAPI, excalidrawAPIRefCallback] = useCallbackRefState();
   const [discardModalOpen, setDiscardModalOpen] = useState(false);
   const [elements, setElements] =
     useState<ReadonlyArray<ExcalidrawElementFragment>>(initialElements);
@@ -139,7 +149,7 @@ export default function ExcalidrawModal({
 
   const save = () => {
     if (elements.filter((el) => !el.isDeleted).length > 0) {
-      const appState = excaliDrawSceneRef?.current?.getAppState();
+      const appState = excalidrawAPI?.getAppState();
       // We only need a subset of the state
       const partialState: Partial<AppState> = {
         exportBackground: appState.exportBackground,
@@ -212,12 +222,6 @@ export default function ExcalidrawModal({
     setFiles(fls);
   };
 
-  // This is a hacky work-around for Excalidraw + Vite.
-  // In DEV, Vite pulls this in fine, in prod it doesn't. It seems
-  // like a module resolution issue with ESM vs CJS?
-  const _Excalidraw =
-    Excalidraw.$$typeof != null ? Excalidraw : Excalidraw.default;
-
   return createPortal(
     <div className="ExcalidrawModal__overlay" role="dialog">
       <div
@@ -226,9 +230,9 @@ export default function ExcalidrawModal({
         tabIndex={-1}>
         <div className="ExcalidrawModal__row">
           {discardModalOpen && <ShowDiscardDialog />}
-          <_Excalidraw
+          <Excalidraw
             onChange={onChange}
-            ref={excaliDrawSceneRef}
+            excalidrawAPI={excalidrawAPIRefCallback}
             initialData={{
               appState: initialAppState || {isLoading: false},
               elements: initialElements,
diff --git a/packages/lexical-playground/vite.config.js b/packages/lexical-playground/vite.config.js
index c0d939b3045..c14fd8391ac 100644
--- a/packages/lexical-playground/vite.config.js
+++ b/packages/lexical-playground/vite.config.js
@@ -169,6 +169,9 @@ const moduleResolution = [
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    "process.env.IS_PREACT": process.env.IS_PREACT,
+  },
   plugins: [
     replaceCodePlugin({
       replacements: [
diff --git a/packages/lexical-playground/vite.prod.config.js b/packages/lexical-playground/vite.prod.config.js
index ec9c3a0cbf5..adc0d70456d 100644
--- a/packages/lexical-playground/vite.prod.config.js
+++ b/packages/lexical-playground/vite.prod.config.js
@@ -160,6 +160,9 @@ const moduleResolution = [
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    "process.env.IS_PREACT": process.env.IS_PREACT,
+  },
   plugins: [
     replaceCodePlugin({
       replacements: [