Is it possible to have access to ref for textArea?

[ianfelix]

I would like to have the control of the textArea input

[jaywcjlove]

@ianfelix https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-534-nmu6u9?fontsize=14&hidenavigation=1&theme=dark

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";

const mkdStr = `# Markdown Editor`;

function App() {
  const [textarea, setTextarea] = useState();
  const [value, setValue] = React.useState(mkdStr);
  useEffect(() => {
    console.log("$edit:12", textarea);
  }, [textarea]);
  function refCallback(node) {
    if (node && node.textarea) {
      setTextarea(node.textarea);
    }
  }
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        ref={refCallback}
        height={200}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

[ianfelix]

It seems that on typescript project doesn't recognize the ref prop

[jaywcjlove]

@ianfelix Upgrade v3.23.3

[jaywcjlove]

@ianfelix https://codesandbox.io/embed/misty-waterfall-485be5?fontsize=14&hidenavigation=1&theme=dark

import React, { useEffect, useState } from "react";
import MDEditor, { RefMDEditor } from "@uiw/react-md-editor";

export default function App() {
  const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
  const [value, setValue] = React.useState("# Markdown Editor");
  useEffect(() => {
    console.log("$edit:12", textarea);
  }, [textarea]);
  function refCallback(node: RefMDEditor) {
    if (node && node.textarea) {
      setTextarea(node.textarea);
    }
  }
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        ref={refCallback}
        height={200}
        value={value}
        onChange={(val) => {
          setValue(val || "");
        }}
      />
    </div>
  );
}

[ianfelix]

wow, thank you!! you are doing an amazing work here