fix(ux): keep customer-facing editor guidance actionable

src/components/Toolbar.customerCopy.test.tsx

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Editor } from '@tiptap/react';
+import { Toolbar } from './Toolbar.js';
+import { buildExtensions } from '../extensions/kit.js';
+
+let editor: Editor | undefined;
+
+afterEach(() => {
+  cleanup();
+  if (editor && !editor.isDestroyed) editor.destroy();
+  editor = undefined;
+});
+
+describe('Toolbar customer-facing copy', () => {
+  it('keeps implementation jargon out of the image action accessible name', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    editor = new Editor({
+      element,
+      extensions: buildExtensions({ image: { maxDimension: 0 } }),
+      content: '<p>hello</p>',
+    });
+
+    render(<Toolbar editor={editor} />);
+
+    expect(
+      screen.getByRole('button', { name: 'Insert inline image' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /base64/i }),
+    ).not.toBeInTheDocument();
+  });
+});

src/components/Toolbar.test.tsx

@@ -112,7 +112,7 @@ describe('Toolbar', () => {
       const italic = screen.getByRole('button', { name: /Italic/ });
       const insertTable = screen.getByRole('button', { name: /^Insert table$/ });
       const insertImage = screen.getByRole('button', {
-        name: /Insert inline \(base64\) image/,
+        name: /Insert inline image/,
       });
       const enabledButtons = (
         screen.getAllByRole('button') as HTMLButtonElement[]
@@ -149,7 +149,7 @@ describe('Toolbar', () => {
 
       const bold = screen.getByRole('button', { name: /Bold/ });
       const insertImage = screen.getByRole('button', {
-        name: /Insert inline \(base64\) image/,
+        name: /Insert inline image/,
       });
       fireEvent.focus(insertImage);
       expect(insertImage).toHaveAttribute('tabindex', '0');

src/components/Toolbar.tsx

@@ -368,7 +368,7 @@ export function Toolbar({ editor, image, onImageError }: ToolbarProps) {
           onClick={() => editor.chain().focus().deleteTable().run()}
         />
         <ToolbarButton
-          title="Insert inline (base64) image"
+          title="Insert inline image"
           label="🖼"
           onClick={() => fileInputRef.current?.click()}
         />