diff --git a/.changeset/inspector-uppercase-mark.md b/.changeset/inspector-uppercase-mark.md new file mode 100644 index 0000000000..0a1a62f87d --- /dev/null +++ b/.changeset/inspector-uppercase-mark.md @@ -0,0 +1,5 @@ +--- +"@react-email/editor": patch +--- + +Fix the Uppercase toggle in the inspector text panel so it shows as pressed when the selection has the uppercase mark. diff --git a/packages/editor/src/ui/inspector/text.spec.tsx b/packages/editor/src/ui/inspector/text.spec.tsx new file mode 100644 index 0000000000..7e755625ef --- /dev/null +++ b/packages/editor/src/ui/inspector/text.spec.tsx @@ -0,0 +1,65 @@ +import { act, render, screen, waitFor } from '@testing-library/react'; +import { Editor } from '@tiptap/core'; +import { EditorContext } from '@tiptap/react'; +import { afterEach, describe, expect, it } from 'vitest'; +import { StarterKit } from '../../extensions'; +import { EmailTheming } from '../../plugins'; +import { InspectorRoot } from './root'; +import { InspectorText } from './text'; + +let editor: Editor | null = null; +let element: HTMLElement | null = null; + +function createEditor() { + element = document.createElement('div'); + document.body.append(element); + + editor = new Editor({ + element, + extensions: [StarterKit.configure(), EmailTheming], + content: '

Hello world

', + }); + + return editor; +} + +function focusTextSelection(ed: Editor) { + ed.view.dom.dispatchEvent(new FocusEvent('focusin', { bubbles: true })); + ed.commands.setTextSelection({ from: 1, to: 12 }); +} + +afterEach(() => { + editor?.destroy(); + editor = null; + element?.remove(); + element = null; +}); + +describe('InspectorText mark toggles', () => { + it('shows an uppercase toggle and reflects the active mark state', async () => { + const editor = createEditor(); + + render( + + + + + , + ); + + focusTextSelection(editor); + + const toggle = await waitFor(() => + screen.getByRole('button', { name: 'Uppercase' }), + ); + expect(toggle.getAttribute('aria-pressed')).toBe('false'); + + act(() => { + editor.chain().focus().toggleUppercase().run(); + }); + + await waitFor(() => + expect(toggle.getAttribute('aria-pressed')).toBe('true'), + ); + }); +}); diff --git a/packages/editor/src/ui/inspector/text.tsx b/packages/editor/src/ui/inspector/text.tsx index b04c7f81ed..8101557d4a 100644 --- a/packages/editor/src/ui/inspector/text.tsx +++ b/packages/editor/src/ui/inspector/text.tsx @@ -41,7 +41,14 @@ export interface InspectorTextProps { children?: (context: InspectorTextContext) => React.ReactNode; } -const MARK_NAMES = ['bold', 'italic', 'underline', 'strike', 'code'] as const; +const MARK_NAMES = [ + 'bold', + 'italic', + 'underline', + 'strike', + 'code', + 'uppercase', +] as const; export function InspectorText({ children }: InspectorTextProps) { const { editor } = useCurrentEditor();