Change how we update the user seelection on model change code

Author: CompuIves

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

@@ -3,6 +3,7 @@ import {
   EditorSelection,
   Module,
   Sandbox,
+  UserSelection,
 } from '@codesandbox/common/lib/types';
 import { indexToLineAndColumn } from 'app/overmind/utils/common';
 import { actions, dispatch } from 'codesandbox-api';
@@ -33,6 +34,8 @@ export type OnFileChangeData = {
   model: any;
 };
 
+export type onSelectionChangeData = UserSelection;
+
 export type OnOperationAppliedData = {
   moduleShortid: string;
   title: string;
@@ -413,7 +416,10 @@ export class ModelsHandler {
       if (this.nameTagTimeouts[decorationId]) {
         clearTimeout(this.nameTagTimeouts[decorationId]);
       }
-      if (showNameTag) {
+      // We don't want to show the nametag when the cursor changed, because
+      // another user changed the code on top of it. Otherwise it would get
+      // messy very fast.
+      if (showNameTag && selection.source !== 'modelChange') {
         const decoration = model.deltaDecorations(
           [],
           [

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

@@ -35,6 +35,7 @@ import {
   ModelsHandler,
   OnFileChangeData,
   OnOperationAppliedData,
+  onSelectionChangeData,
 } from './ModelsHandler';
 import SandboxFsSync from './SandboxFsSync';
 import { getSelection } from './utils';
@@ -47,7 +48,7 @@ export type VsCodeOptions = {
   getSandboxFs: () => SandboxFs;
   onCodeChange: (data: OnFileChangeData) => void;
   onOperationApplied: (data: OnOperationAppliedData) => void;
-  onSelectionChange: (selection: any) => void;
+  onSelectionChange: (selection: onSelectionChangeData) => void;
   reaction: Reaction;
   // These two should be removed
   getSignal: any;
@@ -869,20 +870,14 @@ export class VSCodeEffect {
       this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
         selectionChange => {
           const lines = activeEditor.getModel().getLinesContent() || [];
-          const data = {
+          const data: onSelectionChangeData = {
             primary: getSelection(lines, selectionChange.selection),
             secondary: selectionChange.secondarySelections.map(s =>
               getSelection(lines, s)
             ),
+            source: selectionChange.source,
           };
 
-          if (selectionChange.source === 'modelChange') {
-            // Don't update the cursor pos on model change, as it will
-            // be updated automatically by vscode (they handle cursor
-            // location changes really well)
-            return;
-          }
-
           if (
             selectionChange.reason === 3 ||
             /* alt + shift + arrow keys */ selectionChange.source ===

packages/common/src/types/index.ts

@@ -466,6 +466,7 @@ export type Selection = {
 export type UserSelection = {
   primary: Selection;
   secondary: Selection[];
+  source: string;
 };
 
 export type EditorSelection = {