How to Use CodeMirror Addons like javascript-hint in @uiw/react-codemirror

[jazztester]

Hi All, I am trying to create a js editor and have used js-hint for linting and codemirror demo as reference for creating a editor but the autocomplete here isn't giving suggestion for console etc. I saw an example where they used the addons javascript hint and show-hint. but there are no examples to use it for @uiw/react-codemirror. could somebody help with this?

[jaywcjlove]

@jazztester

Linting

Define a function that finds problems in the content, and show those problems in the editor.

https://codemirror.net/examples/lint/

Autocompletion

Providing hints for possible input in the editor.

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

[jazztester]

@jaywcjlove

Thanks for the links, i have used these links to create custom linters and autocomplete. but i wanted to ask how can we use these javascript-hint and show-hint in uiw/react-codemirror.

[jaywcjlove]

import {syntaxTree} from "@codemirror/language"
import {linter, Diagnostic} from "@codemirror/lint"

const regexpLinter = linter(view => {
  let diagnostics: Diagnostic[] = []
  syntaxTree(view.state).cursor().iterate(node => {
    if (node.name == "RegExp") diagnostics.push({
      from: node.from,
      to: node.to,
      severity: "warning",
      message: "Regular expressions are FORBIDDEN",
      actions: [{
        name: "Remove",
        apply(view, from, to) { view.dispatch({changes: {from, to}}) }
      }]
    })
  })
  return diagnostics
})

export default function App() {
  return (
    <CodeMirror
      height="200px"
+      extensions={[regexpLinter]}
    />
  );
}

@jazztester

[jazztester]

Thanks @jaywcjlove.

I found i wont be able to use the javascript-hint and show-hint in uiw/react-codemirror directly might need to convert it and used as shown by you. Thanks bro.

[Vimallakz]

@jazztester Can you provide code sample to use javascript-hint and show-hin

[jazztester]

Hi @Vimallakz here is the example https://github.com/akhayoon/codemirror-demo , sadly we shifted to using codemirror 6 directly instead of react-codemirror (which is really really good, sorry for the shift @jaywcjlove but they wanted granular control), used this here as example https://github.com/jaykapade/codemirror6-code-editor. codemirror 6 makes it really difficult to add extensions shown in their examples (their examples are for older versions at the moment maybe someone will add newer examples)