[Feature Request] display line number #36

Activity

1. jaywcjlove commented on Sep 3, 2021

   

   jaywcjlove

   on Sep 3, 2021

   Member

   More actions

   @xsro It is more difficult to add line numbers, and there is no plan to add this feature before finding a better way.
2. marabesi commented on Oct 30, 2021

   

   marabesi

   on Oct 30, 2021

   More actions

   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?
3. obonyojimmy commented on Apr 5, 2022

   

   obonyojimmy

   on Apr 5, 2022

   More actions

   Supporting this feature inclussion , probably aprop like showInlineLineNumbers as an inspiration from https://www.npmjs.com/package/react-syntax-highlighter
4. stephensanwo commented on May 13, 2022

   

   stephensanwo

   on May 13, 2022

   Last edited by jaywcjlove

   More actions

   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;
5. shawnz42 commented on Sep 12, 2022

   

   shawnz42

   on Sep 12, 2022

   More actions

   Hi, from where to import CodeContainter and LineNumbers

   👍React with 👍1Reacted by Josh Woodcock
6. Sumis34 commented on Apr 19, 2023

   

   Sumis34

   on Apr 19, 2023

   More actions

   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.
7. jonashex commented on Apr 24, 2024

   

   jonashex

   on Apr 24, 2024

   More actions

   It would be really nice to have this feature :)
8. andreasvirkus commented on Aug 5, 2024

   

   andreasvirkus

   on Aug 5, 2024

   Last edited by andreasvirkus

   More actions

   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?

   Screen.Recording.2024-08-05.at.14.37.45.mov
9. jaywcjlove commented on Aug 5, 2024

   

   jaywcjlove

   on Aug 5, 2024

   Member

   More actions

   react-textarea-code-editor/core/src/Editor.tsx

   Line 69 in c3d2efa

   )}</code><br /></pre>`,

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

   👍React with 👍1Reacted by Chasen Liu
10. andreasvirkus commented on Sep 12, 2024

    

    andreasvirkus

    on Sep 12, 2024

    More actions

    @jaywcjlove the line break just adds visual padding, the trailing newline that you can enter in the editor (and that gets no span.code-line wrapper and also no line number) lives inside the code element instead. Is there some known workaround for this or is this a bug?
11. jaywcjlove commented on Sep 12, 2024

    

    jaywcjlove

    on Sep 12, 2024

    Member

    More actions

    @andreasvirkus Line numbers are not displayed by default. If needed, you can add them using the following method.

    import rehypePrism from 'rehype-prism-plus';
    import React, { useState } from "react";
    import CodeEditor from '@uiw/react-textarea-code-editor';
    
    export default function App() {
      const [code, setCode] = useState(
        `function add(a, b) {\n  return a + b;\n}`
      );
      return (
        <CodeEditor
          value={code}
          language="js"
          placeholder="Please enter JS code."
          onChange={(evn) => setCode(evn.target.value)}
          rehypePlugins={[
            [rehypePrism, { ignoreMissing: true, showLineNumbers: true }]
          ]}
          padding={15}
          style={{
            backgroundColor: "#f5f5f5",
            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
          }}
        />
      );
    }

    react-textarea-code-editor/core/src/index.tsx

    Line 9 in c3d2efa

    const { rehypePlugins = [[rehypePrism, { ignoreMissing: true }]] as Pluggable[], ...reset } = props;

    2024-09-12.21.45.49.mp4
12. andreasvirkus commented on Sep 13, 2024

    

    andreasvirkus

    on Sep 13, 2024

    More actions

    @jaywcjlove thanks, I've already tried the rehype plugin but irrelevant of the implementation method, the last line (if just an empty newline) is still without a line number since it's not represented within the editor-preview (pre element) itself, only in the textarea:

    

    This results in the following broken behaviour:

    Screen.Recording.2024-09-13.at.11.42.19.mov

    I'd expect the line number "5" to appear immediately when pressing enter, otherwise it's as if the cursor is outside the bounds of the editor, trailing in the void.

    👍React with 👍3Reacted by Marko Klopets, Richard Willis and Chris Toxz