add transposing of comments on received operations

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -41,6 +41,7 @@ export type onSelectionChangeData = UserSelection;
 
 export type OnOperationAppliedData = {
   moduleShortid: string;
+  operation: TextOperation;
   title: string;
   code: string;
   model: any;
@@ -294,6 +295,7 @@ export class ModelsHandler {
     this.isApplyingOperation = false;
     this.onOperationAppliedCallback({
       code: model.getValue(),
+      operation,
       moduleShortid: module.shortid,
       title: module.title,
       model,

packages/app/src/app/overmind/namespaces/comments/actions.ts

@@ -1,4 +1,4 @@
-import { CommentsFilterOption } from '@codesandbox/common/lib/types';
+import { CommentsFilterOption, Module } from '@codesandbox/common/lib/types';
 import { captureException } from '@codesandbox/common/lib/utils/analytics/sentry';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import {
@@ -14,7 +14,7 @@ import {
 } from 'app/graphql/types';
 import { Action, AsyncAction } from 'app/overmind';
 import { utcToZonedTime } from 'date-fns-tz';
-import { Selection } from 'ot';
+import { Selection, TextOperation } from 'ot';
 import * as uuid from 'uuid';
 
 import { OPTIMISTIC_COMMENT_ID } from './state';
@@ -570,3 +570,23 @@ export const onCommentRemoved: Action<CommentRemovedSubscription> = (
 ) => {
   delete state.comments.comments[comment.sandbox.id][comment.id];
 };
+
+export const transposeComments: Action<{
+  module: Module;
+  operation: TextOperation;
+}> = ({ state }, { module, operation }) => {
+  const sandbox = state.editor.currentSandbox;
+  if (!sandbox) {
+    return;
+  }
+  const comments = state.comments.fileComments[module.path] || [];
+  comments.forEach(fileComment => {
+    const range = new Selection.Range(...fileComment.range);
+    const newRange = range.transform(operation);
+    const comment = state.comments.comments[sandbox.id][fileComment.commentId];
+    if (comment.references && comment.references[0].type === 'code') {
+      comment.references[0].metadata.anchor = newRange.anchor;
+      comment.references[0].metadata.head = newRange.head;
+    }
+  });
+};

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -33,7 +33,7 @@ import { convertAuthorizationToPermissionType } from 'app/utils/authorization';
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import history from 'app/utils/history';
 import { debounce } from 'lodash-es';
-import { Selection, TextOperation } from 'ot';
+import { TextOperation } from 'ot';
 import { json } from 'overmind';
 
 import eventToTransform from '../../utils/event-to-transform';
@@ -335,8 +335,9 @@ export const codeSaved: AsyncAction<{
 
 export const onOperationApplied: Action<{
   moduleShortid: string;
+  operation: TextOperation;
   code: string;
-}> = ({ state, effects, actions }, { code, moduleShortid }) => {
+}> = ({ state, effects, actions }, { code, moduleShortid, operation }) => {
   if (!state.editor.currentSandbox) {
     return;
   }
@@ -349,6 +350,8 @@ export const onOperationApplied: Action<{
     return;
   }
 
+  actions.comments.transposeComments({ module, operation });
+
   actions.editor.internal.updateModuleCode({
     module,
     code,
@@ -373,8 +376,6 @@ export const codeChanged: Action<{
     return;
   }
 
-  const sandbox = state.editor.currentSandbox;
-
   const module = state.editor.currentSandbox.modules.find(
     m => m.shortid === moduleShortid
   );
@@ -410,17 +411,7 @@ export const codeChanged: Action<{
 
     effects.live.sendCodeUpdate(moduleShortid, operation);
 
-    const comments = state.comments.fileComments[module.path] || [];
-    comments.forEach(fileComment => {
-      const range = new Selection.Range(...fileComment.range);
-      const newRange = range.transform(operation);
-      const comment =
-        state.comments.comments[sandbox.id][fileComment.commentId];
-      if (comment.references && comment.references[0].type === 'code') {
-        comment.references[0].metadata.anchor = newRange.anchor;
-        comment.references[0].metadata.head = newRange.head;
-      }
-    });
+    actions.comments.transposeComments({ module, operation });
   }
 
   actions.editor.internal.updateModuleCode({