CodeMirror 6 React 包装器？ [关闭]

Question

我开始在 React 项目中使用 CodeMirror 6（暂时称为下一个）。

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

Answer 1

我知道在 react 中使用 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>
  );
};

希望这会有所帮助。

Answer 2

不久前我还制作了一个 CodeMirror 6 React 包装器 :)

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