Merge pull request #1485 from sharelatex/cmg-comments-track-changes

Add comments highlighting to rich text track changes

GitOrigin-RevId: 7f81490417cc228db5f6f687c309a4e39c0b25d5

services/web/.eslintrc

@@ -14,6 +14,7 @@
     "chai-friendly"
   ],
   "env": {
+    "browser": true,
     "mocha": true
   },
   "globals": {

services/web/app/views/project/editor/review-panel.pug

@@ -235,13 +235,20 @@
 			i.fa.fa-list
 			span.rp-nav-label #{translate("overview")}
 
-	.rp-unsupported-msg-wrapper
+	.rp-unsupported-msg-wrapper(ng-if="!reviewPanel.richTextTrackChangesEnabled")
 		.rp-unsupported-msg
 			i.fa.fa-5x.fa-exclamation-triangle
 			p.rp-unsupported-msg-title Sorry, Track Changes is not supported in Rich Text mode (yet).
 			p We didn't want to delay your ability to use Rich Text mode so we've launched without support for Track Changes.
 			p We're working hard to include Track Changes as soon as possible.
 
+	.rp-unsupported-msg-wrapper(ng-if="reviewPanel.richTextTrackChangesEnabled")
+		.rp-unsupported-msg
+			i.fa.fa-5x.fa-exclamation-triangle
+			p.rp-unsupported-msg-title Track Changes support in rich text mode is a work in progress.
+			p You can see tracked insertions and deletions, but you can't see comments and changes in this side bar yet.
+			p We're working hard to include Track Changes as soon as possible.We're working hard to add them as soon as they're ready.
+
 
 script(type='text/ng-template', id='changeEntryTemplate')
 	div

services/web/public/src/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js

@@ -20,7 +20,7 @@ define([
       this.onPaste = this.onPaste.bind(this)
       this.onResize = this.onResize.bind(this)
       this.tearDown = this.tearDown.bind(this)
-      this.onViewportChange = this.onViewportChange.bind(this)
+      this.onDisplayUpdate = this.onDisplayUpdate.bind(this)
 
       this.$scope = $scope
       this.editor = editor
@@ -176,13 +176,11 @@ define([
         }
       }
 
-      if (this.adapter.onCommentAdded) {
-        Array.from(this.rangesTracker.comments).map(comment => {
-          if (!this.isCommentResolved(comment)) {
-            this.adapter.onCommentAdded(comment)
-          }
-        })
-      }
+      Array.from(this.rangesTracker.comments).map(comment => {
+        if (!this.isCommentResolved(comment)) {
+          this.adapter.onCommentAdded(comment)
+        }
+      })
 
       this.broadcastChange()
     }
@@ -237,13 +235,13 @@ define([
 
       for (id in dirty.comment.added) {
         comment = dirty.comment.added[id]
-        if (this.adapter.onCommentAdded && !this.isCommentResolved(comment)) {
+        if (!this.isCommentResolved(comment)) {
           this.adapter.onCommentAdded(comment)
         }
       }
       for (id in dirty.comment.removed) {
         comment = dirty.comment.removed[id]
-        if (this.adapter.onCommentRemoved && !this.isCommentResolved(comment)) {
+        if (!this.isCommentResolved(comment)) {
           this.adapter.onCommentRemoved(comment)
         }
       }
@@ -404,9 +402,7 @@ define([
 
       for (let comment of comments) {
         if (resolve_ids[comment.op.t]) {
-          if (this.adapter.onCommentRemoved) {
-            this.adapter.onCommentRemoved(comment)
-          }
+          this.adapter.onCommentRemoved(comment)
         }
       }
       return this.broadcastChange()
@@ -416,9 +412,7 @@ define([
       let comments = this.rangesTracker.comments || []
       for (let comment of comments) {
         if (comment.op.t === thread_id && !this.isCommentResolved(comment)) {
-          if (this.adapter.onCommentAdded) {
-            this.adapter.onCommentAdded(comment)
-          }
+          this.adapter.onCommentAdded(comment)
         }
       }
       return this.broadcastChange()
@@ -432,8 +426,8 @@ define([
       })
     }
 
-    onViewportChange() {
-      this.adapter.changeMarkerPositions()
+    onDisplayUpdate() {
+      requestAnimationFrame(this.adapter.changeMarkerPositions)
     }
 
     onCut() {
@@ -656,16 +650,18 @@ define([
     }
 
     updateFocus() {
-      const selection = this.editor.getSelectionRange()
-      const selection_start = this._rangeToShareJs(selection.start)
-      const selection_end = this._rangeToShareJs(selection.end)
-      const is_selection = selection_start !== selection_end
-      this.$scope.$emit(
-        'editor:focus:changed',
-        selection_start,
-        selection_end,
-        is_selection
-      )
+      if (this.editor) {
+        const selection = this.editor.getSelectionRange()
+        const selection_start = this._rangeToShareJs(selection.start)
+        const selection_end = this._rangeToShareJs(selection.end)
+        const is_selection = selection_start !== selection_end
+        this.$scope.$emit(
+          'editor:focus:changed',
+          selection_start,
+          selection_end,
+          is_selection
+        )
+      }
     }
 
     _rangeToShareJs(range) {

services/web/public/src/ide/review-panel/controllers/ReviewPanelController.js

@@ -75,6 +75,7 @@ define([
       trackChangesOnForEveryone: false,
       trackChangesOnForGuests: false,
       trackChangesForGuestsAvailable: false,
+      richTextTrackChangesEnabled: window.richTextTrackChangesEnabled,
       entries: {},
       resolvedComments: {},
       hasEntries: false,

services/web/public/stylesheets/app/editor/review-panel.less

@@ -924,22 +924,35 @@
 }
 
 .cm-editor-wrapper {
+	@rp-yellow-for-cm: fade(@rp-yellow, 40%); // Get the RGBA colour with transparency
+	@rp-green-for-cm: fade(@rp-green, 40%); // Get the RGBA colour with transparency
+
 	.track-changes-marker {
 		border-radius: 0;
 	}
 
 	.track-changes-added-marker {
 		// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
-		background-color: rgba(44, 142, 48, 0.3);
+		background-color: @rp-green-for-cm;
 		color: black;
 	}
 
 	.track-changes-deleted-marker-callout {
 		// Commented out styles for callout to be reimplemented later
 		// border-bottom: 1px dashed #c5060b;
-		border-left: 3px dotted #c5060b;
+		border-left: 2px dotted #c5060b;
 		// width: 100%;
 	}
+
+	.track-changes-comment-marker {
+		// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
+		background-color: @rp-yellow-for-cm;
+		color: black;
+	}
+
+	.track-changes-added-marker.track-changes-comment-marker {
+		background-color: mix(@rp-yellow-for-cm, @rp-green-for-cm);
+	}
 }
 
 .review-icon when (@is-overleaf = false) {