You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.8 KiB
94 lines
2.8 KiB
const sourceUser = {
|
|
id: "source",
|
|
label: "Source User",
|
|
color: "orange"
|
|
};
|
|
|
|
const staticUser = {
|
|
id: "static",
|
|
label: "Static User",
|
|
color: "blue"
|
|
};
|
|
|
|
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
|
|
require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabExt) {
|
|
|
|
//
|
|
// Create the target editor where events will be played into.
|
|
//
|
|
const target = monaco.editor.create(document.getElementById("target-editor"), {
|
|
value: editorContents,
|
|
theme: "vs-dark'",
|
|
language: 'javascript',
|
|
readOnly: true
|
|
});
|
|
|
|
const remoteCursorManager = new MonacoCollabExt.RemoteCursorManager({
|
|
editor: target,
|
|
tooltips: true,
|
|
tooltipDuration: 2
|
|
});
|
|
const sourceUserCursor = remoteCursorManager.addCursor(sourceUser.id, sourceUser.color, sourceUser.label);
|
|
const staticUserCursor = remoteCursorManager.addCursor(staticUser.id, staticUser.color, staticUser.label);
|
|
|
|
const remoteSelectionManager = new MonacoCollabExt.RemoteSelectionManager({editor: target});
|
|
remoteSelectionManager.addSelection(sourceUser.id, sourceUser.color, sourceUser.label);
|
|
remoteSelectionManager.addSelection(staticUser.id, staticUser.color, staticUser.label);
|
|
|
|
const targetContentManager = new MonacoCollabExt.EditorContentManager({
|
|
editor: target
|
|
});
|
|
|
|
//
|
|
// Faked other user.
|
|
//
|
|
staticUserCursor.setOffset(50);
|
|
remoteSelectionManager.setSelectionOffsets(staticUser.id, 40, 50);
|
|
|
|
|
|
//
|
|
// Create the source editor were events will be generated.
|
|
//
|
|
const source = monaco.editor.create(document.getElementById("source-editor"), {
|
|
value: editorContents,
|
|
theme: "vs-dark'",
|
|
language: 'javascript'
|
|
});
|
|
|
|
source.onDidChangeCursorPosition(e => {
|
|
const offset = source.getModel().getOffsetAt(e.position);
|
|
sourceUserCursor.setOffset(offset);
|
|
});
|
|
|
|
source.onDidChangeCursorSelection(e => {
|
|
const startOffset = source.getModel().getOffsetAt(e.selection.getStartPosition());
|
|
const endOffset = source.getModel().getOffsetAt(e.selection.getEndPosition());
|
|
remoteSelectionManager.setSelectionOffsets(sourceUser.id, startOffset, endOffset);
|
|
});
|
|
|
|
const sourceContentManager = new MonacoCollabExt.EditorContentManager({
|
|
editor: source,
|
|
onInsert(index, text) {
|
|
target.updateOptions({readOnly: false});
|
|
targetContentManager.insert(index, text);
|
|
target.updateOptions({readOnly: true});
|
|
},
|
|
onReplace(index, length, text) {
|
|
target.updateOptions({readOnly: false});
|
|
targetContentManager.replace(index, length, text);
|
|
target.updateOptions({readOnly: true});
|
|
},
|
|
onDelete(index, length) {
|
|
target.updateOptions({readOnly: false});
|
|
targetContentManager.delete(index, length);
|
|
target.updateOptions({readOnly: true});
|
|
}
|
|
});
|
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
source.layout();
|
|
target.layout();
|
|
});
|
|
});
|