Move to new Excalidraw APIs for 0.17 update (#5277)

facebook · Nov 23, 2023 · 91864ff · 91864ff · vercel · Nov 23, 2023
1 parent 7ec15be
commit 91864ff
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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: [