uiwjs / react-textarea-code-editor

A simple code editor with syntax highlighting.
https://uiwjs.github.io/react-textarea-code-editor/
MIT License
476 stars 22 forks source link

Pressing the tab key on a readonly textarea causes a tab in the value #152

Open SangJunBak opened 1 year ago

jaywcjlove commented 1 year ago

@SangJunBak Upgrade v2.1.7 https://codesandbox.io/embed/wonderful-night-4m86j4?fontsize=14&hidenavigation=1&theme=dark

import React, { useEffect } from "react";
import CodeEditor, { SelectionText } from "@uiw/react-textarea-code-editor";
import "./styles.css";

export default 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);
    }
  }, []);
  return (
    <>
      <div>
        <h3>Auto</h3>
        <CodeEditor
          value={code}
          ref={textRef}
          language="js"
          placeholder="Please enter JS code."
          onChange={(evn) => setCode(evn.target.value)}
          padding={15}
          readOnly
          style={{
            fontFamily:
              "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
            fontSize: 12
          }}
        />
      </div>
    </>
  );
}