@pixerate/editor-react 0.3.13 → 0.4.0

package/dist/index.js

@@ -227,6 +227,127 @@ function useEditor2(options = {}) {
   });
 }
 
+// src/hooks/useNavigationGuard.ts
+import { useState, useEffect as useEffect2, useCallback, useRef as useRef2 } from "react";
+function useNavigationGuard({
+  isDirty,
+  enabled = true,
+  onNavigate,
+  onBlocked
+}) {
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [pendingUrl, setPendingUrl] = useState(null);
+  const onNavigateRef = useRef2(onNavigate);
+  onNavigateRef.current = onNavigate;
+  const onBlockedRef = useRef2(onBlocked);
+  onBlockedRef.current = onBlocked;
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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 = useCallback(() => {
+    setShowConfirm(false);
+    if (pendingUrl) {
+      if (onNavigateRef.current) {
+        onNavigateRef.current(pendingUrl);
+      } else if (typeof window !== "undefined") {
+        window.location.href = pendingUrl;
+      }
+    }
+  }, [pendingUrl]);
+  const cancelLeave = useCallback(() => {
+    setShowConfirm(false);
+    setPendingUrl(null);
+  }, []);
+  return {
+    showConfirm,
+    setShowConfirm,
+    pendingUrl,
+    confirmLeave,
+    cancelLeave
+  };
+}
+
+// src/hooks/useDismissGuard.ts
+import { useState as useState2, useCallback as useCallback2, useRef as useRef3 } from "react";
+function useDismissGuard({
+  isDirty,
+  enabled = true,
+  onDismiss
+}) {
+  const [showConfirm, setShowConfirm] = useState2(false);
+  const onDismissRef = useRef3(onDismiss);
+  onDismissRef.current = onDismiss;
+  const requestDismiss = useCallback2(() => {
+    if (enabled && isDirty) {
+      setShowConfirm(true);
+    } else {
+      onDismissRef.current?.();
+    }
+  }, [enabled, isDirty]);
+  const confirmDismiss = useCallback2(() => {
+    setShowConfirm(false);
+    onDismissRef.current?.();
+  }, []);
+  const cancelDismiss = useCallback2(() => {
+    setShowConfirm(false);
+  }, []);
+  const handleKeyDown = useCallback2(
+    (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
 import {
   EditorContent as TipTapEditorContent
@@ -241,7 +362,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -255,12 +376,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = useRef2(null);
-  const [mounted, setMounted] = useState(false);
+  const menuEl = useRef4(null);
+  const [mounted, setMounted] = useState3(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -362,13 +483,20 @@ var TemplateRenderer = ({
   }) });
 };
 
+// src/index.ts
+import {
+  DirtyTracker,
+  createDirtyTracker,
+  defaultIsEqual
+} from "@pixerate/editor";
+
 // src/spreadsheet/useSpreadsheetEditor.ts
-import { useState as useState2, useMemo as useMemo3, useCallback } from "react";
+import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3 } from "react";
 import {
   SpreadsheetController
 } from "@pixerate/editor";
 function useSpreadsheetEditor(options = {}) {
-  const [doc, setDoc] = useState2(() => ({
+  const [doc, setDoc] = useState4(() => ({
     id: options.document?.id || `sheet_${Date.now()}`,
     name: options.document?.name || "Sheet 1",
     columns: options.document?.columns || [],
@@ -377,10 +505,10 @@ function useSpreadsheetEditor(options = {}) {
     createdAt: options.document?.createdAt || Date.now(),
     updatedAt: options.document?.updatedAt || Date.now()
   }));
-  const [activeCell, setActiveCell] = useState2(null);
-  const [selectedRange, setSelectedRange] = useState2(null);
-  const [editingCell, setEditingCell] = useState2(null);
-  const [draftValue, setDraftValue] = useState2("");
+  const [activeCell, setActiveCell] = useState4(null);
+  const [selectedRange, setSelectedRange] = useState4(null);
+  const [editingCell, setEditingCell] = useState4(null);
+  const [draftValue, setDraftValue] = useState4("");
   const controller = useMemo3(() => {
     return new SpreadsheetController({
       ...options,
@@ -398,82 +526,82 @@ function useSpreadsheetEditor(options = {}) {
       }
     });
   }, []);
-  const setCellValue = useCallback((rowId, colId, raw) => {
+  const setCellValue = useCallback3((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = useCallback((row, col, extendSelection = false) => {
+  const selectCell = useCallback3((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = useCallback((range) => {
+  const selectRange = useCallback3((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = useCallback((row, col, initialVal) => {
+  const startEditing = useCallback3((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = useCallback((val) => {
+  const commitEditing = useCallback3((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = useCallback(() => {
+  const cancelEditing = useCallback3(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = useCallback((dir, extend = false) => {
+  const moveCursor = useCallback3((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = useCallback((index, config) => {
+  const insertColumn = useCallback3((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = useCallback((colId) => {
+  const deleteColumn = useCallback3((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = useCallback((index, config) => {
+  const insertRow = useCallback3((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = useCallback((rowId) => {
+  const deleteRow = useCallback3((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = useCallback((colId, width) => {
+  const setColumnWidth = useCallback3((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = useCallback((colId, customWidth) => {
+  const autoFitColumnWidth = useCallback3((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = useCallback((ds) => {
+  const registerDataSource = useCallback3((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = useCallback((id) => {
+  const setPrimaryDataSource = useCallback3((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = useCallback(() => {
+  const recalculateAll = useCallback3(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = useCallback(() => {
+  const undo = useCallback3(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = useCallback(() => {
+  const redo = useCallback3(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
@@ -526,7 +654,7 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef3, useState as useState3, useMemo as useMemo4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { useRef as useRef5, useState as useState5, useMemo as useMemo4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 import {
   indexToColName
 } from "@pixerate/editor";
@@ -541,11 +669,11 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = useRef3(null);
-  const [resizingColId, setResizingColId] = useState3(null);
-  const [hoveredColId, setHoveredColId] = useState3(null);
-  const [resizeStartX, setResizeStartX] = useState3(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState3(0);
+  const gridRef = useRef5(null);
+  const [resizingColId, setResizingColId] = useState5(null);
+  const [hoveredColId, setHoveredColId] = useState5(null);
+  const [resizeStartX, setResizeStartX] = useState5(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState5(0);
   const activeRawValue = useMemo4(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
@@ -558,19 +686,19 @@ var SpreadsheetEditor = ({
     const colName = indexToColName(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const handleCellClick = useCallback2((rIdx, cIdx, e) => {
+  const handleCellClick = useCallback4((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 = useCallback2((rIdx, cIdx) => {
+  const handleCellDblClick = useCallback4((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = useCallback2((e) => {
+  const handleKeyDown = useCallback4((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -634,7 +762,7 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -688,7 +816,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
-  const measureElementContentWidth = useCallback2((el, container) => {
+  const measureElementContentWidth = useCallback4((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -736,7 +864,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = useCallback2((colId, colIndex) => {
+  const autoFitColumn = useCallback4((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -773,12 +901,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = useCallback2((colId, colIndex, e) => {
+  const handleResizeDblClick = useCallback4((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = useCallback2((colId, colIndex, e) => {
+  const handleHeaderDblClick = useCallback4((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -963,10 +1091,15 @@ var SpreadsheetEditor = ({
 };
 export {
   BubbleMenu,
+  DirtyTracker,
   EditorContent,
   SpreadsheetEditor,
   TemplateRenderer,
+  createDirtyTracker,
+  defaultIsEqual,
+  useDismissGuard,
   useEditor2 as useEditor,
+  useNavigationGuard,
   usePromptEditor,
   useSpreadsheetEditor
 };