@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/editor/TiptapEditor.tsx

@@ -13,201 +13,39 @@ import {
   memo,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
-import { Extension } from "@tiptap/core";
-import StarterKit from "@tiptap/starter-kit";
-import Placeholder from "@tiptap/extension-placeholder";
-import TextAlign from "@tiptap/extension-text-align";
-import { Color } from "@tiptap/extension-color";
-import { TextStyle } from "@tiptap/extension-text-style";
-import { Highlight } from "@tiptap/extension-highlight";
-import { Subscript } from "@tiptap/extension-subscript";
-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 { 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 { buildEditorExtensions } from "./extensions";
+import { isCommandInCapabilities } from "./capabilities";
+import { createMentionExtension } from "./mentions";
+import { setPreviewChrome } from "./codeBlockPreview";
+import { htmlToMarkdown, markdownToHtml } from "./markdown";
+import { cleanPastedHtml } from "./pasteCleanup";
+import { 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" });
-
-/**
- * Tab / Shift-Tab indentation inside code blocks.
- * Inserts or removes 2 spaces at the cursor (or start of each selected line).
- */
-const CodeBlockTabIndent = Extension.create({
-  name: "codeBlockTabIndent",
-  addKeyboardShortcuts() {
-    return {
-      Tab: ({ editor }) => {
-        if (!editor.isActive("codeBlock")) return false;
-        const { state, dispatch } = editor.view;
-        const { from, to } = state.selection;
-
-        if (from === to) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-
-        const doc = state.doc;
-        const lines: { start: number }[] = [];
-        doc.nodesBetween(from, to, (node, pos) => {
-          if (node.isTextblock) {
-            lines.push({ start: pos + 1 });
-          }
-        });
-        if (lines.length === 0) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-
-        let tr = state.tr;
-        let offset = 0;
-        for (const line of lines) {
-          const lineStart = line.start + offset;
-          tr = tr.insertText("  ", lineStart);
-          offset += 2;
-        }
-        dispatch(tr);
-        return true;
-      },
-      "Shift-Tab": ({ editor }) => {
-        if (!editor.isActive("codeBlock")) return false;
-        const { state, dispatch } = editor.view;
-        const { from, to, $from } = state.selection;
-
-        if (from === to) {
-          const lineStart = from - $from.parentOffset;
-          const text = state.doc.textBetween(lineStart, from);
-          const leadingSpaces = text.match(/^ {1,2}/)?.[0];
-          if (leadingSpaces) {
-            dispatch(state.tr.delete(lineStart, lineStart + leadingSpaces.length));
-          }
-          return true;
-        }
-
-        const doc = state.doc;
-        let tr = state.tr;
-        let offset = 0;
-        doc.nodesBetween(from, to, (node, pos) => {
-          if (node.isTextblock) {
-            const lineStart = pos + 1 + offset;
-            const text = tr.doc.textBetween(
-              lineStart,
-              Math.min(lineStart + node.content.size, tr.doc.content.size),
-            );
-            const leadingSpaces = text.match(/^ {1,2}/)?.[0];
-            if (leadingSpaces) {
-              tr = tr.delete(lineStart, lineStart + leadingSpaces.length);
-              offset -= leadingSpaces.length;
-            }
-          }
-        });
-        dispatch(tr);
-        return true;
-      },
-    };
-  },
-});
-
-/**
- * Override Shift-Enter and Mod-Enter to create new paragraphs instead of
- * hard breaks (<br>). Mirrors GitLab's approach: HardBreak node stays
- * registered (so <br> in pasted HTML is preserved) but its keyboard
- * shortcuts are replaced with the default enter (split paragraph) behavior.
- */
-const ParagraphEnterKeys = Extension.create({
-  name: "paragraphEnterKeys",
-  priority: 1000,
-  addKeyboardShortcuts() {
-    return {
-      "Shift-Enter": ({ editor }) =>
-        editor.commands.first([
-          () => editor.commands.newlineInCode(),
-          () => editor.commands.splitListItem("listItem"),
-          () => editor.commands.createParagraphNear(),
-          () => editor.commands.liftEmptyBlock(),
-          () => editor.commands.splitBlock(),
-        ]),
-      "Mod-Enter": ({ editor }) =>
-        editor.commands.first([
-          () => editor.commands.newlineInCode(),
-          () => editor.commands.createParagraphNear(),
-          () => editor.commands.liftEmptyBlock(),
-          () => editor.commands.splitBlock(),
-        ]),
-    };
-  },
-});
-
-/**
- * Tab/Shift-Tab indent/dedent and Alt+Arrow move for list items.
- * Tab sinks (indents), Shift-Tab lifts (dedents).
- * Alt+Up/Down moves the list item up or down among siblings.
- */
-const ListItemKeys = Extension.create({
-  name: "listItemKeys",
-  addKeyboardShortcuts() {
-    return {
-      Tab: ({ editor }) => {
-        if (editor.isActive("codeBlock")) return false;
-        if (
-          editor.isActive("bulletList") ||
-          editor.isActive("orderedList") ||
-          editor.isActive("taskList")
-        ) {
-          return (
-            editor.commands.sinkListItem("listItem") || editor.commands.sinkListItem("taskItem")
-          );
-        }
-        return false;
-      },
-      "Shift-Tab": ({ editor }) => {
-        if (editor.isActive("codeBlock")) return false;
-        if (
-          editor.isActive("bulletList") ||
-          editor.isActive("orderedList") ||
-          editor.isActive("taskList")
-        ) {
-          return (
-            editor.commands.liftListItem("listItem") || editor.commands.liftListItem("taskItem")
-          );
-        }
-        return false;
-      },
-    };
-  },
-});
+/** Enter/exit fade for bubbles and suggestion popups (0 when animation none) */
+const MOTION_MS = 120;
 
 // ===========================================================================
 // Types
@@ -222,6 +60,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;
 }
 
 // ===========================================================================
@@ -243,9 +83,10 @@ export const TiptapEditor = memo(
   forwardRef<RichEditorRef, TiptapEditorProps>(
     (
       {
+        capabilities = "full",
         initialContent = "",
         initialJSON,
-        placeholder = "Start writing...",
+        placeholder: placeholderProp,
         editable = true,
         autoFocus = false,
         onChange,
@@ -259,10 +100,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,81 +116,56 @@ 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;
         onChangeRef.current = onChange;
       });
 
+      // Capability surface is fixed at mount (extension lists cannot swap
+      // live); the canonical list comes from the one factory the capability
+      // specs also verify (LC-52).
+      const [extensions] = useState(() =>
+        buildEditorExtensions({ capabilities, placeholder, mentionExtension }),
+      );
+
       const editor = useEditor({
-        extensions: [
-          StarterKit.configure({
-            heading: {
-              levels: [1, 2, 3, 4, 5, 6],
-              HTMLAttributes: { dir: "auto" },
-            },
-            paragraph: {
-              HTMLAttributes: { dir: "auto" },
-            },
-            link: {
-              openOnClick: false,
-              HTMLAttributes: {
-                rel: "noopener noreferrer",
-                target: "_blank",
-              },
-            },
-            bulletList: {
-              keepMarks: true,
-            },
-            orderedList: {
-              keepMarks: true,
-            },
-            codeBlock: false,
-            hardBreak: false,
-          }),
-          CodeBlockLowlight.configure({
-            lowlight,
-            exitOnTripleEnter: true,
-            exitOnArrowDown: false,
-          }),
-          ParagraphEnterKeys,
-          CodeBlockTabIndent,
-          ListItemKeys,
-          Typography,
-          CharacterCount,
-          SlashCommands,
-          MarkdownPaste,
-          BlockDragHandle,
-          Table.configure({ resizable: true }),
-          TableRow,
-          TableHeader,
-          TableCell,
-          Placeholder.configure({
-            placeholder,
-          }),
-          TextAlign.configure({
-            types: ["heading", "paragraph"],
-            defaultAlignment: "left",
-          }),
-          TextStyle,
-          Color,
-          Highlight.configure({
-            multicolor: true,
-          }),
-          Subscript,
-          Superscript,
-          TaskList,
-          TaskItem.configure({
-            nested: true,
-          }),
-          Image.configure({
-            inline: true,
-            allowBase64: true,
-          }),
-        ],
-        content: initialJSON || initialContent,
+        extensions,
+        // In markdown capabilities the incoming string IS markdown
+        content:
+          initialJSON ||
+          (capabilities === "markdown" ? markdownToHtml(initialContent) : 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,
@@ -353,7 +174,12 @@ export const TiptapEditor = memo(
           changeRafRef.current = requestAnimationFrame(() => {
             const html = editor.getHTML();
             const json = editor.getJSON();
-            onChangeRef.current?.(html, json);
+            // Markdown capabilities serialize the content OUT as markdown —
+            // the host's value stays a markdown string end to end.
+            onChangeRef.current?.(
+              capabilities === "markdown" ? htmlToMarkdown(html) : html,
+              json,
+            );
           });
         },
         onTransaction: ({ editor }) => {
@@ -366,29 +192,89 @@ 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);
-      }, []);
+      const handleMarkdownChange = useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+          const md = e.target.value;
+          setMarkdownSource(md);
+          // Markdown capabilities emit the markdown source itself; the full
+          // surface keeps its HTML onChange contract.
+          onChangeRef.current?.(capabilities === "markdown" ? md : markdownToHtml(md), null);
+        },
+        [capabilities],
+      );
 
       const executeCommand = useCallback(
         (command: EditorCommand, payload?: any) => {
           if (!editor) return;
+          // Capability guard: outside the surface the command's extension is
+          // not registered, so the chained method would not even exist.
+          if (!isCommandInCapabilities(command, capabilities)) return;
 
           const chain = editor.chain().focus();
 
@@ -457,9 +343,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":
@@ -550,8 +449,13 @@ export const TiptapEditor = memo(
           getState: () => getEditorStateFromTiptap(editor),
           getHTML: () => editor?.getHTML() || "",
           getJSON: () => editor?.getJSON() || null,
+          getMarkdown: () => htmlToMarkdown(editor?.getHTML() || ""),
           setHTML: (html: string) => editor?.commands.setContent(html),
           setJSON: (json: any) => editor?.commands.setContent(json),
+          // External value sync (not a user edit): emitUpdate false so the
+          // host's own set does not echo back through onChange.
+          setMarkdown: (markdown: string) =>
+            editor?.commands.setContent(markdownToHtml(markdown), { emitUpdate: false }),
           focus: () => editor?.commands.focus(),
           blur: () => editor?.commands.blur(),
         }),
@@ -562,20 +466,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,18 +514,36 @@ 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 && (
             <>
-              <BubbleToolbar editor={editor} editorRef={internalRef} state={defaultEditorState} />
+              <BubbleToolbar
+                editor={editor}
+                editorRef={internalRef}
+                state={defaultEditorState}
+                capabilities={capabilities}
+              />
               <LinkBubble editor={editor} />
               <CodeBlockBubble editor={editor} />
               <ImageBubble editor={editor} />
-              <TableBubble editor={editor} />
+              <TableBubble editor={editor} capabilities={capabilities} />
             </>
           )}
-          <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. Markdown capabilities have no inline
+              math node, so the bubble has nothing to edit and stays out. */}
+          {editable && capabilities !== "markdown" && <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();
+  });
+});