@pixerate/editor-react 0.3.13 → 0.4.0

package/dist/index.cjs

@@ -31,10 +31,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BubbleMenu: () => BubbleMenu,
+  DirtyTracker: () => import_editor6.DirtyTracker,
   EditorContent: () => EditorContent,
   SpreadsheetEditor: () => SpreadsheetEditor,
   TemplateRenderer: () => TemplateRenderer,
+  createDirtyTracker: () => import_editor6.createDirtyTracker,
+  defaultIsEqual: () => import_editor6.defaultIsEqual,
+  useDismissGuard: () => useDismissGuard,
   useEditor: () => useEditor2,
+  useNavigationGuard: () => useNavigationGuard,
   usePromptEditor: () => usePromptEditor,
   useSpreadsheetEditor: () => useSpreadsheetEditor
 });
@@ -263,19 +268,140 @@ function useEditor2(options = {}) {
   });
 }
 
+// src/hooks/useNavigationGuard.ts
+var import_react4 = require("react");
+function useNavigationGuard({
+  isDirty,
+  enabled = true,
+  onNavigate,
+  onBlocked
+}) {
+  const [showConfirm, setShowConfirm] = (0, import_react4.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react4.useState)(null);
+  const onNavigateRef = (0, import_react4.useRef)(onNavigate);
+  onNavigateRef.current = onNavigate;
+  const onBlockedRef = (0, import_react4.useRef)(onBlocked);
+  onBlockedRef.current = onBlocked;
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    if (!enabled || !isDirty) return;
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [enabled, isDirty]);
+  (0, import_react4.useEffect)(() => {
+    if (typeof document === "undefined" || typeof window === "undefined")
+      return;
+    if (!enabled || !isDirty) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      const anchor = target?.closest?.("a");
+      if (!anchor) return;
+      if (anchor.target === "_blank") return;
+      const isInternal = anchor.host === window.location.host;
+      if (!isInternal) return;
+      if (anchor.pathname === window.location.pathname && anchor.search === window.location.search) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const href = anchor.href;
+      setPendingUrl(href);
+      setShowConfirm(true);
+      onBlockedRef.current?.(href);
+    };
+    document.addEventListener("click", handleClick, { capture: true });
+    return () => {
+      document.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [enabled, isDirty]);
+  const confirmLeave = (0, import_react4.useCallback)(() => {
+    setShowConfirm(false);
+    if (pendingUrl) {
+      if (onNavigateRef.current) {
+        onNavigateRef.current(pendingUrl);
+      } else if (typeof window !== "undefined") {
+        window.location.href = pendingUrl;
+      }
+    }
+  }, [pendingUrl]);
+  const cancelLeave = (0, import_react4.useCallback)(() => {
+    setShowConfirm(false);
+    setPendingUrl(null);
+  }, []);
+  return {
+    showConfirm,
+    setShowConfirm,
+    pendingUrl,
+    confirmLeave,
+    cancelLeave
+  };
+}
+
+// src/hooks/useDismissGuard.ts
+var import_react5 = require("react");
+function useDismissGuard({
+  isDirty,
+  enabled = true,
+  onDismiss
+}) {
+  const [showConfirm, setShowConfirm] = (0, import_react5.useState)(false);
+  const onDismissRef = (0, import_react5.useRef)(onDismiss);
+  onDismissRef.current = onDismiss;
+  const requestDismiss = (0, import_react5.useCallback)(() => {
+    if (enabled && isDirty) {
+      setShowConfirm(true);
+    } else {
+      onDismissRef.current?.();
+    }
+  }, [enabled, isDirty]);
+  const confirmDismiss = (0, import_react5.useCallback)(() => {
+    setShowConfirm(false);
+    onDismissRef.current?.();
+  }, []);
+  const cancelDismiss = (0, import_react5.useCallback)(() => {
+    setShowConfirm(false);
+  }, []);
+  const handleKeyDown = (0, import_react5.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
+        if (event.defaultPrevented) return false;
+        event.preventDefault();
+        requestDismiss();
+        return true;
+      }
+      return false;
+    },
+    [requestDismiss]
+  );
+  return {
+    showConfirm,
+    setShowConfirm,
+    requestDismiss,
+    confirmDismiss,
+    cancelDismiss,
+    handleKeyDown
+  };
+}
+
 // src/components/EditorContent.tsx
-var import_react4 = require("@tiptap/react");
+var import_react6 = 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_react4.EditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react6.EditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
 var BubbleMenu = ({
@@ -287,12 +413,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = (0, import_react5.useRef)(null);
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  const menuEl = (0, import_react7.useRef)(null);
+  const [mounted, setMounted] = (0, import_react7.useState)(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -323,7 +449,7 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_editor3 = require("@pixerate/editor");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TemplateRenderer = ({
@@ -335,11 +461,11 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = (0, import_react6.useMemo)(() => {
+  const displayText = (0, import_react8.useMemo)(() => {
     if (!resolve || templates.length === 0) return content;
     return (0, import_editor3.resolveTemplates)(content, templates);
   }, [content, templates, resolve]);
-  const tokens = (0, import_react6.useMemo)(() => {
+  const tokens = (0, import_react8.useMemo)(() => {
     return (0, import_editor3.tokenizePrompt)(displayText);
   }, [displayText]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: tokens.map((token, index) => {
@@ -391,11 +517,14 @@ var TemplateRenderer = ({
   }) });
 };
 
+// src/index.ts
+var import_editor6 = require("@pixerate/editor");
+
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_editor4 = require("@pixerate/editor");
 function useSpreadsheetEditor(options = {}) {
-  const [doc, setDoc] = (0, import_react7.useState)(() => ({
+  const [doc, setDoc] = (0, import_react9.useState)(() => ({
     id: options.document?.id || `sheet_${Date.now()}`,
     name: options.document?.name || "Sheet 1",
     columns: options.document?.columns || [],
@@ -404,11 +533,11 @@ function useSpreadsheetEditor(options = {}) {
     createdAt: options.document?.createdAt || Date.now(),
     updatedAt: options.document?.updatedAt || Date.now()
   }));
-  const [activeCell, setActiveCell] = (0, import_react7.useState)(null);
-  const [selectedRange, setSelectedRange] = (0, import_react7.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react7.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react7.useState)("");
-  const controller = (0, import_react7.useMemo)(() => {
+  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({
       ...options,
       onDocumentChange: (updated) => {
@@ -425,82 +554,82 @@ function useSpreadsheetEditor(options = {}) {
       }
     });
   }, []);
-  const setCellValue = (0, import_react7.useCallback)((rowId, colId, raw) => {
+  const setCellValue = (0, import_react9.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react7.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react9.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react7.useCallback)((range) => {
+  const selectRange = (0, import_react9.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react7.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react9.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react7.useCallback)((val) => {
+  const commitEditing = (0, import_react9.useCallback)((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = (0, import_react7.useCallback)(() => {
+  const cancelEditing = (0, import_react9.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react7.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react9.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react7.useCallback)((index, config) => {
+  const insertColumn = (0, import_react9.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react7.useCallback)((colId) => {
+  const deleteColumn = (0, import_react9.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react7.useCallback)((index, config) => {
+  const insertRow = (0, import_react9.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react7.useCallback)((rowId) => {
+  const deleteRow = (0, import_react9.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react7.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react9.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react7.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react9.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react7.useCallback)((ds) => {
+  const registerDataSource = (0, import_react9.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react7.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react9.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react7.useCallback)(() => {
+  const recalculateAll = (0, import_react9.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react7.useCallback)(() => {
+  const undo = (0, import_react9.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = (0, import_react7.useCallback)(() => {
+  const redo = (0, import_react9.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
@@ -553,7 +682,7 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_editor5 = require("@pixerate/editor");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SpreadsheetEditor = ({
@@ -566,36 +695,36 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react8.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react8.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react8.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react8.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react8.useState)(0);
-  const activeRawValue = (0, import_react8.useMemo)(() => {
+  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)(() => {
     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_react8.useMemo)(() => {
+  const coordLabel = (0, import_react10.useMemo)(() => {
     if (!state.activeCell) return "--";
     const colName = (0, import_editor5.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const handleCellClick = (0, import_react8.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react10.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_react8.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react10.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_react8.useCallback)((e) => {
+  const handleKeyDown = (0, import_react10.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -659,7 +788,7 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -713,7 +842,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
-  const measureElementContentWidth = (0, import_react8.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react10.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -761,7 +890,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react8.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react10.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -798,12 +927,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -989,10 +1118,15 @@ var SpreadsheetEditor = ({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BubbleMenu,
+  DirtyTracker,
   EditorContent,
   SpreadsheetEditor,
   TemplateRenderer,
+  createDirtyTracker,
+  defaultIsEqual,
+  useDismissGuard,
   useEditor,
+  useNavigationGuard,
   usePromptEditor,
   useSpreadsheetEditor
 });