@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/src/editor/TentapEditor.native.tsx

@@ -13,7 +13,14 @@
  * No BubbleToolbar (10Tap does not support floating menus).
  */
 
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+} from "react";
 import { StyleSheet, useColorScheme } from "react-native";
 import {
   RichText,
@@ -29,15 +36,17 @@ import {
   darkEditorCss,
   darkEditorTheme,
 } from "@10play/tentap-editor";
-import { View, useThemeName } from "tamagui";
+import { View, useTheme, useThemeName } from "tamagui";
 import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
 import { RichEditorContext } from "../context";
+import { PALETTE_THEME_TOKENS } from "../constants";
+import { t } from "../shared/t";
 import { getEditorStateFromBridge } from "./useEditorState";
 
 function useNativeEditorDarkMode(): boolean {
   const themeName = useThemeName();
   const osScheme = useColorScheme();
-  if (themeName != null && `${themeName}` !== "") {
+  if (themeName) {
     return String(themeName).startsWith("dark");
   }
   return osScheme === "dark";
@@ -47,23 +56,32 @@ function useNativeEditorDarkMode(): boolean {
 // TentapEditor
 // ===========================================================================
 
-export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
+export interface TentapEditorProps extends RichEditorProps {
+  /** Fill the available space (fullscreen modal) instead of using minHeight */
+  fill?: boolean;
+}
+
+// Avoid `forwardRef<A, B>(...)` — Metro/Babel TSX can parse the `>` as JSX and
+// throw "Missing initializer in const declaration". Cast instead.
+export const TentapEditor = forwardRef(
   (
     {
       initialContent = "",
       initialJSON,
-      placeholder = "Start writing...",
+      placeholder: placeholderProp,
       editable = true,
       autoFocus = false,
       onChange,
       onStateChange,
       minHeight = 150,
       maxHeight,
+      fill = false,
       hasError: _hasError,
-    },
-    ref,
+    }: TentapEditorProps,
+    ref: ForwardedRef<RichEditorRef>,
   ) => {
     const ctx = RichEditorContext.useStyledContext();
+    const placeholder = placeholderProp ?? t("Start writing...");
     const isDarkMode = useNativeEditorDarkMode();
     const cachedHtml = useRef<string>("");
     const cachedJson = useRef<any>(null);
@@ -82,7 +100,9 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
         }),
       ],
       theme: isDarkMode ? darkEditorTheme : undefined,
-      initialContent: initialJSON ? JSON.stringify(initialJSON) : initialContent,
+      // Tentap accepts HTML string OR a ProseMirror JSON object. Never
+      // JSON.stringify the object — that loads as broken HTML and wipes the doc.
+      initialContent: (initialJSON as any) ?? initialContent,
       autofocus: autoFocus,
       editable,
       onChange: async () => {
@@ -111,6 +131,22 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
       return () => clearTimeout(id);
     }, [editor, isDarkMode]);
 
+    // Web-authored color/highlight marks store theme custom properties
+    // (`var(--red11)`); the 10Tap webview has no tamagui stylesheet, so
+    // define the palette vars there from the active theme (Axiom 5: same
+    // tokens, resolved once per scheme).
+    const theme = useTheme();
+    useEffect(() => {
+      const id = setTimeout(() => {
+        const decls = PALETTE_THEME_TOKENS.map((token) => {
+          const value = (theme as any)[token]?.val;
+          return value ? `--${token}: ${value};` : "";
+        }).join(" ");
+        editor.injectCSS(`:root { ${decls} }`, "multiplatform-tentap-palette");
+      }, 150);
+      return () => clearTimeout(id);
+    }, [editor, theme]);
+
     // Subscribe to editor state updates
     useEffect(() => {
       const unsubscribe = editor._subscribeToEditorStateUpdate((state: any) => {
@@ -209,13 +245,24 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
             break;
 
           case "textColor":
-            if (payload?.color) {
-              editor.setColor(payload.color);
+            // null clears (Default swatch); undefined/missing is a no-op so a
+            // bare toolbar tap cannot call setColor(undefined) and wipe content
+            // (SB-N-ios-25).
+            if (payload && "color" in payload) {
+              if (typeof payload.color === "string" && payload.color.length > 0) {
+                editor.setColor(payload.color);
+              } else {
+                editor.unsetColor();
+              }
             }
             break;
           case "highlight":
-            if (payload?.color) {
-              editor.setHighlight(payload.color);
+            if (payload && "color" in payload) {
+              if (typeof payload.color === "string" && payload.color.length > 0) {
+                editor.setHighlight(payload.color);
+              } else {
+                editor.unsetHighlight();
+              }
             }
             break;
 
@@ -238,7 +285,7 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
         getHTML: () => cachedHtml.current,
         getJSON: () => cachedJson.current,
         setHTML: (html: string) => editor.setContent(html),
-        setJSON: (json: any) => editor.setContent(JSON.stringify(json)),
+        setJSON: (json: any) => editor.setContent(json),
         focus: () => editor.focus(),
         blur: () => editor.blur(),
       }),
@@ -247,13 +294,14 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
 
     return (
       <View
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        backgroundColor={ctx.disabled ? "$color3" : "$color2"}
+        flex={fill ? 1 : undefined}
+        minHeight={fill ? undefined : minHeight}
+        maxHeight={fill ? undefined : maxHeight}
+        backgroundColor={ctx.disabled ? "$color3" : fill ? "$background" : "$color2"}
         overflow="hidden"
         opacity={ctx.disabled ? 0.5 : 1}
       >
-        <RichText editor={editor} style={styles.editor} />
+        <RichText editor={editor} style={fill ? styles.editorFill : styles.editor} />
       </View>
     );
   },
@@ -266,4 +314,7 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 150,
   },
+  editorFill: {
+    flex: 1,
+  },
 });

package/src/editor/TiptapEditor.tsx

@@ -13,6 +13,7 @@ import {
   memo,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -31,35 +32,51 @@ import { Superscript } from "@tiptap/extension-superscript";
 import TaskList from "@tiptap/extension-task-list";
 import TaskItem from "@tiptap/extension-task-item";
 import Image from "@tiptap/extension-image";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Typography from "@tiptap/extension-typography";
 import CharacterCount from "@tiptap/extension-character-count";
+import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
 
 import { Table } from "@tiptap/extension-table";
 import { TableRow } from "@tiptap/extension-table-row";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { common, createLowlight } from "lowlight";
-import TurndownService from "turndown";
-import { marked } from "marked";
-import { View, styled } from "tamagui";
+import { View, getTokens, styled, useTheme, useThemeName } from "tamagui";
 import { isWeb } from "@tamagui/constants";
+import { menuRowFrame, useResolvedKnobs } from "@multiplatform.one/theme";
+import { clampRadiusForLargeComponent } from "@multiplatform.one/forms";
 import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
 import { defaultEditorState } from "../types";
 import { RichEditorContext } from "../context";
+import { t } from "../shared/t";
 import { getEditorCSS } from "./editorStyles";
 import { SlashCommands } from "./SlashCommands";
 import { MarkdownPaste } from "./MarkdownPaste";
 import { BlockDragHandle } from "./BlockDragHandle";
+import { MediaUpload } from "./media";
+import { createMentionExtension } from "./mentions";
+import { EmojiSuggestion } from "./emoji";
+import { InlineMath } from "./mathematics";
+import { CodeBlockWithPreview, PreviewChromeStore, setPreviewChrome } from "./codeBlockPreview";
+import { htmlToMarkdown, markdownToHtml } from "./markdown";
+import { cleanPastedHtml } from "./pasteCleanup";
+import {
+  SuggestionChromeStore,
+  fallbackSuggestionChrome,
+  type SuggestionChrome,
+} from "./suggestionPopup";
 import { getEditorStateFromTiptap } from "./useEditorState";
 import { BubbleToolbar } from "../toolbar/BubbleToolbar";
 import { LinkBubble } from "../toolbar/LinkBubble";
 import { CodeBlockBubble } from "../toolbar/CodeBlockBubble";
 import { ImageBubble } from "../toolbar/ImageBubble";
 import { TableBubble } from "../toolbar/TableBubble";
+import { MathBubble } from "../toolbar/MathBubble";
 
 const lowlight = createLowlight(common);
-const turndownService = new TurndownService({ headingStyle: "atx", codeBlockStyle: "fenced" });
+
+/** Enter/exit fade for bubbles and suggestion popups (0 when animation none) */
+const MOTION_MS = 120;
 
 /**
  * Tab / Shift-Tab indentation inside code blocks.
@@ -222,6 +239,8 @@ export interface TiptapEditorProps extends RichEditorProps {
   headingFontFamily?: string;
   /** Current editing mode: richtext (WYSIWYG) or markdown (raw source) */
   editorMode?: "richtext" | "markdown";
+  /** Fullscreen mode: content fills the flex parent and scrolls internally */
+  fullscreen?: boolean;
 }
 
 // ===========================================================================
@@ -245,7 +264,7 @@ export const TiptapEditor = memo(
       {
         initialContent = "",
         initialJSON,
-        placeholder = "Start writing...",
+        placeholder: placeholderProp,
         editable = true,
         autoFocus = false,
         onChange,
@@ -259,10 +278,15 @@ export const TiptapEditor = memo(
         bodyFontFamily,
         headingFontFamily,
         editorMode = "richtext",
+        fullscreen = false,
+        onImageUpload,
+        onFileUpload,
+        mentions,
       },
       ref,
     ) => {
       const _ctx = RichEditorContext.useStyledContext();
+      const placeholder = placeholderProp ?? t("Start writing...");
       const internalRef = useRef<RichEditorRef>(null);
       const stateRafRef = useRef<number>(0);
       const changeRafRef = useRef<number>(0);
@@ -270,6 +294,24 @@ export const TiptapEditor = memo(
       const onChangeRef = useRef(onChange);
       const [markdownSource, setMarkdownSource] = useState("");
       const prevModeRef = useRef(editorMode);
+      const theme = useTheme();
+      const themeName = useThemeName();
+      const { knobProps } = useResolvedKnobs();
+      const motionMs = knobProps.transition !== undefined ? MOTION_MS : 0;
+      const scopeClass = `rt-scope-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+
+      // Mention wiring is captured at mount (the extension list is fixed);
+      // the items function stays live through this ref.
+      const mentionsRef = useRef(mentions);
+      mentionsRef.current = mentions;
+      const [mentionExtension] = useState(() =>
+        mentions
+          ? createMentionExtension({
+              trigger: mentions.trigger,
+              items: (query) => mentionsRef.current?.items(query) ?? [],
+            })
+          : null,
+      );
 
       useEffect(() => {
         onStateChangeRef.current = onStateChange;
@@ -302,7 +344,7 @@ export const TiptapEditor = memo(
             codeBlock: false,
             hardBreak: false,
           }),
-          CodeBlockLowlight.configure({
+          CodeBlockWithPreview.configure({
             lowlight,
             exitOnTripleEnter: true,
             exitOnArrowDown: false,
@@ -310,10 +352,30 @@ export const TiptapEditor = memo(
           ParagraphEnterKeys,
           CodeBlockTabIndent,
           ListItemKeys,
-          Typography,
+          // superscriptTwo/Three would mangle typed TeX (`$E=mc^2$` became
+          // `E=mc²` before the math input rule ran) — off, rest stays.
+          Typography.configure({
+            superscriptTwo: false,
+            superscriptThree: false,
+          }),
           CharacterCount,
           SlashCommands,
           MarkdownPaste,
+          MediaUpload,
+          SuggestionChromeStore,
+          PreviewChromeStore,
+          EmojiSuggestion,
+          InlineMath,
+          // Collapsible sections (GitLab <details> parity). persist: true
+          // is the extension's supported mode: its node view re-syncs the
+          // open state from node.attrs on every update, so ephemeral
+          // (persist: false) toggles get reverted by the next transaction.
+          // The open state therefore lives in the doc and serializes as
+          // `<details open>` — valid GitLab markdown.
+          Details.configure({ persist: true }),
+          DetailsSummary,
+          DetailsContent,
+          ...(mentionExtension ? [mentionExtension] : []),
           BlockDragHandle,
           Table.configure({ resizable: true }),
           TableRow,
@@ -345,6 +407,17 @@ export const TiptapEditor = memo(
         content: initialJSON || initialContent,
         editable,
         autofocus: autoFocus,
+        // No htmlFor target exists for the contenteditable — name it directly
+        // (axe aria-input-field-name); placeholder doubles as the name.
+        editorProps: {
+          attributes: {
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-label": placeholder || t("Rich text editor"),
+          },
+          // Strip Google Docs / Word clipboard junk before ProseMirror parses
+          transformPastedHTML: cleanPastedHtml,
+        },
         injectCSS: false,
         immediatelyRender: false,
         shouldRerenderOnTransaction: false,
@@ -366,24 +439,76 @@ export const TiptapEditor = memo(
         onBlur: () => onBlur?.(),
       });
 
+      // Keep upload handlers live in editor storage (paste/drop + slash image)
+      useEffect(() => {
+        if (!editor) return;
+        editor.storage.mediaUpload.handlers = { onImageUpload, onFileUpload };
+      }, [editor, onImageUpload, onFileUpload]);
+
+      // Push resolved theme + knob chrome for the DOM-portaled suggestion
+      // popups (slash / mention): every color and structural role arrives
+      // resolved -- the popups never invent their own values.
+      useEffect(() => {
+        if (!editor) return;
+        const radiusToken = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius, 4);
+        const radiusValue =
+          typeof radiusToken === "number"
+            ? radiusToken
+            : ((getTokens().radius as any)?.[radiusToken]?.val ?? fallbackSuggestionChrome.radius);
+        // LC-16: the DOM popup rows share menuRowFrame geometry — resolve
+        // its paddingHorizontal token to px here (theme scope) and push it.
+        const rowPadToken = menuRowFrame.paddingHorizontal as string;
+        const rowPaddingX =
+          (getTokens().space as any)?.[rowPadToken]?.val ?? fallbackSuggestionChrome.rowPaddingX;
+        // Elevation rides the theme's scheme-aware shadow tokens (Axiom 5) —
+        // the same channel the popover family resolves, never a raw rgba.
+        const shadowMain = theme.shadow2?.val;
+        const shadowSoft = theme.shadow1?.val;
+        const chrome: SuggestionChrome = {
+          background: theme.background?.val ?? fallbackSuggestionChrome.background,
+          borderColor: theme.borderColor?.val ?? fallbackSuggestionChrome.borderColor,
+          activeBackground: theme.color4?.val ?? fallbackSuggestionChrome.activeBackground,
+          iconTileBackground: theme.color3?.val ?? fallbackSuggestionChrome.iconTileBackground,
+          titleColor: theme.color12?.val ?? fallbackSuggestionChrome.titleColor,
+          descriptionColor: theme.color11?.val ?? fallbackSuggestionChrome.descriptionColor,
+          radius: typeof radiusValue === "number" ? radiusValue : fallbackSuggestionChrome.radius,
+          shadow:
+            shadowMain && shadowSoft
+              ? `0px 8px 28px ${shadowMain}, 0px 2px 6px ${shadowSoft}`
+              : fallbackSuggestionChrome.shadow,
+          motionMs,
+          rowPaddingX:
+            typeof rowPaddingX === "number" ? rowPaddingX : fallbackSuggestionChrome.rowPaddingX,
+        };
+        editor.storage.suggestionChrome.value = chrome;
+      }, [editor, theme, knobProps.borderRadius.borderRadius, motionMs]);
+
+      // Push the resolved color scheme for block previews (mermaid/math):
+      // the node views subscribe and re-render diagrams on a theme flip.
+      useEffect(() => {
+        if (!editor) return;
+        setPreviewChrome(editor, {
+          scheme: String(themeName).startsWith("dark") ? "dark" : "light",
+          fontFamily: bodyFontFamily,
+        });
+      }, [editor, themeName, bodyFontFamily]);
+
       useEffect(() => {
         if (!editor) return;
         if (prevModeRef.current === editorMode) return;
         prevModeRef.current = editorMode;
 
         if (editorMode === "markdown") {
-          setMarkdownSource(turndownService.turndown(editor.getHTML()));
+          setMarkdownSource(htmlToMarkdown(editor.getHTML()));
         } else {
-          const html = marked.parse(markdownSource, { async: false }) as string;
-          editor.commands.setContent(html);
+          editor.commands.setContent(markdownToHtml(markdownSource));
         }
       }, [editorMode, editor, markdownSource]);
 
       const handleMarkdownChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
         const md = e.target.value;
         setMarkdownSource(md);
-        const html = marked.parse(md, { async: false }) as string;
-        onChangeRef.current?.(html, null);
+        onChangeRef.current?.(markdownToHtml(md), null);
       }, []);
 
       const executeCommand = useCallback(
@@ -457,9 +582,22 @@ export const TiptapEditor = memo(
               break;
             case "link":
               if (payload?.href) {
-                chain.setLink({ href: payload.href }).run();
+                if (editor.state.selection.empty && !editor.isActive("link")) {
+                  // GitLab parity: with nothing selected, insert the URL
+                  // itself as linked text instead of silently no-oping
+                  chain
+                    .insertContent({
+                      type: "text",
+                      text: payload.text ?? payload.href,
+                      marks: [{ type: "link", attrs: { href: payload.href } }],
+                    })
+                    .run();
+                } else {
+                  // Cursor inside an existing link updates the whole link
+                  chain.extendMarkRange("link").setLink({ href: payload.href }).run();
+                }
               } else {
-                chain.unsetLink().run();
+                chain.extendMarkRange("link").unsetLink().run();
               }
               break;
             case "undo":
@@ -562,20 +700,35 @@ export const TiptapEditor = memo(
       (internalRef as any).current = refMethods;
 
       const editorCSS = useMemo(
-        () => getEditorCSS({ minHeight, maxHeight, bodyFontFamily, headingFontFamily }),
-        [minHeight, maxHeight, bodyFontFamily, headingFontFamily],
+        () =>
+          getEditorCSS({
+            minHeight,
+            maxHeight,
+            bodyFontFamily,
+            headingFontFamily,
+            fullscreen,
+            motionMs,
+            scopeClass,
+          }),
+        [minHeight, maxHeight, bodyFontFamily, headingFontFamily, fullscreen, motionMs, scopeClass],
       );
 
       if (editorMode === "markdown") {
         return (
-          <EditorContainer minHeight={minHeight} maxHeight={maxHeight} overflow="hidden">
+          <EditorContainer
+            minHeight={fullscreen ? 0 : minHeight}
+            maxHeight={fullscreen ? undefined : maxHeight}
+            overflow="hidden"
+          >
             <textarea
               value={markdownSource}
               onChange={handleMarkdownChange}
+              aria-label={t("Markdown source")}
               style={{
                 width: "100%",
-                minHeight: minHeight,
-                maxHeight: maxHeight || undefined,
+                minHeight: fullscreen ? 0 : minHeight,
+                maxHeight: fullscreen ? undefined : maxHeight || undefined,
+                flex: fullscreen ? "1 1 0%" : undefined,
                 padding: "12px 12px 12px 16px",
                 border: "none",
                 outline: "none",
@@ -595,7 +748,12 @@ export const TiptapEditor = memo(
       }
 
       return (
-        <EditorContainer minHeight={minHeight} maxHeight={maxHeight} overflow="hidden">
+        <EditorContainer
+          className={scopeClass}
+          minHeight={fullscreen ? 0 : minHeight}
+          maxHeight={fullscreen ? undefined : maxHeight}
+          overflow="hidden"
+        >
           {isWeb && <style>{editorCSS}</style>}
           {showBubbleToolbar && (
             <>
@@ -606,7 +764,14 @@ export const TiptapEditor = memo(
               <TableBubble editor={editor} />
             </>
           )}
-          <EditorContent editor={editor} />
+          {/* Always mounted (unlike the optional bubbles): it is the ONLY
+              edit path for inline math atoms — without it a typed `$x$`
+              node would be a dead end. */}
+          {editable && <MathBubble editor={editor} />}
+          <EditorContent
+            editor={editor}
+            style={fullscreen ? { flex: "1 1 0%", minHeight: 0, overflowY: "auto" } : undefined}
+          />
         </EditorContainer>
       );
     },

package/src/editor/blockAnchor.spec.ts

@@ -0,0 +1,70 @@
+/**
+ * Block-rect bubble anchoring against a headless Tiptap editor.
+ */
+
+import { describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TextSelection } from "@tiptap/pm/state";
+import { getBlockVirtualElement } from "./blockAnchor";
+
+function createEditor(content: string) {
+  return new Editor({
+    element: document.createElement("div"),
+    extensions: [StarterKit, Table, TableRow, TableHeader, TableCell],
+    content,
+  });
+}
+
+/** Places the text cursor inside the first node of the given type */
+function placeCursorIn(editor: Editor, nodeTypeName: string) {
+  let target = -1;
+  editor.state.doc.descendants((node, pos) => {
+    if (target === -1 && node.type.name === nodeTypeName) target = pos + 1;
+    return target === -1;
+  });
+  if (target === -1) throw new Error(`no ${nodeTypeName} in doc`);
+  const selection = TextSelection.near(editor.state.doc.resolve(target + 1));
+  editor.view.dispatch(editor.state.tr.setSelection(selection));
+}
+
+describe("getBlockVirtualElement", () => {
+  it("returns the table DOM element when the cursor is inside a table", () => {
+    const editor = createEditor(
+      "<p>before</p><table><tr><th>h</th></tr><tr><td>cell</td></tr></table>",
+    );
+    placeCursorIn(editor, "table");
+
+    const ref = getBlockVirtualElement(editor, "table");
+    expect(ref).not.toBeNull();
+    expect((ref!.contextElement as HTMLElement).tagName).toBe("TABLE");
+    // The anchor rect delegates to the block's live rect
+    expect(typeof ref!.getBoundingClientRect().width).toBe("number");
+    editor.destroy();
+  });
+
+  it("returns the pre element when the cursor is inside a code block", () => {
+    const editor = createEditor("<p>before</p><pre><code>const a = 1;</code></pre>");
+    placeCursorIn(editor, "codeBlock");
+
+    const ref = getBlockVirtualElement(editor, "codeBlock");
+    expect(ref).not.toBeNull();
+    expect((ref!.contextElement as HTMLElement).tagName).toBe("PRE");
+    editor.destroy();
+  });
+
+  it("returns null when the selection is outside the block type", () => {
+    const editor = createEditor("<p>plain paragraph</p><table><tr><td>cell</td></tr></table>");
+    // Cursor starts in the first paragraph by default
+    const selection = TextSelection.near(editor.state.doc.resolve(1));
+    editor.view.dispatch(editor.state.tr.setSelection(selection));
+
+    expect(getBlockVirtualElement(editor, "table")).toBeNull();
+    expect(getBlockVirtualElement(editor, "codeBlock")).toBeNull();
+    editor.destroy();
+  });
+});

package/src/editor/blockAnchor.ts

@@ -0,0 +1,42 @@
+/**
+ * Block-rect anchoring for bubble menus (web).
+ *
+ * Tiptap's BubbleMenu anchors to the text caret by default. For tall blocks
+ * (tables, code blocks) that puts the bubble INSIDE the block box — hovering
+ * over the first table row / first code line, where it traps pointer events
+ * and chases the caret on every keystroke. Anchoring to the block's own DOM
+ * rect keeps the bubble outside the block (above it, or flipped below by
+ * floating-ui), so block content stays clickable and the bubble holds still
+ * while typing. GitLab's content editor anchors its table/code chrome the
+ * same way.
+ */
+
+import type { Editor } from "@tiptap/core";
+
+interface BlockVirtualElement {
+  getBoundingClientRect: () => DOMRect;
+  contextElement: Element;
+}
+
+/**
+ * Returns a floating-ui VirtualElement for the nearest ancestor node of
+ * `nodeTypeName` containing the selection, or null when the selection is
+ * not inside one (the bubble is hidden by `shouldShow` in that case).
+ */
+export function getBlockVirtualElement(
+  editor: Editor,
+  nodeTypeName: string,
+): BlockVirtualElement | null {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth--) {
+    if ($from.node(depth).type.name !== nodeTypeName) continue;
+    const dom = editor.view.nodeDOM($from.before(depth));
+    if (dom instanceof HTMLElement) {
+      return {
+        getBoundingClientRect: () => dom.getBoundingClientRect(),
+        contextElement: dom,
+      };
+    }
+  }
+  return null;
+}