surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.29k stars 383 forks source link

No support for renderLine event #120

Open vintprox opened 4 years ago

vintprox commented 4 years ago

Vue.js version and component version

Reproduction Link

Example usage of "renderLine" event is shown here: https://jsfiddle.net/vintprox/ndgz4y9b/1/

Steps to reproduce

  1. Add listener @render-line="onRenderLine" to codemirror component.
  2. Write method like this:
    onRenderLine(cm, line, el) {
    console.log('renderLine', cm, line, el);
    }
  3. Look for console output.

What is Expected?

Being able to wrap lines with certain indentation with help of renderLine event, as shown here: https://codemirror.net/demo/indentwrap.html

What is actually happening?

You'll get silence, because render-line was not declared inside the <codemirror> component.

vintprox commented 4 years ago

There are couple of issues appearing because of lacking events in this component: could as well fetch events list from somewhere (instead of handpicking), but I didn't look into this capability yet. Related: #89

vintprox commented 4 years ago

One workaround would be to bind event listener @ready="onCmReady" and add method

onCmReady(cm) {
  cm.on('renderLine', (cm, line, el) => {
    const paddingLeft = (3 + CodeMirror.countColumn(line.text, null, cm.getOption('tabSize'))) * cm.defaultCharWidth();
    el.style.textIndent = `${-paddingLeft}px`;
    el.style.paddingLeft = `${4 + paddingLeft}px`;
  });
},

Getting codemirror instance cm this way seems less troublesome IMHO. That allows to bind any event (not currently foreseen by vue-codemirror) on editor.

(If you wonder what this snippet is about, it adapts indentation of subsequent "sublines" as a result of line wrapping - to whitespace of line in general plus 3 spaces. So, yeah, it just works now.) image