Persist selection and file in the url for loading later (codesandbox#3841)

* Persist selection and file in the url for loading later

* Fix typecheck

* Handle selection in editor

* Fix where we persist the cursor state

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

Co-Authored-By: Michaël De Boey <[email protected]>

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

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Sandbox/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

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

Co-Authored-By: Michaël De Boey <[email protected]>

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

Co-Authored-By: Michaël De Boey <[email protected]>

* Move try catch statement

* Change encoding of the URL

* Change encoding of url

Co-authored-by: Michaël De Boey <[email protected]>

Author: CompuIves

packages/app/src/app/overmind/effects/router.ts

@@ -3,7 +3,7 @@ import { getSandboxOptions } from '@codesandbox/common/lib/url';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import history from '../../utils/history';
 
-export default {
+export default new (class RouterEffect {
   replaceSandboxUrl({
     id,
     alias,
@@ -14,7 +14,8 @@ export default {
     git?: GitInfo | null;
   }) {
     window.history.replaceState({}, '', sandboxUrl({ id, alias, git }));
-  },
+  }
+
   updateSandboxUrl(
     {
       id,
@@ -38,20 +39,35 @@ export default {
     } else {
       history.push(url);
     }
-  },
+  }
+
   redirectToNewSandbox() {
     history.push('/s/new');
-  },
+  }
+
   redirectToSandboxWizard() {
     history.replace('/s/');
-  },
+  }
+
   getSandboxOptions() {
     return getSandboxOptions(decodeURIComponent(document.location.href));
-  },
+  }
+
   getCommentId() {
-    return new URL(location.href).searchParams.get('comment');
-  },
+    return this.getParameter('comment');
+  }
+
   createCommentUrl(id: string) {
     return `${window.location.origin}${window.location.pathname}?comment=${id}`;
-  },
-};
+  }
+
+  replace(url: string) {
+    const origin = new URL(url).origin;
+    history.replace(url.replace(origin, ''));
+  }
+
+  getParameter(key: string): string | null {
+    const currentUrl = new URL(location.href);
+    return currentUrl.searchParams.get(key);
+  }
+})();

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

@@ -655,6 +655,41 @@ export class VSCodeEffect {
     }
   }
 
+  /**
+   * Set the selection inside the editor
+   * @param head Start of the selection
+   * @param anchor End of the selection
+   */
+  setSelection(head: number, anchor: number) {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+    if (!activeEditor) {
+      return;
+    }
+    
+    const model = activeEditor.getModel();
+    if (!model) {
+      return;
+    }
+    
+    const headPos = indexToLineAndColumn(
+      model.getLinesContent() || [],
+      head
+    );
+    const anchorPos = indexToLineAndColumn(
+      model.getLinesContent() || [],
+      anchor
+    );
+    const range = new this.monaco.Range(
+      headPos.lineNumber,
+      headPos.column,
+      anchorPos.lineNumber,
+      anchorPos.column
+    );
+
+    this.revealRange(range);
+    activeEditor.setSelection(range);
+  }
+
   // Communicates the endpoint for the WebsocketLSP
   private createContainerForkHandler() {
     return () => {

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

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash-es';
 import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import getTemplate from '@codesandbox/common/lib/templates';
 import {
@@ -6,6 +7,8 @@ import {
   ModuleError,
   ModuleTab,
   WindowOrientation,
+  Module,
+  UserSelection,
 } from '@codesandbox/common/lib/types';
 import { logBreadcrumb } from '@codesandbox/common/lib/utils/analytics/sentry';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
@@ -41,6 +44,59 @@ export const internal = internalActions;
 
 export const onNavigateAway: Action = () => {};
 
+export const persistCursorToUrl: Action<{
+  module: Module;
+  selection?: UserSelection;
+}> = debounce(({ effects }, { module, selection }) => {
+  let parameter = module.path;
+
+  if (selection?.primary?.selection?.length) {
+    const [head, anchor] = selection.primary.selection;
+    const serializedSelection = head + '-' + anchor;
+    parameter += `:${serializedSelection}`;
+  }
+
+  const newUrl = new URL(document.location.href);
+  newUrl.searchParams.set('file', parameter);
+
+  // Restore the URI encoded parts to their original values. Our server handles this well
+  // and all the browsers do too.
+  effects.router.replace(
+    newUrl
+      .toString()
+      .replace(/%2F/g, '/')
+      .replace('%3A', ':')
+  );
+}, 500);
+
+export const loadCursorFromUrl: AsyncAction = async ({
+  effects,
+  actions,
+  state,
+}) => {
+  if (!state.editor.currentSandbox) {
+    return;
+  }
+
+  const parameter = effects.router.getParameter('file');
+  if (!parameter) {
+    return;
+  }
+  const [path, selection] = parameter.split(':');
+
+  const module = state.editor.currentSandbox.modules.find(m => m.path === path);
+  if (!module) {
+    return;
+  }
+
+  await actions.editor.moduleSelected({ id: module.id });
+
+  const [parsedHead, parsedAnchor] = selection.split('-').map(Number);
+  if (!isNaN(parsedHead) && !isNaN(parsedAnchor)) {
+    effects.vscode.setSelection(parsedHead, parsedAnchor);
+  }
+};
+
 export const addNpmDependency: AsyncAction<{
   name: string;
   version?: string;
@@ -217,6 +273,14 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   }
 
   effects.vscode.openModule(state.editor.currentModule);
+  try {
+    await actions.editor.loadCursorFromUrl();
+  } catch (e) {
+    /**
+     * This is not extremely important logic, if it breaks (which is possible because of user input)
+     * we don't want to crash the whole editor. That's why we try...catch this.
+     */
+  }
 
   if (COMMENTS && hasPermission(sandbox.authorization, 'comment')) {
     actions.comments.getSandboxComments(sandbox.id);
@@ -512,12 +576,17 @@ export const moduleSelected: AsyncAction<
         )
       : sandbox.modules.filter(moduleItem => moduleItem.id === id)[0];
 
-    if (module.shortid === state.editor.currentModuleShortid) {
+    if (module.shortid === state.editor.currentModuleShortid && path) {
+      // If this comes from VSCode we can return, but if this call comes from CodeSandbox
+      // we shouldn't return, since the promise would resolve sooner than VSCode loaded
+      // the file
       return;
     }
 
     await actions.editor.internal.setCurrentModule(module);
 
+    actions.editor.persistCursorToUrl({ module });
+
     if (state.live.isLive && state.live.liveUser && state.live.roomInfo) {
       actions.editor.internal.updateSelectionsOfModule({ module });
       state.live.liveUser.currentModuleShortid = module.shortid;
@@ -781,6 +850,20 @@ export const showEnvironmentVariablesNotification: AsyncAction = async ({
   }
 };
 
+export const onSelectionChanged: Action<UserSelection> = (
+  { actions, state },
+  selection
+) => {
+  if (!state.editor.currentModule) {
+    return;
+  }
+
+  actions.editor.persistCursorToUrl({
+    module: state.editor.currentModule,
+    selection,
+  });
+};
+
 export const toggleEditorPreviewLayout: Action = ({ state, effects }) => {
   const currentOrientation = state.editor.previewWindowOrientation;
 

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

@@ -422,7 +422,7 @@ export const revealViewRange: Action<{ liveUserId: string }> = (
   }
 };
 
-export const revealCursorPosition: Action<{ liveUserId: string }> = (
+export const revealCursorPosition: AsyncAction<{ liveUserId: string }> = async (
   { state, effects, actions },
   { liveUserId }
 ) => {
@@ -438,7 +438,7 @@ export const revealCursorPosition: Action<{ liveUserId: string }> = (
       ({ shortid }) => shortid === user.currentModuleShortid
     )[0];
 
-    actions.editor.moduleSelected({ id: module.id });
+    await actions.editor.moduleSelected({ id: module.id });
 
     if (user.selection?.primary?.cursorPosition) {
       effects.vscode.revealPositionInCenterIfOutsideViewport(

packages/app/src/app/overmind/onInitialize.ts

@@ -83,7 +83,10 @@ export const onInitialize: OnInitialize = async (
     getCurrentUser: () => state.user,
     onOperationApplied: actions.editor.onOperationApplied,
     onCodeChange: actions.editor.codeChanged,
-    onSelectionChanged: actions.live.onSelectionChanged,
+    onSelectionChanged: selection => {
+      actions.editor.onSelectionChanged(selection);
+      actions.live.onSelectionChanged(selection);
+    },
     onViewRangeChanged: actions.live.onViewRangeChanged,
     onCommentClick: actions.comments.onCommentClick,
     reaction: overmindInstance.reaction,

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -29,7 +29,7 @@ const StatusBar = styled.div`
   }
 `;
 
-const ContentSplit = () => {
+const Editor = () => {
   const { state, actions, effects, reaction } = useOvermind();
   const statusbarEl = useRef(null);
   const [showSkeleton, setShowSkeleton] = useState(
@@ -211,4 +211,4 @@ const ContentSplit = () => {
   );
 };
 
-export default ContentSplit;
+export default Editor;