Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

78
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.

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.