codemirror - CodeMirror 6 React 包装器？

Question

我开始在 React 项目中使用 CodeMirror 6（也就是暂时的下一个）。

过去，我使用 React CodeMirror 2 作为包装器。即将推出的 CodeMirror 版本是否有类似的功能？

Answer 1

I also made a CodeMirror 6 React wrapper a little while back :)

https://github.com/tbjgolden/react-codemirror6

Answer 2

我知道在反应中使用 Codemirror 6 的链接很少 -

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

也是一个快速入门的小例子 -

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>
  );
};

希望这可以帮助。