vue2-ace-editor icon indicating copy to clipboard operation
vue2-ace-editor copied to clipboard

Problem with dynamic markers

Open mike-kelly opened this issue 5 years ago • 1 comments

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.

mike-kelly avatar Dec 27 '19 14:12 mike-kelly

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?

mike-kelly avatar Dec 27 '19 14:12 mike-kelly