@pixerate/editor-react 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -31,14 +31,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BubbleMenu: () => BubbleMenu,
-  DirtyTracker: () => import_editor6.DirtyTracker,
+  DirtyTracker: () => import_editor7.DirtyTracker,
   EditorContent: () => EditorContent,
+  HistoryManager: () => import_editor7.HistoryManager,
   SpreadsheetEditor: () => SpreadsheetEditor,
   TemplateRenderer: () => TemplateRenderer,
-  createDirtyTracker: () => import_editor6.createDirtyTracker,
-  defaultIsEqual: () => import_editor6.defaultIsEqual,
+  createDirtyTracker: () => import_editor7.createDirtyTracker,
+  createHistoryManager: () => import_editor7.createHistoryManager,
+  defaultIsEqual: () => import_editor7.defaultIsEqual,
   useDismissGuard: () => useDismissGuard,
   useEditor: () => useEditor2,
+  useHistory: () => useHistory,
+  useHistoryShortcuts: () => useHistoryShortcuts,
   useNavigationGuard: () => useNavigationGuard,
   usePromptEditor: () => usePromptEditor,
   useSpreadsheetEditor: () => useSpreadsheetEditor
@@ -389,19 +393,115 @@ function useDismissGuard({
   };
 }
 
+// src/hooks/useHistory.ts
+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 state = (0, import_react6.useSyncExternalStore)(
+    (0, import_react6.useCallback)(
+      (onStoreChange) => manager.subscribe(onStoreChange),
+      [manager]
+    ),
+    () => manager.getState(),
+    () => manager.getState()
+  );
+  const undo = (0, import_react6.useCallback)(() => manager.undo(), [manager]);
+  const redo = (0, import_react6.useCallback)(() => manager.redo(), [manager]);
+  const clear = (0, import_react6.useCallback)(() => manager.clear(), [manager]);
+  const execute = (0, import_react6.useCallback)(
+    (cmd) => manager.execute(cmd),
+    [manager]
+  );
+  const executeMerged = (0, import_react6.useCallback)(
+    (cmd, opts) => manager.executeMerged(cmd, opts),
+    [manager]
+  );
+  const batch = (0, import_react6.useCallback)(
+    (name, fn) => manager.batch(name, fn),
+    [manager]
+  );
+  return {
+    ...state,
+    manager,
+    undo,
+    redo,
+    clear,
+    execute,
+    executeMerged,
+    batch
+  };
+}
+
+// src/hooks/useHistoryShortcuts.ts
+var import_react7 = require("react");
+function useHistoryShortcuts(manager, options = {}) {
+  const {
+    enabled = true,
+    target,
+    ignoreEditableElements = true
+  } = options;
+  (0, import_react7.useEffect)(() => {
+    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
-var import_react6 = require("@tiptap/react");
+var import_react8 = require("@tiptap/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var EditorContent = ({
   className,
   editor,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react6.EditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react8.EditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
 var BubbleMenu = ({
@@ -413,12 +513,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = (0, import_react7.useRef)(null);
-  const [mounted, setMounted] = (0, import_react7.useState)(false);
+  const menuEl = (0, import_react9.useRef)(null);
+  const [mounted, setMounted] = (0, import_react9.useState)(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -449,8 +549,8 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-var import_react8 = require("react");
-var import_editor3 = require("@pixerate/editor");
+var import_react10 = require("react");
+var import_editor4 = require("@pixerate/editor");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TemplateRenderer = ({
   content,
@@ -461,12 +561,12 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = (0, import_react8.useMemo)(() => {
+  const displayText = (0, import_react10.useMemo)(() => {
     if (!resolve || templates.length === 0) return content;
-    return (0, import_editor3.resolveTemplates)(content, templates);
+    return (0, import_editor4.resolveTemplates)(content, templates);
   }, [content, templates, resolve]);
-  const tokens = (0, import_react8.useMemo)(() => {
-    return (0, import_editor3.tokenizePrompt)(displayText);
+  const tokens = (0, import_react10.useMemo)(() => {
+    return (0, import_editor4.tokenizePrompt)(displayText);
   }, [displayText]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
@@ -518,13 +618,13 @@ var TemplateRenderer = ({
 };
 
 // src/index.ts
-var import_editor6 = require("@pixerate/editor");
+var import_editor7 = require("@pixerate/editor");
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react9 = require("react");
-var import_editor4 = require("@pixerate/editor");
+var import_react11 = require("react");
+var import_editor5 = require("@pixerate/editor");
 function useSpreadsheetEditor(options = {}) {
-  const [doc, setDoc] = (0, import_react9.useState)(() => ({
+  const [doc, setDoc] = (0, import_react11.useState)(() => ({
     id: options.document?.id || `sheet_${Date.now()}`,
     name: options.document?.name || "Sheet 1",
     columns: options.document?.columns || [],
@@ -533,12 +633,12 @@ function useSpreadsheetEditor(options = {}) {
     createdAt: options.document?.createdAt || Date.now(),
     updatedAt: options.document?.updatedAt || Date.now()
   }));
-  const [activeCell, setActiveCell] = (0, import_react9.useState)(null);
-  const [selectedRange, setSelectedRange] = (0, import_react9.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react9.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react9.useState)("");
-  const controller = (0, import_react9.useMemo)(() => {
-    return new import_editor4.SpreadsheetController({
+  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({
       ...options,
       onDocumentChange: (updated) => {
         setDoc({ ...updated });
@@ -554,82 +654,82 @@ function useSpreadsheetEditor(options = {}) {
       }
     });
   }, []);
-  const setCellValue = (0, import_react9.useCallback)((rowId, colId, raw) => {
+  const setCellValue = (0, import_react11.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react9.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react11.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react9.useCallback)((range) => {
+  const selectRange = (0, import_react11.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react9.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react11.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react9.useCallback)((val) => {
+  const commitEditing = (0, import_react11.useCallback)((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = (0, import_react9.useCallback)(() => {
+  const cancelEditing = (0, import_react11.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react9.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react11.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react9.useCallback)((index, config) => {
+  const insertColumn = (0, import_react11.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react9.useCallback)((colId) => {
+  const deleteColumn = (0, import_react11.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react9.useCallback)((index, config) => {
+  const insertRow = (0, import_react11.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react9.useCallback)((rowId) => {
+  const deleteRow = (0, import_react11.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react9.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react11.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react9.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react11.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react9.useCallback)((ds) => {
+  const registerDataSource = (0, import_react11.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react9.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react11.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react9.useCallback)(() => {
+  const recalculateAll = (0, import_react11.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react9.useCallback)(() => {
+  const undo = (0, import_react11.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = (0, import_react9.useCallback)(() => {
+  const redo = (0, import_react11.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
@@ -682,8 +782,8 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react10 = require("react");
-var import_editor5 = require("@pixerate/editor");
+var import_react12 = require("react");
+var import_editor6 = require("@pixerate/editor");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SpreadsheetEditor = ({
   state: externalState,
@@ -695,36 +795,36 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react10.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react10.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react10.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react10.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react10.useState)(0);
-  const activeRawValue = (0, import_react10.useMemo)(() => {
+  const gridRef = (0, import_react12.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react12.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react12.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react12.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react12.useState)(0);
+  const activeRawValue = (0, import_react12.useMemo)(() => {
     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 = (0, import_react10.useMemo)(() => {
+  const coordLabel = (0, import_react12.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_editor5.indexToColName)(state.activeCell.col);
+    const colName = (0, import_editor6.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const handleCellClick = (0, import_react10.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react12.useCallback)((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 = (0, import_react10.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react12.useCallback)((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = (0, import_react10.useCallback)((e) => {
+  const handleKeyDown = (0, import_react12.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -788,7 +888,7 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -842,7 +942,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
-  const measureElementContentWidth = (0, import_react10.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react12.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -890,7 +990,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react10.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react12.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -927,12 +1027,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react12.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react12.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1120,12 +1220,16 @@ var SpreadsheetEditor = ({
   BubbleMenu,
   DirtyTracker,
   EditorContent,
+  HistoryManager,
   SpreadsheetEditor,
   TemplateRenderer,
   createDirtyTracker,
+  createHistoryManager,
   defaultIsEqual,
   useDismissGuard,
   useEditor,
+  useHistory,
+  useHistoryShortcuts,
   useNavigationGuard,
   usePromptEditor,
   useSpreadsheetEditor