docs: excalidraw package usage example tweaks (#2608)

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

scripts/changelog-check.js

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

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,
   });
 
+  useEffect(() => {
     const onResize = () => {
       setDimensions({
         width: window.innerWidth,
         height: window.innerHeight,
       });
     };
-
-  useEffect(() => {
     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}
-          height={height}
+          width={dimensions.width}
+          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>