fix(editor): test and support Tiptap 3.32

.changeset/tall-hats-tease.md

@@ -0,0 +1,10 @@
+---
+"@emdash-cms/admin": patch
+"emdash": patch
+---
+
+Fixes responsive table widths in the admin editor and floating toolbar keyboard controls in both the admin and inline editors with Tiptap 3.32.0.
+
+Pins the editor's Tiptap dependencies to exactly 3.32.0 so installations use the version covered by the editor tests. Code-block highlighting keeps its existing lowlight extension version. Sites or plugins that share Tiptap dependencies with EmDash should align them to 3.32.0 to avoid installing multiple copies.
+
+Links applied at an empty caret now end when you type a space, following Tiptap's updated behavior. Text typed after that space is not part of the link.

packages/admin/src/components/PortableTextEditor.tsx

@@ -4806,7 +4806,7 @@ const FORMATTING_MARKS = [
 ] as const;
 
 function playBubbleEntrance(element: HTMLElement | null) {
-	const surface = element?.firstElementChild;
+	const surface = element;
 	if (!(surface instanceof HTMLElement) || typeof surface.animate !== "function") return;
 	const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 	surface.animate(
@@ -4929,9 +4929,8 @@ function EditorBubbleMenu({
 				}) => {
 					elements.floating.style.maxWidth = `${Math.max(0, availableWidth)}px`;
 					// The surface scrolls itself, so no wrapper clips its rounded ring.
-					const surface = elements.floating.firstElementChild;
+					const surface = elements.floating;
 					if (surface instanceof HTMLElement) {
-						surface.style.maxWidth = "100%";
 						surface.style.overflowX = "auto";
 					}
 				},
@@ -5504,7 +5503,7 @@ function ImageBubbleMenu({
 	// A quick fade and scale in, played when the toolbar appears or moves to another image.
 	const playEntrance = React.useCallback(() => {
 		const menu = menuRef.current;
-		const toolbar = menu?.firstElementChild;
+		const toolbar = menu;
 		if (!menu?.isConnected || menu.hidden || !(toolbar instanceof HTMLElement)) return;
 		const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		for (const animation of toolbar.getAnimations()) animation.cancel();
@@ -5720,15 +5719,15 @@ function ImageBubbleMenu({
 				}}
 				// Capture, so an open hint can't stop Escape before the toolbar sees it.
 				onKeyDownCapture={(event) => {
-					if (event.key !== "Escape" || event.nativeEvent.isComposing) return;
+					if (event.nativeEvent.key !== "Escape" || event.nativeEvent.isComposing) return;
 					event.stopPropagation();
 					returnToEditor();
 				}}
 				onKeyDown={(event) => {
 					if (event.nativeEvent.isComposing) return;
 					if (
-						event.key === "Tab" &&
-						event.shiftKey &&
+						event.nativeEvent.key === "Tab" &&
+						event.nativeEvent.shiftKey &&
 						event.target === menuRef.current?.querySelector("button, input")
 					) {
 						event.preventDefault();
@@ -6624,7 +6623,7 @@ function moveToolbarFocus(event: React.KeyboardEvent<HTMLElement>, vertical: boo
 	const forward = getComputedStyle(toolbar).direction === "rtl" ? -1 : 1;
 
 	let nextIndex: number;
-	switch (event.key) {
+	switch (event.nativeEvent.key) {
 		case "ArrowRight":
 			nextIndex = currentIndex + forward;
 			break;

packages/admin/src/components/editor/TableExtensions.ts

@@ -239,6 +239,10 @@ function handleRtlTableKey(view: EditorView, event: KeyboardEvent): boolean {
 }
 
 export const EmDashTable = Table.extend({
+	addNodeView() {
+		// The resize plugin owns the responsive table view, including in read-only editors.
+		return null;
+	},
 	addProseMirrorPlugins() {
 		return [
 			new Plugin({

packages/admin/tests/editor/CodeBlockNode.highlighting.test.tsx

@@ -0,0 +1,94 @@
+import type { Editor } from "@tiptap/core";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { CodeBlockExtension } from "../../src/components/editor/CodeBlockNode";
+import { render } from "../utils/render.js";
+
+import "../../src/styles.css";
+
+function CodeEditor({
+	language,
+	code,
+	onEditor,
+}: {
+	language: string | null | undefined;
+	code: string;
+	onEditor?: (editor: Editor) => void;
+}) {
+	const editor = useEditor({
+		extensions: [StarterKit.configure({ codeBlock: false }), CodeBlockExtension],
+		content: {
+			type: "doc",
+			content: [
+				{ type: "codeBlock", attrs: { language }, content: [{ type: "text", text: code }] },
+			],
+		},
+		immediatelyRender: true,
+	});
+
+	useEffect(() => {
+		if (editor) onEditor?.(editor);
+	}, [editor, onEditor]);
+	return <EditorContent editor={editor} />;
+}
+
+describe("CodeBlockExtension highlighting", () => {
+	it.each([
+		["javascript", 'const greeting = "hello";'],
+		["dockerfile", "FROM node:22"],
+	])("renders syntax tokens for %s", async (language, code) => {
+		let editor: Editor | undefined;
+		const screen = await render(
+			<CodeEditor language={language} code={code} onEditor={(instance) => (editor = instance)} />,
+		);
+
+		await vi.waitFor(() => {
+			expect(screen.container.querySelector("code")?.textContent).toBe(code);
+			expect(screen.container.querySelectorAll('span[class*="hljs-"]').length).toBeGreaterThan(0);
+		});
+
+		expect(JSON.stringify(editor!.getJSON())).not.toContain("hljs-");
+	});
+
+	it.each(["plaintext", "astro", "zig", "custom-language", null, undefined])(
+		"leaves %s code unhighlighted",
+		async (language) => {
+			const screen = await render(
+				<CodeEditor language={language} code={'const greeting = "hello";'} />,
+			);
+
+			await vi.waitFor(() => {
+				expect(screen.container.querySelector("code")?.textContent).toBe(
+					'const greeting = "hello";',
+				);
+			});
+			expect(screen.container.querySelectorAll('span[class*="hljs-"]')).toHaveLength(0);
+		},
+	);
+
+	it("updates decorations when the selected language changes", async () => {
+		let editor: Editor | undefined;
+		const screen = await render(
+			<CodeEditor
+				language="javascript"
+				code={'const greeting = "hello";'}
+				onEditor={(instance) => (editor = instance)}
+			/>,
+		);
+		const editorElement = screen.container.querySelector(".ProseMirror")!;
+
+		await vi.waitFor(() => {
+			expect(editorElement.querySelectorAll('span[class*="hljs-"]').length).toBeGreaterThan(0);
+		});
+
+		editor!.commands.setNodeSelection(0);
+		editor!.commands.updateAttributes("codeBlock", { language: "astro" });
+		await vi.waitFor(() => {
+			expect(editorElement.querySelectorAll('span[class*="hljs-"]')).toHaveLength(0);
+		});
+		expect(editor!.getJSON().content?.[0]?.content?.[0]?.text).toBe('const greeting = "hello";');
+	});
+});

packages/admin/tests/editor/CodeBlockNode.test.ts

@@ -13,7 +13,7 @@
 import { Editor, type Content } from "@tiptap/core";
 import { closeHistory } from "@tiptap/pm/history";
 import StarterKit from "@tiptap/starter-kit";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import { CodeBlockExtension } from "../../src/components/editor/CodeBlockNode";
 
@@ -203,57 +203,4 @@ describe("CodeBlockExtension", () => {
 			expect(editor.state.selection.toJSON()).toEqual({ type: "all" });
 		}
 	});
-
-	it.each([
-		["javascript", 'const greeting = "hello";'],
-		["dockerfile", "FROM node:22"],
-	])("renders syntax tokens for %s", async (language, code) => {
-		editor.commands.insertContent({
-			type: "codeBlock",
-			attrs: { language },
-			content: [{ type: "text", text: code }],
-		});
-
-		await vi.waitFor(() => {
-			expect(element.querySelectorAll('span[class*="hljs-"]').length).toBeGreaterThan(0);
-		});
-
-		expect(JSON.stringify(editor.getJSON())).not.toContain("hljs-");
-	});
-
-	it.each(["plaintext", "astro", "zig", "custom-language", null, undefined])(
-		"leaves %s code unhighlighted",
-		async (language) => {
-			editor.commands.insertContent({
-				type: "codeBlock",
-				attrs: { language },
-				content: [{ type: "text", text: 'const greeting = "hello";' }],
-			});
-
-			await vi.waitFor(() => {
-				expect(element.querySelectorAll('span[class*="hljs-"]')).toHaveLength(0);
-			});
-		},
-	);
-
-	it("updates decorations when the selected language changes", async () => {
-		editor.commands.insertContent({
-			type: "codeBlock",
-			attrs: { language: "javascript" },
-			content: [{ type: "text", text: 'const greeting = "hello";' }],
-		});
-
-		await vi.waitFor(() => {
-			expect(element.querySelectorAll('span[class*="hljs-"]').length).toBeGreaterThan(0);
-		});
-
-		editor.commands.setNodeSelection(0);
-		editor.commands.updateAttributes("codeBlock", { language: "astro" });
-
-		await vi.waitFor(() => {
-			expect(element.querySelectorAll('span[class*="hljs-"]')).toHaveLength(0);
-		});
-		const node = editor.getJSON().content?.find((item) => item.type === "codeBlock");
-		expect(node?.content?.[0]?.text).toBe('const greeting = "hello";');
-	});
 });

packages/admin/tests/editor/bubble-menu.test.tsx

@@ -279,12 +279,6 @@ function hasNonZeroRadius(element: HTMLElement): boolean {
 	return declaredValues.some((value) => value > 0);
 }
 
-function expectRoundedFloatingWrapper(menu: HTMLElement) {
-	const wrapper = findScrollableAncestor(menu);
-	expect(wrapper).toBeTruthy();
-	expect(hasNonZeroRadius(wrapper!)).toBe(true);
-}
-
 /** Get a bubble menu button by aria-label */
 function getBubbleButton(menu: HTMLElement, label: string): HTMLButtonElement | null {
 	return menu.querySelector(`[aria-label="${label}"]`);
@@ -638,7 +632,9 @@ describe("Bubble Menu", () => {
 			expect(menuRect.top).toBeGreaterThanOrEqual(
 				formattingToolbar!.getBoundingClientRect().bottom,
 			);
-			expectRoundedFloatingWrapper(tableToolbar);
+			expect(getComputedStyle(tableToolbar).overflowX).toBe("auto");
+			expect(hasNonZeroRadius(tableToolbar)).toBe(true);
+			expect(findScrollableAncestor(tableToolbar)).toBeNull();
 		});
 	});
 

packages/admin/tests/editor/image-toolbar.test.tsx

@@ -397,7 +397,11 @@ describe("Image toolbar", () => {
 		const { editor, img, getPanel } = await setup({ extraImage: true });
 		editor.commands.selectAll();
 		await vi.waitFor(() =>
-			expect(document.querySelectorAll(".ProseMirror .ProseMirror-selectednode")).toHaveLength(2),
+			expect(
+				[...document.querySelectorAll(".ProseMirror img")].filter((image) =>
+					image.closest(".emdash-block-selected"),
+				),
+			).toHaveLength(2),
 		);
 		const toolbar = await selectImage(img);
 
@@ -466,7 +470,7 @@ describe("Image toolbar", () => {
 				expect(box.right).toBeLessThanOrEqual(window.innerWidth);
 			}
 			const top = (label: string) => button(toolbar, label).getBoundingClientRect().top;
-			expect(top("Right")).toBe(top("Replace"));
+			await vi.waitFor(() => expect(top("Right")).toBe(top("Replace")));
 			expect(top("Add link")).toBeGreaterThan(top("Replace"));
 		} finally {
 			await page.viewport(1280, 800);

packages/admin/tests/editor/table-resize.test.tsx

@@ -186,16 +186,19 @@ afterEach(() => {
 });
 
 describe("direction-aware table resizing", () => {
-	it("renders a fluid table with a numeric preferred minimum width", () => {
-		const { host } = createEditor("ltr");
-		const table = host.querySelector("table");
-
-		expect(table).toBeTruthy();
-		expect(table?.style.width).toBe("100%");
-		expect(table?.style.minWidth).toBe("288px");
-		expect(host.querySelector(".tableWrapper")).toBeTruthy();
-		expect(ResponsiveTableView).toBeTypeOf("function");
-	});
+	it.each([true, false])(
+		"renders a fluid table with a numeric preferred minimum width (editable: %s)",
+		(editable) => {
+			const { host } = createEditor("ltr", { editable });
+			const table = host.querySelector("table");
+
+			expect(table).toBeTruthy();
+			expect(table?.style.width).toBe("100%");
+			expect(table?.style.minWidth).toBe("288px");
+			expect(host.querySelector(".tableWrapper")).toBeTruthy();
+			expect(ResponsiveTableView).toBeTypeOf("function");
+		},
+	);
 
 	it("enforces the visual minimum for valid sub-minimum stored widths", () => {
 		const { editor, host } = createEditor("ltr", { content: tableContent(Array(10).fill(1)) });