@jant/core 0.6.13 → 0.6.14

package/src/client/tiptap/__tests__/footnotes.test.ts

@@ -132,6 +132,89 @@ function pressDelete(editor: Editor): boolean {
   return pressKey(editor, "Delete");
 }
 
+function findFootnoteReferencePos(editor: Editor, label: string): number {
+  let referencePos: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (
+      referencePos === null &&
+      node.type.name === "footnoteReference" &&
+      node.attrs.label === label
+    ) {
+      referencePos = pos;
+    }
+
+    return true;
+  });
+
+  if (referencePos === null) {
+    throw new Error(`expected footnote reference ${label}`);
+  }
+
+  return referencePos;
+}
+
+function clickFootnoteReference(editor: Editor, label: string): boolean {
+  const pos = findFootnoteReferencePos(editor, label);
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node) {
+    throw new Error(`expected footnote reference node ${label}`);
+  }
+
+  const event = new window.MouseEvent("click", {
+    bubbles: true,
+    button: 0,
+  });
+  let handled = false;
+
+  editor.view.someProp("handleClickOn", (handleClickOn) => {
+    if (handleClickOn(editor.view, pos, node, pos, event, true)) {
+      handled = true;
+      return true;
+    }
+
+    return false;
+  });
+
+  return handled;
+}
+
+function clickBeforeFootnoteDefinition(editor: Editor, label: string): boolean {
+  let definitionPos: number | null = null;
+
+  editor.state.doc.forEach((node, offset) => {
+    if (
+      definitionPos === null &&
+      node.type.name === "footnoteDefinition" &&
+      node.attrs.label === label
+    ) {
+      definitionPos = offset;
+    }
+  });
+
+  if (definitionPos === null) {
+    throw new Error(`expected footnote definition ${label}`);
+  }
+  const targetPos = definitionPos;
+
+  const event = new window.MouseEvent("click", {
+    bubbles: true,
+    button: 0,
+  });
+  let handled = false;
+
+  editor.view.someProp("handleClick", (handleClick) => {
+    if (handleClick(editor.view, targetPos, event)) {
+      handled = true;
+      return true;
+    }
+
+    return false;
+  });
+
+  return handled;
+}
+
 afterEach(() => {
   while (editors.length > 0) {
     editors.pop()?.destroy();
@@ -140,6 +223,108 @@ afterEach(() => {
 });
 
 describe("Footnotes editor extension", () => {
+  it("adds an empty definition when initial content has only a reference", async () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+      ],
+    });
+
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+
+    expect(normalizeFootnoteArtifacts(editor.getJSON()).content?.[1]).toEqual({
+      type: "footnoteDefinition",
+      attrs: { label: "1" },
+      content: [{ type: "paragraph" }],
+    });
+  });
+
+  it("adds empty definitions for missing references after a document change", () => {
+    const editor = createEditor();
+
+    editor.commands.setContent({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "Note" } },
+            { type: "text", text: " and again" },
+            { type: "footnoteReference", attrs: { label: "note" } },
+          ],
+        },
+        {
+          type: "blockquote",
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                { type: "text", text: "Nested" },
+                { type: "footnoteReference", attrs: { label: "2" } },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(
+      normalizeFootnoteArtifacts(editor.getJSON()).content?.slice(-2),
+    ).toEqual([
+      {
+        type: "footnoteDefinition",
+        attrs: { label: "Note" },
+        content: [{ type: "paragraph" }],
+      },
+      {
+        type: "footnoteDefinition",
+        attrs: { label: "2" },
+        content: [{ type: "paragraph" }],
+      },
+    ]);
+  });
+
+  it("does not duplicate an existing case-insensitive definition", () => {
+    const editor = createEditor();
+
+    editor.commands.setContent({
+      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: "Existing note" }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(
+      editor
+        .getJSON()
+        .content?.filter((node) => node.type === "footnoteDefinition"),
+    ).toHaveLength(1);
+  });
+
   it("insertFootnote inserts a reference, appends a definition, and moves selection into the definition", () => {
     const editor = createEditor({
       type: "doc",
@@ -178,6 +363,105 @@ describe("Footnotes editor extension", () => {
     ).toBe("footnoteDefinition");
   });
 
+  it("clicking an orphan reference creates and focuses its definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+      ],
+    });
+    expect(clickFootnoteReference(editor, "1")).toBe(true);
+
+    expect(normalizeFootnoteArtifacts(editor.getJSON()).content?.[1]).toEqual({
+      type: "footnoteDefinition",
+      attrs: { label: "1" },
+      content: [{ type: "paragraph" }],
+    });
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+    expect(
+      editor.state.selection.$from.node(editor.state.selection.$from.depth - 1)
+        .type.name,
+    ).toBe("footnoteDefinition");
+  });
+
+  it("pressing Enter on a selected reference focuses its definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Existing note" }],
+            },
+          ],
+        },
+      ],
+    });
+    editor.commands.setNodeSelection(findFootnoteReferencePos(editor, "1"));
+
+    expect(pressEnter(editor)).toBe(true);
+    expect(
+      editor.state.selection.$from.node(editor.state.selection.$from.depth - 1)
+        .type.name,
+    ).toBe("footnoteDefinition");
+  });
+
+  it("clicking between adjacent definitions focuses the next definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Body" }],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "First note" }],
+            },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "2" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Second note" }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(clickBeforeFootnoteDefinition(editor, "2")).toBe(true);
+
+    const definitionNode = editor.state.selection.$from.node(
+      editor.state.selection.$from.depth - 1,
+    );
+    expect(definitionNode.type.name).toBe("footnoteDefinition");
+    expect(definitionNode.attrs.label).toBe("2");
+  });
+
   it("assigns the next numeric label when a footnote already exists", () => {
     const editor = createEditor({
       type: "doc",

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

@@ -1,6 +1,33 @@
-import { describe, expect, it } from "vitest";
+// @vitest-environment happy-dom
+
+import type { Editor } from "@tiptap/core";
+import { afterEach, describe, expect, it } from "vitest";
+import { createTiptapEditor } from "../create-editor.js";
 import { isCodeEditorHtml } from "../markdown-clipboard.js";
 
+const editors: Editor[] = [];
+
+function dispatchMarkdownPaste(editor: Editor, text: string, html = "") {
+  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 : "",
+    files: [],
+    items: [],
+    types: html ? ["text/html", "text/plain"] : ["text/plain"],
+  };
+  editor.commands.focus();
+  editor.view.dom.dispatchEvent(event);
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
 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>`;
@@ -46,3 +73,123 @@ describe("isCodeEditorHtml", () => {
     expect(isCodeEditorHtml(html)).toBe(false);
   });
 });
+
+describe("MarkdownClipboard", () => {
+  it.each([
+    ["plain text", ""],
+    [
+      "code editor text",
+      '<div data-vscode-theme-name="Default Dark+">Markdown</div>',
+    ],
+  ])("pastes a footnote from %s without adding an empty line", (_, html) => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(
+      editor,
+      "Body with a footnote.[^1]\n\n[^1]: Footnote body",
+      html,
+    );
+
+    expect(editor.getJSON()).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body with a footnote." },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Footnote body" }],
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it.each([
+    ["plain text", ""],
+    [
+      "code editor text",
+      '<div data-vscode-theme-name="Default Dark+">Markdown</div>',
+    ],
+  ])("adds an empty definition for an orphan footnote from %s", (_, html) => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(editor, "Body with a footnote.[^1]", html);
+
+    expect(editor.getJSON()).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body with a footnote." },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [{ type: "paragraph" }],
+        },
+      ],
+    });
+  });
+
+  it("keeps the formatting toolbar hidden for a selected footnote node", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({
+      element,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              { type: "text", text: "Body" },
+              { type: "footnoteReference", attrs: { label: "1" } },
+            ],
+          },
+          {
+            type: "footnoteDefinition",
+            attrs: { label: "1" },
+            content: [{ type: "paragraph" }],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+
+    let referencePos: number | null = null;
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === "footnoteReference") {
+        referencePos = pos;
+      }
+      return true;
+    });
+    if (referencePos === null) {
+      throw new Error("expected footnote reference");
+    }
+
+    editor.commands.setNodeSelection(referencePos);
+
+    expect(
+      document.querySelector<HTMLElement>(".tiptap-bubble-menu")?.style.display,
+    ).toBe("none");
+  });
+});

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

@@ -7,7 +7,7 @@
  */
 
 import { Extension, type Editor } from "@tiptap/core";
-import { Plugin, PluginKey, Selection } from "@tiptap/pm/state";
+import { Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
 import { isLinkToolbarInputActive } from "./link-toolbar.js";
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
@@ -280,9 +280,9 @@ export const BubbleMenu = Extension.create({
     function shouldShow(view: EditorView): boolean {
       const { state } = view;
       const { selection } = state;
-      const { empty } = selection;
       // Only show for non-empty text selections (not node selections)
-      if (empty) return false;
+      if (!(selection instanceof TextSelection) || selection.empty)
+        return false;
       if (!selection.$from.parent.isTextblock) return false;
       // Hide when link input popup is open
       if (isLinkToolbarInputActive()) return false;

package/src/client/tiptap/footnotes.ts

@@ -2,6 +2,7 @@ import { Extension, InputRule } from "@tiptap/core";
 import { Fragment, type Node as ProseMirrorNode } from "@tiptap/pm/model";
 import {
   NodeSelection,
+  Plugin,
   TextSelection,
   type EditorState,
   type Transaction,
@@ -195,6 +196,85 @@ function ensureFootnoteDefinition(
   return insertPos;
 }
 
+function collectMissingFootnoteDefinitionLabels(
+  doc: ProseMirrorNode,
+): string[] {
+  const definedLabels = new Set<string>();
+  const queuedLabels = new Set<string>();
+  const missingLabels: string[] = [];
+
+  doc.forEach((node) => {
+    if (node.type.name !== "footnoteDefinition") {
+      return;
+    }
+
+    const label = normalizeFootnoteLabel(node.attrs.label);
+    if (label) {
+      definedLabels.add(getFootnoteLabelKey(label));
+    }
+  });
+
+  doc.descendants((node) => {
+    if (node.type.name !== "footnoteReference") {
+      return true;
+    }
+
+    const label = normalizeFootnoteLabel(node.attrs.label);
+    const labelKey = getFootnoteLabelKey(label);
+    if (label && !definedLabels.has(labelKey) && !queuedLabels.has(labelKey)) {
+      queuedLabels.add(labelKey);
+      missingLabels.push(label);
+    }
+
+    return true;
+  });
+
+  return missingLabels;
+}
+
+function buildEnsureFootnoteDefinitionsTransaction(
+  state: EditorState,
+): Transaction | null {
+  const missingLabels = collectMissingFootnoteDefinitionLabels(state.doc);
+  if (missingLabels.length === 0) {
+    return null;
+  }
+
+  const tr = state.tr;
+  for (const label of missingLabels) {
+    ensureFootnoteDefinition(state, tr, label);
+  }
+
+  return tr.docChanged ? tr : null;
+}
+
+function getSelectedFootnoteReferenceLabel(state: EditorState): string | null {
+  const { selection } = state;
+  if (
+    !(selection instanceof NodeSelection) ||
+    selection.node.type.name !== "footnoteReference"
+  ) {
+    return null;
+  }
+
+  return normalizeFootnoteLabel(selection.node.attrs.label) || null;
+}
+
+function buildNavigateToFootnoteDefinitionTransaction(
+  state: EditorState,
+  label: string,
+): Transaction | null {
+  const tr = state.tr;
+  const definitionPos = ensureFootnoteDefinition(state, tr, label);
+  if (definitionPos === null) {
+    return null;
+  }
+
+  setSelectionInsideInsertedFootnote(tr, definitionPos);
+  tr.scrollIntoView();
+  return tr;
+}
+
 function ensureNonEmptyDoc(state: EditorState, tr: Transaction) {
   if (tr.doc.childCount > 0) {
     return;
@@ -603,6 +683,66 @@ declare module "@tiptap/core" {
 export const Footnotes = Extension.create({
   name: "footnotes",
 
+  onCreate() {
+    const tr = buildEnsureFootnoteDefinitionsTransaction(this.editor.state);
+    if (tr) {
+      this.editor.view.dispatch(tr);
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((transaction) => transaction.docChanged)) {
+            return null;
+          }
+
+          return buildEnsureFootnoteDefinitionsTransaction(newState);
+        },
+        props: {
+          handleClickOn: (view, _pos, node, _nodePos, _event, direct) => {
+            if (!direct || node.type.name !== "footnoteReference") {
+              return false;
+            }
+
+            const label = normalizeFootnoteLabel(node.attrs.label);
+            if (!label) {
+              return false;
+            }
+
+            const tr = buildNavigateToFootnoteDefinitionTransaction(
+              view.state,
+              label,
+            );
+            if (!tr) {
+              return false;
+            }
+
+            view.dispatch(tr);
+            view.focus();
+            return true;
+          },
+          handleClick: (view, pos) => {
+            const $pos = view.state.doc.resolve(pos);
+            if (
+              $pos.nodeBefore?.type.name !== "footnoteDefinition" ||
+              $pos.nodeAfter?.type.name !== "footnoteDefinition"
+            ) {
+              return false;
+            }
+
+            const tr = view.state.tr;
+            setSelectionInsideInsertedFootnote(tr, pos);
+            view.dispatch(tr.scrollIntoView());
+            view.focus();
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+
   addCommands() {
     return {
       insertFootnote:
@@ -649,6 +789,22 @@ export const Footnotes = Extension.create({
   addKeyboardShortcuts() {
     return {
       Enter: ({ editor }) => {
+        const selectedReferenceLabel = getSelectedFootnoteReferenceLabel(
+          editor.state,
+        );
+        if (selectedReferenceLabel) {
+          const navigateTr = buildNavigateToFootnoteDefinitionTransaction(
+            editor.state,
+            selectedReferenceLabel,
+          );
+          if (!navigateTr) {
+            return false;
+          }
+
+          editor.view.dispatch(navigateTr);
+          return true;
+        }
+
         const tr = activateTrailingFootnoteAtParagraphEnd(editor.state);
         if (!tr) {
           return false;

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

@@ -1,6 +1,7 @@
 import { createNodeFromContent, Extension } from "@tiptap/core";
 import { Fragment, Slice } from "@tiptap/pm/model";
 import { Plugin } from "@tiptap/pm/state";
+import { normalizeMarkdownDocument } from "../../lib/markdown-manager.js";
 
 function toFragment(
   content: ReturnType<typeof createNodeFromContent>,
@@ -62,7 +63,9 @@ export const MarkdownClipboard = Extension.create({
               event.clipboardData?.getData("text/plain")?.trim() ?? "";
             if (!text || !this.editor.markdown) return false;
 
-            const parsed = this.editor.markdown.parse(text);
+            const parsed = normalizeMarkdownDocument(
+              this.editor.markdown.parse(text),
+            );
             if (parsed.type !== "doc" || !parsed.content) return false;
 
             const content = createNodeFromContent(parsed, view.state.schema, {
@@ -82,7 +85,9 @@ export const MarkdownClipboard = Extension.create({
               return Slice.empty;
             }
 
-            const parsed = this.editor.markdown.parse(text);
+            const parsed = normalizeMarkdownDocument(
+              this.editor.markdown.parse(text),
+            );
             if (parsed.type !== "doc" || !parsed.content) {
               return Slice.empty;
             }

package/src/lib/__tests__/markdown-to-tiptap.test.ts

@@ -119,6 +119,10 @@ describe("markdownToTiptapJson", () => {
     it("converts footnote definitions into dedicated block nodes", () => {
       const doc = parse("Body[^1]\n\n[^1]: Footnote body");
 
+      expect(doc.content[0].content).toEqual([
+        { type: "text", text: "Body" },
+        { type: "footnoteReference", attrs: { label: "1" } },
+      ]);
       expect(doc.content[1].type).toBe("footnoteDefinition");
       expect(doc.content[1].attrs.label).toBe("1");
       expect(doc.content[1].content[0].type).toBe("paragraph");