@pixerate/editor-svelte 0.15.2 → 0.16.0

package/src/image-editor/imageEditorState.svelte.ts

@@ -1,151 +0,0 @@
-import {
-  ImageEditorController,
-  type ImageEditorOptions,
-  type ImageEditorState,
-  type ImageEditorTool,
-  type CropBox,
-  type AspectRatio,
-  type ImageAdjustments,
-  type DepthMaskOptions,
-  type Annotation,
-  type CreateAnnotationPayload,
-  type ExportOptions,
-  type SerializedImageEditorState,
-  type ImagePoint,
-} from '@pixerate/editor';
-
-export function createReactiveImageEditor(options: ImageEditorOptions = {}) {
-  const controller = new ImageEditorController(options);
-  let state = $state<ImageEditorState>(controller.getState());
-  let historyTicks = $state<number>(0);
-
-  controller.subscribe((updated) => {
-    state = { ...updated };
-    historyTicks++;
-  });
-
-  return {
-    get controller() {
-      return controller;
-    },
-    get state() {
-      return state;
-    },
-    get canUndo() {
-      // depend on historyTicks for reactivity
-      void historyTicks;
-      return controller.canUndo;
-    },
-    get canRedo() {
-      void historyTicks;
-      return controller.canRedo;
-    },
-    setTool(tool: ImageEditorTool) {
-      controller.setTool(tool);
-    },
-    setCrop(crop: CropBox | null, addToHistory = true) {
-      controller.setCrop(crop, addToHistory);
-    },
-    applyCropPreset(ratio: AspectRatio) {
-      controller.applyCropPreset(ratio);
-    },
-    resetCrop() {
-      controller.resetCrop();
-    },
-    rotate(degrees: number) {
-      controller.rotate(degrees);
-    },
-    setRotation(degrees: number) {
-      controller.setRotation(degrees);
-    },
-    flipHorizontal() {
-      controller.flipHorizontal();
-    },
-    flipVertical() {
-      controller.flipVertical();
-    },
-    setAdjustments(partial: Partial<ImageAdjustments>, commitToHistory = true) {
-      controller.setAdjustments(partial, commitToHistory);
-    },
-    resetAdjustments() {
-      controller.resetAdjustments();
-    },
-    setDepthMask(partial: Partial<DepthMaskOptions>) {
-      controller.setDepthMask(partial);
-    },
-    resetDepthMask() {
-      controller.resetDepthMask();
-    },
-    addAnnotation(ann: CreateAnnotationPayload) {
-      return controller.addAnnotation(ann);
-    },
-    updateAnnotation(id: string, partial: Partial<Annotation>, commitToHistory = true) {
-      controller.updateAnnotation(id, partial, commitToHistory);
-    },
-    removeAnnotation(id: string) {
-      controller.removeAnnotation(id);
-    },
-    clearAnnotations() {
-      controller.clearAnnotations();
-    },
-    selectAnnotation(id: string | null) {
-      controller.selectAnnotation(id);
-    },
-    undo() {
-      return controller.undo();
-    },
-    redo() {
-      return controller.redo();
-    },
-    reset() {
-      controller.reset();
-    },
-    zoomIn(factor?: number) {
-      controller.zoomIn(factor);
-    },
-    zoomOut(factor?: number) {
-      controller.zoomOut(factor);
-    },
-    resetZoom() {
-      controller.resetZoom();
-    },
-    setZoom(zoom: number) {
-      controller.setZoom(zoom);
-    },
-    setPan(pan: ImagePoint) {
-      controller.setPan(pan);
-    },
-    setComparing(comparing: boolean) {
-      controller.setComparing(comparing);
-    },
-    loadImage(src: string | HTMLImageElement) {
-      return controller.loadImage(src);
-    },
-    toDataURL(opts?: ExportOptions) {
-      return controller.toDataURL(opts);
-    },
-    toBlob(opts?: ExportOptions) {
-      return controller.toBlob(opts);
-    },
-    toJSON() {
-      return controller.toJSON();
-    },
-    loadJSON(data: SerializedImageEditorState) {
-      controller.loadJSON(data);
-    },
-    renderMask(opts?: { useAnnotations?: boolean; useCrop?: boolean }) {
-      return controller.renderMask(opts);
-    },
-    toMaskDataURL(opts?: { useAnnotations?: boolean; useCrop?: boolean }) {
-      return controller.toMaskDataURL(opts);
-    },
-    applyInpaintedImage(newDataUrl: string) {
-      return controller.applyInpaintedImage(newDataUrl);
-    },
-    applyBackgroundRemovedImage(newDataUrl: string) {
-      return controller.applyBackgroundRemovedImage(newDataUrl);
-    },
-  };
-}
-
-export type ReactiveImageEditor = ReturnType<typeof createReactiveImageEditor>;

package/src/image-editor/index.d.ts

@@ -1,16 +0,0 @@
-import type { Component } from 'svelte';
-import type { ExportOptions, ImageEditorOptions } from '@pixerate/editor';
-import type { ReactiveImageEditor } from './imageEditorState.svelte';
-
-export interface ImageEditorProps {
-  editor?: ReactiveImageEditor;
-  src?: string;
-  class?: string;
-  style?: string;
-  onSave?: (dataUrl: string) => void;
-  exportOptions?: ExportOptions;
-}
-
-export declare const ImageEditor: Component<ImageEditorProps>;
-export declare function createReactiveImageEditor(options?: ImageEditorOptions): ReactiveImageEditor;
-export type { ReactiveImageEditor } from './imageEditorState.svelte';

package/src/image-editor/index.ts

@@ -1,2 +0,0 @@
-export { default as ImageEditor } from './ImageEditor.svelte';
-export * from './imageEditorState.svelte';

package/src/index.d.ts

@@ -1,249 +0,0 @@
-import type { Component } from "svelte";
-import type {
-  Editor,
-  Content,
-  Extensions,
-  EditorOptions,
-  FocusPosition,
-} from "@tiptap/core";
-import type {
-  Template,
-  TemplateVersion,
-  Token,
-  TokenType,
-  ColorGradient,
-  RichTextPresetOptions,
-  MarkdownOptions,
-} from "@pixerate/editor";
-
-export interface SvelteInitiateEditorOptions extends Partial<EditorOptions> {
-  richTextOptions?: RichTextPresetOptions;
-}
-
-export declare const initiateEditor: (
-  element?: HTMLElement,
-  content?: Content,
-  extensions?: Extensions,
-  options?: SvelteInitiateEditorOptions,
-) => Editor;
-
-export interface ReactiveEditorState {
-  editor: Editor | undefined;
-  content: string;
-  isEditable: boolean;
-}
-
-export declare function createReactiveEditor(
-  initialContent?: string,
-  extensions?: Extensions,
-  options?: Partial<EditorOptions>,
-): {
-  readonly current: Editor | undefined;
-  mount(element: HTMLElement): Editor;
-  destroy(): void;
-};
-
-export interface EditableTextNodeEditorProps {
-  class?: string;
-  editorClass?: string;
-  content?: Content;
-  showMenu?: boolean;
-  editable?: boolean;
-  editor?: Editor;
-  extensions?: Extensions;
-  onUpdate?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onCreate?: () => void;
-  placeholder?: string;
-  markdown?: boolean | MarkdownOptions;
-  richTextOptions?: RichTextPresetOptions;
-  autofocus?: FocusPosition | boolean;
-  image?: ImageOptions | boolean;
-  uploadImage?: (file: File) => Promise<string> | string;
-  onUploadError?: (error: Error, file: File) => void;
-}
-
-export interface BubbleMenuProps {
-  editor?: Editor;
-  class?: string;
-  children?: any;
-}
-
-export interface TemplateRendererProps {
-  content: string;
-  templates?: Template[];
-  templateColorMap?: Map<string, ColorGradient>;
-  resolve?: boolean;
-  class?: string;
-  onTemplateClick?: (templateName: string) => void;
-  onVariableClick?: (variableName: string) => void;
-}
-
-export declare const EditableTextNodeEditor: Component<EditableTextNodeEditorProps>;
-export declare const BubbleMenu: Component<BubbleMenuProps>;
-export declare const TemplateRenderer: Component<TemplateRendererProps>;
-
-export type {
-  Template,
-  TemplateVersion,
-  Token,
-  TokenType,
-  ColorGradient,
-  RichTextPresetOptions,
-};
-
-import type {
-  SpreadsheetController,
-  SpreadsheetControllerOptions,
-  SpreadsheetDocument,
-  SpreadsheetColumn,
-  SpreadsheetRow,
-  CellCoordinate,
-  CellRange,
-  CellData,
-  SpreadsheetDataSource,
-} from "@pixerate/editor";
-
-export interface SpreadsheetEditorProps {
-  sheetState: ReturnType<typeof createReactiveSpreadsheet>;
-  readonly?: boolean;
-  readOnly?: boolean;
-  showFormulaBar?: boolean;
-  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);
-  onAddColumnClick?: () => void;
-  onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
-  onColumnResize?: (colId: string, width: number) => void;
-}
-
-export interface FormulaBarProps {
-  sheetState: ReturnType<typeof createReactiveSpreadsheet>;
-  class?: string;
-}
-
-export declare const SpreadsheetEditor: Component<SpreadsheetEditorProps>;
-export declare const FormulaBar: Component<FormulaBarProps>;
-
-export declare function createReactiveSpreadsheet(
-  options?: SpreadsheetControllerOptions,
-): {
-  readonly document: SpreadsheetDocument;
-  readonly activeCell: CellCoordinate | null;
-  readonly selectedRange: CellRange | null;
-  readonly editingCell: CellCoordinate | null;
-  draftValue: string;
-  controller: SpreadsheetController;
-  getCell(rowId: string, colId: string): CellData;
-  setCellValue(rowId: string, colId: string, raw: string): void;
-  selectCell(row: number, col: number, extendSelection?: boolean): void;
-  selectRange(range: CellRange): void;
-  startEditing(row?: number, col?: number, initialVal?: string): void;
-  commitEditing(val?: string): void;
-  cancelEditing(): 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;
-  deleteRow(rowId: string): void;
-  setColumnWidth(colId: string, width: number): void;
-  loadDocument(document: SpreadsheetDocument): void;
-  syncWithDataSource(): void;
-  registerDataSource(ds: SpreadsheetDataSource): void;
-  setPrimaryDataSource(id: string | undefined): void;
-  recalculateAll(): void;
-  exportToTsv(): string;
-  importFromTsv(data: string): void;
-  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";
-
-export * from "./image-editor";

package/src/index.ts

@@ -1,89 +0,0 @@
-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 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;
-  editorClass?: string;
-  content?: Content;
-  showMenu?: boolean;
-  editable?: boolean;
-  editor?: Editor;
-  extensions?: Extensions;
-  onUpdate?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onCreate?: () => void;
-  placeholder?: string;
-  markdown?: boolean | MarkdownOptions;
-  richTextOptions?: RichTextPresetOptions;
-  autofocus?: FocusPosition | boolean;
-  image?: ImageOptions | boolean;
-  uploadImage?: (file: File) => Promise<string> | string;
-  onUploadError?: (error: Error, file: File) => void;
-}
-
-export interface BubbleMenuProps {
-  editor?: Editor;
-  class?: string;
-  children?: any;
-}
-
-export interface TemplateRendererProps {
-  content: string;
-  templates?: Template[];
-  templateColorMap?: Map<string, ColorGradient>;
-  resolve?: boolean;
-  class?: string;
-  onTemplateClick?: (templateName: string) => void;
-  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 type {
-  Template,
-  TemplateVersion,
-  Token,
-  TokenType,
-  ColorGradient,
-  RichTextPresetOptions,
-  ImageOptions,
-} from "@pixerate/editor";
-
-export * from "./spreadsheet";
-export * from "./image-editor";

package/src/navigationGuard.ts

@@ -1,82 +0,0 @@
-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 });
-    },
-  };
-}