react-api: add rebounce option to save file

Author: Shellishack

.changeset/beige-pumas-run.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Add rebounce option for useFile hook's saveFile

.changeset/pre.json

@@ -12,6 +12,7 @@
     "afraid-moments-punch",
     "angry-llamas-smash",
     "beige-pandas-rhyme",
+    "beige-pumas-run",
     "bumpy-parents-pull",
     "calm-rivers-march",
     "chatty-trains-beam",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-beta.57
+
+### Patch Changes
+
+- Add rebounce option for useFile hook's saveFile
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-beta.57
+
 ## 0.1.1-beta.56
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-beta.56",
+  "version": "0.1.1-beta.57",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -37,8 +37,11 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-beta.56",
+    "@pulse-editor/shared-utils": "0.1.1-beta.57",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "use-debounce": "^10.0.6"
   }
 }

npm-packages/react-api/src/hooks/editor/use-file.ts

@@ -1,8 +1,15 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 import { useCallback, useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import useIMC from "../imc/use-imc";
 
-export default function useFile(uri: string | undefined) {
+/**
+ *
+ * @param uri The file URI to read/write
+ * @param debounce Debounce time in ms for write operations
+ * @returns
+ */
+export default function useFile(uri: string | undefined, debounce = 0) {
   const [file, setFile] = useState<File | undefined>(undefined);
 
   const receiverHandlerMap = new Map<
@@ -20,26 +27,32 @@ export default function useFile(uri: string | undefined) {
 
   const { imc, isReady } = useIMC(receiverHandlerMap, "file");
 
+  const sendFileDebounced = useDebouncedCallback(
+    async (newFile: File) => {
+      if (!isReady || !uri) return;
+      await imc?.sendMessage(IMCMessageTypeEnum.PlatformWriteFile, {
+        uri,
+        file: newFile,
+      });
+    },
+    debounce,
+    { maxWait: debounce * 2 },
+  );
+
   const saveFile = useCallback(
-    (fileContent: string) => {
-      if (!uri) return;
-      else if (!file) return;
+    async (fileContent: string) => {
+      if (!uri || !file) return;
 
-      // Update file content
       const newFile = new File([fileContent], file.name, {
         type: file.type,
         lastModified: Date.now(),
       });
       setFile(newFile);
 
-      if (isReady && uri) {
-        imc?.sendMessage(IMCMessageTypeEnum.PlatformWriteFile, {
-          uri,
-          file: newFile,
-        });
-      }
+      // ✅ This now waits until the debounced write actually finishes
+      await sendFileDebounced(newFile);
     },
-    [uri, file, isReady],
+    [file, uri, sendFileDebounced],
   );
 
   // Read file when uri changes

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-beta.57
+
+### Patch Changes
+
+- Add rebounce option for useFile hook's saveFile
+
 ## 0.1.1-beta.56
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-beta.56",
+    "version": "0.1.1-beta.57",
     "main": "dist/main.js",
     "files": [
         "dist"