• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

152
Vistas
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.

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda