@jant/core 0.6.12 → 0.6.14

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/create-editor.ts

@@ -12,6 +12,7 @@ import {
 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 { normalizeFootnoteArtifacts } from "../../lib/footnotes.js";
 import { tiptapJsonToMarkdown } from "../../lib/tiptap-to-markdown.js";
 import { parseMarkdownDocument } from "../../lib/markdown-manager.js";
@@ -22,10 +23,12 @@ export interface CreateEditorOptions {
   content?: JSONContent | null;
   onUpdate?: (json: JSONContent) => void;
   onFocus?: () => void;
+  onBlur?: () => void;
   onSelectionUpdate?: (selection: { from: number; to: number }) => void;
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
   rehostImages?: RehostImagesOptions;
+  imageNodeLabels?: Partial<ImageNodeLabels>;
 }
 
 /**
@@ -42,6 +45,7 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
       toolbarMode: options.toolbarMode,
       pasteMedia: options.pasteMedia,
       rehostImages: options.rehostImages,
+      imageNodeLabels: options.imageNodeLabels,
     }),
     content: options.content ?? undefined,
     editorProps: {
@@ -54,6 +58,9 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
     onFocus: () => {
       options.onFocus?.();
     },
+    onBlur: () => {
+      options.onBlur?.();
+    },
     onSelectionUpdate: ({ editor }) => {
       options.onSelectionUpdate?.({
         from: editor.state.selection.from,

package/src/client/tiptap/extensions.ts

@@ -19,7 +19,7 @@ import { WrappingInputRules } from "./wrapping-input-rules.js";
 import { InsertParagraphAround } from "./insert-paragraph-around.js";
 import { Footnotes } from "./footnotes.js";
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
-import { ImageNode } from "./image-node.js";
+import { ImageNode, type ImageNodeLabels } from "./image-node.js";
 import { MoreBreak } from "./more-break.js";
 import { EmbedNode } from "./embed-node.js";
 import { HtmlBlockNode } from "./html-block-node.js";
@@ -27,6 +27,7 @@ import { EmbedPaste } from "./embed-paste.js";
 import { RehostImages } from "./rehost-images.js";
 import type { RehostImagesOptions } from "./rehost-images.js";
 import { MarkdownClipboard } from "./markdown-clipboard.js";
+import { ImageInputRules } from "./image-input-rules.js";
 import {
   MARKDOWN_MARKED_OPTIONS,
   createMarkdownContentExtensions,
@@ -37,6 +38,7 @@ export interface EditorExtensionOptions {
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
   rehostImages?: RehostImagesOptions;
+  imageNodeLabels?: Partial<ImageNodeLabels>;
 }
 
 /**
@@ -97,7 +99,9 @@ export function createEditorExtensions(
 ): Extensions {
   return [
     ...createMarkdownContentExtensions({
-      imageExtension: ImageNode,
+      imageExtension: ImageNode.configure({
+        labels: options.imageNodeLabels,
+      }),
       moreBreakExtension: MoreBreak,
       embedExtension: EmbedNode,
       htmlBlockExtension: HtmlBlockNode,
@@ -110,6 +114,7 @@ export function createEditorExtensions(
       placeholder: options.placeholder ?? "Write something…",
     }),
     Footnotes,
+    ImageInputRules,
     LinkInputRules,
     WrappingInputRules,
     MarkdownClipboard,

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/image-input-rules.ts

@@ -0,0 +1,48 @@
+import { Extension, InputRule } from "@tiptap/core";
+import { sanitizeUrl } from "../../lib/url.js";
+import { moveSelectionAfterBlockInsertion } from "./block-insertion.js";
+
+// Keep the URL group aligned with link-input-rules: single-character
+// alternatives avoid catastrophic backtracking on failed Markdown matches.
+const MARKDOWN_IMAGE_INPUT_REGEX =
+  /!\[([^\]\n]*)\]\(((?:[^()\s"]|\([^()\s"]*\))+)(?:\s*"([^"\n]*)")?\)$/;
+
+function sanitizeImageSrc(src: string): string {
+  const sanitized = sanitizeUrl(src.trim());
+  if (!sanitized || /^mailto:/i.test(sanitized)) return "";
+  return sanitized;
+}
+
+export const ImageInputRules = Extension.create({
+  name: "imageInputRules",
+
+  // Runs before LinkInputRules so `![alt](url)` is handled as an image rather
+  // than the inner `[alt](url)` being converted to a link.
+  priority: 1000,
+
+  addInputRules() {
+    const imageType = this.editor.schema.nodes.image;
+    if (!imageType) return [];
+
+    return [
+      new InputRule({
+        find: MARKDOWN_IMAGE_INPUT_REGEX,
+        handler: ({ state, range, match }) => {
+          const src = sanitizeImageSrc(match[2] ?? "");
+          if (!src) return null;
+
+          state.tr.replaceRangeWith(
+            range.from,
+            range.to,
+            imageType.create({
+              src,
+              alt: match[1] ?? "",
+              title: match[3] ?? "",
+            }),
+          );
+          moveSelectionAfterBlockInsertion(state.tr, state.schema);
+        },
+      }),
+    ];
+  },
+});