@jant/core 0.6.14 → 0.6.15

package/src/client/tiptap/__tests__/table-controls.test.ts

@@ -0,0 +1,263 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Editor, type JSONContent } from "@tiptap/core";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { TableControls } from "../table-controls.js";
+import { DEFAULT_TABLE_CONTROL_LABELS } from "../table-control-labels.js";
+
+const editors: Editor[] = [];
+
+function requireElement<T extends globalThis.Element>(
+  element: T | null,
+  message: string,
+): T {
+  if (!element) throw new Error(message);
+  return element;
+}
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+  const editor = new Editor({
+    element,
+    extensions: [
+      ...createMarkdownContentExtensions(),
+      TableControls.configure({ labels: DEFAULT_TABLE_CONTROL_LABELS }),
+    ],
+    content: "<p></p>",
+  });
+  vi.spyOn(editor.view, "coordsAtPos").mockImplementation(() => ({
+    left: 80,
+    right: 100,
+    top: 120,
+    bottom: 140,
+  }));
+  editors.push(editor);
+  return editor;
+}
+
+function tableJson(editor: Editor): JSONContent {
+  const table = editor.getJSON().content?.find((node) => node.type === "table");
+  if (!table) throw new Error("expected table JSON");
+  return table;
+}
+
+function tableDimensions(editor: Editor): { rows: number; columns: number } {
+  const table = tableJson(editor);
+  const rows = table.content ?? [];
+  return {
+    rows: rows.length,
+    columns: rows[0]?.content?.length ?? 0,
+  };
+}
+
+function cursorPositionInRow(editor: Editor, targetRow: number): number {
+  let row = -1;
+  let position: number | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name === "tableRow") row += 1;
+    if (
+      position === null &&
+      row === targetRow &&
+      (node.type.name === "tableCell" || node.type.name === "tableHeader")
+    ) {
+      position = pos + 2;
+      return false;
+    }
+    return position === null;
+  });
+  if (position === null) throw new Error(`expected row ${targetRow}`);
+  return position;
+}
+
+async function focusTable(editor: Editor, rows = 3, columns = 3) {
+  editor.commands.focus();
+  editor.commands.insertTable({
+    rows,
+    cols: columns,
+    withHeaderRow: true,
+  });
+  await vi.waitFor(() => {
+    expect(
+      document.querySelector<HTMLElement>(".tiptap-table-controls")?.style
+        .display,
+    ).toBe("flex");
+  });
+}
+
+function clickButton(label: string): HTMLButtonElement {
+  const button = requireElement(
+    document.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`),
+    `expected ${label} button`,
+  );
+  button.dispatchEvent(
+    new globalThis.MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      detail: 1,
+    }),
+  );
+  return button;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("TableControls", () => {
+  it("appears only while the focused selection is inside a table", async () => {
+    const editor = createEditor();
+    const toolbar = requireElement(
+      document.querySelector<HTMLElement>(".tiptap-table-controls"),
+      "expected table toolbar",
+    );
+    expect(toolbar.style.display).toBe("none");
+
+    await focusTable(editor);
+    expect(toolbar.style.display).toBe("flex");
+
+    editor.commands.setTextSelection(editor.state.doc.content.size - 1);
+    await vi.waitFor(() => expect(toolbar.style.display).toBe("none"));
+  });
+
+  it("adds rows and columns without losing the active table selection", async () => {
+    const editor = createEditor();
+    await focusTable(editor);
+    const selectionBefore = editor.state.selection.from;
+    const addColumn = requireElement(
+      document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Add column after"]',
+      ),
+      "expected add-column button",
+    );
+    const pointerDown = new globalThis.MouseEvent("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    addColumn.dispatchEvent(pointerDown);
+    expect(pointerDown.defaultPrevented).toBe(true);
+    expect(editor.state.selection.from).toBe(selectionBefore);
+
+    addColumn.dispatchEvent(
+      new globalThis.MouseEvent("click", { bubbles: true, detail: 1 }),
+    );
+    expect(tableDimensions(editor)).toEqual({ rows: 3, columns: 4 });
+    clickButton("Add row below");
+    expect(tableDimensions(editor)).toEqual({ rows: 4, columns: 4 });
+  });
+
+  it("offers complete structural actions and protects the last row and column", async () => {
+    const editor = createEditor();
+    await focusTable(editor, 2, 2);
+
+    clickButton("Table options");
+    expect(
+      document.querySelector<HTMLElement>(".tiptap-table-options")?.hidden,
+    ).toBe(false);
+    clickButton("Add row above");
+    expect(tableDimensions(editor)).toEqual({ rows: 3, columns: 2 });
+
+    clickButton("Table options");
+    clickButton("Delete row");
+    clickButton("Table options");
+    clickButton("Delete row");
+    expect(tableDimensions(editor)).toEqual({ rows: 1, columns: 2 });
+
+    editor.commands.setTextSelection(cursorPositionInRow(editor, 0));
+    clickButton("Table options");
+    expect(
+      document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Delete row"]',
+      )?.disabled,
+    ).toBe(true);
+    expect(
+      document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Delete column"]',
+      )?.disabled,
+    ).toBe(false);
+    clickButton("Delete column");
+    expect(tableDimensions(editor)).toEqual({ rows: 1, columns: 1 });
+
+    clickButton("Table options");
+    expect(
+      document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Delete column"]',
+      )?.disabled,
+    ).toBe(true);
+  });
+
+  it("toggles the first header row even when the caret is in a later row", async () => {
+    const editor = createEditor();
+    await focusTable(editor, 3, 2);
+    editor.commands.setTextSelection(cursorPositionInRow(editor, 1));
+
+    clickButton("Table options");
+    clickButton("Toggle header row");
+    let rows = tableJson(editor).content ?? [];
+    expect(rows[0]?.content?.map((cell) => cell.type)).toEqual([
+      "tableCell",
+      "tableCell",
+    ]);
+    expect(rows[1]?.content?.[0]?.type).toBe("tableCell");
+
+    clickButton("Table options");
+    clickButton("Toggle header row");
+    rows = tableJson(editor).content ?? [];
+    expect(rows[0]?.content?.map((cell) => cell.type)).toEqual([
+      "tableHeader",
+      "tableHeader",
+    ]);
+  });
+
+  it("supports keyboard entry and Escape focus restoration", async () => {
+    const editor = createEditor();
+    await focusTable(editor);
+    const shortcut = new globalThis.KeyboardEvent("keydown", {
+      key: "F10",
+      altKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    editor.view.dom.dispatchEvent(shortcut);
+    expect(shortcut.defaultPrevented).toBe(true);
+    expect(document.activeElement?.getAttribute("aria-label")).toBe(
+      "Add row below",
+    );
+
+    document.activeElement?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    expect(editor.view.hasFocus()).toBe(true);
+  });
+
+  it("dismisses options outside the editor and removes floating DOM on destroy", async () => {
+    const editor = createEditor();
+    await focusTable(editor);
+    clickButton("Table options");
+    requireElement(
+      editor.view.dom.querySelector<HTMLElement>("td, th"),
+      "expected table cell",
+    ).dispatchEvent(new globalThis.MouseEvent("mousedown", { bubbles: true }));
+    expect(
+      document.querySelector<HTMLElement>(".tiptap-table-options")?.hidden,
+    ).toBe(true);
+
+    clickButton("Table options");
+    document.body.dispatchEvent(
+      new globalThis.MouseEvent("mousedown", { bubbles: true }),
+    );
+    expect(
+      document.querySelector<HTMLElement>(".tiptap-table-options")?.hidden,
+    ).toBe(true);
+
+    editor.destroy();
+    expect(document.querySelector(".tiptap-table-controls")).toBeNull();
+  });
+});

package/src/client/tiptap/__tests__/table-size-picker.test.ts

@@ -0,0 +1,179 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Editor, type JSONContent } from "@tiptap/core";
+import { createEditorExtensions } from "../extensions.js";
+import { getSlashCommands } from "../slash-commands.js";
+import { DEFAULT_TABLE_CONTROL_LABELS } from "../table-control-labels.js";
+
+const editors: Editor[] = [];
+
+function requireElement<T extends globalThis.Element>(
+  element: T | null,
+  message: string,
+): T {
+  if (!element) throw new Error(message);
+  return element;
+}
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+  const editor = new Editor({
+    element,
+    extensions: createEditorExtensions({
+      toolbarMode: "compose",
+      tableControlLabels: DEFAULT_TABLE_CONTROL_LABELS,
+    }),
+    content: "<p>/table</p>",
+  });
+  vi.spyOn(editor.view, "coordsAtPos").mockImplementation(() => ({
+    left: 80,
+    right: 100,
+    top: 120,
+    bottom: 140,
+  }));
+  editor.commands.setTextSelection(7);
+  editors.push(editor);
+  return editor;
+}
+
+function openPicker(editor: Editor): HTMLElement {
+  const tableCommand = getSlashCommands(editor).find(
+    (item) => item.label === "Table",
+  );
+  if (!tableCommand) throw new Error("expected Table slash command");
+  tableCommand.command(editor, { from: 1, to: 7 });
+  return requireElement(
+    document.querySelector<HTMLElement>(".tiptap-table-size-picker"),
+    "expected table size picker",
+  );
+}
+
+function tableJson(editor: Editor): JSONContent | undefined {
+  return editor.getJSON().content?.find((node) => node.type === "table");
+}
+
+function tableDimensions(editor: Editor): { rows: number; columns: number } {
+  const rows = tableJson(editor)?.content ?? [];
+  return { rows: rows.length, columns: rows[0]?.content?.length ?? 0 };
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("table size picker", () => {
+  it("opens at 3 by 3 without inserting a table immediately", () => {
+    const editor = createEditor();
+    const picker = openPicker(editor);
+
+    expect(editor.getText()).toBe("");
+    expect(tableJson(editor)).toBeUndefined();
+    expect(picker.getAttribute("aria-label")).toContain("Insert 3 by 3 table");
+    expect(
+      picker.querySelectorAll(".tiptap-table-size-cell.is-selected"),
+    ).toHaveLength(9);
+    expect(
+      picker.querySelector<HTMLButtonElement>(
+        '.tiptap-table-size-cell[data-row="3"][data-column="3"]',
+      )?.tabIndex,
+    ).toBe(0);
+  });
+
+  it("inserts the pointer-selected dimensions with a header row", () => {
+    const editor = createEditor();
+    const picker = openPicker(editor);
+    const target = requireElement(
+      picker.querySelector<HTMLButtonElement>(
+        '.tiptap-table-size-cell[data-row="4"][data-column="5"]',
+      ),
+      "expected 4 by 5 option",
+    );
+    target.dispatchEvent(
+      new globalThis.PointerEvent("pointerenter", { bubbles: true }),
+    );
+    target.click();
+
+    expect(tableDimensions(editor)).toEqual({ rows: 4, columns: 5 });
+    expect(tableJson(editor)?.content?.[0]?.content?.[0]?.type).toBe(
+      "tableHeader",
+    );
+    expect(document.querySelector(".tiptap-table-size-picker")).toBeNull();
+  });
+
+  it("supports bounded arrow navigation and Enter insertion", async () => {
+    const editor = createEditor();
+    const picker = openPicker(editor);
+    await vi.waitFor(() => {
+      expect(document.activeElement?.getAttribute("data-row")).toBe("3");
+    });
+    const current = () =>
+      requireElement(
+        picker.querySelector<HTMLButtonElement>(
+          ".tiptap-table-size-cell.is-current",
+        ),
+        "expected current size",
+      );
+
+    current().dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "ArrowRight",
+        bubbles: true,
+      }),
+    );
+    current().dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "ArrowDown",
+        bubbles: true,
+      }),
+    );
+    current().dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+      }),
+    );
+
+    expect(tableDimensions(editor)).toEqual({ rows: 4, columns: 4 });
+  });
+
+  it("cancels on Escape and restores editor focus", async () => {
+    const editor = createEditor();
+    openPicker(editor);
+    await vi.waitFor(() => {
+      expect(document.activeElement?.getAttribute("data-row")).toBe("3");
+    });
+    document.activeElement?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(document.querySelector(".tiptap-table-size-picker")).toBeNull();
+    expect(tableJson(editor)).toBeUndefined();
+    expect(editor.view.hasFocus()).toBe(true);
+  });
+
+  it("cancels on outside click and cleans up when the editor is destroyed", async () => {
+    const editor = createEditor();
+    openPicker(editor);
+    await vi.waitFor(() => {
+      expect(document.activeElement?.getAttribute("data-row")).toBe("3");
+    });
+    document.body.dispatchEvent(
+      new globalThis.MouseEvent("mousedown", { bubbles: true }),
+    );
+    expect(document.querySelector(".tiptap-table-size-picker")).toBeNull();
+
+    editor.commands.setContent("<p>/table</p>");
+    editor.commands.setTextSelection(7);
+    openPicker(editor);
+    editor.destroy();
+    expect(document.querySelector(".tiptap-table-size-picker")).toBeNull();
+  });
+});

package/src/client/tiptap/bubble-menu.ts

@@ -8,6 +8,7 @@
 
 import { Extension, type Editor } from "@tiptap/core";
 import { Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
+import { liftTarget } from "@tiptap/pm/transform";
 import type { EditorView } from "@tiptap/pm/view";
 import { isLinkToolbarInputActive } from "./link-toolbar.js";
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
@@ -70,6 +71,92 @@ export function toggleMarkAndExit(editor: Editor, markName: string): void {
     .run();
 }
 
+/**
+ * Clears presentational formatting while preserving semantic content structure.
+ *
+ * Clearable marks (bold, italic, and similar text styling) are removed while
+ * marks configured with `clearable: false`, such as links, are retained.
+ * Headings become paragraphs and selected blockquote content is lifted out of
+ * its quote wrapper. Lists, code blocks, tables, media, and other structural
+ * nodes remain intact.
+ *
+ * @param editor - Editor whose current selection should be cleared
+ * @returns Nothing
+ */
+export function clearFormatting(editor: Editor): void {
+  const { doc, selection } = editor.state;
+  const { from, to } = selection;
+  const headingPositions: number[] = [];
+  const blockquoteRanges: Array<{ from: number; to: number }> = [];
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (node.type === editor.schema.nodes.heading) {
+      headingPositions.push(pos);
+    }
+
+    if (node.type === editor.schema.nodes.blockquote) {
+      blockquoteRanges.push({
+        from: Math.max(from, pos + 1),
+        to: Math.min(to, pos + node.nodeSize - 1),
+      });
+    }
+  });
+
+  editor
+    .chain()
+    .focus()
+    .unsetAllMarks()
+    .command(({ tr }) => {
+      const headingType = editor.schema.nodes.heading;
+      const paragraphType = editor.schema.nodes.paragraph;
+
+      if (headingType && paragraphType) {
+        for (const position of headingPositions) {
+          const mappedPosition = tr.mapping.map(position);
+          const node = tr.doc.nodeAt(mappedPosition);
+          if (node?.type !== headingType) continue;
+
+          const $position = tr.doc.resolve(mappedPosition);
+          const index = $position.index();
+          if (
+            $position.parent.canReplaceWith(index, index + 1, paragraphType)
+          ) {
+            tr.setNodeMarkup(mappedPosition, paragraphType);
+          }
+        }
+      }
+
+      const blockquoteType = editor.schema.nodes.blockquote;
+      if (blockquoteType) {
+        // Nested wrappers must be lifted from the inside out. Mapping the
+        // original ranges after each lift keeps later positions accurate.
+        for (let index = blockquoteRanges.length - 1; index >= 0; index -= 1) {
+          const range = blockquoteRanges[index];
+          if (!range) continue;
+          const mappedFrom = tr.mapping.map(range.from, 1);
+          const mappedTo = tr.mapping.map(range.to, -1);
+          if (mappedFrom > mappedTo) continue;
+
+          const nodeRange = tr.doc
+            .resolve(mappedFrom)
+            .blockRange(
+              tr.doc.resolve(mappedTo),
+              (node) => node.type === blockquoteType,
+            );
+          if (!nodeRange) continue;
+
+          const target = liftTarget(nodeRange);
+          if (target !== null) tr.lift(nodeRange, target);
+        }
+      }
+
+      const mappedEnd = tr.mapping.map(to, -1);
+      tr.setSelection(TextSelection.create(tr.doc, mappedEnd));
+      return true;
+    })
+    .run();
+}
+
 function getButtons(
   editor: Editor,
   toolbarMode: FormattingToolbarMode,
@@ -114,16 +201,7 @@ function getButtons(
         key: "clear",
         icon: ICONS.clear,
         title: "Clear formatting",
-        action: () => {
-          const { to } = editor.state.selection;
-          editor
-            .chain()
-            .focus()
-            .unsetAllMarks()
-            .clearNodes()
-            .setTextSelection(to)
-            .run();
-        },
+        action: () => clearFormatting(editor),
         isActive: () => false,
       },
     ];

package/src/client/tiptap/continuous-lists.ts

@@ -0,0 +1,102 @@
+/**
+ * Continuous Lists
+ *
+ * Rich-text sources can paste one visual list as several adjacent list nodes.
+ * Adjacent wrappers of the same type have no visible or semantic separator, so
+ * normalize them into one list. A paragraph, a different list type, or any
+ * other block remains an intentional boundary.
+ */
+
+import { Extension } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Plugin } from "@tiptap/pm/state";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+
+function isStandardList(node: ProseMirrorNode): boolean {
+  return node.type.name === "bulletList" || node.type.name === "orderedList";
+}
+
+function findJoinableListBoundary(
+  node: ProseMirrorNode,
+  nodePosition = -1,
+  document = node,
+): number | null {
+  const contentStart = nodePosition + 1;
+  let childOffset = 0;
+  let previousChild: ProseMirrorNode | null = null;
+
+  for (let index = 0; index < node.childCount; index += 1) {
+    const child = node.child(index);
+    const childPosition = contentStart + childOffset;
+
+    if (
+      previousChild &&
+      isStandardList(previousChild) &&
+      previousChild.type === child.type &&
+      canJoin(document, childPosition)
+    ) {
+      return childPosition;
+    }
+
+    const nestedBoundary = findJoinableListBoundary(
+      child,
+      childPosition,
+      document,
+    );
+    if (nestedBoundary !== null) return nestedBoundary;
+
+    childOffset += child.nodeSize;
+    previousChild = child;
+  }
+
+  return null;
+}
+
+/**
+ * Builds a transaction that joins every adjacent same-type list fragment.
+ *
+ * @param state - Current editor state
+ * @returns A joining transaction, or null when the document is normalized
+ * @example
+ * const tr = buildContinuousListsTransaction(editor.state);
+ * if (tr) editor.view.dispatch(tr);
+ */
+export function buildContinuousListsTransaction(
+  state: EditorState,
+): Transaction | null {
+  const tr = state.tr;
+  let changed = false;
+  let boundary = findJoinableListBoundary(tr.doc);
+
+  while (boundary !== null) {
+    tr.join(boundary);
+    changed = true;
+    boundary = findJoinableListBoundary(tr.doc);
+  }
+
+  return changed ? tr : null;
+}
+
+export const ContinuousLists = Extension.create({
+  name: "continuousLists",
+
+  onCreate() {
+    const tr = buildContinuousListsTransaction(this.editor.state);
+    if (tr) this.editor.view.dispatch(tr.setMeta("addToHistory", false));
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((transaction) => transaction.docChanged)) {
+            return null;
+          }
+
+          return buildContinuousListsTransaction(newState);
+        },
+      }),
+    ];
+  },
+});

package/src/client/tiptap/create-editor.ts

@@ -13,6 +13,7 @@ import type { FormattingToolbarMode } from "./toolbar-mode.js";
 import type { PasteMediaOptions } from "./paste-media.js";
 import type { RehostImagesOptions } from "./rehost-images.js";
 import type { ImageNodeLabels } from "./image-node.js";
+import type { TableControlLabels } from "./table-control-labels.js";
 import { normalizeFootnoteArtifacts } from "../../lib/footnotes.js";
 import { tiptapJsonToMarkdown } from "../../lib/tiptap-to-markdown.js";
 import { parseMarkdownDocument } from "../../lib/markdown-manager.js";
@@ -29,6 +30,7 @@ export interface CreateEditorOptions {
   pasteMedia?: PasteMediaOptions;
   rehostImages?: RehostImagesOptions;
   imageNodeLabels?: Partial<ImageNodeLabels>;
+  tableControlLabels?: TableControlLabels;
 }
 
 /**
@@ -46,6 +48,7 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
       pasteMedia: options.pasteMedia,
       rehostImages: options.rehostImages,
       imageNodeLabels: options.imageNodeLabels,
+      tableControlLabels: options.tableControlLabels,
     }),
     content: options.content ?? undefined,
     editorProps: {