[Feature Request] display line number about react-textarea-code-editor

[shawnz42]

Hi, from where to import CodeContainter and LineNumbers

[jaywcjlove]

@xsro It is more difficult to add line numbers, and there is no plan to add this feature before finding a better way.

[marabesi]

Just came across this issue because I would like to support line numbers as well.

Will it be in the roadmap? Or should I try to find a replacement?

[obonyojimmy]

Supporting this feature inclussion , probably aprop like showInlineLineNumbers as an inspiration from https://www.npmjs.com/package/react-syntax-highlighter

[stephensanwo]

I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.

const Code: React.FC<CodeProps> = ({
  id,
  codeData,
  handleCodeChange,
  style,
  language,
  placeholder,
}) => {
  let numStart = 1;
  const ref: any = useRef("");
  const [num, setNum] = useState([numStart]);

  useEffect(() => {
    let currentHeight: number = ref.current.offsetHeight;
    let eachNum = Math.round((currentHeight - 15) / 20);
    let arr = Array.from({ length: eachNum }, (_, i) => i + 1);
    setNum(arr);
  }, [ref.current.offsetHeight]);

  return (
    <CodeContainter>
      <LineNumbers ref={ref}>
        {num.map((item, index) => (
          <LineNumber key={index}>{item}</LineNumber>
        ))}
      </LineNumbers>
      <CodeEditor
        id={id}
        value={codeData}
        language={language}
        placeholder={placeholder}
        onChange={(event) => handleCodeChange(event)}
        padding={15}
        style={style}
        data-color-mode="dark"
      />
    </CodeContainter>
  );
};
export default Code;

[Sumis34]

I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.

const Code: React.FC<CodeProps> = ({
  id,
  codeData,
  handleCodeChange,
  style,
  language,
  placeholder,
}) => {
  let numStart = 1;
  const ref: any = useRef("");
  const [num, setNum] = useState([numStart]);

  useEffect(() => {
    let currentHeight: number = ref.current.offsetHeight;
    let eachNum = Math.round((currentHeight - 15) / 20);
    let arr = Array.from({ length: eachNum }, (_, i) => i + 1);
    setNum(arr);
  }, [ref.current.offsetHeight]);

  return (
    <CodeContainter>
      <LineNumbers ref={ref}>
        {num.map((item, index) => (
          <LineNumber key={index}>{item}</LineNumber>
        ))}
      </LineNumbers>
      <CodeEditor
        id={id}
        value={codeData}
        language={language}
        placeholder={placeholder}
        onChange={(event) => handleCodeChange(event)}
        padding={15}
        style={style}
        data-color-mode="dark"
      />
    </CodeContainter>
  );
};
export default Code;

Looks nice, would be nice to see a working example with the full code needed.

[jonashex]

It would be really nice to have this feature :)