@pixerate/editor-svelte 0.8.1 → 0.10.0

package/src/index.d.ts

@@ -1,5 +1,11 @@
 import type { Component } from "svelte";
-import type { Editor, Content, Extensions, EditorOptions, FocusPosition } from "@tiptap/core";
+import type {
+  Editor,
+  Content,
+  Extensions,
+  EditorOptions,
+  FocusPosition,
+} from "@tiptap/core";
 import type {
   Template,
   TemplateVersion,
@@ -96,8 +102,8 @@ import type {
   CellCoordinate,
   CellRange,
   CellData,
-  SpreadsheetDataSource
-} from '@pixerate/editor';
+  SpreadsheetDataSource,
+} from "@pixerate/editor";
 
 export interface SpreadsheetEditorProps {
   sheetState: ReturnType<typeof createReactiveSpreadsheet>;
@@ -107,8 +113,16 @@ export interface SpreadsheetEditorProps {
   class?: string;
   customCellRenderer?:
     | ((cell: CellData, col: SpreadsheetColumn, row: SpreadsheetRow) => any)
-    | ((args: { cell: CellData; col: SpreadsheetColumn; row: SpreadsheetRow }) => any)
-    | ((args: { row: SpreadsheetRow; col: SpreadsheetColumn; cell: CellData }) => any);
+    | ((args: {
+        cell: CellData;
+        col: SpreadsheetColumn;
+        row: SpreadsheetRow;
+      }) => any)
+    | ((args: {
+        row: SpreadsheetRow;
+        col: SpreadsheetColumn;
+        cell: CellData;
+      }) => any);
   onAddColumnClick?: () => void;
   onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
   onColumnResize?: (colId: string, width: number) => void;
@@ -122,7 +136,9 @@ export interface FormulaBarProps {
 export declare const SpreadsheetEditor: Component<SpreadsheetEditorProps>;
 export declare const FormulaBar: Component<FormulaBarProps>;
 
-export declare function createReactiveSpreadsheet(options?: SpreadsheetControllerOptions): {
+export declare function createReactiveSpreadsheet(
+  options?: SpreadsheetControllerOptions,
+): {
   readonly document: SpreadsheetDocument;
   readonly activeCell: CellCoordinate | null;
   readonly selectedRange: CellRange | null;
@@ -136,7 +152,7 @@ export declare function createReactiveSpreadsheet(options?: SpreadsheetControlle
   startEditing(row?: number, col?: number, initialVal?: string): void;
   commitEditing(val?: string): void;
   cancelEditing(): void;
-  moveCursor(dir: 'up' | 'down' | 'left' | 'right', extend?: boolean): void;
+  moveCursor(dir: "up" | "down" | "left" | "right", extend?: boolean): void;
   insertColumn(index: number, config?: Partial<SpreadsheetColumn>): void;
   deleteColumn(colId: string): void;
   insertRow(index: number, config?: Partial<SpreadsheetRow>): void;
@@ -152,3 +168,80 @@ export declare function createReactiveSpreadsheet(options?: SpreadsheetControlle
   undo(): void;
   redo(): void;
 };
+
+export interface NavigationGuardOptions {
+  isDirty: boolean;
+  enabled?: boolean;
+  onBlocked?: (url: string) => void;
+}
+
+export interface NavigationGuardActionReturn {
+  update(newOptions: NavigationGuardOptions): void;
+  destroy(): void;
+}
+
+export declare function navigationGuard(
+  node: HTMLElement,
+  options: NavigationGuardOptions,
+): NavigationGuardActionReturn;
+
+export interface CreateNavigationGuardOptions {
+  isDirty: boolean | (() => boolean);
+  enabled?: boolean | (() => boolean);
+  onNavigate?: (url: string) => void;
+  onBlocked?: (url: string) => void;
+}
+
+export interface NavigationGuardManager {
+  readonly showConfirm: boolean;
+  setShowConfirm(show: boolean): void;
+  readonly pendingUrl: string | null;
+  intercept(url: string): boolean;
+  confirmLeave(): void;
+  cancelLeave(): void;
+  destroy(): void;
+}
+
+export declare function createNavigationGuard(
+  options: CreateNavigationGuardOptions,
+): NavigationGuardManager;
+
+export interface SvelteHistory extends HistoryState {
+  readonly manager: HistoryManager;
+  undo(): boolean;
+  redo(): boolean;
+  clear(): void;
+  execute(command: Command): void;
+  executeMerged(command: Command, options?: { windowMs?: number }): void;
+  batch(name: string, fn: () => void): void;
+  subscribe(run: (value: HistoryState) => void): () => void;
+}
+
+export declare function createHistory(
+  managerOrOptions?: HistoryManager | HistoryManagerOptions,
+): SvelteHistory;
+
+export interface HistoryShortcutsOptions {
+  enabled?: boolean;
+  target?: Window | HTMLElement | null;
+  ignoreEditableElements?: boolean;
+}
+
+export declare function createHistoryShortcuts(
+  manager: HistoryManager,
+  options?: HistoryShortcutsOptions,
+): { destroy: () => void };
+
+export {
+  DirtyTracker,
+  createDirtyTracker,
+  defaultIsEqual,
+  HistoryManager,
+  createHistoryManager,
+} from "@pixerate/editor";
+export type {
+  DirtyTrackerOptions,
+  Command,
+  HistoryState,
+  HistoryManagerOptions,
+} from "@pixerate/editor";

package/src/index.ts

@@ -1,12 +1,35 @@
 import type { Component } from "svelte";
 import type { Editor, Content, Extensions, FocusPosition } from "@tiptap/core";
-import type { Template, ColorGradient, RichTextPresetOptions, MarkdownOptions, ImageOptions } from "@pixerate/editor";
+import type {
+  Template,
+  ColorGradient,
+  RichTextPresetOptions,
+  MarkdownOptions,
+  ImageOptions,
+} from "@pixerate/editor";
 
 import EditableTextNodeEditorComponent from "./EditableTextNodeEditor.svelte";
 import BubbleMenuComponent from "./BubbleMenu.svelte";
 import TemplateRendererComponent from "./TemplateRenderer.svelte";
 
 export * from "./editor.svelte";
+export * from "./navigationGuard";
+export * from "./createNavigationGuard.svelte";
+export * from "./history";
+
+export {
+  DirtyTracker,
+  createDirtyTracker,
+  defaultIsEqual,
+  HistoryManager,
+  createHistoryManager,
+} from "@pixerate/editor";
+export type {
+  DirtyTrackerOptions,
+  Command,
+  HistoryState,
+  HistoryManagerOptions,
+} from "@pixerate/editor";
 
 export interface EditableTextNodeEditorProps {
   class?: string;
@@ -45,9 +68,12 @@ export interface TemplateRendererProps {
   onVariableClick?: (variableName: string) => void;
 }
 
-export const EditableTextNodeEditor = EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;
-export const BubbleMenu = BubbleMenuComponent as unknown as Component<BubbleMenuProps>;
-export const TemplateRenderer = TemplateRendererComponent as unknown as Component<TemplateRendererProps>;
+export const EditableTextNodeEditor =
+  EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;
+export const BubbleMenu =
+  BubbleMenuComponent as unknown as Component<BubbleMenuProps>;
+export const TemplateRenderer =
+  TemplateRendererComponent as unknown as Component<TemplateRendererProps>;
 
 export type {
   Template,

package/src/navigationGuard.ts

@@ -0,0 +1,82 @@
+export interface NavigationGuardOptions {
+  /** Whether the current form or editor has unsaved changes */
+  isDirty: boolean;
+  /** Whether guarding is enabled (defaults to true) */
+  enabled?: boolean;
+  /** Callback fired when an internal navigation attempt is intercepted */
+  onBlocked?: (url: string) => void;
+}
+
+export interface NavigationGuardActionReturn {
+  update(newOptions: NavigationGuardOptions): void;
+  destroy(): void;
+}
+
+/**
+ * Svelte action to guard against navigation when there are unsaved changes.
+ * Attaches beforeunload to window and intercepts internal anchor clicks on the element.
+ *
+ * Usage:
+ * <div use:navigationGuard={{ isDirty, onBlocked: (url) => { pendingUrl = url; showConfirm = true; } }}>
+ */
+export function navigationGuard(
+  node: HTMLElement,
+  options: NavigationGuardOptions,
+): NavigationGuardActionReturn {
+  let isDirty = options.isDirty;
+  let enabled = options.enabled ?? true;
+  let onBlocked = options.onBlocked;
+
+  function handleBeforeUnload(e: BeforeUnloadEvent) {
+    if (!enabled || !isDirty) return;
+    e.preventDefault();
+    e.returnValue = "";
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (!enabled || !isDirty) return;
+
+    const target = e.target as HTMLElement | null;
+    const anchor = target?.closest?.("a");
+    if (!anchor) return;
+    if (anchor.target === "_blank") return;
+
+    // Check if link is internal
+    if (typeof window !== "undefined") {
+      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;
+    onBlocked?.(href);
+  }
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+  }
+  node.addEventListener("click", handleClick, { capture: true });
+
+  return {
+    update(newOptions: NavigationGuardOptions) {
+      isDirty = newOptions.isDirty;
+      enabled = newOptions.enabled ?? true;
+      onBlocked = newOptions.onBlocked;
+    },
+    destroy() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
+      }
+      node.removeEventListener("click", handleClick, { capture: true });
+    },
+  };
+}