@pixerate/editor-react 0.4.0 → 0.5.1

package/dist/index.js

@@ -348,6 +348,105 @@ function useDismissGuard({
   };
 }
 
+// src/hooks/useHistory.ts
+import { useSyncExternalStore, useMemo as useMemo2, useCallback as useCallback3 } from "react";
+import {
+  HistoryManager,
+  createHistoryManager
+} from "@pixerate/editor";
+function useHistory(managerOrOptions) {
+  const manager = useMemo2(() => {
+    if (managerOrOptions instanceof HistoryManager) {
+      return managerOrOptions;
+    }
+    return createHistoryManager(managerOrOptions);
+  }, [managerOrOptions]);
+  const state = useSyncExternalStore(
+    useCallback3(
+      (onStoreChange) => manager.subscribe(onStoreChange),
+      [manager]
+    ),
+    () => manager.getState(),
+    () => manager.getState()
+  );
+  const undo = useCallback3(() => manager.undo(), [manager]);
+  const redo = useCallback3(() => manager.redo(), [manager]);
+  const clear = useCallback3(() => manager.clear(), [manager]);
+  const execute = useCallback3(
+    (cmd) => manager.execute(cmd),
+    [manager]
+  );
+  const executeMerged = useCallback3(
+    (cmd, opts) => manager.executeMerged(cmd, opts),
+    [manager]
+  );
+  const batch = useCallback3(
+    (name, fn) => manager.batch(name, fn),
+    [manager]
+  );
+  return {
+    ...state,
+    manager,
+    undo,
+    redo,
+    clear,
+    execute,
+    executeMerged,
+    batch
+  };
+}
+
+// src/hooks/useHistoryShortcuts.ts
+import { useEffect as useEffect3 } from "react";
+function useHistoryShortcuts(manager, options = {}) {
+  const {
+    enabled = true,
+    target,
+    ignoreEditableElements = true
+  } = options;
+  useEffect3(() => {
+    if (!enabled) return;
+    const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
+    if (!eventTarget) return;
+    const handleKeyDown = (event) => {
+      const e = event;
+      const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+      const modifier = isMac ? e.metaKey : e.ctrlKey;
+      if (!modifier) return;
+      if (ignoreEditableElements && typeof document !== "undefined") {
+        const targetEl = e.target || document.activeElement;
+        if (targetEl && targetEl.tagName) {
+          const tagName = targetEl.tagName.toLowerCase();
+          const isInput = tagName === "input" || tagName === "textarea";
+          const isContentEditable = targetEl.isContentEditable || targetEl.getAttribute?.("contenteditable") === "true";
+          if (isInput || isContentEditable) {
+            return;
+          }
+        }
+      }
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) {
+        if (manager.getState().canUndo) {
+          e.preventDefault();
+          manager.undo();
+        }
+        return;
+      }
+      const isRedoKey = key === "z" && e.shiftKey || !isMac && key === "y" && !e.shiftKey;
+      if (isRedoKey) {
+        if (manager.getState().canRedo) {
+          e.preventDefault();
+          manager.redo();
+        }
+      }
+    };
+    eventTarget.addEventListener("keydown", handleKeyDown);
+    return () => {
+      eventTarget.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [manager, enabled, target, ignoreEditableElements]);
+}
+
 // src/components/EditorContent.tsx
 import {
   EditorContent as TipTapEditorContent
@@ -362,7 +461,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -381,7 +480,7 @@ var BubbleMenu = ({
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect3(() => {
+  useEffect4(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -412,7 +511,7 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import {
   tokenizePrompt,
   resolveTemplates
@@ -427,11 +526,11 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = useMemo2(() => {
+  const displayText = useMemo3(() => {
     if (!resolve || templates.length === 0) return content;
     return resolveTemplates(content, templates);
   }, [content, templates, resolve]);
-  const tokens = useMemo2(() => {
+  const tokens = useMemo3(() => {
     return tokenizePrompt(displayText);
   }, [displayText]);
   return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
@@ -487,11 +586,13 @@ var TemplateRenderer = ({
 import {
   DirtyTracker,
   createDirtyTracker,
-  defaultIsEqual
+  defaultIsEqual,
+  HistoryManager as HistoryManager2,
+  createHistoryManager as createHistoryManager2
 } from "@pixerate/editor";
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useMemo as useMemo4, useCallback as useCallback4 } from "react";
 import {
   SpreadsheetController
 } from "@pixerate/editor";
@@ -509,7 +610,7 @@ function useSpreadsheetEditor(options = {}) {
   const [selectedRange, setSelectedRange] = useState4(null);
   const [editingCell, setEditingCell] = useState4(null);
   const [draftValue, setDraftValue] = useState4("");
-  const controller = useMemo3(() => {
+  const controller = useMemo4(() => {
     return new SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
@@ -526,82 +627,82 @@ function useSpreadsheetEditor(options = {}) {
       }
     });
   }, []);
-  const setCellValue = useCallback3((rowId, colId, raw) => {
+  const setCellValue = useCallback4((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = useCallback3((row, col, extendSelection = false) => {
+  const selectCell = useCallback4((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = useCallback3((range) => {
+  const selectRange = useCallback4((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = useCallback3((row, col, initialVal) => {
+  const startEditing = useCallback4((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = useCallback3((val) => {
+  const commitEditing = useCallback4((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = useCallback3(() => {
+  const cancelEditing = useCallback4(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = useCallback3((dir, extend = false) => {
+  const moveCursor = useCallback4((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = useCallback3((index, config) => {
+  const insertColumn = useCallback4((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = useCallback3((colId) => {
+  const deleteColumn = useCallback4((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = useCallback3((index, config) => {
+  const insertRow = useCallback4((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = useCallback3((rowId) => {
+  const deleteRow = useCallback4((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = useCallback3((colId, width) => {
+  const setColumnWidth = useCallback4((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = useCallback3((colId, customWidth) => {
+  const autoFitColumnWidth = useCallback4((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = useCallback3((ds) => {
+  const registerDataSource = useCallback4((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = useCallback3((id) => {
+  const setPrimaryDataSource = useCallback4((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = useCallback3(() => {
+  const recalculateAll = useCallback4(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = useCallback3(() => {
+  const undo = useCallback4(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = useCallback3(() => {
+  const redo = useCallback4(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
@@ -654,7 +755,7 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef5, useState as useState5, useMemo as useMemo4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useRef as useRef5, useState as useState5, useMemo as useMemo5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 import {
   indexToColName
 } from "@pixerate/editor";
@@ -674,31 +775,31 @@ var SpreadsheetEditor = ({
   const [hoveredColId, setHoveredColId] = useState5(null);
   const [resizeStartX, setResizeStartX] = useState5(0);
   const [resizeStartWidth, setResizeStartWidth] = useState5(0);
-  const activeRawValue = useMemo4(() => {
+  const activeRawValue = useMemo5(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const coordLabel = useMemo4(() => {
+  const coordLabel = useMemo5(() => {
     if (!state.activeCell) return "--";
     const colName = indexToColName(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const handleCellClick = useCallback4((rIdx, cIdx, e) => {
+  const handleCellClick = useCallback5((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
     }
     state.selectCell(rIdx, cIdx, e.shiftKey);
   }, [state]);
-  const handleCellDblClick = useCallback4((rIdx, cIdx) => {
+  const handleCellDblClick = useCallback5((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = useCallback4((e) => {
+  const handleKeyDown = useCallback5((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -762,7 +863,7 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -816,7 +917,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
-  const measureElementContentWidth = useCallback4((el, container) => {
+  const measureElementContentWidth = useCallback5((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -864,7 +965,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = useCallback4((colId, colIndex) => {
+  const autoFitColumn = useCallback5((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -901,12 +1002,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = useCallback4((colId, colIndex, e) => {
+  const handleResizeDblClick = useCallback5((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = useCallback4((colId, colIndex, e) => {
+  const handleHeaderDblClick = useCallback5((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1093,12 +1194,16 @@ export {
   BubbleMenu,
   DirtyTracker,
   EditorContent,
+  HistoryManager2 as HistoryManager,
   SpreadsheetEditor,
   TemplateRenderer,
   createDirtyTracker,
+  createHistoryManager2 as createHistoryManager,
   defaultIsEqual,
   useDismissGuard,
   useEditor2 as useEditor,
+  useHistory,
+  useHistoryShortcuts,
   useNavigationGuard,
   usePromptEditor,
   useSpreadsheetEditor