File size: 1,978 Bytes
341f1e9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const sourceUser = {
  id: "source",
  label: "Source User",
  color: "orange"
};

const staticUser = {
  id: "static",
  label: "Static User",
  color: "blue"
};

const sourceEditorTextArea = document.getElementById("source-editor");
const sourceEditor = new CodeMirror(sourceEditorTextArea, {
  mode: "javascript",
  lineNumbers: true,
  value: editorContents
});

const targetEditorTextArea = document.getElementById("target-editor");
const targetEditor = new CodeMirror(targetEditorTextArea, {
  mode: "javascript",
  lineNumbers: true,
  value: editorContents
});

const remoteCursorManager = new CodeMirrorCollabExt.RemoteCursorManager({
  editor: targetEditor,
  tooltips: true,
  tooltipDuration: 2
});
const sourceUserCursor = remoteCursorManager.addCursor(sourceUser.id, sourceUser.color, sourceUser.label);
const staticUserCursor = remoteCursorManager.addCursor(staticUser.id, staticUser.color, staticUser.label);

staticUserCursor.setIndex(50);

const remoteSelectionManager = new CodeMirrorCollabExt.RemoteSelectionManager({editor: targetEditor});
const sourceUserSelection = remoteSelectionManager.addSelection(sourceUser.id, sourceUser.color);
remoteSelectionManager.addSelection(staticUser.id, staticUser.color);


sourceEditor.on("cursorActivity", () => {
  setTimeout(() => {
    sourceUserCursor.setPosition(sourceEditor.getCursor());

    sourceUserSelection.setPositions(
      sourceEditor.getCursor("from"),
      sourceEditor.getCursor("to")
    );
  }, 0);
});

const targetContentManager = new CodeMirrorCollabExt.EditorContentManager({
  editor: targetEditor,
  id: "target"
});

const sourceContentManager = new CodeMirrorCollabExt.EditorContentManager({
  editor: sourceEditor,
  id: "source",
  onInsert(index, text) {
   targetContentManager.insert(index, text);
  },
  onReplace(index, length, text) {
    targetContentManager.replace(index, length, text);
  },
  onDelete(index, length) {
   targetContentManager.delete(index, length);
  }
});