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( +