@jant/core 0.6.14 → 0.6.15

package/src/client/tiptap/__tests__/markdown-clipboard.test.ts

@@ -1,23 +1,44 @@
 // @vitest-environment happy-dom
 
 import type { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
 import { afterEach, describe, expect, it } from "vitest";
 import { createTiptapEditor } from "../create-editor.js";
-import { isCodeEditorHtml } from "../markdown-clipboard.js";
+import {
+  isCodeEditorHtml,
+  isObsidianHtml,
+  normalizeObsidianClipboardArtifacts,
+  normalizePastedFootnoteHtml,
+} from "../markdown-clipboard.js";
 
 const editors: Editor[] = [];
 
-function dispatchMarkdownPaste(editor: Editor, text: string, html = "") {
+function dispatchMarkdownPaste(
+  editor: Editor,
+  text: string,
+  html = "",
+  markdown = "",
+) {
   const event = new Event("paste", {
     bubbles: true,
     cancelable: true,
   }) as Event & { clipboardData: unknown };
   event.clipboardData = {
     getData: (type: string) =>
-      type === "text/plain" ? text : type === "text/html" ? html : "",
+      type === "text/plain"
+        ? text
+        : type === "text/html"
+          ? html
+          : type === "text/markdown"
+            ? markdown
+            : "",
     files: [],
     items: [],
-    types: html ? ["text/html", "text/plain"] : ["text/plain"],
+    types: [
+      ...(markdown ? ["text/markdown"] : []),
+      ...(html ? ["text/html"] : []),
+      ...(text ? ["text/plain"] : []),
+    ],
   };
   editor.commands.focus();
   editor.view.dom.dispatchEvent(event);
@@ -28,6 +49,60 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
+describe("Obsidian clipboard detection", () => {
+  it("finds the marker even when metadata precedes it", () => {
+    expect(
+      isObsidianHtml('<meta charset="utf-8"><!-- obsidian --><p>Rendered</p>'),
+    ).toBe(true);
+  });
+
+  it("does not infer Obsidian from its footnote classes", () => {
+    expect(
+      isObsidianHtml('<sup class="footnote-ref"><a href="#fn-1">1</a></sup>'),
+    ).toBe(false);
+  });
+});
+
+describe("normalizeObsidianClipboardArtifacts", () => {
+  it("removes bare internal spacer paragraphs from marked fragments", () => {
+    expect(
+      normalizeObsidianClipboardArtifacts(
+        "<!-- obsidian --><p>First</p><p> \n </p><p></p><p>Second</p>",
+      ),
+    ).toBe("<!-- obsidian --><p>First</p><p>Second</p>");
+  });
+
+  it("does not normalize the same shape from ordinary rich HTML", () => {
+    const html = "<p>First</p><p> \n </p><p>Second</p>";
+    expect(normalizeObsidianClipboardArtifacts(html)).toBe(html);
+  });
+
+  it.each([
+    ["explicit break", "<p><br></p>"],
+    ["media", '<p><img src="image.png"></p>'],
+    ["attributed spacer", '<p data-purpose="spacer"></p>'],
+    ["non-breaking space", "<p>&nbsp;</p>"],
+  ])("preserves %s paragraphs", (_, middle) => {
+    const html = `<!-- obsidian --><p>First</p>${middle}<p>Second</p>`;
+    expect(normalizeObsidianClipboardArtifacts(html)).toBe(html);
+  });
+
+  it("preserves nested and edge empty paragraphs", () => {
+    const html =
+      "<!-- obsidian --><p></p><blockquote><p></p><p>Quote</p></blockquote><p></p>";
+    expect(normalizeObsidianClipboardArtifacts(html)).toBe(html);
+  });
+});
+
+describe("normalizePastedFootnoteHtml", () => {
+  it("leaves ordinary superscript section links and lists unchanged", () => {
+    const html =
+      '<p>Chapter<sup><a href="#section-1">1</a></sup></p><ol><li id="section-1">Section</li></ol>';
+
+    expect(normalizePastedFootnoteHtml(html)).toBe(html);
+  });
+});
+
 describe("isCodeEditorHtml", () => {
   it("detects VS Code HTML via data-vscode attribute", () => {
     const html = `<meta charset='utf-8'><div style="color: #d4d4d4;background-color: #1e1e1e;" data-vscode-theme-name="Default Dark+"><div style="line-height:18px"><span style="color: #569cd6;">const</span> x = 1;</div></div>`;
@@ -75,6 +150,409 @@ describe("isCodeEditorHtml", () => {
 });
 
 describe("MarkdownClipboard", () => {
+  it("prefers an explicit text/markdown flavor over HTML and plain text", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "Plain fallback",
+      "<p>Rich fallback</p>",
+      "# Markdown source\n\nBody[^note]\n\n[^note]: Definition",
+    );
+
+    expect(editor.getJSON().content?.map((node) => node.type)).toEqual([
+      "heading",
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(editor.getJSON().content?.[2]?.attrs).toEqual({ label: "note" });
+  });
+
+  it("uses marked Obsidian plain text as Markdown instead of rendered HTML", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "Plain body[^plain-note]\n\n[^plain-note]: Plain definition",
+      [
+        '<meta charset="utf-8"><!-- obsidian -->',
+        '<p><strong>HTML body</strong><sup class="footnote-ref" data-footnote-id="fnref-1">',
+        '<a class="footnote-link" href="#fn-1">[1]</a></sup></p>',
+        "<p></p>",
+        '<section class="footnotes"><hr><ol>',
+        '<li data-footnote-id="fn-1"><p>HTML <em>definition</em> ',
+        '<a class="footnote-backref footnote-link" href="#fnref-1">↩︎</a>',
+        "</p></li></ol></section>",
+      ].join(""),
+    );
+
+    expect(editor.getJSON().content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(editor.getJSON().content?.[0]?.content?.[0]).toEqual({
+      type: "text",
+      text: "Plain body",
+    });
+    expect(editor.getJSON().content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "plain-note" },
+    });
+    expect(editor.getJSON().content?.[1]?.attrs).toEqual({
+      label: "plain-note",
+    });
+    expect(JSON.stringify(editor.getJSON())).toContain("Plain definition");
+    expect(JSON.stringify(editor.getJSON())).not.toContain("HTML body");
+    expect(JSON.stringify(editor.getJSON())).not.toContain("footnote-backref");
+  });
+
+  it("keeps normal rich HTML ahead of its plain fallback", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "# Plain fallback",
+      "<p><strong>Rich source</strong></p>",
+    );
+
+    expect(editor.getJSON()).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              marks: [{ type: "bold" }],
+              text: "Rich source",
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it("turns pasted blank-line breaks into semantic paragraphs", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "First paragraph\n\nSecond paragraph\ncontinued",
+      [
+        "<p>First paragraph<br><br>",
+        '<strong>Second paragraph</strong><br><a href="https://example.com">continued</a>',
+        "</p>",
+      ].join(""),
+    );
+
+    expect(editor.getJSON()).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "First paragraph" }],
+        },
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              marks: [{ type: "bold" }],
+              text: "Second paragraph",
+            },
+            { type: "hardBreak" },
+            {
+              type: "text",
+              marks: [
+                expect.objectContaining({
+                  type: "link",
+                  attrs: expect.objectContaining({
+                    href: "https://example.com",
+                  }),
+                }),
+              ],
+              text: "continued",
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it("preserves a single hard break in pasted rich text", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "First line\nSecond line",
+      "<p>First line<br>Second line</p>",
+    );
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "paragraph",
+        content: [
+          { type: "text", text: "First line" },
+          { type: "hardBreak" },
+          { type: "text", text: "Second line" },
+        ],
+      },
+    ]);
+  });
+
+  it("keeps a valid empty paragraph for break-only pasted blocks", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(editor, "", "<p><br><br><br></p>");
+
+    expect(editor.getJSON()).toEqual({
+      type: "doc",
+      content: [{ type: "paragraph" }],
+    });
+  });
+
+  it("normalizes longer break runs inside their structural container", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "First quote\n\nSecond quote",
+      "<blockquote><p>First quote<br> \n <br>\t<br>Second quote</p></blockquote>",
+    );
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "blockquote",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "First quote" }],
+          },
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Second quote" }],
+          },
+        ],
+      },
+      { type: "paragraph" },
+    ]);
+  });
+
+  it("does not rewrite existing documents outside the paste boundary", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({
+      element,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "First" },
+              { type: "hardBreak" },
+              { type: "hardBreak" },
+              { type: "text", text: "Second" },
+            ],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "paragraph",
+        content: [
+          { type: "text", text: "First" },
+          { type: "hardBreak" },
+          { type: "hardBreak" },
+          { type: "text", text: "Second" },
+        ],
+      },
+    ]);
+  });
+
+  it("copies a complete document as canonical Markdown without changing it", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({
+      element,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "heading",
+            attrs: { level: 2 },
+            content: [{ type: "text", text: "Heading" }],
+          },
+          {
+            type: "paragraph",
+            content: [
+              {
+                type: "text",
+                marks: [{ type: "bold" }],
+                text: "Bold",
+              },
+              { type: "text", text: " and " },
+              {
+                type: "text",
+                marks: [
+                  {
+                    type: "link",
+                    attrs: {
+                      href: "https://example.com",
+                      target: "_blank",
+                    },
+                  },
+                ],
+                text: "link",
+              },
+            ],
+          },
+          {
+            type: "blockquote",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Quote" }],
+              },
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Second" }],
+              },
+            ],
+          },
+          {
+            type: "bulletList",
+            content: [
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "One" }],
+                  },
+                  {
+                    type: "bulletList",
+                    content: [
+                      {
+                        type: "listItem",
+                        content: [
+                          {
+                            type: "paragraph",
+                            content: [{ type: "text", text: "Nested" }],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: "listItem",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [{ type: "text", text: "Two" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+    editor.commands.selectAll();
+    const before = editor.getJSON();
+    const { dom, text } = editor.view.serializeForClipboard(
+      editor.state.selection.content(),
+    );
+
+    expect(text).toBe(
+      "## Heading\n\n**Bold** and [link](https://example.com)\n\n> Quote\n>\n> Second\n\n- One\n  - Nested\n- Two",
+    );
+    expect(dom.querySelector("h2")?.textContent).toBe("Heading");
+    expect(dom.innerHTML).toContain("<strong>Bold</strong>");
+    expect(dom.innerHTML).toContain("<blockquote>");
+    expect(editor.getJSON()).toEqual(before);
+  });
+
+  it("keeps partial selections as readable plain text", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({
+      element,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              {
+                type: "text",
+                marks: [{ type: "bold" }],
+                text: "Bold",
+              },
+              { type: "text", text: " and " },
+              {
+                type: "text",
+                marks: [
+                  {
+                    type: "link",
+                    attrs: {
+                      href: "https://example.com",
+                      target: "_blank",
+                    },
+                  },
+                ],
+                text: "link",
+              },
+            ],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+    editor.view.dispatch(
+      editor.state.tr.setSelection(
+        TextSelection.create(editor.state.doc, 1, 14),
+      ),
+    );
+
+    const { dom, text } = editor.view.serializeForClipboard(
+      editor.state.selection.content(),
+    );
+
+    expect(text).toBe("Bold and link");
+    expect(text).not.toContain("**");
+    expect(text).not.toContain("https://example.com");
+    expect(dom.innerHTML).toContain("<strong>Bold</strong>");
+    expect(dom.innerHTML).toContain("<a");
+  });
+
   it.each([
     ["plain text", ""],
     [
@@ -150,6 +628,251 @@ describe("MarkdownClipboard", () => {
     });
   });
 
+  it("converts Obsidian HTML-only footnotes and removes generated backlinks", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "",
+      [
+        '<p>Body<sup class="footnote-ref" data-footnote-id="fnref-1">',
+        '<a class="footnote-link" href="#fn-1" data-footref="source-note">[1]</a>',
+        "</sup></p>",
+        '<section class="footnotes"><hr><ol>',
+        '<li data-footnote-id="fn-1"><p>Definition with ',
+        '<a href="https://example.com">a source</a> ',
+        '<a class="footnote-backref footnote-link" href="#fnref-1">↩︎</a>',
+        "</p></li></ol></section>",
+      ].join(""),
+    );
+
+    const json = editor.getJSON();
+    expect(json.content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(json.content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "source-note" },
+    });
+    expect(json.content?.[1]?.attrs).toEqual({ label: "source-note" });
+    expect(JSON.stringify(json)).toContain("https://example.com");
+    expect(JSON.stringify(json)).not.toContain("footnote-backref");
+    expect(JSON.stringify(json)).not.toContain("#fnref-1");
+  });
+
+  it("converts GitHub-style footnotes into structural nodes", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "",
+      [
+        '<p>Body<sup><a id="user-content-fnref-1" href="#user-content-fn-1" data-footnote-ref>1</a></sup></p>',
+        '<section class="footnotes" data-footnotes>',
+        '<h2 id="footnote-label">Footnotes</h2><ol>',
+        '<li id="user-content-fn-1"><p>Definition ',
+        '<a href="#user-content-fnref-1" data-footnote-backref>↩</a>',
+        "</p></li></ol></section>",
+      ].join(""),
+    );
+
+    const json = editor.getJSON();
+    expect(json.content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(json.content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "1" },
+    });
+    expect(json.content?.[1]?.attrs).toEqual({ label: "1" });
+    expect(JSON.stringify(json)).not.toContain("horizontalRule");
+    expect(JSON.stringify(json)).not.toContain("orderedList");
+  });
+
+  it("converts DPUB-ARIA inline footnotes with rich block content", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "",
+      [
+        '<p>Body <a id="fnref-note" href="#fn-note" role="doc-noteref">[note]</a>.</p>',
+        '<aside id="fn-note" role="doc-footnote">',
+        "<p>First paragraph.</p>",
+        "<ul><li><p>Nested item</p></li></ul>",
+        '<p><a href="#fnref-note" role="doc-backlink">Back</a></p>',
+        "</aside>",
+      ].join(""),
+    );
+
+    const json = editor.getJSON();
+    expect(json.content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(json.content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "note" },
+    });
+    expect(json.content?.[1]?.content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "bulletList",
+    ]);
+    expect(JSON.stringify(json)).not.toContain("doc-backlink");
+    expect(JSON.stringify(json)).not.toContain("Back");
+  });
+
+  it("keeps repeated HTML references paired to one definition", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "",
+      [
+        '<p>First<sup class="footnote-ref"><a href="#fn-1" data-footref="same">[1]</a></sup> ',
+        'second<sup class="footnote-ref"><a href="#fn-1" data-footref="same">[1-2]</a></sup>.</p>',
+        '<section class="footnotes"><ol><li id="fn-1"><p>Definition ',
+        '<a class="footnote-backref" href="#first">↩</a>',
+        '<a class="footnote-backref" href="#second">↩</a>',
+        "</p></li></ol></section>",
+      ].join(""),
+    );
+
+    const json = editor.getJSON();
+    const serialized = JSON.stringify(json);
+    expect(serialized.match(/"type":"footnoteReference"/g)).toHaveLength(2);
+    expect(serialized.match(/"type":"footnoteDefinition"/g)).toHaveLength(1);
+    expect(serialized.match(/"label":"same"/g)).toHaveLength(3);
+    expect(serialized).not.toContain("↩");
+  });
+
+  it("round-trips Jant's editor HTML with raw footnote labels", () => {
+    const sourceElement = document.createElement("div");
+    const destinationElement = document.createElement("div");
+    document.body.appendChild(sourceElement);
+    document.body.appendChild(destinationElement);
+    const content = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "note" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "note" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Definition" }],
+            },
+          ],
+        },
+      ],
+    };
+    const source = createTiptapEditor({ element: sourceElement, content });
+    const destination = createTiptapEditor({ element: destinationElement });
+    editors.push(source, destination);
+    source.commands.selectAll();
+    const { dom } = source.view.serializeForClipboard(
+      source.state.selection.content(),
+    );
+
+    expect(
+      dom
+        .querySelector("[data-footnote-definition]")
+        ?.getAttribute("data-footnote-label"),
+    ).toBe("note");
+
+    dispatchMarkdownPaste(destination, "", dom.innerHTML);
+
+    expect(destination.getJSON()).toEqual(source.getJSON());
+  });
+
+  it("accepts the legacy display-form label in Jant editor HTML", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "",
+      '<p>Body<sup data-footnote-reference data-footnote-label="1">[^1]</sup></p><div data-footnote-definition data-footnote-label="[^1]:"><p>Definition</p></div>',
+    );
+
+    expect(editor.getJSON().content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "1" },
+    });
+    expect(editor.getJSON().content?.[1]?.attrs).toEqual({ label: "1" });
+  });
+
+  it("normalizes Obsidian inline footnotes into references and definitions", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "Body^[Inline **bold** with [a source](https://example.com).]",
+    );
+
+    const json = editor.getJSON();
+    expect(json.content?.map((node) => node.type)).toEqual([
+      "paragraph",
+      "footnoteDefinition",
+    ]);
+    expect(json.content?.[0]?.content?.[1]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "1" },
+    });
+    expect(json.content?.[1]?.attrs).toEqual({ label: "1" });
+    expect(JSON.stringify(json)).toContain('"type":"bold"');
+    expect(JSON.stringify(json)).toContain("https://example.com");
+  });
+
+  it("allocates inline footnote labels around existing definitions", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "Named[^1] and inline^[Second definition.]\n\n[^1]: First definition.",
+    );
+
+    const json = editor.getJSON();
+    expect(
+      json.content
+        ?.filter((node) => node.type === "footnoteDefinition")
+        .map((node) => node.attrs?.label),
+    ).toEqual(["1", "2"]);
+    expect(json.content?.[0]?.content?.[3]).toEqual({
+      type: "footnoteReference",
+      attrs: { label: "2" },
+    });
+  });
+
   it("keeps the formatting toolbar hidden for a selected footnote node", () => {
     const element = document.createElement("div");
     document.body.appendChild(element);