scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.65k stars 192 forks source link

Show hints without autocomplete #230

Closed usersina closed 3 years ago

usersina commented 3 years ago

I basically want to use the "show hints on type" option without the annoying autocomplete.

import { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';

export default function App() {
  const[myState, setMyState] = useState('');

  return(
    <CodeMirror
      editorDidMount={(editor) => {
        window.editor = editor;
      }}
      value={myState}
      options={{
        readOnly: false,
        autocorrect: true,
        lineNumbers: true,
        theme: 'eclipse',
        lineWrapping: true,
        tabSize: 2,
        mode: {
          name: 'text/x-mysql',
          globalVars: true,
        },
        extraKeys: { 'Ctrl-Space': 'autocomplete' },
      }}
      onBeforeChange={(_editor, _data, value) => {
        setMyState(value);
      }}
    />
  );
}

I've tried adding this and it shows the hints, however it autocompletes randomly, for example you can't type "salary". It always autocompletes to "SAVEPOINT"

onUpdate={(editor) => {
  editor.showHint();
}}
usersina commented 3 years ago

Found it

onUpdate={(editor) => {
  editor.showHint({ completeSingle: false });
}}

Here's the stackoverflow link, it also has a good implementation of editor.closeHint()