Monaco-editor: way to implement tabs

[troy351]

monaco-editor version: 0.10.1
Browser: Chrome 61
OS: Windows 10
Steps or JS usage snippet reproducing the issue:

I am building a multi-tab code editor with one monaco-editor instance and using setValue to switch code between tabs.
And I want each tab has its own undo stack.
What should I do?

[linhuiw]

After monaco.editor.create, you will get a instance as a moncao editor.
you may don't need use setValue to switch code. when you new a monaco instance, you can pass a value.
when you create a monaco editor, the instance you can use for it's own stack.

code example like this:

this.editor = monaco.editor.create(this.node, {
      value: value,
      language: 'json'
});
this.editor.onDidChangeModelContent(evt => {
     const value = this.editor.getValue();
     console.log(value);
});

[troy351]

@linhuiw I'm not quite understand what you mean.
Did you mean creating multiple editor instance?

I'll take a example.
There are two full screen tabs A and B with the same this.editor and I'm in tab A.

// tab A
alert('I am tab A');

// tab B
alert('I am tab B');

change code to

// tab A
alert('I am new tab A');

then switch to tab B using this.editor.setValue(tabs.B.code) and switch back to tab A. As for now, nothing happens after pressing Ctrl + Z for setValue would empty undo stack.
If kept undo stack when setValue, there would be tab B's code in editor after pressing Ctrl + Z not tab A's original code.

[linhuiw]

@troy351 yes, you may need to create multiple editor instance for multi editor in different tab.

[troy351]

@linhuiw I'm concern about the memory problem when there are lots of tabs.

[linhuiw]

@troy351 I think multi instance may be the right choice;
memory problem should be fine, you can reduce some event if the tab (editor) is not active.

[alexdima]

To implement tabs, the recommended way is:

• create a single editor instance via monaco.editor.create({ ... , model: null })
• create N model instances via monaco.editor.createModel(...).
• switch tabs by calling editorInstance.setModel(modelInstance)
• for each model, you can save its view state (cursor, scroll position, etc) via editorInstance.saveViewState() and restore it via editorInstance.restoreViewState().

e.g. the code of the playground -- https://github.com/Microsoft/monaco-editor/blob/bad3c34056624dca34ac8be5028ae3454172125c/website/playground/playground.js#L108

[troy351]

@alexandrudima works pretty well