Scroll to a specific line in codemirror

[GevinHasmitha]

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?

[jaywcjlove]

@GevinHasmitha I don't understand what you mean. Do you want to scroll to the specified line?

[GevinHasmitha]

@jaywcjlove Yes, I want the editor to scroll to the line where my added classname is present when i click on a button. (Im adding the classname using the classnameExt extension)

[jaywcjlove]

You need to get the dom node of div.cm-scroller to control the scroll bar.

Then get the height of the row and position it.

[jaywcjlove]

react-codemirror/extensions/events/src/index.ts

Lines 18 to 48 in bf3b862

	function events<T extends keyof HTMLElementEventMap>(opts: Options<T>) {
	const { type = 'scroll', events } = opts;
	return ViewPlugin.fromClass(
	class {
	dom?: HTMLElement;
	view: EditorView;
	constructor(view: EditorView) {
	this.view = view;
	if (type === 'dom') {
	this.dom = view.dom;
	} else if (type === 'content') {
	this.dom = view.contentDOM;
	} else {
	this.dom = view.scrollDOM;
	}
	(Object.keys(events || {}) as Array<keyof typeof events>).forEach((keyname) => {
	if (events && events[keyname] && this.dom) {
	this.dom.addEventListener(keyname, events[keyname]);
	}
	});
	}
	destroy() {
	(Object.keys(events || {}) as Array<keyof typeof events>).forEach((keyname) => {
	if (events && events[keyname] && this.dom) {
	this.dom.removeEventListener(keyname, events[keyname]);
	}
	});
	}
	},
	);
	}

[GevinHasmitha]

 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*/
    }

[flatsiedatsie]

 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*/
    }

That only works if the lines are of equal height. When using CodeMirror as a text-editor that might not be the case.