Replace excalidraw package with latest @excalidraw/excalidraw

package.json

@@ -8,15 +8,17 @@
     "build": "parcel build public/index.html"
   },
   "dependencies": {
-    "excalidraw": "^0.6.1",
+    "@excalidraw/excalidraw": "^0.15.2",
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
-    "parcel": "^2.0.0-beta.1",
-    "typescript": "^4.0.5"
+    "buffer": "^5.5.0",
+    "parcel": "^2.8.3",
+    "process": "^0.11.10",
+    "typescript": "^5.0.4"
   }
 }

public/index.html

@@ -45,6 +45,6 @@
       </div>
     </div>
 
-    <script src="../src/index.tsx"></script>
+    <script type="module" src="../src/index.tsx" />
   </body>
 </html>

public/styles.css

@@ -1,13 +1,13 @@
 body {
-  font-family: system-ui, system-ui, -apple-system, 'Segoe UI', Roboto,
+  font-family: system-ui, system-ui, -apple-system, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif;
 }
 
 .slides-list {
   position: absolute;
   z-index: 10;
   top: 30px;
-  right: 5px;
+  left: 10px;
   max-height: calc(100vh - 100px);
   width: 120px;
   background-color: var(--bg-color-island);
@@ -33,7 +33,9 @@ body {
   list-style: none;
   display: flex;
   height: 80px;
-  margin: var(--space-factor) var(--space-factor) 0;
+  margin: 4px 4px 0;
+  border: 1px solid black;
+  border-radius: 2px;
 }
 
 .slides-list > ul > li:last-of-type {
@@ -72,7 +74,7 @@ body {
   overflow-y: auto;
   position: absolute;
   z-index: 10;
-  bottom: var(--space-factor);
+  bottom: 10px;
   left: calc(50vw - 136px / 2);
   height: 48px;
   width: 136px;
@@ -144,7 +146,7 @@ body {
   margin-right: 4px;
 }
 
-.import-export input[type='file'] {
+.import-export input[type="file"] {
   display: none;
 }
 

src/SlideEditor.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import Excalidraw from 'excalidraw'
-import 'excalidraw/dist/excalidraw.min.css'
-import { Slide } from './types'
+import React, { useEffect, useState } from "react";
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { Slide } from "./types";
+import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
 
 export interface Props {
-  slide: Slide
-  editMode: boolean
-  onSlideChange: (elements: any[]) => void
+  slide: Slide;
+  editMode: boolean;
+  onSlideChange: (elements: readonly ExcalidrawElement[]) => void;
 }
 
 const sameElement = (el1: any, el2: any) => {
@@ -15,55 +15,58 @@ const sameElement = (el1: any, el2: any) => {
     versionNonce: el1VersionNonce,
     seed: el1Seed,
     ...el1Attributes
-  } = el1
+  } = el1;
   const {
     version: el2Version,
     versionNonce: el2VersionNonce,
     seed: el2Seed,
     ...el2Attributes
-  } = el2
-  return JSON.stringify(el1Attributes) === JSON.stringify(el2Attributes)
-}
+  } = el2;
+  return JSON.stringify(el1Attributes) === JSON.stringify(el2Attributes);
+};
 
-const sameElements = (elements1: any[], elements2: any[]) =>
+const sameElements = (
+  elements1: readonly ExcalidrawElement[],
+  elements2: readonly ExcalidrawElement[]
+) =>
   elements1.length === elements2.length &&
-  elements1.every((el, index) => sameElement(el, elements2[index]))
+  elements1.every((el, index) => sameElement(el, elements2[index]));
 
 export const SlideEditor = ({ slide, editMode, onSlideChange }: Props) => {
-  const [initialElements, setInitialElements] = useState(slide.elements)
+  const [initialElements, setInitialElements] = useState(slide.elements);
 
-  const onChange = (elements: any[]) => {
-    if (!sameElements(elements, initialElements)) {
-      onSlideChange(elements)
-      setInitialElements(JSON.parse(JSON.stringify(elements)))
+  const onChange = (elements: readonly ExcalidrawElement[]) => {
+    if (initialElements && !sameElements(elements, initialElements)) {
+      onSlideChange(elements);
+      setInitialElements(JSON.parse(JSON.stringify(elements)));
     }
-  }
+  };
 
-  const [dimensions, setDimensions] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  })
+  // const [dimensions, setDimensions] = useState({
+  //   width: window.innerWidth,
+  //   height: window.innerHeight,
+  // });
 
-  const onResize = () => {
-    setDimensions({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    })
-  }
+  // const onResize = () => {
+  //   setDimensions({
+  //     width: window.innerWidth,
+  //     height: window.innerHeight,
+  //   });
+  // };
 
   useEffect(() => {
-    window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
-  }, [])
+    // window.addEventListener("resize", onResize);
+    // return () => window.removeEventListener("resize", onResize);
+  }, []);
 
   return (
     <div
       className="App"
       style={{
-        display: 'flex',
-        position: 'relative',
-        width: '100%',
-        height: '100%',
+        display: "flex",
+        position: "relative",
+        width: "100%",
+        height: "100%",
       }}
     >
       {!editMode && (
@@ -81,12 +84,7 @@ export const SlideEditor = ({ slide, editMode, onSlideChange }: Props) => {
           }
         `}
       </style>
-      <Excalidraw
-        width={dimensions.width}
-        height={dimensions.height}
-        initialData={slide.elements}
-        onChange={onChange}
-      />
+      <Excalidraw initialData={slide} onChange={onChange} />
     </div>
-  )
-}
+  );
+};