@pixerate/editor-react 0.10.1 → 0.10.3

package/dist/index.cjs

@@ -418,12 +418,14 @@ function useDismissGuard({
 var import_react6 = require("react");
 var import_editor3 = require("@pixerate/editor");
 function useHistory(managerOrOptions) {
-  const manager = (0, import_react6.useMemo)(() => {
-    if (managerOrOptions instanceof import_editor3.HistoryManager) {
-      return managerOrOptions;
-    }
-    return (0, import_editor3.createHistoryManager)(managerOrOptions);
-  }, [managerOrOptions]);
+  const ownManagerRef = (0, import_react6.useRef)(null);
+  let manager;
+  if (managerOrOptions instanceof import_editor3.HistoryManager) {
+    manager = managerOrOptions;
+  } else {
+    ownManagerRef.current ??= (0, import_editor3.createHistoryManager)(managerOrOptions);
+    manager = ownManagerRef.current;
+  }
   const state = (0, import_react6.useSyncExternalStore)(
     (0, import_react6.useCallback)(
       (onStoreChange) => manager.subscribe(onStoreChange),
@@ -645,36 +647,32 @@ var import_editor7 = require("@pixerate/editor");
 var import_react11 = require("react");
 var import_editor5 = require("@pixerate/editor");
 function useSpreadsheetEditor(options = {}) {
-  const [doc, setDoc] = (0, import_react11.useState)(() => ({
-    id: options.document?.id || `sheet_${Date.now()}`,
-    name: options.document?.name || "Sheet 1",
-    columns: options.document?.columns || [],
-    rows: options.document?.rows || [],
-    cells: options.document?.cells || {},
-    createdAt: options.document?.createdAt || Date.now(),
-    updatedAt: options.document?.updatedAt || Date.now()
-  }));
-  const [activeCell, setActiveCell] = (0, import_react11.useState)(null);
-  const [selectedRange, setSelectedRange] = (0, import_react11.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react11.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react11.useState)("");
-  const controller = (0, import_react11.useMemo)(() => {
-    return new import_editor5.SpreadsheetController({
+  const optionsRef = (0, import_react11.useRef)(options);
+  optionsRef.current = options;
+  const settersRef = (0, import_react11.useRef)({});
+  const [controller] = (0, import_react11.useState)(
+    () => new import_editor5.SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
-        setDoc({ ...updated });
-        options.onDocumentChange?.(updated);
+        settersRef.current.setDoc?.({ ...updated });
+        optionsRef.current.onDocumentChange?.(updated);
       },
       onSelectionChange: (active, range) => {
-        setActiveCell(active);
-        setSelectedRange(range);
-        options.onSelectionChange?.(active, range);
+        settersRef.current.setActiveCell?.(active);
+        settersRef.current.setSelectedRange?.(range);
+        optionsRef.current.onSelectionChange?.(active, range);
       },
       onCellCommit: (rowId, colId, raw, value) => {
-        options.onCellCommit?.(rowId, colId, raw, value);
+        optionsRef.current.onCellCommit?.(rowId, colId, raw, value);
       }
-    });
-  }, []);
+    })
+  );
+  const [doc, setDoc] = (0, import_react11.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react11.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react11.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react11.useState)(null);
+  const [draftValue, setDraftValue] = (0, import_react11.useState)("");
+  settersRef.current = { setDoc, setActiveCell, setSelectedRange };
   const setCellValue = (0, import_react11.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
@@ -792,7 +790,7 @@ function useSpreadsheetEditor(options = {}) {
     registerDataSource,
     setPrimaryDataSource,
     recalculateAll,
-    exportToTsv: () => controller.exportToTsv(),
+    exportToTsv: (range) => controller.exportToTsv(range),
     importFromTsv: (data) => {
       controller.importFromTsv(data);
       setDoc({ ...controller.document });
@@ -833,6 +831,25 @@ var SpreadsheetEditor = ({
     const colName = (0, import_editor6.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
+  const [formulaDraft, setFormulaDraft] = (0, import_react12.useState)(null);
+  const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
+  const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
+  (0, import_react12.useEffect)(() => {
+    setFormulaDraft(null);
+  }, [state.activeCell?.row, state.activeCell?.col]);
+  const commitFormulaBar = () => {
+    if (state.editingCell) {
+      state.commitEditing();
+      return;
+    }
+    if (formulaDraft === null || !state.activeCell) return;
+    const row = state.document.rows[state.activeCell.row];
+    const col = state.document.columns[state.activeCell.col];
+    if (row && col && !formulaBarReadOnly && formulaDraft !== activeRawValue) {
+      state.setCellValue(row.id, col.id, formulaDraft);
+    }
+    setFormulaDraft(null);
+  };
   const handleCellClick = (0, import_react12.useCallback)((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
@@ -891,16 +908,19 @@ var SpreadsheetEditor = ({
         e.preventDefault();
         state.setCellValue(row.id, col.id, "");
       }
-    } else if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
       e.preventDefault();
       if (e.shiftKey) {
         state.redo();
       } else {
         state.undo();
       }
-    } else if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+    } else if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "y") {
       e.preventDefault();
-      const tsv = state.exportToTsv();
+      state.redo();
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+      e.preventDefault();
+      const tsv = state.exportToTsv(state.selectedRange);
       navigator.clipboard?.writeText(tsv);
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
@@ -909,6 +929,10 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
+  const stateRef = (0, import_react12.useRef)(state);
+  stateRef.current = state;
+  const onColumnResizeRef = (0, import_react12.useRef)(onColumnResize);
+  onColumnResizeRef.current = onColumnResize;
   (0, import_react12.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
@@ -927,7 +951,7 @@ var SpreadsheetEditor = ({
       if (rafId === null) {
         rafId = requestAnimationFrame(() => {
           rafId = null;
-          state.setColumnWidth(resizingColId, pendingWidth);
+          stateRef.current.setColumnWidth(resizingColId, pendingWidth);
         });
       }
     };
@@ -937,11 +961,8 @@ var SpreadsheetEditor = ({
         rafId = null;
       }
       if (hasDragged) {
-        state.setColumnWidth(resizingColId, pendingWidth);
-        const col = state.document.columns.find((c) => c.id === resizingColId);
-        if (col && onColumnResize) {
-          onColumnResize(col.id, col.width || pendingWidth);
-        }
+        stateRef.current.setColumnWidth(resizingColId, pendingWidth);
+        onColumnResizeRef.current?.(resizingColId, pendingWidth);
       }
       setResizingColId(null);
       if (typeof document !== "undefined") {
@@ -962,7 +983,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
+  }, [resizingColId, resizeStartX, resizeStartWidth]);
   const measureElementContentWidth = (0, import_react12.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
@@ -1094,25 +1115,29 @@ var SpreadsheetEditor = ({
               type: "text",
               className: "flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded",
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
-              value: state.editingCell ? state.draftValue : activeRawValue,
+              "aria-label": "Formula bar",
+              readOnly: formulaBarReadOnly,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              onFocus: () => {
+                if (!state.editingCell) setFormulaDraft(activeRawValue);
+              },
               onChange: (e) => {
-                if (state.activeCell) {
+                if (state.editingCell) {
                   state.setDraftValue(e.target.value);
+                } else if (state.activeCell) {
+                  setFormulaDraft(e.target.value);
                 }
               },
+              onBlur: () => commitFormulaBar(),
               onKeyDown: (e) => {
+                e.stopPropagation();
                 if (e.key === "Enter") {
                   e.preventDefault();
-                  if (state.activeCell) {
-                    const row = state.document.rows[state.activeCell.row];
-                    const col = state.document.columns[state.activeCell.col];
-                    if (row && col) {
-                      state.setCellValue(row.id, col.id, e.target.value);
-                    }
-                  }
+                  commitFormulaBar();
                 } else if (e.key === "Escape") {
                   e.preventDefault();
-                  state.cancelEditing();
+                  setFormulaDraft(null);
+                  if (state.editingCell) state.cancelEditing();
                 }
               }
             }
@@ -1287,11 +1312,14 @@ function useImageEditor(options = {}) {
     });
     return unsub;
   }, [controller]);
+  const loadedImageRef = (0, import_react14.useRef)(options.image);
   (0, import_react14.useEffect)(() => {
-    if (options.image && options.image !== state.sourceUrl) {
+    if (options.image === loadedImageRef.current) return;
+    loadedImageRef.current = options.image;
+    if (options.image) {
       controller.loadImage(options.image);
     }
-  }, [options.image, controller, state.sourceUrl]);
+  }, [options.image, controller]);
   const setTool = (0, import_react14.useCallback)((tool) => controller.setTool(tool), [controller]);
   const setCrop = (0, import_react14.useCallback)(
     (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),