ref to textarea throwing exception.

[amitdhiman000]

When trying to get ref to underlying textarea, it is returning some exception.

version: 1.4.15

sample code.

export function SimpleHTMLEditor() {

    const editorRef = React.useRef(false);

    const onBold = () => {
        // editorRef.current is pointing to some exception.
    };

    return (
        <>
            <button onClick={onBold} >bold text</button>
            <CodeEditor
                ref={editorRef}
                value={code}
                language="html"
                placeholder="Please enter HTML code."
            />
        </>
    );
}

[jaywcjlove]

I'm not sure what happened, but I'm sure there is no problem with ref. @amitdhiman000

https://codesandbox.io/s/react-textarea-code-editor-for-example-80-21gzg?file=/index.js

Example:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import CodeEditor, { SelectionText } from "@uiw/react-textarea-code-editor";

function App() {
  const textRef = React.useRef();
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  useEffect(() => {
    if (textRef.current) {
      const obj = new SelectionText(textRef.current);
      console.log("obj:", obj);
    }
  }, []);

  const onBold = () => {
    console.log(">>", textRef.current);
    // editorRef.current is pointing to some exception.
  };

  return (
    <div>
      <button onClick={onBold}>bold text</button>

      <CodeEditor
        value={code}
        ref={textRef}
        language="js"
        placeholder="Please enter JS code."
        onChange={(evn) => setCode(evn.target.value)}
        padding={15}
        style={{
          backgroundColor: "#f5f5f5",
          fontFamily:
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
          fontSize: 12
        }}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[amitdhiman000]

@jaywcjlove

Sorry, I forgot to mention, issue is happening in nextjs project. I have followed this example

[jaywcjlove]

https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-gdzlw?from-embed

Provide examples like above. @amitdhiman000

[amitdhiman000]

@jaywcjlove Here is the codesandbox example. https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-nqgxb?file=/pages/index.js When you click on Bold button, the textarea ref is pointing to an exception.

[ChristianChiarulli]

I'm seeing a similar issue in my nextjs project.