react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

useCodeMirror has an example demo? I'm not sure what he does and what scenario he's used in.

Open qianxuanyon opened this issue 2 years ago • 4 comments

I want to get the content What to do

qianxuanyon avatar Jun 09 '22 16:06 qianxuanyon

@qianxuanyon example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-hook-yr4vg?fontsize=14&hidenavigation=1&theme=dark

https://github.com/uiwjs/react-codemirror#support-hook

import { useEffect, useRef } from 'react';
import { useCodeMirror } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const code = "console.log('hello world!');\n\n\n";

export default function App() {
  const editor = useRef();
  const { setContainer } = useCodeMirror({
    container: editor.current,
    extensions: [javascript()],
    value: code,
  });

  useEffect(() => {
    if (editor.current) {
      setContainer(editor.current);
    }
  }, [editor.current]);

  return <div ref={editor} />;
}

jaywcjlove avatar Jun 09 '22 17:06 jaywcjlove

I've already seen this example, and he can only get the current

and What is the difference between #314

For example, I want to get the value in the editor

qianxuanyon avatar Jun 10 '22 02:06 qianxuanyon

I see.

 // It can be taken out here
  const { state,view,setContainer } = useCodeMirror({
    container: editor.current,
    extensions: [javascript()],
    value: code,
  });

qianxuanyon avatar Jun 10 '22 02:06 qianxuanyon

What is the difference between these two settings

<CodeMirror
        ref={refs}
        value="console.log('hello world!');"
        height="200px"
        extensions={[javascript({ jsx: true })]}
      />


<div ref = {editor}></div>

qianxuanyon avatar Jun 10 '22 02:06 qianxuanyon