fix: keep math source selection readable

src/components/EditorTheme.css

@@ -289,6 +289,11 @@
   padding: 6px 0;
 }
 
+.editor__blocknote-container .math-block-source::selection {
+  background: var(--colors-selection);
+  color: var(--colors-text);
+}
+
 .editor__blocknote-container .math--block {
   display: block;
   min-width: max-content;

src/components/editorSchema.math.test.tsx

@@ -58,4 +58,19 @@ describe('MathBlockEditor', () => {
     expect(editor.updateBlock).not.toHaveBeenCalled()
     expect(editor.focus).toHaveBeenCalled()
   })
+
+  it('uses editor selection colors and a single focused border while editing', () => {
+    renderMathBlockEditor()
+
+    fireEvent.doubleClick(document.querySelector('.math--block')!)
+    const source = screen.getByRole('textbox')
+
+    expect(source).toHaveClass('math-block-source')
+    expect(source).toHaveClass('selection:bg-[var(--colors-selection)]')
+    expect(source).toHaveClass('selection:text-[var(--colors-text)]')
+    expect(source).toHaveClass('focus-visible:ring-0')
+    expect(source).not.toHaveClass('selection:bg-primary')
+    expect(source).not.toHaveClass('selection:text-primary-foreground')
+    expect(source).not.toHaveClass('focus-visible:ring-[3px]')
+  })
 })

src/components/editorSchema.tsx

@@ -200,7 +200,7 @@ export function MathBlockEditor({ block, editor }: MathBlockEditorProps) {
           <Textarea
             ref={textareaRef}
             aria-label={`Math: ${currentLatex}`}
-            className="min-h-24 font-mono text-sm"
+            className="math-block-source min-h-24 font-mono text-sm selection:bg-[var(--colors-selection)] selection:text-[var(--colors-text)] focus-visible:ring-0"
             value={draftLatex}
             onBlur={finishEditing}
             onChange={(event) => setDraftLatex(event.target.value)}