@pixerate/editor-svelte 0.8.0 → 0.9.0

package/src/index.ts

@@ -1,12 +1,27 @@
 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 {
+  DirtyTracker,
+  createDirtyTracker,
+  defaultIsEqual,
+} from "@pixerate/editor";
+export type { DirtyTrackerOptions } from "@pixerate/editor";
 
 export interface EditableTextNodeEditorProps {
   class?: string;
@@ -26,6 +41,7 @@ export interface EditableTextNodeEditorProps {
   autofocus?: FocusPosition | boolean;
   image?: ImageOptions | boolean;
   uploadImage?: (file: File) => Promise<string> | string;
+  onUploadError?: (error: Error, file: File) => void;
 }
 
 export interface BubbleMenuProps {
@@ -44,9 +60,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 });
+    },
+  };
+}