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:

2024-06-26.10-25-20.mp4

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.

[atilara]

Replicated the problem in a codesanbox:

2024-07-04.16-29-57.mp4

Link: https://codesandbox.io/p/sandbox/codemirror-spellcheck-gxy26p

Apparently, the problem only happens in Chrome and Chrome based browsers like Brave and Edge, it works normally on Firefox. My chrome version is 126.0.6478.126.

[atilara]

Hey! Sorry to bother again 😅

Any news about this?

[jaywcjlove]

@atilara I tried to help you solve the issue. I tested it and found that the problem might only exist in Next.js.

https://uiwjs.github.io/react-codemirror/#/examples/674

[atilara]

@jaywcjlove Thanks for taking your time to try to find a solution and answer this issue.

Is it supposed to work on the link you provided? It doesn't work here on chrome, only on firefox and other browsers that are not chrome based.

The example you sent uses React or Next?

It doesn't work on the CodeSandbox I sent and it runs on React there

[jaywcjlove]

2024-07-23.01.40.13.mp4

@atilara There are no issues in development mode, but the error reoccurs after deployment. I don't know why.

2024-07-23.01.38.11.mp4

[atilara]

@jaywcjlove That's weird. It doesn't work anywhere here, the problem is present on development and deployment.

Do you think this could be a problem from codemirror itself?

[jaywcjlove]

@atilara I believe it is likely a problem similar to #216, but it is still unclear what the cause is.

[atilara]

@jaywcjlove any way we could investigate this? Do you think the spellcheck extension is not being recognized?

[jaywcjlove]

@atilara I've investigated the error, but I couldn't find the cause of the issue.