@pixerate/editor-svelte 0.24.0 → 0.25.1

package/dist/tables/TableToolbar.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { DEFAULT_TABLE_TOOLBAR, type TableToolbarItem } from "@pixerate/editor";
+  import { createTableMenu, type SvelteTableMenu } from "./tableMenu.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /** Buttons to show (default `DEFAULT_TABLE_TOOLBAR`). */
+    items?: readonly TableToolbarItem[];
+    /** Render (with disabled buttons) when the selection is not in a table. Default `false`. */
+    showWhenOutside?: boolean;
+    class?: string;
+    buttonClass?: string;
+    activeButtonClass?: string;
+    separatorClass?: string;
+    /** Called after a button ran its action. */
+    onaction?: (item: TableToolbarItem) => void;
+  }
+
+  let {
+    editor = null,
+    items = DEFAULT_TABLE_TOOLBAR,
+    showWhenOutside = false,
+    class: className = "flex flex-wrap items-center gap-1 text-xs",
+    buttonClass = "rounded px-2 py-1 text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent",
+    activeButtonClass = "bg-primary/10 text-primary",
+    separatorClass = "mx-1 h-4 w-px bg-border",
+    onaction,
+  }: Props = $props();
+
+  let table = $state.raw<SvelteTableMenu>(createTableMenu(null));
+  $effect(() => {
+    const menu = createTableMenu(editor);
+    table = menu;
+    return () => menu.destroy();
+  });
+
+  // Recomputed whenever the table state changes.
+  let buttons = $derived.by(() => {
+    const state = table.current;
+    return items.map((item, index) => {
+      const status = table.check(item.action, item.params);
+      return {
+        item,
+        enabled: status === true,
+        title: status === true ? item.title : `${item.title}: ${status}`,
+        active: item.active ? item.active(state) : undefined,
+        separator: index > 0 && items[index - 1].group !== item.group,
+      };
+    });
+  });
+
+  const keepSelection = (event: MouseEvent) => event.preventDefault();
+
+  function run(item: TableToolbarItem) {
+    if (table.run(item.action, item.params)) onaction?.(item);
+  }
+</script>
+
+{#if editor && (table.current.inTable || showWhenOutside)}
+  <div class={className} role="toolbar" aria-label="Table" data-table-toolbar="">
+    {#each buttons as button (button.item.id)}
+      {#if button.separator}
+        <span class={separatorClass} aria-hidden="true"></span>
+      {/if}
+      <button
+        type="button"
+        data-action={button.item.id}
+        aria-label={button.item.title}
+        title={button.title}
+        aria-pressed={button.active === undefined ? undefined : button.active}
+        disabled={!button.enabled}
+        class={button.active ? `${buttonClass} ${activeButtonClass}` : buttonClass}
+        onmousedown={keepSelection}
+        onclick={() => run(button.item)}
+      >
+        {button.item.label}
+      </button>
+    {/each}
+  </div>
+{/if}

package/dist/tables/TableToolbar.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from "@tiptap/core";
+import { type TableToolbarItem } from "@pixerate/editor";
+interface Props {
+    editor?: Editor | null;
+    /** Buttons to show (default `DEFAULT_TABLE_TOOLBAR`). */
+    items?: readonly TableToolbarItem[];
+    /** Render (with disabled buttons) when the selection is not in a table. Default `false`. */
+    showWhenOutside?: boolean;
+    class?: string;
+    buttonClass?: string;
+    activeButtonClass?: string;
+    separatorClass?: string;
+    /** Called after a button ran its action. */
+    onaction?: (item: TableToolbarItem) => void;
+}
+declare const TableToolbar: import("svelte").Component<Props, {}, "">;
+type TableToolbar = ReturnType<typeof TableToolbar>;
+export default TableToolbar;
+//# sourceMappingURL=TableToolbar.svelte.d.ts.map

package/dist/tables/TableToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/TableToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,4FAA4F;IAC5F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C;AA8DH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/tables/index.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "svelte";
+import type TableToolbarComponent from "./TableToolbar.svelte";
+import type InsertTableGridComponent from "./InsertTableGrid.svelte";
+import type TableBubbleMenuComponent from "./TableBubbleMenu.svelte";
+export { default as TableToolbar } from "./TableToolbar.svelte";
+export { default as InsertTableGrid } from "./InsertTableGrid.svelte";
+export { default as TableBubbleMenu } from "./TableBubbleMenu.svelte";
+export * from "./tableMenu.svelte.js";
+export type TableToolbarProps = ComponentProps<typeof TableToolbarComponent>;
+export type InsertTableGridProps = ComponentProps<typeof InsertTableGridComponent>;
+export type TableBubbleMenuProps = ComponentProps<typeof TableBubbleMenuComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/tables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tables/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,uBAAuB,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/tables/index.js

@@ -0,0 +1,4 @@
+export { default as TableToolbar } from "./TableToolbar.svelte";
+export { default as InsertTableGrid } from "./InsertTableGrid.svelte";
+export { default as TableBubbleMenu } from "./TableBubbleMenu.svelte";
+export * from "./tableMenu.svelte.js";

package/dist/tables/tableMenu.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+import { type TableAction, type TableActionParams, type TableState } from "@pixerate/editor";
+export type { TableAction, TableActionParams, TableState } from "@pixerate/editor";
+export interface SvelteTableMenu {
+    /** The table state at the selection (replaced only when it changes). */
+    readonly current: TableState;
+    /** Runs a table action (focusing the editor); `false` when it cannot run. */
+    run(action: TableAction, params?: TableActionParams): boolean;
+    /** `true`, or why the action cannot run with these params. */
+    check(action: TableAction, params?: TableActionParams): true | string;
+    destroy(): void;
+}
+/**
+ * Reactive table state for Svelte 5 (the counterpart of React's
+ * `useTableMenu`): whether the selection is in a table, its size, header
+ * state, cell alignment/background and the enablement (with reasons) of every
+ * table action. Call `destroy()` when done (or create it inside a
+ * component's `$effect`).
+ */
+export declare function createTableMenu(editor: Editor | null | undefined): SvelteTableMenu;
+//# sourceMappingURL=tableMenu.svelte.d.ts.map

package/dist/tables/tableMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/tableMenu.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnF,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC;IAC7B,6EAA6E;IAC7E,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IAC9D,8DAA8D;IAC9D,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;IACtE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,eAAe,CAmBlF"}

package/dist/tables/tableMenu.svelte.js

@@ -0,0 +1,27 @@
+import { createTableStore, getTableActionState, runTableAction, } from "@pixerate/editor";
+/**
+ * Reactive table state for Svelte 5 (the counterpart of React's
+ * `useTableMenu`): whether the selection is in a table, its size, header
+ * state, cell alignment/background and the enablement (with reasons) of every
+ * table action. Call `destroy()` when done (or create it inside a
+ * component's `$effect`).
+ */
+export function createTableMenu(editor) {
+    const store = createTableStore(editor);
+    let current = $state.raw(store.getSnapshot());
+    const unsubscribe = store.subscribe(() => {
+        current = store.getSnapshot();
+    });
+    current = store.getSnapshot();
+    return {
+        get current() {
+            return current;
+        },
+        run: (action, params) => runTableAction(editor, action, params, { focus: true }),
+        check: (action, params) => getTableActionState(editor, action, params),
+        destroy() {
+            unsubscribe();
+            store.destroy();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -91,7 +91,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.25.0"
+    "@pixerate/editor": "0.26.1"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",