Browser spell checking doesn't correct incorrect word

[atilara]

Hey,

The words are not corrected when I right click on a word and click on a suggestion:

https://github.com/uiwjs/react-codemirror/assets/45675035/f62f3fd6-b96f-462e-8f57-70381be6e984

That's the setup I did:

'use client';
import { useCallback, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';

import { EditorState } from '@codemirror/state';
import { EditorView } from '@uiw/react-codemirror';

import Box from '@mui/material/Box';

export default function CodeMirrorEditor() {
  const portuguesePhrases = {
    // @codemirror/view
    'Control character': 'Controlar cursor',
    // @codemirror/commands
    'Selection deleted': 'Seleção deletada',
    // @codemirror/language
    'Folded lines': 'Linhas dobradas',
    'Unfolded lines': 'Linhas desdobradas',
    to: 'para',
    'folded code': 'código dobrado',
    unfold: 'desdobrar',
    'Fold line': 'Dobrar linha',
    'Unfold line': 'Desdobrar linha',
    // @codemirror/search
    'Go to line': 'Ir para linha',
    go: 'OK',
    Find: 'Encontrar',
    Replace: 'Substituir',
    next: 'próximo',
    previous: 'anterior',
    all: 'todos',
    'match case': 'Diferenciar Maiúsculas de Minúsculas',
    'by word': 'Coincidir Palavra Inteira',
    replace: 'substituir',
    'replace all': 'substituir todos',
    close: 'fechar',
    'current match': 'Correspondência atual',
    'replaced $ matches': '$ correspondências substituídas',
    'replaced match on line $': 'Correspondência substituída na linha $',
    'on line': 'na linha',
    // @codemirror/autocomplete
    Completions: 'Sugestões',
    // @codemirror/lint
    Diagnostics: 'Diagnóstico',
    'No diagnostics': 'Não há diagnóstico',
  };

  const [value, setValue] = useState('Hello world!');

  const onChange = useCallback((val: string) => {
    setValue(val);
  }, []);

  return (
    <Box>
      <CodeMirror
        value={value}
        onChange={onChange}
        extensions={[
          EditorState.phrases.of(portuguesePhrases),
          EditorView.lineWrapping,
          EditorView.contentAttributes.of({ spellcheck: 'true' }),
        ]}
        spellCheck={true}
        height="100vh"
      />
    </Box>
  );
}

Any idea on how to fix that?

I'm using Next.js using app router and version ^4.22.2 of the @uiw/react-codemirror. Couldn't replicate on a code sandbox because it works properly there.