Add selection and initial operation when saving comment

Author: christianalfoni

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

@@ -23,6 +23,7 @@ import { listen } from 'codesandbox-api';
 import FontFaceObserver from 'fontfaceobserver';
 import { debounce } from 'lodash-es';
 import * as childProcess from 'node-services/lib/child_process';
+import { Selection, TextOperation } from 'ot';
 import io from 'socket.io-client';
 
 import { EXTENSIONS_LOCATION, VIM_EXTENSION_ID } from './constants';
@@ -118,6 +119,20 @@ export class VSCodeEffect {
     cancel(): void;
   };
 
+  public getTextOperationFromSelection(
+    selection: [number, number],
+    code: string
+  ) {
+    return new TextOperation(
+      selection[0],
+      code.substr(selection[0], selection[1] - selection[0])
+    );
+  }
+
+  public getRangeFromSelection(selection: [number, number]) {
+    return new Selection.Range(selection[0], selection[1]);
+  }
+
   public initialize(options: VsCodeOptions) {
     this.options = options;
     this.controller = {

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

@@ -10,10 +10,10 @@ import {
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
-import { NotificationStatus } from '@codesandbox/notifications';
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { NotificationStatus } from '@codesandbox/notifications';
 import {
   Authorization,
   CollaboratorFragment,
@@ -1408,6 +1408,19 @@ export const addComment: AsyncAction<{
     return;
   }
 
+  /*
+    KEEP THIS: This will be used when we start implementing the backend. It will allow us to 
+    keep track of at what position the comment should be displayed and also we use a TextOperation
+    to do the diffing of changes
+
+    const selection = state.editor.currentSelection;
+    const range = effects.vscode.getRangeFromSelection(selection);
+    const operation = effects.vscode.getTextOperationFromSelection(
+      selection,
+      state.editor.currentModule.code
+    );
+  */
+
   const id = `${comment}-${username}`;
   const optimisticComment = {
     id,

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

@@ -75,6 +75,7 @@ type State = {
   shouldDirectoryBeOpen: Derive<State, (directoryShortid: string) => boolean>;
   currentDevToolsPosition: DevToolsTabPosition;
   sessionFrozen: boolean;
+  currentSelection: [number, number] | null;
   comments: {
     [sandboxId: string]: {
       [commentId: string]: Comment;
@@ -87,6 +88,7 @@ type State = {
 };
 
 export const state: State = {
+  currentSelection: null,
   comments: {},
   currentCommentId: null, // '5e5961e0c277a40fef1e391b',
   currentComment: ({ comments, currentSandbox, currentCommentId }) => {

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

@@ -166,15 +166,8 @@ export const onSelectionChanged: Action<any> = (
   { state, effects },
   selection
 ) => {
-  // console.log(
-  //   'SELECTION',
-  //   selection.primary.selection[0],
-  //   state.editor.currentModule.code.substr(
-  //     selection.primary.selection[0],
-  //     selection.primary.selection[1] - selection.primary.selection[0]
-  //   ),
-  //   state.editor.currentModule.code.length - selection.primary.selection[1]
-  // );
+  state.editor.currentSelection = selection.primary;
+
   if (!state.live.roomInfo) {
     return;
   }