Auto complete in code mirror

[vsumit89]

How can I get autocomplete recommendation in code mirror

[jaywcjlove]

@vsumit89 You may need to study codemirror 6's documentation.

[thebpmgroup]

I don't really think that's an answer. I can read codemirror 6's documenation until the end of time, but it still won't guide me on how to get this working. This needs a trivial example with a basic stock of completions, and I would suggest adding this to the documentation.

[jaywcjlove]

The official documentation provides examples.

https://codemirror.net/6/examples/autocompletion/

[jaywcjlove]

https://codemirror.net/6/examples/autocompletion/

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { autocompletion } from '@codemirror/autocomplete';

function myCompletions(context) {
  let word = context.matchBefore(/\w*/)
  if (word.from == word.to && !context.explicit)
    return null
  return {
    from: word.from,
    options: [
      {label: "match", type: "keyword"},
      {label: "hello", type: "variable", info: "(World)"},
      {label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro"}
    ]
  }
}

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[autocompletion({override: [myCompletions]})]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

[thebpmgroup]

extensions={[autocompletion({override: [myCompletions]})]}

That's the magic right there

[jaywcjlove]

@thebpmgroup If you have an example, please share it, thx!

[jaywcjlove]

• https://github.com/uiwjs/react-codemirror/issues/579#issuecomment-1732270138