@jant/core 0.6.16 → 0.7.1

package/src/client/tiptap/__tests__/mark-exit.test.ts

@@ -3,7 +3,6 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { Editor } from "@tiptap/core";
 import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
-import { ExitableMarks } from "../exitable-marks.js";
 import { toggleMarkAndExit } from "../bubble-menu.js";
 
 const editors: Editor[] = [];
@@ -13,7 +12,7 @@ function createEditor(content: string): Editor {
   document.body.appendChild(element);
   const editor = new Editor({
     element,
-    extensions: [...createMarkdownContentExtensions(), ExitableMarks],
+    extensions: createMarkdownContentExtensions(),
     content,
   });
   editor.view.dispatch(editor.state.tr);

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

@@ -150,6 +150,32 @@ describe("isCodeEditorHtml", () => {
 });
 
 describe("MarkdownClipboard", () => {
+  it("keeps pasted plain text that opens with a word and a period", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(editor, "PS. 补充一句");
+
+    expect(editor.getJSON().content).toEqual([
+      { type: "paragraph", content: [{ type: "text", text: "PS. 补充一句" }] },
+    ]);
+  });
+
+  it("turns pasted plain numbered lines into an ordered list", () => {
+    const element = document.createElement("div");
+    document.body.appendChild(element);
+    const editor = createTiptapEditor({ element });
+    editors.push(editor);
+
+    dispatchMarkdownPaste(editor, "1. First\n2. Second");
+
+    const list = editor.getJSON().content?.[0];
+    expect(list?.type).toBe("orderedList");
+    expect(list?.content).toHaveLength(2);
+  });
+
   it("prefers an explicit text/markdown flavor over HTML and plain text", () => {
     const element = document.createElement("div");
     document.body.appendChild(element);

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/extensions.ts

@@ -12,7 +12,6 @@ import { PasteMedia } from "./paste-media.js";
 import type { PasteMediaOptions } from "./paste-media.js";
 import { BubbleMenu } from "./bubble-menu.js";
 import { LinkToolbar } from "./link-toolbar.js";
-import { ExitableMarks } from "./exitable-marks.js";
 import { CodeBlockIndent } from "./tab-indent.js";
 import { StructuralKeymap } from "./structural-keymap.js";
 import { ContinuousLists } from "./continuous-lists.js";
@@ -88,7 +87,6 @@ export function createSettingsEditorExtensions(
     ReclaimModEnter,
     LinkInputRules,
     MarkdownClipboard,
-    ExitableMarks,
     InsertParagraphAround,
     StructuralKeymap,
     ContinuousLists,
@@ -133,7 +131,6 @@ export function createEditorExtensions(
       toolbarMode: options.toolbarMode ?? "default",
     }),
     LinkToolbar,
-    ExitableMarks,
     InsertParagraphAround,
     StructuralKeymap,
     ContinuousLists,

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);
 

package/src/client/tiptap/link-toolbar.ts

@@ -15,7 +15,10 @@ import type { EditorState } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
 import {
   getFixedFloatingContainerRect,
+  getFloatingArrowOffset,
   getFloatingPosition,
+  getRangeAnchorRect,
+  getVisibleClipRect,
 } from "./floating-position.js";
 
 const linkToolbarKey = new PluginKey("linkToolbar");
@@ -195,17 +198,17 @@ export const LinkToolbar = Extension.create({
       el.style.display = "flex";
 
       const dialog = view.dom.closest("dialog");
-      const start = view.coordsAtPos(from);
-      const end = view.coordsAtPos(to);
+      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",
@@ -215,6 +218,16 @@ export const LinkToolbar = 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`,
+      );
     }
 
     interface ShowInputOptions {