Open vintprox opened 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
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.)
Vue.js version and component version
vue
version2.6.11
vue-codemirror
version4.0.6
Reproduction Link
Example usage of "renderLine" event is shown here: https://jsfiddle.net/vintprox/ndgz4y9b/1/
Steps to reproduce
@render-line="onRenderLine"
tocodemirror
component.What is Expected?
Being able to wrap lines with certain indentation with help of
renderLine
event, as shown here: https://codemirror.net/demo/indentwrap.htmlWhat is actually happening?
You'll get silence, because
render-line
was not declared inside the<codemirror>
component.