CODEWITHSUNDEEP
codemirrorreact-codemirrorreact-codemirror2codemirror-6
Marc Polizzi
Marc Polizzi

Reputation: 9375

CodeMirror 6 React Wrapper?

I'm starting to use CodeMirror 6 (aka. next for the time being) in a React project.

In the past, I've used React CodeMirror 2 as a wrapper. Is there anything similar available for the upcoming version of CodeMirror?

Upvotes: 4

Views: 1537

Answers (1)

The Prenx
The Prenx

Reputation: 672

There are few links I know for using Codemirror 6 in react -

https://codesandbox.io/s/react-codemirror-next-yrtcf?file=/src/useCodeMirror.tsx

https://github.com/uiwjs/react-codemirror

https://discuss.codemirror.net/t/suggestions-for-using-with-react-workflow/2746

Also a quick and small example to get started -

const Editor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const state = EditorState.create({
      doc: "",
      extensions: [
        basicSetup,
        EditorView.updateListener.of((v) => {
          if (v.docChanged) {
            handleChange(view); // custom function that will be triggered on every editor change.
          }
        }),
        javascript(), // or any other language you want to support
      ],
    });

    const view = new EditorView({
      state,
      parent: editorRef.current!,
    });
    
    return () => {
      view.destroy();
    };
  }, []);

  return (
    <div id="CMEditor">
      <div ref={editorRef} />
    </div>
  );
};

Hope this helps.

Upvotes: 1

Related Questions