@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/tables/InsertTableGrid.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { createTableMenu, type SvelteTableMenu } from "./tableMenu.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /** Grid size offered (default 8 × 8). */
+    rows?: number;
+    cols?: number;
+    /** Insert with a header row (default `true`). */
+    withHeaderRow?: boolean;
+    class?: string;
+    cellClass?: string;
+    activeCellClass?: string;
+    /** Called after a table was inserted. */
+    oninsert?: (size: { rows: number; cols: number }) => void;
+  }
+
+  let {
+    editor = null,
+    rows = 8,
+    cols = 8,
+    withHeaderRow = true,
+    class: className = "inline-flex flex-col gap-1 rounded-md border border-border bg-background p-2 text-xs shadow-md",
+    cellClass = "h-4 w-4 rounded-sm border border-border bg-background disabled:opacity-40",
+    activeCellClass = "border-primary bg-primary/20",
+    oninsert,
+  }: Props = $props();
+
+  let table = $state.raw<SvelteTableMenu>(createTableMenu(null));
+  $effect(() => {
+    const menu = createTableMenu(editor);
+    table = menu;
+    return () => menu.destroy();
+  });
+
+  let hover = $state<{ rows: number; cols: number } | null>(null);
+  let status = $derived(table.current.actions.insertTable);
+  let disabled = $derived(!editor || !status.enabled);
+  let sizes = $derived(
+    Array.from({ length: rows * cols }, (_, i) => ({ rows: Math.floor(i / cols) + 1, cols: (i % cols) + 1 })),
+  );
+
+  const keepSelection = (event: MouseEvent) => event.preventDefault();
+
+  function insert(size: { rows: number; cols: number }) {
+    if (table.run("insertTable", { ...size, withHeaderRow })) oninsert?.(size);
+    hover = null;
+  }
+</script>
+
+<div
+  class={className}
+  role="group"
+  aria-label="Insert table"
+  title={disabled ? status.reason : undefined}
+  data-insert-table-grid=""
+  onmouseleave={() => (hover = null)}
+>
+  <div
+    role="grid"
+    aria-label="Table size"
+    style="display: grid; grid-template-columns: repeat({cols}, max-content); gap: 2px"
+  >
+    {#each sizes as size, i (i)}
+      {@const active = !!hover && size.rows <= hover.rows && size.cols <= hover.cols}
+      <button
+        type="button"
+        data-rows={size.rows}
+        data-cols={size.cols}
+        data-active={active}
+        aria-label="{size.rows} × {size.cols} table"
+        {disabled}
+        class={active ? `${cellClass} ${activeCellClass}` : cellClass}
+        onmousedown={keepSelection}
+        onmouseenter={() => (hover = size)}
+        onfocus={() => (hover = size)}
+        onclick={() => insert(size)}
+      ></button>
+    {/each}
+  </div>
+  <div aria-live="polite" data-testid="insert-table-size">
+    {disabled ? status.reason : hover ? `${hover.rows} × ${hover.cols}` : "Insert table"}
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    /** Grid size offered (default 8 × 8). */
+    rows?: number;
+    cols?: number;
+    /** Insert with a header row (default `true`). */
+    withHeaderRow?: boolean;
+    class?: string;
+    cellClass?: string;
+    activeCellClass?: string;
+    /** Called after a table was inserted. */
+    oninsert?: (size: {
+        rows: number;
+        cols: number;
+    }) => void;
+}
+declare const InsertTableGrid: import("svelte").Component<Props, {}, "">;
+type InsertTableGrid = ReturnType<typeof InsertTableGrid>;
+export default InsertTableGrid;
+//# sourceMappingURL=InsertTableGrid.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InsertTableGrid.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/InsertTableGrid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3D;AAqDH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/tables/TableBubbleMenu.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Editor } from "@tiptap/core";
+  import { shouldShowTableBubbleMenu, type TableToolbarItem } from "@pixerate/editor";
+  import BubbleMenu from "../BubbleMenu.svelte";
+  import TableToolbar from "./TableToolbar.svelte";
+
+  interface Props {
+    editor?: Editor;
+    class?: string;
+    pluginKey?: any;
+    updateDelay?: number;
+    tippyOptions?: Record<string, any>;
+    /** Buttons of the default toolbar. */
+    items?: readonly TableToolbarItem[];
+    /** Custom content (default: a `TableToolbar`). */
+    children?: Snippet;
+  }
+
+  let {
+    editor,
+    class: className = "flex h-fit w-fit items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md",
+    pluginKey = "tableBubbleMenu",
+    updateDelay = 250,
+    tippyOptions = {},
+    items,
+    children,
+  }: Props = $props();
+</script>
+
+<!--
+  A bubble menu that follows the selection while it is in a table (even a
+  collapsed cursor), with the table toolbar or your own children. It uses its
+  own plugin key (`tableBubbleMenu`), so it can be combined with the
+  formatting `BubbleMenu`.
+-->
+<BubbleMenu {editor} class={className} {pluginKey} {updateDelay} {tippyOptions} shouldShow={shouldShowTableBubbleMenu}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <TableToolbar {editor} {...items ? { items } : {}} />
+  {/if}
+</BubbleMenu>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { Editor } from "@tiptap/core";
+import { type TableToolbarItem } from "@pixerate/editor";
+interface Props {
+    editor?: Editor;
+    class?: string;
+    pluginKey?: any;
+    updateDelay?: number;
+    tippyOptions?: Record<string, any>;
+    /** Buttons of the default toolbar. */
+    items?: readonly TableToolbarItem[];
+    /** Custom content (default: a `TableToolbar`). */
+    children?: Snippet;
+}
+declare const TableBubbleMenu: import("svelte").Component<Props, {}, "">;
+type TableBubbleMenu = ReturnType<typeof TableBubbleMenu>;
+export default TableBubbleMenu;
+//# sourceMappingURL=TableBubbleMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/TableBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAA6B,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKlF,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+BH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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/dist/tokens/TokenSwatch.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props {
+    color: string;
+    class?: string;
+  }
+  let { color, class: className = '' }: Props = $props();
+</script>
+
+<span
+  data-token-swatch={color}
+  class="inline-block h-4 w-4 shrink-0 rounded border border-border {className}"
+  style="background: linear-gradient({color}, {color}), repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px"
+  aria-hidden="true"
+></span>

package/dist/tokens/TokenSwatch.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    color: string;
+    class?: string;
+}
+declare const TokenSwatch: import("svelte").Component<Props, {}, "">;
+type TokenSwatch = ReturnType<typeof TokenSwatch>;
+export default TokenSwatch;
+//# sourceMappingURL=TokenSwatch.svelte.d.ts.map

package/dist/tokens/TokenSwatch.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenSwatch.svelte.d.ts","sourceRoot":"","sources":["../../src/tokens/TokenSwatch.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}