vue2-ace-editor
vue2-ace-editor copied to clipboard
Problem with dynamic markers
If I add highlighting/markers to editor text using Anchors, the marker layer does not dynamically update as expected if I type before the highlighted section in the editor.
It does however update if I make a deletion edit, or double click.
So, the update function for the Marker or Anchor is not being called for insert events. Is this to do with Vue's virtual DOM? Any suggested workaround?
Here's how I am adding a highlight:
const newRange = new Range(
annotation.referent.start.row,
annotation.referent.start.column,
annotation.referent.end.row,
annotation.referent.end.column
);
if (!newRange.isEmpty()) {
const session = this.aceEditor.getSession();
newRange.start = session.doc.createAnchor(newRange.start);
newRange.end = session.doc.createAnchor(newRange.end);
newRange.id = session.addMarker(newRange, 'ace-selected-word', 'text');
}
I have also tried using addDynamicMarker
with a custom update function. Same problem.
Actually I found a workaround: on the editor, I listen for @input
events in order to save updates automatically. In the related function I added this.aceEditor.updateSelectionMarkers();
Perhaps there is a more efficient way than this?