docs: excalidraw package usage example tweaks (#2608)

Co-authored-by: Aakansha Doshi <monstershome@gmail.com>

scripts/changelog-check.js

@@ -1,34 +1,34 @@
 const { exec } = require("child_process");
 
-const changeLogCheck = () => {
+const normalizePath = (path) => path.replace(/\\+/g, "/").trim().toLowerCase();
-  exec(
-    "git diff origin/master --cached --name-only",
-    (error, stdout, stderr) => {
-      if (error || stderr) {
-        process.exit(1);
-      }
 
-      if (!stdout || stdout.includes("packages/excalidraw/CHANGELOG.md")) {
+const IGNORED_PATHS = [
-        process.exit(0);
+  "src/excalidraw-app",
-      }
+  "packages/utils",
+  "CHANGELOG.md",
+  "README.md",
+].map(normalizePath);
 
-      const onlyNonSrcFilesUpdated = stdout.indexOf("src") < 0;
+exec("git diff origin/master --cached --name-only", (error, stdout, stderr) => {
-      if (onlyNonSrcFilesUpdated) {
+  if (error || stderr) {
-        process.exit(0);
+    process.exit(1);
-      }
+  }
 
-      const changedFiles = stdout.trim().split("\n");
+  if (!stdout || stdout.includes("packages/excalidraw/CHANGELOG.md")) {
-      const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;
+    process.exit(0);
+  }
 
-      const excalidrawPackageFiles = changedFiles.filter((file) => {
+  const changedFiles = stdout.trim().split("\n").map(normalizePath);
-        return file.indexOf("src") >= 0 && !filesToIgnoreRegex.test(file);
-      });
 
-      if (excalidrawPackageFiles.length) {
+  const excalidrawPackageFiles = changedFiles.filter((filename) => {
-        process.exit(1);
+    return (
-      }
+      filename.includes("src") &&
-      process.exit(0);
+      !IGNORED_PATHS.find((ignoredPath) => filename.includes(ignoredPath))
-    },
+    );
-  );
+  });
-};
+
-changeLogCheck();
+  if (excalidrawPackageFiles.length) {
+    process.exit(1);
+  }
+  process.exit(0);
+});

src/packages/excalidraw/README.md

@@ -39,26 +39,19 @@ import "./styles.css";
 export default function App() {
   const excalidrawRef = createRef();
 
-  const onChange = (elements, state) => {
-    console.log(excalidrawRef.current);
-    console.log("Elements :", elements, "State : ", state);
-  };
-
   const [dimensions, setDimensions] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
   });
 
-  const onResize = () => {
-    setDimensions({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  };
-
   useEffect(() => {
+    const onResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
     window.addEventListener("resize", onResize);
-
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
@@ -94,7 +87,6 @@ export default function App() {
     excalidrawRef.current.updateScene(sceneData);
   };
 
-  const { width, height } = dimensions;
   return (
     <div className="App">
       <button className="update-scene" onClick={updateScene}>
@@ -111,12 +103,17 @@ export default function App() {
       <div className="excalidraw-wrapper">
         <Excalidraw
           ref={excalidrawRef}
-          width={width}
+          width={dimensions.width}
-          height={height}
+          height={dimensions.height}
           initialData={InitialData}
-          onChange={onChange}
+          onChange={(elements, state) => {
+            console.log("Latest elements:", elements, "Latest state:", state);
+          }}
           user={{ name: "Excalidraw User" }}
-          onPointerUpdate={(payload) => console.log(payload)}
+          onPointerUpdate={(pointerData) => console.log(pointerData)}
+          onCollabButtonClick={() => {
+            window.alert("You clicked on collab button");
+          }}
         />
       </div>
     </div>