Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

79
Views
Has anyone encountered CodeMirror after adding a widget, it will scroll every time input

I have tested both chrome 96.0.4664.55 and Firefox 94.0.1. CodeMirror 5.48.2

The situation I encountered:

Set the height of CodeMirror, such as:

.CodeMirror {
  height: 200px;
}

then add widgets in the loop:

let addLineWidgetWithType = (line, addType) => {
  let widgets = cm.lineInfo(line).widgets
  if (widgets) {
    for (var i = 0; i < widgets.length; ++i) {
      if (widgets[i].node.className.includes(addType)) return false
    }
  }

  let node = document.createElement('hr')
  node.className = addType
  let lineWidget = cm.addLineWidget(line, node, { above: true })
  lineWidget.changed()
}

let removeLineWidgets = (line) => {
  let widgets = cm.lineInfo(line).widgets
  if (!widgets) return
  for (var i = 0; i < widgets.length; ++i) {
    widgets[i].clear()
  }
}

let checkLine = (cm) => {
  for (var line = 0; line <= cm.lastLine(); line++) {
    removeLineWidgets(line)
    if (line % 2 === 0) {
      addLineWidgetWithType(line, 'test')
    }
  }
}
const content = `
test
test
test
test
test
`

var cm = CodeMirror(document.querySelector('.editorContainer'), {
  theme:'default',
  lineNumbers: true,
  gutters: ['CodeMirror-linenumbers','CodeMirror-other-make'],
  value: content,
})

cm.on('change', (cm, change) => {
  checkLine(cm)
})
checkLine(cm)

cm.focus()
cm.setCursor(cm.lastLine(), 0)

Then every edit at the bottom of the document will scroll up, making the line where the cursor is invisible.

Here is a small demo. Just put cursor after the last symbol, press Enter and start typing.

7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs