CODEWITHSUNDEEP
reactjsreact-hookscodemirrorreact-codemirrorcodemirror-6
Gevin Hasmitha
Gevin Hasmitha

Reputation: 29

@uiw/react-codemirror Scrolling

Im using uiw-react codemirror. I'm adding a classname to a specific line in the codemirror using classnameExt function provided by uiw codemirror. I have access to the classname and the line number of the specific line. I want to scroll to that specific line on a button click.

   `<CodeMirror
      id="codemirrorId"
      value={value}
      height={height}
      theme={darkMode ? aura : xcodeLight}
      extensions={extensions}
      onChange={onChange}
      readOnly={readOnly}
      color="text.primary"
    />`

This is my codemirror component, how can i scroll to the specific line which has my classname?

Thanks in advance:)

Upvotes: 0

Views: 301

Answers (1)

Gevin Hasmitha
Gevin Hasmitha

Reputation: 29

 const scroller = document.getElementsByClassName("cm-scroller")[0];
    if (scroller) {
      const totalLines = 200     /* total number of lines */
      const totalHeight = scroller.scrollHeight;
      const singleLineHeight = totalHeight / totalLines;
  
      scroller.scrollTop = (singleLineHeight * x);   /*x is the line number to scroll to*/
    }

Upvotes: 0

Related Questions