Fix adding line comment

Author: christianalfoni

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

@@ -1,10 +1,10 @@
+import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import {
   NotificationMessage,
   NotificationStatus,
 } from '@codesandbox/notifications/lib/state';
 
-import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
 import { KeyCode, KeyMod } from './keyCodes';
 
 // Copied from 'common/actions' in vscode
@@ -168,7 +168,9 @@ export class Workbench {
         label: 'Comment on code',
         category: 'Comments',
         run: () => {
-          this.controller.getSignal('comments.createComment')();
+          this.controller.getSignal('comments.createComment')({
+            isLineComment: false,
+          });
         },
       });
     }

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

@@ -13,6 +13,10 @@ import {
   CommentRemovedSubscription,
 } from 'app/graphql/types';
 import { Action, AsyncAction } from 'app/overmind';
+import {
+  indexToLineAndColumn,
+  lineAndColumnToIndex,
+} from 'app/overmind/utils/common';
 import { utcToZonedTime } from 'date-fns-tz';
 import { Selection, TextOperation } from 'ot';
 import * as uuid from 'uuid';
@@ -111,7 +115,9 @@ export const onCommentClick: Action<{
   }
 
   if (!commentIds.length) {
-    actions.comments.createComment();
+    actions.comments.createComment({
+      isLineComment: true,
+    });
   } else if (commentIds.length === 1) {
     actions.comments.selectComment({
       commentId: commentIds[0],
@@ -211,7 +217,9 @@ export const selectComment: AsyncAction<{
   }
 };
 
-export const createComment: AsyncAction = async ({ state, effects }) => {
+export const createComment: AsyncAction<{
+  isLineComment: boolean;
+}> = async ({ state, effects }, { isLineComment }) => {
   if (!state.user || !state.editor.currentSandbox) {
     return;
   }
@@ -222,10 +230,23 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
   let codeReference: CodeReference | null = null;
   const selection = state.live.currentSelection;
   if (selection) {
+    let anchor =
+      selection.primary.selection[0] || selection.primary.cursorPosition;
+    let head =
+      selection.primary.selection[1] || selection.primary.cursorPosition;
+
+    if (isLineComment) {
+      const codeLines = state.editor.currentModule.code.split('\n');
+      const { lineNumber } = indexToLineAndColumn(codeLines, anchor);
+      const newAnchor = lineAndColumnToIndex(codeLines, lineNumber, 1);
+
+      anchor = newAnchor;
+      head = newAnchor;
+    }
+
     codeReference = {
-      anchor:
-        selection.primary.selection[0] || selection.primary.cursorPosition,
-      head: selection.primary.selection[1] || selection.primary.cursorPosition,
+      anchor,
+      head,
       code: selection.primary.selection.length
         ? state.editor.currentModule.code.substr(
             selection.primary.selection[0],

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

@@ -529,6 +529,9 @@ export const forkExternalSandbox: AsyncAction<{
   try {
     const forkedSandbox = await effects.api.forkSandbox(sandboxId, body);
 
+    // We currently have to delete the comments due to smooth forking. This will get better
+    // with EditorSandbox class
+    delete state.comments.comments[sandboxId];
     state.editor.sandboxes[forkedSandbox.id] = forkedSandbox;
     effects.router.updateSandboxUrl(forkedSandbox, { openInNewWindow });
   } catch (error) {

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -1,6 +1,5 @@
 import { ENTER, ESC } from '@codesandbox/common/lib/utils/keycodes';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-
 import {
   Avatar,
   Element,