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

Hi, from where to import CodeContainter and LineNumbers

from react-textarea-code-editor.

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

from react-textarea-code-editor.

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?

from react-textarea-code-editor.

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

from react-textarea-code-editor.

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;

from react-textarea-code-editor.

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.

from react-textarea-code-editor.

It would be really nice to have this feature :)

from react-textarea-code-editor.

Line numbers can be implemented with a few lines of CSS:

.code-highlight {
  counter-reset: linenumber;
}

.code-line::before {
  position: absolute;
  translate: -130% 0; /* tweak accordingly */
  content: counter(linenumber);
  counter-increment: linenumber;
  color: #333;
  text-align: right;
  user-select: none;
  padding: 0 4px;
}

⚠️ But the very last active line doesn't get a <span class="code-line"> wrapper unless it has content, resulting in a weird editor experience; @jaywcjlove do you know if this is a bug or intended behaviour? Any quick workaround?

from react-textarea-code-editor.

@xsro Line breaks are added to align with the Textarea.

from react-textarea-code-editor.