Visual languages and auto-sync between editor and visual designer

[andreev-artem]

monaco-editor version: 0.15.3

The task is to sync changes from visual editor to code editor and vice versa.

While syncing from visual editor to code editor it would be good to change only small amounts of code. Because if model.setValue(src) is used we need to manually call editor.getAction('editor.action.formatDocument').run() which leads to flickering effect. And even without additional formatting step some flickering effect is present. For that we need to easily identify which portion of line of code should be changed.

While syncing from code to visual editor we need to know even more if that's new code added, old modified or may be moved.

How that looks to me - it would be good to have ability to assign some metadata to tags which would not be visible in code editor but could be accessible through model. Or at least to have some deeper access to model - not only to lines of strings.

But I didn't find any way in monaco-editor which would help to implement something similar. Working with string lines doesn't look enough powerful, actually I need to re-parse everything again.

[alexdima]

You can use a diff algorithm between the current state and the desired state to compute more smaller edits. Here is an example of an implementation of "An O(ND) Difference Algorithm and its variations" by Eugene W. Myers.

Once you have computed the differences, you can use model.pushEditOperations (if you want the changes to be undoable) or model.applyEdits