Merge pull request #5743 from overleaf/jk-cm-realtime-integration

[web] CodeMirror 6 integration with real-time / ShareJs

GitOrigin-RevId: e8507ea1365828140948472625b3de6ab8a227c5

services/web/frontend/js/ide/connection/EditorWatchdogManager.js

@@ -178,6 +178,21 @@ export default class EditorWatchdogManager {
 
   attachToEditor(editorName, editor) {
     let onChange
+    if (editorName === 'CM6') {
+      // Code Mirror 6
+      this._log('attach to editor', editorName)
+      onChange = (_editor, changeDescription) => {
+        if (changeDescription.origin === 'remote') return
+        if (!(changeDescription.removed || changeDescription.inserted)) return
+        this.onEdit()
+      }
+      editor.on('change', onChange)
+      const detachFromEditor = () => {
+        this._log('detach from editor', editorName)
+        editor.off('change', onChange)
+      }
+      return detachFromEditor
+    }
     if (editorName === 'CM') {
       // CM is passing the CM instance as first parameter, then the change.
       onChange = (editor, change) => {

services/web/frontend/js/ide/editor/Document.js

@@ -86,6 +86,7 @@ export default Document = (function () {
       this.wantToBeJoined = false
       this._checkAceConsistency = () => this._checkConsistency(this.ace)
       this._checkCMConsistency = () => this._checkConsistency(this.cm)
+      this._checkCM6Consistency = () => this._checkConsistency(this.cm6)
       this._bindToEditorEvents()
       this._bindToSocketEvents()
     }
@@ -133,6 +134,27 @@ export default Document = (function () {
       return this.ide.$scope.$emit('document:closed', this.doc)
     }
 
+    attachToCM6(cm6) {
+      this.cm6 = cm6
+      if (this.doc != null) {
+        this.doc.attachToCM6(this.cm6)
+      }
+      if (this.cm6 != null) {
+        this.cm6.on('change', this._checkCM6Consistency)
+      }
+      return this.ide.$scope.$emit('document:opened', this.doc)
+    }
+
+    detachFromCM6() {
+      if (this.doc != null) {
+        this.doc.detachFromCM6()
+      }
+      if (this.cm6 != null) {
+        this.cm6.off('change', this._checkCM6Consistency)
+      }
+      return this.ide.$scope.$emit('document:closed', this.doc)
+    }
+
     submitOp(...args) {
       return this.doc != null
         ? this.doc.submitOp(...Array.from(args || []))

services/web/frontend/js/ide/editor/ShareJsDoc.js

@@ -381,6 +381,19 @@ export default ShareJsDoc = (function () {
         : undefined
     } // If we're waiting for the project to join, try again in 0.5 seconds
 
+    attachToCM6(cm6) {
+      this._attachToEditor('CM6', cm6, () => {
+        cm6.attachShareJs(this._doc)
+      })
+    }
+
+    detachFromCM6() {
+      this._maybeDetachEditorWatchdogManager()
+      if (this._doc.detach_cm6) {
+        this._doc.detach_cm6()
+      }
+    }
+
     _startInflightOpTimeout(update) {
       this._startFatalTimeoutTimer(update)
       const retryOp = () => {