@pixerate/editor-svelte 0.18.0 → 0.20.0

package/dist/spreadsheet/index.js

@@ -1,3 +1,7 @@
 export { default as SpreadsheetEditor } from './SpreadsheetEditor.svelte';
 export { default as FormulaBar } from './FormulaBar.svelte';
+export { default as FormulaHints } from './FormulaHints.svelte';
 export * from './spreadsheet.svelte.js';
+export { default as SpreadsheetContextMenu } from './SpreadsheetContextMenu.svelte';
+export { default as SpreadsheetGroupRow } from './SpreadsheetGroupRow.svelte';
+export * from './tableInteractions.js';

package/dist/spreadsheet/spreadsheet.svelte.d.ts

@@ -1,9 +1,47 @@
-import { SpreadsheetController, type SpreadsheetControllerOptions, type SpreadsheetDocument, type CellCoordinate, type CellRange, type CellData, type SpreadsheetColumn, type SpreadsheetRow, type SpreadsheetDataSource } from '@pixerate/editor';
+import { SpreadsheetController, type SpreadsheetControllerOptions, type SpreadsheetDocument, type CellCoordinate, type CellRange, type CellData, type SpreadsheetColumn, type SpreadsheetRow, type SpreadsheetDataSource } from '@pixerate/editor/spreadsheet';
 export declare function createReactiveSpreadsheet(options?: SpreadsheetControllerOptions): {
-    readonly document: SpreadsheetDocument;
-    readonly activeCell: CellCoordinate | null;
-    readonly selectedRange: CellRange | null;
-    readonly editingCell: CellCoordinate | null;
+    sortRows: (keys: import("@pixerate/editor").SortKey[], options?: {
+        range?: CellRange | null;
+    }) => boolean;
+    getFilterState: () => import("@pixerate/editor").SpreadsheetFilterState;
+    setFilterRules: (rules: import("@pixerate/editor").NewFilterRule[]) => void;
+    addFilterRule: (rule: import("@pixerate/editor").NewFilterRule) => string;
+    updateFilterRule: (ruleId: string, changes: Partial<Omit<import("@pixerate/editor").FilterRule, "id">>) => void;
+    removeFilterRule: (ruleId: string) => void;
+    clearFilters: () => void;
+    setFiltersEnabled: (enabled: boolean) => void;
+    toggleFilters: () => void;
+    setHeaderRowCount: (count: number) => void;
+    setFooterRowCount: (count: number) => void;
+    setHeaderColumnCount: (count: number) => void;
+    setFrozenRowCount: (count: number) => void;
+    setFrozenColumnCount: (count: number) => void;
+    hideRows: (indices: number[]) => void;
+    unhideRows: (indices: number[]) => void;
+    hideColumns: (indices: number[]) => void;
+    unhideColumns: (indices: number[]) => void;
+    unhideAll: () => void;
+    getMerges: () => CellRange[];
+    getMergeAt: (row: number, col: number) => CellRange | null;
+    mergeCells: (range?: CellRange | null) => boolean;
+    unmergeCells: (range?: CellRange | null) => boolean;
+    autofill: (source: CellRange, target: CellRange) => boolean;
+    groupRowsBy: (colId: string, summaries?: import("@pixerate/editor").GroupSummary[]) => void;
+    ungroupRows: () => void;
+    setGroupSummary: (colId: string, aggregate: import("@pixerate/editor").GroupAggregate | null) => void;
+    setGroupCollapsed: (key: string, collapsed: boolean) => void;
+    toggleGroupCollapsed: (key: string) => void;
+    getGroups: () => import("@pixerate/editor").SpreadsheetRowGroup[];
+    transposeRange: (range?: CellRange | null) => boolean;
+    exportToCsv: (options?: import("@pixerate/editor").CsvExportOptions) => string;
+    importFromCsv: (csv: string, options?: import("@pixerate/editor").CsvImportOptions) => void;
+    copyToClipboardData: (range?: CellRange | null) => import("@pixerate/editor").SpreadsheetClipboardData;
+    pasteClipboardData: (source: import("@pixerate/editor").SpreadsheetClipboardSource, target?: import("@pixerate/editor").CellPosition) => boolean;
+    document: SpreadsheetDocument;
+    activeCell: CellCoordinate | null;
+    selectedRange: CellRange | null;
+    editingCell: CellCoordinate | null;
+    viewModel: import("@pixerate/editor").SpreadsheetViewModel;
     draftValue: string;
     controller: SpreadsheetController;
     getCell(rowId: string, colId: string): CellData;

package/dist/spreadsheet/spreadsheet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;;;;gBAsD5D,MAAM;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;wBAMxC,MAAM;;oBAWV,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;EAa7B"}
+{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAErB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;aAmLoikB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA/GjmkB,MAAM;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;wBAMxC,MAAM;;oBAWV,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;EAc7B"}

package/dist/spreadsheet/spreadsheet.svelte.js

@@ -1,4 +1,4 @@
-import { SpreadsheetController } from '@pixerate/editor';
+import { SpreadsheetController, bindSpreadsheetTableActions } from '@pixerate/editor/spreadsheet';
 export function createReactiveSpreadsheet(options = {}) {
     let doc = $state({
         id: options.document?.id || `sheet_${Date.now()}`,
@@ -33,6 +33,16 @@ export function createReactiveSpreadsheet(options = {}) {
     doc = { ...controller.document };
     activeCell = controller.activeCell;
     selectedRange = controller.selectedRange;
+    // What to render: visible rows (with group headers) and columns, frozen
+    // offsets and merged-cell spans. Recomputed whenever the document changes.
+    const viewModel = $derived.by(() => {
+        void doc;
+        return controller.getViewModel();
+    });
+    // Table operations (sort, filters, freeze, hide, merge, autofill, categories,
+    // transpose, CSV, clipboard). The controller reports their changes through
+    // onDocumentChange / onSelectionChange, which update the state above.
+    const tableActions = bindSpreadsheetTableActions(controller);
     return {
         get document() {
             return doc;
@@ -46,6 +56,9 @@ export function createReactiveSpreadsheet(options = {}) {
         get editingCell() {
             return editingCell;
         },
+        get viewModel() {
+            return viewModel;
+        },
         get draftValue() {
             return draftValue;
         },
@@ -155,6 +168,7 @@ export function createReactiveSpreadsheet(options = {}) {
         redo() {
             controller.redo();
             doc = { ...controller.document };
-        }
+        },
+        ...tableActions
     };
 }

package/dist/spreadsheet/tableInteractions.d.ts

@@ -0,0 +1,28 @@
+import type { SpreadsheetClipboardData, SpreadsheetClipboardSource, CellRange } from '@pixerate/editor/spreadsheet';
+/** The parts of the reactive spreadsheet the clipboard handlers need. */
+export interface SpreadsheetClipboardTarget {
+    readonly editingCell: unknown;
+    readonly selectedRange: CellRange | null;
+    copyToClipboardData(range?: CellRange | null): SpreadsheetClipboardData;
+    pasteClipboardData(source: SpreadsheetClipboardSource): boolean;
+    exportToTsv(range?: CellRange | null): string;
+}
+/**
+ * Copy and paste for the grid. Copy writes TSV, an HTML table and the
+ * lossless `application/x.pixerate.spreadsheet+json` format; paste prefers
+ * that format, then HTML, then TSV.
+ *
+ * The listeners are on `document`: with no text selection the browser fires
+ * `copy`/`paste` at `<body>`, not at the focused grid. Text inputs inside the
+ * grid keep native copy/paste. Call `destroy()` to remove the listeners.
+ */
+export declare function attachSpreadsheetClipboard(getGrid: () => HTMLElement | null, sheet: SpreadsheetClipboardTarget, isReadOnly: () => boolean): {
+    /**
+     * Call on Mod+C (without preventing default). The browser normally
+     * follows with a `copy` event; where it doesn't (no selection in some
+     * browsers), the selection is written as plain TSV instead.
+     */
+    copyShortcutFallback(): void;
+    destroy(): void;
+};
+//# sourceMappingURL=tableInteractions.d.ts.map

package/dist/spreadsheet/tableInteractions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableInteractions.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/tableInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEpH,yEAAyE;AACzE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IACzC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,wBAAwB,CAAC;IACxE,kBAAkB,CAAC,MAAM,EAAE,0BAA0B,GAAG,OAAO,CAAC;IAChE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;CAC/C;AAUD;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,MAAM,WAAW,GAAG,IAAI,EACjC,KAAK,EAAE,0BAA0B,EACjC,UAAU,EAAE,MAAM,OAAO;IAwBvB;;;;OAIG;;;EAaN"}

package/dist/spreadsheet/tableInteractions.js

@@ -0,0 +1,61 @@
+/** True when focus is in the grid itself, not in a text input (cell editor, formula bar). */
+function gridHasFocus(grid) {
+    if (!grid || typeof document === 'undefined')
+        return false;
+    const active = document.activeElement;
+    if (!active || !grid.contains(active))
+        return false;
+    return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
+}
+/**
+ * Copy and paste for the grid. Copy writes TSV, an HTML table and the
+ * lossless `application/x.pixerate.spreadsheet+json` format; paste prefers
+ * that format, then HTML, then TSV.
+ *
+ * The listeners are on `document`: with no text selection the browser fires
+ * `copy`/`paste` at `<body>`, not at the focused grid. Text inputs inside the
+ * grid keep native copy/paste. Call `destroy()` to remove the listeners.
+ */
+export function attachSpreadsheetClipboard(getGrid, sheet, isReadOnly) {
+    // Set when a copy event wrote the selection, so the keyboard fallback is skipped.
+    let copied = false;
+    const handleCopy = (e) => {
+        if (!gridHasFocus(getGrid()) || sheet.editingCell || !e.clipboardData || !sheet.selectedRange)
+            return;
+        for (const [type, data] of Object.entries(sheet.copyToClipboardData(sheet.selectedRange))) {
+            e.clipboardData.setData(type, data);
+        }
+        copied = true;
+        e.preventDefault();
+    };
+    const handlePaste = (e) => {
+        if (isReadOnly() || !gridHasFocus(getGrid()) || sheet.editingCell || !e.clipboardData)
+            return;
+        if (sheet.pasteClipboardData(e.clipboardData))
+            e.preventDefault();
+    };
+    if (typeof document !== 'undefined') {
+        document.addEventListener('copy', handleCopy);
+        document.addEventListener('paste', handlePaste);
+    }
+    return {
+        /**
+         * Call on Mod+C (without preventing default). The browser normally
+         * follows with a `copy` event; where it doesn't (no selection in some
+         * browsers), the selection is written as plain TSV instead.
+         */
+        copyShortcutFallback() {
+            copied = false;
+            setTimeout(() => {
+                if (!copied)
+                    navigator.clipboard?.writeText(sheet.exportToTsv(sheet.selectedRange));
+            }, 0);
+        },
+        destroy() {
+            if (typeof document === 'undefined')
+                return;
+            document.removeEventListener('copy', handleCopy);
+            document.removeEventListener('paste', handlePaste);
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -18,6 +18,11 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./spreadsheet": {
+      "types": "./dist/spreadsheet/index.d.ts",
+      "svelte": "./dist/spreadsheet/index.js",
+      "default": "./dist/spreadsheet/index.js"
+    },
     "./canvas": {
       "types": "./dist/canvas/index.d.ts",
       "svelte": "./dist/canvas/index.js",
@@ -32,6 +37,9 @@
   },
   "typesVersions": {
     "*": {
+      "spreadsheet": [
+        "./dist/spreadsheet/index.d.ts"
+      ],
       "canvas": [
         "./dist/canvas/index.d.ts"
       ],
@@ -48,24 +56,28 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.19.0"
+    "@pixerate/editor": "0.21.0"
   },
   "peerDependencies": {
+    "@dagrejs/dagre": "^1.1.4",
     "@tiptap/core": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@xyflow/svelte": "^1.6.0",
     "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
+    "@dagrejs/dagre": {
+      "optional": true
+    },
     "@xyflow/svelte": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@dagrejs/dagre": "^1.1.4",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tiptap/core": "^2.11.5",