@jant/core 0.6.16 → 0.7.0

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

@@ -0,0 +1,110 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createEditorExtensions } from "../extensions.js";
+import { clearFormatting, toggleMarkAndExit } 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: createEditorExtensions(),
+    content,
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function getBubbleMenu(editor: Editor): HTMLElement {
+  const el = (editor.options.element as HTMLElement)
+    .closest("body")
+    ?.querySelector<HTMLElement>(".tiptap-bubble-menu");
+  if (!el) throw new Error("Bubble menu was never created");
+  return el;
+}
+
+function isVisible(editor: Editor): boolean {
+  return getBubbleMenu(editor).style.display !== "none";
+}
+
+afterEach(() => {
+  while (editors.length) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("bubble menu visibility", () => {
+  it("stays hidden while the selection is empty", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.focus();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("shows for a text selection", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.view.dispatch(
+      editor.state.tr.setSelection(
+        TextSelection.create(editor.state.doc, 1, 8),
+      ),
+    );
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("shows for select-all, which is an AllSelection rather than a text selection", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("stays hidden when select-all covers an empty document", () => {
+    const editor = createEditor("<p></p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("hides again once the selection collapses", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.selectAll();
+    expect(isVisible(editor)).toBe(true);
+
+    editor.commands.setTextSelection(2);
+
+    expect(isVisible(editor)).toBe(false);
+  });
+});
+
+describe("bubble menu actions on a document-wide selection", () => {
+  it("bolds the whole document and leaves the cursor outside the mark", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    toggleMarkAndExit(editor, "bold");
+
+    expect(editor.getHTML()).toBe(
+      "<p><strong>First line</strong></p><p><strong>Second line</strong></p>",
+    );
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.storedMarks ?? []).toHaveLength(0);
+  });
+
+  it("clears formatting across every selected block", () => {
+    const editor = createEditor(
+      "<h2>A heading</h2><p><strong>bold</strong> and <em>italic</em></p>",
+    );
+    editor.commands.selectAll();
+
+    clearFormatting(editor);
+
+    expect(editor.getHTML()).toBe("<p>A heading</p><p>bold and italic</p>");
+  });
+});

package/src/client/tiptap/__tests__/floating-position.test.ts

@@ -1,7 +1,12 @@
 // @vitest-environment happy-dom
 
 import { describe, expect, it } from "vitest";
-import { getFloatingPosition } from "../floating-position.js";
+import {
+  getFloatingArrowOffset,
+  getFloatingPosition,
+  getVisibleAnchorRect,
+  getVisibleClipRect,
+} from "../floating-position.js";
 
 describe("getFloatingPosition", () => {
   const containerRect = {
@@ -72,3 +77,133 @@ describe("getFloatingPosition", () => {
     expect(layout.top).toBe(8);
   });
 });
+
+describe("getVisibleAnchorRect", () => {
+  // A three-line selection in a text column running from x=100 to x=300,
+  // inside a scroll region showing y=50..250.
+  const clipRect = { left: 100, top: 50, width: 220, height: 200 };
+  const lines = [
+    { left: 180, right: 300, top: 60, bottom: 80 },
+    { left: 100, right: 300, top: 80, bottom: 100 },
+    { left: 100, right: 160, top: 100, bottom: 120 },
+  ];
+
+  it("centers on the whole selection but hugs its first line", () => {
+    const anchor = getVisibleAnchorRect(lines, clipRect);
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("ignores an enclosing block rect when picking the first line", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 60, bottom: 120 }, ...lines],
+      clipRect,
+    );
+
+    expect(anchor?.bottom).toBe(80);
+  });
+
+  it("anchors to the first line still on screen when the selection scrolls past the top", () => {
+    const anchor = getVisibleAnchorRect(
+      [
+        { left: 100, right: 300, top: -40, bottom: -20 },
+        { left: 100, right: 300, top: -20, bottom: 0 },
+        ...lines,
+      ],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("clips a selection that overruns the scroll region", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 20, bottom: 400 }],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 50, bottom: 250 });
+  });
+
+  it("returns null when nothing is visible", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 300, bottom: 320 }],
+      clipRect,
+    );
+
+    expect(anchor).toBeNull();
+  });
+});
+
+describe("getVisibleClipRect", () => {
+  function stubRect(
+    el: HTMLElement,
+    rect: { left: number; top: number; width: number; height: number },
+  ) {
+    const measured = {
+      ...rect,
+      right: rect.left + rect.width,
+      bottom: rect.top + rect.height,
+      x: rect.left,
+      y: rect.top,
+      toJSON: () => rect,
+    };
+    el.getBoundingClientRect = () => measured;
+  }
+
+  it("narrows the container down to a scrolling ancestor", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    const content = document.createElement("div");
+    scroller.appendChild(content);
+    document.body.appendChild(scroller);
+    stubRect(scroller, { left: 100, top: 120, width: 300, height: 200 });
+
+    const clip = getVisibleClipRect(content, {
+      left: 100,
+      top: 50,
+      width: 320,
+      height: 400,
+    });
+
+    expect(clip).toEqual({ left: 100, top: 120, width: 300, height: 200 });
+    scroller.remove();
+  });
+
+  it("keeps the container when no ancestor reports a clipping region", () => {
+    const plain = document.createElement("div");
+    const content = document.createElement("div");
+    plain.appendChild(content);
+    document.body.appendChild(plain);
+    const containerRect = { left: 100, top: 50, width: 320, height: 400 };
+
+    expect(getVisibleClipRect(content, containerRect)).toEqual(containerRect);
+    plain.remove();
+  });
+});
+
+describe("getFloatingArrowOffset", () => {
+  const containerRect = { left: 100, top: 50, width: 320, height: 240 };
+
+  it("points at the anchor center", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 200, right: 240, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 60,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(60);
+  });
+
+  it("stays inside the surface when it is clamped away from the anchor", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 400, right: 420, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 8,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(150);
+  });
+});

package/src/client/tiptap/__tests__/inline-image-upload.test.ts

@@ -5,9 +5,11 @@ import { Editor, type JSONContent } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { ImageNode } from "../image-node.js";
 import {
+  adoptPendingInlineImageUploads,
   rehostInlineImage,
   resolveInlineImageUrls,
   hasPendingInlineImagePlaceholders,
+  uploadAndInsertInlineImage,
 } from "../inline-image-upload.js";
 
 const editors: Editor[] = [];
@@ -141,3 +143,38 @@ describe("resolveInlineImageUrls + hasPendingInlineImagePlaceholders", () => {
     expect(resolved).toBe(json);
   });
 });
+
+describe("adoptPendingInlineImageUploads", () => {
+  it("hands an in-flight upload on through a second adoption", async () => {
+    const first = createEditor();
+    let finishUpload: (value: { url: string }) => void = () => {};
+    const insert = uploadAndInsertInlineImage(
+      first,
+      new File(["image"], "shot.png", { type: "image/png" }),
+      () =>
+        new Promise((resolve) => {
+          finishUpload = resolve;
+        }),
+    );
+    expect(imageSrcs(first)[0]?.startsWith("blob:")).toBe(true);
+
+    // Content can move more than once — fullscreen hands it to compose, and a
+    // format switch then rebuilds compose's editor under it.
+    const second = createEditor();
+    second.commands.setContent(first.getJSON());
+    adoptPendingInlineImageUploads(second);
+
+    const third = createEditor();
+    third.commands.setContent(second.getJSON());
+    const adopted = adoptPendingInlineImageUploads(third);
+    expect(adopted).toHaveLength(1);
+    // Submitting from here still knows the image is on its way.
+    expect(hasPendingInlineImagePlaceholders(third.getJSON())).toBe(true);
+
+    finishUpload({ url: "https://cdn.test/shot.webp" });
+    await insert;
+    await Promise.all(adopted);
+
+    expect(imageSrcs(third)).toEqual(["https://cdn.test/shot.webp"]);
+  });
+});

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

@@ -7,14 +7,23 @@
  */
 
 import { Extension, type Editor } from "@tiptap/core";
-import { Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
+import {
+  AllSelection,
+  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";
 import {
   getFixedFloatingContainerRect,
+  getFloatingArrowOffset,
   getFloatingPosition,
+  getRangeAnchorRect,
+  getVisibleClipRect,
 } from "./floating-position.js";
 
 const bubbleMenuKey = new PluginKey("bubbleMenu");
@@ -315,20 +324,22 @@ export const BubbleMenu = Extension.create({
       if (!el) return;
       el.style.display = "flex";
 
-      // Position above selection center
+      // Anchor on the first visible line of the selection, centered on its
+      // horizontal span. Select-all lands on the text you are looking at
+      // rather than at the top of a document scrolled out of view.
       const { from, to } = view.state.selection;
-      const start = view.coordsAtPos(from);
-      const end = view.coordsAtPos(to);
       const dialog = view.dom.closest("dialog");
+      const containerRect = getFixedFloatingContainerRect(dialog);
+      const anchorRect = getRangeAnchorRect(
+        view,
+        from,
+        to,
+        getVisibleClipRect(view.dom, containerRect),
+      );
       const rect = el.getBoundingClientRect();
       const layout = getFloatingPosition({
-        anchorRect: {
-          left: start.left,
-          right: end.right,
-          top: Math.min(start.top, end.top),
-          bottom: Math.max(start.bottom, end.bottom),
-        },
-        containerRect: getFixedFloatingContainerRect(dialog),
+        anchorRect,
+        containerRect,
         floatingWidth: rect.width,
         floatingHeight: rect.height,
         preferredPlacement: "top",
@@ -338,6 +349,16 @@ export const BubbleMenu = Extension.create({
 
       el.style.left = `${layout.left}px`;
       el.style.top = `${layout.top}px`;
+      el.dataset.placement = layout.placement;
+      el.style.setProperty(
+        "--floating-arrow-x",
+        `${getFloatingArrowOffset({
+          anchorRect,
+          containerRect,
+          floatingLeft: layout.left,
+          floatingWidth: rect.width,
+        })}px`,
+      );
 
       syncActive();
     }
@@ -358,13 +379,23 @@ export const BubbleMenu = Extension.create({
     function shouldShow(view: EditorView): boolean {
       const { state } = view;
       const { selection } = state;
-      // Only show for non-empty text selections (not node selections)
-      if (!(selection instanceof TextSelection) || selection.empty)
-        return false;
-      if (!selection.$from.parent.isTextblock) return false;
+      if (selection.empty) return false;
       // Hide when link input popup is open
       if (isLinkToolbarInputActive()) return false;
-      return true;
+
+      // Select-all reports an AllSelection, not a TextSelection. Clearing
+      // formatting off a pasted draft and quoting a whole note are exactly
+      // what a document-wide selection is for, so it gets the same toolbar as
+      // dragging over everything — as long as there is text to format.
+      if (selection instanceof AllSelection) {
+        return (
+          state.doc.textBetween(selection.from, selection.to, " ").trim() !== ""
+        );
+      }
+
+      // Otherwise only non-empty text selections (not node selections)
+      if (!(selection instanceof TextSelection)) return false;
+      return selection.$from.parent.isTextblock;
     }
 
     return [

package/src/client/tiptap/floating-position.ts

@@ -1,11 +1,13 @@
-interface FloatingAnchorRect {
+import type { EditorView } from "@tiptap/pm/view";
+
+export interface FloatingAnchorRect {
   left: number;
   right: number;
   top: number;
   bottom: number;
 }
 
-interface FloatingContainerRect {
+export interface FloatingContainerRect {
   left: number;
   top: number;
   width: number;
@@ -165,3 +167,215 @@ export function getFloatingPosition(
     maxHeight,
   };
 }
+
+/** Overflow values that clip a descendant out of view. */
+const CLIPPING_OVERFLOW = new Set([
+  "auto",
+  "scroll",
+  "hidden",
+  "clip",
+  "overlay",
+]);
+
+function intersectRects(
+  a: FloatingContainerRect,
+  b: FloatingContainerRect,
+): FloatingContainerRect {
+  const left = Math.max(a.left, b.left);
+  const top = Math.max(a.top, b.top);
+  const right = Math.min(a.left + a.width, b.left + b.width);
+  const bottom = Math.min(a.top + a.height, b.top + b.height);
+  return { left, top, width: right - left, height: bottom - top };
+}
+
+/**
+ * Narrows a floating container down to the region where the editor's content
+ * is actually on screen, by intersecting it with every clipping ancestor.
+ *
+ * The composer's editor sits inside its own scroll region, so a selection can
+ * run well past what the reader can see. Anchoring to the raw container would
+ * point the surface at text hidden behind the scroll edge; this keeps the
+ * anchor inside the scrollport.
+ *
+ * @param element - Editor element whose visible region is wanted
+ * @param containerRect - Bounds of the fixed-position floating container
+ * @returns Visible region in viewport coordinates
+ *
+ * @example
+ * const clip = getVisibleClipRect(view.dom, getFixedFloatingContainerRect(dialog));
+ */
+export function getVisibleClipRect(
+  element: HTMLElement,
+  containerRect: FloatingContainerRect,
+): FloatingContainerRect {
+  let clip = containerRect;
+  let node = element.parentElement;
+
+  while (node && node !== document.body) {
+    const style = getComputedStyle(node);
+    if (
+      CLIPPING_OVERFLOW.has(style.overflowY) ||
+      CLIPPING_OVERFLOW.has(style.overflowX)
+    ) {
+      const rect = node.getBoundingClientRect();
+      const next = intersectRects(clip, {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+      });
+      // A zero-size intersection means the ancestor reported no layout at all
+      // (detached nodes, test environments). Keep the wider region instead of
+      // collapsing the anchor to nothing.
+      if (next.width > 0 && next.height > 0) clip = next;
+    }
+    node = node.parentElement;
+  }
+
+  return clip;
+}
+
+/**
+ * Reduces the line boxes of a selection to the rectangle a floating surface
+ * should point at.
+ *
+ * Horizontally this is the union of everything visible, so a selection that
+ * covers whole blocks centers on the text column rather than on wherever the
+ * first and last lines happen to break. Vertically it is the *first* visible
+ * line only: a selection running past the bottom of the screen still gets an
+ * anchor the reader can see, and flipping the surface below that line lands it
+ * inside the selection instead of somewhere off-screen.
+ *
+ * @param rects - Client rects of the selection, in viewport coordinates
+ * @param clipRect - Region the anchor must stay inside
+ * @returns Anchor rectangle, or null when nothing is visible
+ *
+ * @example
+ * const anchor = getVisibleAnchorRect(range.getClientRects(), clipRect);
+ */
+export function getVisibleAnchorRect(
+  rects: readonly FloatingAnchorRect[],
+  clipRect: FloatingContainerRect,
+): FloatingAnchorRect | null {
+  const clipRight = clipRect.left + clipRect.width;
+  const clipBottom = clipRect.top + clipRect.height;
+
+  let left = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let bottom = Number.POSITIVE_INFINITY;
+  let found = false;
+
+  for (const rect of rects) {
+    const rectTop = Math.max(rect.top, clipRect.top);
+    const rectBottom = Math.min(rect.bottom, clipBottom);
+    if (rectBottom <= rectTop) continue;
+    const rectLeft = Math.max(rect.left, clipRect.left);
+    const rectRight = Math.min(rect.right, clipRight);
+    if (rectRight < rectLeft) continue;
+
+    left = Math.min(left, rectLeft);
+    right = Math.max(right, rectRight);
+    top = Math.min(top, rectTop);
+    // Every kept rect ends below `top`, so the smallest bottom belongs to the
+    // shortest box starting there — the first line, even when the browser also
+    // reports a full-height rect for an enclosing block.
+    bottom = Math.min(bottom, rectBottom);
+    found = true;
+  }
+
+  return found ? { left, right, top, bottom } : null;
+}
+
+function measureRangeRects(
+  view: EditorView,
+  from: number,
+  to: number,
+): FloatingAnchorRect[] {
+  if (typeof document === "undefined" || !document.createRange) return [];
+
+  try {
+    const start = view.domAtPos(from);
+    const end = view.domAtPos(to);
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    const rects = range.getClientRects?.();
+    return rects ? Array.from(rects) : [];
+  } catch {
+    // Positions that do not resolve to a DOM range (node selections, widgets)
+    // fall back to the caller's endpoint coordinates.
+    return [];
+  }
+}
+
+/**
+ * Resolves the rectangle a floating surface should point at for a document
+ * range.
+ *
+ * Measuring the caret at each end is only correct while the range stays on one
+ * line: as soon as it wraps, the "anchor" mixes the first line's left edge with
+ * the last line's right edge and centers on a point inside neither. This
+ * measures the range's real line boxes instead.
+ *
+ * @param view - Editor view owning the range
+ * @param from - Range start position
+ * @param to - Range end position
+ * @param clipRect - Region the anchor must stay inside
+ * @returns Anchor rectangle in viewport coordinates
+ *
+ * @example
+ * const anchor = getRangeAnchorRect(view, from, to, clipRect);
+ */
+export function getRangeAnchorRect(
+  view: EditorView,
+  from: number,
+  to: number,
+  clipRect: FloatingContainerRect,
+): FloatingAnchorRect {
+  const measured = getVisibleAnchorRect(
+    measureRangeRects(view, from, to),
+    clipRect,
+  );
+  if (measured) return measured;
+
+  const start = view.coordsAtPos(from);
+  const end = view.coordsAtPos(to);
+  const endpoints: FloatingAnchorRect = {
+    left: Math.min(start.left, end.left),
+    right: Math.max(start.right, end.right),
+    top: start.top,
+    bottom: start.bottom,
+  };
+  return getVisibleAnchorRect([endpoints], clipRect) ?? endpoints;
+}
+
+/**
+ * Horizontal offset of a floating surface's pointer arrow, measured from the
+ * surface's own left edge.
+ *
+ * The surface is clamped to the container, so a centered arrow drifts off the
+ * anchor near the edges of the screen. This keeps it on the anchor without
+ * letting it slide past the rounded corners.
+ *
+ * @param options - Anchor, container, and the surface's placed geometry
+ * @returns Offset in pixels from the surface's left edge
+ *
+ * @example
+ * el.style.setProperty("--floating-arrow-x", `${getFloatingArrowOffset({...})}px`);
+ */
+export function getFloatingArrowOffset(options: {
+  anchorRect: FloatingAnchorRect;
+  containerRect: FloatingContainerRect;
+  floatingLeft: number;
+  floatingWidth: number;
+  inset?: number;
+}): number {
+  const inset = options.inset ?? 10;
+  const anchorCenter =
+    (options.anchorRect.left + options.anchorRect.right) / 2 -
+    options.containerRect.left;
+  const min = Math.min(inset, options.floatingWidth / 2);
+  const max = Math.max(options.floatingWidth - inset, min);
+  return clamp(anchorCenter - options.floatingLeft, min, max);
+}

package/src/client/tiptap/inline-image-upload.ts

@@ -204,7 +204,9 @@ export async function rehostInlineImage(
  * Scans the editor's document for image srcs that match pending registry entries
  * (`blob:` placeholders from the insert flow, or remote/`data:` placeholders
  * from the paste-rehost flow). For each match, takes ownership from the original
- * editor and sets up replacement/removal watchers on the new editor.
+ * editor and sets up replacement/removal watchers on the new editor. Content can
+ * pass through several editors before it is submitted, so an upload adopted once
+ * can be adopted again.
  *
  * Call this immediately after `setContent` with JSON that may contain pending
  * placeholders (e.g. after fullscreen close transfers content back to compose).
@@ -223,12 +225,14 @@ export function adoptPendingInlineImageUploads(
     const src = node.attrs.src as string;
     if (typeof src !== "string") return;
 
-    const uploaded = inflightUploads.get(src);
+    const uploaded = inflightUploads.get(src) ?? adoptedUploads.get(src);
     if (!uploaded) return;
 
     // Take ownership — prevents original editor's finally from revoking the URL.
     // Move to adoptedUploads so resolveInlineImageUrls can still find the promise
-    // if the user submits before the upload completes.
+    // if the user submits before the upload completes. Content can be handed on
+    // more than once (fullscreen → compose → a format switch), so an entry
+    // already sitting in adoptedUploads is adopted again rather than skipped.
     inflightUploads.delete(src);
     adoptedUploads.set(src, uploaded);