Update editor other cursor classes and adding option for other cursors features in CodeMirror

Author: jackycute

public/css/index.css

@@ -241,16 +241,7 @@ body {
 .dropdown-menu > li > a {
     cursor: pointer;
 }
-.other-cursors {
-    position:relative;
-    z-index:3;
-}
-.other-cursor {
-    width: 0px;
-    position: absolute;
-    border-right: none;
-}
-.dropdown-menu.other-cursor {
+.dropdown-menu.CodeMirror-other-cursor {
     transition: none;
 }
 .cursortag {
@@ -288,7 +279,7 @@ div[contenteditable]:empty:not(:focus):before{
 .dropdown-menu .emoji {
     margin-bottom: 0 !important;
 }
-.dropdown-menu.other-cursor {
+.dropdown-menu.CodeMirror-other-cursor {
     max-height: 50vh;
     width: auto !important;
     overflow: auto;

public/js/index.js

@@ -455,6 +455,7 @@ window.editor = CodeMirror.fromTextArea(textit, {
     addModeClass: true,
     readOnly: true,
     autoRefresh: true,
+    otherCursors: true,
     placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
 });
 var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor);
@@ -2719,7 +2720,7 @@ socket.on('online users', function (data) {
         console.debug(data);
     onlineUsers = data.users;
     updateOnlineStatus();
-    $('.other-cursors').children().each(function (key, value) {
+    $('.CodeMirror-other-cursors').children().each(function (key, value) {
         var found = false;
         for (var i = 0; i < data.users.length; i++) {
             var user = data.users[i];
@@ -3044,11 +3045,11 @@ function buildCursor(user) {
             iconClass = 'fa-desktop';
             break;
     }
-    if ($('.other-cursors').length <= 0) {
-        $("<div class='other-cursors'>").insertAfter('.CodeMirror-cursors');
+    if ($('.CodeMirror-other-cursors').length <= 0) {
+        $("<div class='CodeMirror-other-cursors'>").insertAfter('.CodeMirror-cursors');
     }
     if ($('div[data-clientid="' + user.id + '"]').length <= 0) {
-        var cursor = $('<div data-clientid="' + user.id + '" class="other-cursor" style="display:none;"></div>');
+        var cursor = $('<div data-clientid="' + user.id + '" class="CodeMirror-other-cursor" style="display:none;"></div>');
         cursor.attr('data-line', user.cursor.line);
         cursor.attr('data-ch', user.cursor.ch);
         cursor.attr('data-offset-left', 0);
@@ -3119,7 +3120,7 @@ function buildCursor(user) {
 
         cursor[0].style.left = coord.left + 'px';
         cursor[0].style.top = coord.top + 'px';
-        $('.other-cursors').append(cursor);
+        $('.CodeMirror-other-cursors').append(cursor);
 
         if (!user.idle)
             cursor.stop(true).fadeIn();
@@ -3622,8 +3623,8 @@ function checkCursorMenuInner() {
     // get cursor
     var cursor = editor.getCursor();
     // set element cursor data
-    if (!dropdown.hasClass('other-cursor'))
-        dropdown.addClass('other-cursor');
+    if (!dropdown.hasClass('CodeMirror-other-cursor'))
+        dropdown.addClass('CodeMirror-other-cursor');
     dropdown.attr('data-line', cursor.line);
     dropdown.attr('data-ch', cursor.ch);
     // get coord position

public/vendor/codemirror/codemirror.min.js

@@ -86,6 +86,12 @@
 /* Can style cursor different in overwrite (non-insert) mode */
 .CodeMirror-overwrite .CodeMirror-cursor {}
 
+.CodeMirror-other-cursor {
+    width: 0px;
+    position: absolute;
+    border-right: none;
+}
+
 .cm-tab { display: inline-block; text-decoration: inherit; }
 
 .CodeMirror-rulers {
@@ -316,6 +322,11 @@ div.CodeMirror-dragcursors {
   visibility: visible;
 }
 
+div.CodeMirror-other-cursors {
+  position:relative;
+  z-index:3;
+}
+
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 .CodeMirror-crosshair { cursor: crosshair; }
@@ -338,6 +349,9 @@ div.CodeMirror-dragcursors {
   .CodeMirror div.CodeMirror-cursors {
     visibility: hidden;
   }
+  .CodeMirror div.CodeMirror-other-cursors {
+    visibility: hidden;
+  }
 }
 
 /* See issue #2901 */

public/vendor/codemirror/lib/codemirror.css

@@ -2330,7 +2330,7 @@
     for (var i = 0; i < doc.sel.ranges.length; i++) {
       if (primary === false && i == doc.sel.primIndex) continue;
       var range = doc.sel.ranges[i];
-      //if (range.from().line >= cm.display.viewTo || range.to().line < cm.display.viewFrom) continue;
+      if (!cm.options.otherCursors && (range.from().line >= cm.display.viewTo || range.to().line < cm.display.viewFrom)) continue;
       var collapsed = range.empty();
       if (collapsed || cm.options.showCursorWhenSelecting)
         drawSelectionCursor(cm, range.head, curFragment);
@@ -2357,16 +2357,20 @@
       otherCursor.style.top = pos.other.top + "px";
       otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
     }
-      
-    $('.other-cursor').each(function(key, value) {
-        var line = parseInt($(value).attr('data-line'));
-        var ch = parseInt($(value).attr('data-ch'));
-        var offsetLeft = parseFloat($(value).attr('data-offset-left'));
-        var offsetTop = parseFloat($(value).attr('data-offset-top'));
-        var coord = cm.charCoords({line: line, ch: ch}, 'windows');
-        $(value)[0].style.left = coord.left + offsetLeft + 'px';
-        $(value)[0].style.top = coord.top + offsetTop + 'px';
-    });
+
+    if (cm.options.otherCursors) {
+      var others = cm.display.lineSpace.getElementsByClassName('CodeMirror-other-cursor');
+      for (var i = 0, l = others.length; i < l; i++) {
+          var other = others[i];
+          var line = parseInt(other.getAttribute('data-line'));
+          var ch = parseInt(other.getAttribute('data-ch'));
+          var offsetLeft = parseFloat(other.getAttribute('data-offset-left'));
+          var offsetTop = parseFloat(other.getAttribute('data-offset-top'));
+          var coord = cm.charCoords({line: line, ch: ch}, 'windows');
+          other.style.left = coord.left + offsetLeft + 'px';
+          other.style.top = coord.top + offsetTop + 'px';
+      }
+    }
   }
 
   // Draws the given range as a highlighted selection