@jant/core 0.6.14 → 0.6.16

package/src/client/site-header-fragment.ts

@@ -0,0 +1,38 @@
+/**
+ * Replace the live site header with a server-rendered navigation fragment.
+ *
+ * @param headerHtml - Trusted fragment returned by Jant's navigation API
+ * @returns Nothing
+ * @example
+ * applySiteHeaderHtml(response.headerHtml);
+ */
+
+import { destroySiteHeaderNav, initSiteHeaderNav } from "./site-header-nav.js";
+
+export function applySiteHeaderHtml(headerHtml: string | undefined): void {
+  if (!headerHtml) return;
+
+  const template = document.createElement("template");
+  template.innerHTML = headerHtml.trim();
+
+  const selectors = [
+    '[data-site-header-fragment="header"]',
+    '[data-site-header-fragment="drawer-backdrop"]',
+    '[data-site-header-fragment="drawer"]',
+  ];
+  let replaced = false;
+
+  destroySiteHeaderNav(document);
+  for (const selector of selectors) {
+    const current = document.querySelector<HTMLElement>(selector);
+    const next = template.content.querySelector<HTMLElement>(selector);
+    if (!current || !next) continue;
+
+    current.replaceWith(next);
+    replaced = true;
+  }
+
+  if (replaced) {
+    initSiteHeaderNav(document);
+  }
+}

package/src/client/tiptap/__tests__/blockquote-editing.test.ts

@@ -0,0 +1,201 @@
+// @vitest-environment happy-dom
+
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { afterEach, describe, expect, it } from "vitest";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { StructuralKeymap } from "../structural-keymap.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [...createMarkdownContentExtensions(), StructuralKeymap],
+    content,
+  });
+
+  editor.view.dispatch(editor.state.tr);
+  editors.push(editor);
+  return editor;
+}
+
+function paragraphPosition(
+  editor: Editor,
+  text: string,
+  edge: "start" | "end",
+): number {
+  let position: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== "paragraph" || node.textContent !== text) return;
+
+    position = pos + 1 + (edge === "end" ? node.content.size : 0);
+    return false;
+  });
+
+  if (position === null) throw new Error(`Paragraph not found: ${text}`);
+  return position;
+}
+
+function setCursor(editor: Editor, pos: number): void {
+  editor.view.dispatch(
+    editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos)),
+  );
+}
+
+function pressKey(
+  editor: Editor,
+  key: string,
+  options: globalThis.KeyboardEventInit = {},
+): boolean {
+  return Boolean(
+    editor.view.someProp("handleKeyDown", (handler) =>
+      handler(
+        editor.view,
+        new KeyboardEvent("keydown", { key, code: key, ...options }),
+      ),
+    ),
+  );
+}
+
+function typeText(editor: Editor, text: string): void {
+  for (const character of text) {
+    const { from, to } = editor.state.selection;
+    const handled = editor.view.someProp("handleTextInput", (handler) =>
+      handler(editor.view, from, to, character, () =>
+        editor.state.tr.insertText(character, from, to),
+      ),
+    );
+
+    if (!handled) {
+      editor.view.dispatch(editor.state.tr.insertText(character, from, to));
+    }
+  }
+}
+
+function meaningfulTopLevelNodes(editor: Editor) {
+  return editor.state.doc.content.content.filter(
+    (node) => node.type.name !== "paragraph" || node.content.size > 0,
+  );
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("blockquote boundary editing", () => {
+  it.each([
+    {
+      name: "paragraphs in one quote",
+      html: "<blockquote><p>A</p><p>B</p></blockquote>",
+      expectedType: "blockquote",
+    },
+    {
+      name: "quote followed by paragraph",
+      html: "<blockquote><p>A</p></blockquote><p>B</p>",
+      expectedType: "blockquote",
+    },
+    {
+      name: "paragraph followed by quote",
+      html: "<p>A</p><blockquote><p>B</p></blockquote>",
+      expectedType: "paragraph",
+    },
+    {
+      name: "adjacent quotes",
+      html: "<blockquote><p>A</p></blockquote><blockquote><p>B</p></blockquote>",
+      expectedType: "blockquote",
+    },
+  ])(
+    "merges $name symmetrically with Backspace and Delete",
+    ({ html, expectedType }) => {
+      const backwardEditor = createEditor(html);
+      const forwardEditor = createEditor(html);
+      setCursor(
+        backwardEditor,
+        paragraphPosition(backwardEditor, "B", "start"),
+      );
+      setCursor(forwardEditor, paragraphPosition(forwardEditor, "A", "end"));
+
+      expect(pressKey(backwardEditor, "Backspace")).toBe(true);
+      expect(pressKey(forwardEditor, "Delete")).toBe(true);
+
+      const backwardNodes = meaningfulTopLevelNodes(backwardEditor);
+      const forwardNodes = meaningfulTopLevelNodes(forwardEditor);
+      expect(backwardNodes.map((node) => node.toJSON())).toEqual(
+        forwardNodes.map((node) => node.toJSON()),
+      );
+      expect(backwardNodes).toHaveLength(1);
+      expect(backwardNodes[0]?.type.name).toBe(expectedType);
+      expect(backwardNodes[0]?.textContent).toBe("AB");
+      if (expectedType === "blockquote") {
+        expect(backwardNodes[0]?.childCount).toBe(1);
+      }
+      expect(backwardEditor.state.selection.$from.parentOffset).toBe(1);
+    },
+  );
+
+  it.each([
+    ["Backspace", {}],
+    ["Shift-Backspace", { shiftKey: true }],
+    ["Mod-Backspace", { ctrlKey: true }],
+  ])("uses the same quote merge for %s", (_name, eventOptions) => {
+    const editor = createEditor("<blockquote><p>A</p><p>B</p></blockquote>");
+    setCursor(editor, paragraphPosition(editor, "B", "start"));
+
+    expect(pressKey(editor, "Backspace", eventOptions)).toBe(true);
+    expect(meaningfulTopLevelNodes(editor)[0]?.toJSON()).toMatchObject({
+      type: "blockquote",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "AB" }],
+        },
+      ],
+    });
+  });
+
+  it("restores the original quote structure with undo", () => {
+    const editor = createEditor("<blockquote><p>A</p></blockquote><p>B</p>");
+    setCursor(editor, paragraphPosition(editor, "B", "start"));
+    const before = editor.getJSON();
+
+    expect(pressKey(editor, "Backspace")).toBe(true);
+    expect(editor.commands.undo()).toBe(true);
+    expect(editor.getJSON()).toEqual(before);
+  });
+
+  it("removes an empty trailing quote paragraph in one Backspace", () => {
+    const editor = createEditor("<blockquote><p>A</p><p></p></blockquote>");
+    const quote = editor.state.doc.firstChild!;
+    const emptyParagraphPosition = 1 + quote.child(0).nodeSize + 1;
+    setCursor(editor, emptyParagraphPosition);
+
+    expect(pressKey(editor, "Backspace")).toBe(true);
+    expect(editor.state.doc.firstChild?.toJSON()).toEqual({
+      type: "blockquote",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "A" }],
+        },
+      ],
+    });
+  });
+
+  it("keeps the official input rule that joins a new adjacent quote", () => {
+    const editor = createEditor("<blockquote><p>A</p></blockquote><p></p>");
+    setCursor(editor, editor.state.doc.content.size - 1);
+
+    typeText(editor, "> ");
+
+    const quote = editor.state.doc.firstChild;
+    expect(quote?.type.name).toBe("blockquote");
+    expect(quote?.childCount).toBe(2);
+    expect(editor.state.doc.child(1).type.name).toBe("paragraph");
+  });
+});

package/src/client/tiptap/__tests__/clear-formatting.test.ts

@@ -0,0 +1,168 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { clearFormatting } from "../bubble-menu.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: createMarkdownContentExtensions(),
+    content,
+  });
+
+  editor.view.dispatch(editor.state.tr);
+  editors.push(editor);
+  return editor;
+}
+
+function selectText(editor: Editor, fromText: string, toText = fromText): void {
+  let from: number | null = null;
+  let to: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (!node.isText) return;
+    if (from === null && node.text?.includes(fromText)) {
+      from = pos;
+    }
+    if (node.text?.includes(toText)) {
+      to = pos + node.nodeSize;
+    }
+  });
+
+  if (from === null || to === null) {
+    throw new Error(`Text selection not found: ${fromText} → ${toText}`);
+  }
+
+  editor.view.dispatch(
+    editor.state.tr.setSelection(
+      TextSelection.create(editor.state.doc, from, to),
+    ),
+  );
+}
+
+function getMarkNames(editor: Editor): string[] {
+  const markNames: string[] = [];
+  editor.state.doc.descendants((node) => {
+    if (node.isText) {
+      markNames.push(...node.marks.map((mark) => mark.type.name));
+    }
+  });
+  return markNames;
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("clear formatting", () => {
+  it("converts selected headings to paragraphs and preserves semantic links", () => {
+    const editor = createEditor(
+      '<h2><a href="https://example.com"><strong>Heading</strong></a></h2>',
+    );
+    selectText(editor, "Heading");
+
+    clearFormatting(editor);
+
+    const paragraph = editor.state.doc.firstChild;
+    const linkedText = paragraph?.firstChild;
+    expect(paragraph?.type.name).toBe("paragraph");
+    expect(linkedText?.marks.map((mark) => mark.type.name)).toEqual(["link"]);
+    expect(linkedText?.marks[0]?.attrs.href).toBe("https://example.com");
+  });
+
+  it("unwraps a blockquote without flattening its nested ordered list", () => {
+    const editor = createEditor(
+      '<blockquote><ol start="5"><li><p><a href="https://example.com"><strong>Five</strong></a></p><ol><li><p>Nested</p></li></ol></li><li><p><em>Six</em></p></li></ol></blockquote>',
+    );
+    selectText(editor, "Five", "Six");
+
+    clearFormatting(editor);
+
+    const outerList = editor.state.doc.firstChild;
+    expect(outerList?.type.name).toBe("orderedList");
+    expect(outerList?.attrs.start).toBe(5);
+    expect(outerList?.childCount).toBe(2);
+    expect(outerList?.child(0).lastChild?.type.name).toBe("orderedList");
+    expect(outerList?.child(0).lastChild?.firstChild?.textContent).toBe(
+      "Nested",
+    );
+    const linkedText = outerList?.child(0).firstChild?.firstChild;
+    expect(linkedText?.marks.map((mark) => mark.type.name)).toEqual(["link"]);
+    expect(linkedText?.marks[0]?.attrs.href).toBe("https://example.com");
+    expect(editor.isActive("bold")).toBe(false);
+    expect(editor.isActive("italic")).toBe(false);
+  });
+
+  it("clears headings and blockquotes across a mixed block selection", () => {
+    const editor = createEditor(
+      "<h2><strong>Heading</strong></h2><blockquote><p><em>Quote</em></p></blockquote><p><strong>Body</strong></p>",
+    );
+    selectText(editor, "Heading", "Body");
+
+    clearFormatting(editor);
+
+    expect(
+      editor.state.doc.content.content.map((node) => node.type.name),
+    ).toEqual(["paragraph", "paragraph", "paragraph"]);
+    expect(getMarkNames(editor)).toEqual([]);
+  });
+
+  it("only unwraps the selected part of a multi-paragraph blockquote", () => {
+    const editor = createEditor(
+      "<blockquote><p>First</p><p><strong>Second</strong></p><p>Third</p></blockquote>",
+    );
+    selectText(editor, "Second");
+
+    clearFormatting(editor);
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "blockquote",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "First" }],
+          },
+        ],
+      },
+      { type: "paragraph", content: [{ type: "text", text: "Second" }] },
+      {
+        type: "blockquote",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Third" }],
+          },
+        ],
+      },
+      { type: "paragraph" },
+    ]);
+  });
+
+  it("preserves code blocks and restores the whole clear with one undo", () => {
+    const editor = createEditor(
+      "<h3><strong>Heading</strong></h3><blockquote><p><em>Quote</em></p></blockquote><pre><code>const x = 1;\nnext();</code></pre>",
+    );
+    selectText(editor, "Heading", "next();");
+    const before = editor.getJSON();
+
+    clearFormatting(editor);
+
+    expect(editor.state.doc.child(0).type.name).toBe("paragraph");
+    expect(editor.state.doc.child(1).type.name).toBe("paragraph");
+    expect(editor.state.doc.child(2).type.name).toBe("codeBlock");
+    expect(editor.state.doc.child(2).textContent).toBe("const x = 1;\nnext();");
+
+    expect(editor.commands.undo()).toBe(true);
+    expect(editor.getJSON()).toEqual(before);
+  });
+});

package/src/client/tiptap/__tests__/link-input-rules.test.ts

@@ -0,0 +1,121 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { LinkInputRules } from "../link-input-rules.js";
+
+const editors: Editor[] = [];
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [...createMarkdownContentExtensions(), LinkInputRules],
+    content: "<p></p>",
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function type(editor: Editor, text: string): void {
+  const view = editor.view;
+  for (const character of text) {
+    const { from, to } = view.state.selection;
+    const handled = view.someProp("handleTextInput", (handler) =>
+      handler(view, from, to, character, () =>
+        view.state.tr.insertText(character, from, to),
+      ),
+    );
+    if (!handled) {
+      view.dispatch(view.state.tr.insertText(character, from, to));
+    }
+  }
+}
+
+afterEach(() => {
+  while (editors.length > 0) {
+    editors.pop()?.destroy();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("LinkInputRules", () => {
+  it("converts a typed sms Markdown link into a link mark", () => {
+    const editor = createEditor();
+
+    type(editor, "[xxx](sms:xxxxx@xx.com)");
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "xxx",
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: "sms:xxxxx@xx.com",
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it.each(["tel:+15551234567", "sms:+15551234567"])(
+    "auto-links a bare %s action URL",
+    (href) => {
+      const editor = createEditor();
+
+      type(editor, `${href} `);
+
+      expect(editor.getJSON().content?.[0]?.content?.[0]).toMatchObject({
+        type: "text",
+        text: href,
+        marks: [
+          {
+            type: "link",
+            attrs: { href },
+          },
+        ],
+      });
+    },
+  );
+
+  it("leaves executable Markdown links as typed text", () => {
+    const editor = createEditor();
+
+    type(editor, "[unsafe](javascript:alert(1))");
+
+    expect(editor.state.doc.textContent).toBe("[unsafe](javascript:alert(1))");
+    expect(JSON.stringify(editor.getJSON())).not.toContain('"type":"link"');
+  });
+
+  it("uses the same action-link policy for TipTap link commands", () => {
+    const editor = createEditor();
+    editor.commands.insertContent("Message");
+    editor.commands.setTextSelection({ from: 1, to: 8 });
+
+    expect(editor.commands.setLink({ href: "sms:xxxxx@xx.com" })).toBe(true);
+    expect(editor.getJSON().content?.[0]?.content?.[0]).toMatchObject({
+      marks: [
+        {
+          type: "link",
+          attrs: { href: "sms:xxxxx@xx.com" },
+        },
+      ],
+    });
+
+    editor.commands.unsetLink();
+    expect(editor.commands.setLink({ href: "javascript:alert(1)" })).toBe(
+      false,
+    );
+    expect(JSON.stringify(editor.getJSON())).not.toContain("javascript:");
+  });
+});