From c647c1e1523fe1a777fe69f55d74bc183fde7c97 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 8 Feb 2018 20:34:25 +0800
Subject: [PATCH] Persist editor scroll positions (#746)

---
 .../ui/components/codemirror/code-editor.js   | 51 ++++++++++++++++++-
 .../ui/components/editors/body/body-editor.js |  3 +-
 .../editors/body/graph-ql-editor.js           |  8 ++-
 .../ui/components/editors/body/raw-editor.js  | 13 +++--
 .../app/ui/components/response-pane.js        | 40 +++++++--------
 .../ui/components/viewers/response-viewer.js  |  2 +
 6 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/codemirror/code-editor.js b/packages/insomnia-app/app/ui/components/codemirror/code-editor.js
index f529dff56..baa460961 100644
--- a/packages/insomnia-app/app/ui/components/codemirror/code-editor.js
+++ b/packages/insomnia-app/app/ui/components/codemirror/code-editor.js
@@ -24,6 +24,9 @@ const TAB_KEY = 9;
 const TAB_SIZE = 4;
 const MAX_SIZE_FOR_LINTING = 1000000; // Around 1MB
 
+// Global object used for storing and persisting editor states
+const editorStates = {};
+
 const BASE_CODEMIRROR_OPTIONS = {
   lineNumbers: true,
   placeholder: 'Start Typing...',
@@ -71,6 +74,7 @@ class CodeEditor extends React.Component {
     };
 
     this._originalCode = '';
+    this._uniquenessKey = props.uniquenessKey;
   }
 
   componentWillUnmount () {
@@ -79,8 +83,18 @@ class CodeEditor extends React.Component {
     }
   }
 
+  componentDidMount () {
+    this._restoreState();
+  }
+
   componentDidUpdate () {
     this._codemirrorSetOptions();
+    const {uniquenessKey, defaultValue} = this.props;
+    if (uniquenessKey && uniquenessKey !== this._uniquenessKey) {
+      this._codemirrorSetValue(defaultValue);
+      this._restoreState();
+    }
+    this._uniquenessKey = uniquenessKey;
   }
 
   shouldComponentUpdate (nextProps) {
@@ -202,6 +216,34 @@ class CodeEditor extends React.Component {
     }
   }
 
+  _persistState () {
+    const {uniquenessKey} = this.props;
+
+    if (!uniquenessKey || !this.codeMirror) {
+      return;
+    }
+
+    editorStates[uniquenessKey] = {
+      scroll: this.codeMirror.getScrollInfo(),
+      selections: this.codeMirror.listSelections(),
+      cursor: this.codeMirror.getCursor()
+    };
+  }
+
+  _restoreState () {
+    const {uniquenessKey} = this.props;
+    if (!editorStates.hasOwnProperty(uniquenessKey)) {
+      return;
+    }
+
+    const {scroll, selections, cursor} = editorStates[uniquenessKey];
+    this.codeMirror.scrollTo(scroll.left, scroll.top);
+
+    // NOTE: These won't be visible unless the editor is focused
+    this.codeMirror.setCursor(cursor.line, cursor.ch, {scroll: false});
+    this.codeMirror.setSelections(selections, null, {scroll: false});
+  }
+
   _setFilterInputRef (n) {
     this._filterInput = n;
   }
@@ -230,6 +272,7 @@ class CodeEditor extends React.Component {
     this.codeMirror.on('focus', this._codemirrorFocus);
     this.codeMirror.on('blur', this._codemirrorBlur);
     this.codeMirror.on('paste', this._codemirrorPaste);
+    this.codeMirror.on('scroll', this._codemirrorScroll);
 
     // Prevent these things if we're type === "password"
     this.codeMirror.on('copy', this._codemirrorPreventWhenTypePassword);
@@ -539,11 +582,16 @@ class CodeEditor extends React.Component {
   }
 
   _codemirrorBlur (doc, e) {
+    this._persistState();
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
   }
 
+  _codemirrorScroll () {
+    this._persistState();
+  }
+
   _codemirrorValueBeforeChange (doc, change) {
     // If we're in single-line mode, merge all changed lines into one
     if (this.props.singleLine && change.text && change.text.length > 1) {
@@ -812,7 +860,8 @@ CodeEditor.propTypes = {
   dynamicHeight: PropTypes.bool,
   hintOptions: PropTypes.object,
   lintOptions: PropTypes.object,
-  infoOptions: PropTypes.object
+  infoOptions: PropTypes.object,
+  uniquenessKey: PropTypes.any
 };
 
 export default CodeEditor;
diff --git a/packages/insomnia-app/app/ui/components/editors/body/body-editor.js b/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
index 57172cd6a..a38a0871a 100644
--- a/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
+++ b/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
@@ -150,6 +150,7 @@ class BodyEditor extends React.PureComponent<Props> {
       return (
         <GraphQLEditor
           key={uniqueKey}
+          uniquenessKey={uniqueKey}
           request={request}
           content={request.body.text || ''}
           render={handleRender}
@@ -164,7 +165,7 @@ class BodyEditor extends React.PureComponent<Props> {
       const contentType = getContentTypeFromHeaders(request.headers) || mimeType;
       return (
         <RawEditor
-          key={uniqueKey}
+          uniquenessKey={uniqueKey}
           fontSize={settings.editorFontSize}
           indentSize={settings.editorIndentSize}
           keyMap={settings.editorKeyMap}
diff --git a/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js b/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js
index 3d21fcf1d..190367990 100644
--- a/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js
+++ b/packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js
@@ -38,7 +38,8 @@ type Props = {
   environmentId: string,
 
   // Optional
-  className?: string
+  className?: string,
+  uniquenessKey?: string
 };
 
 type State = {
@@ -266,7 +267,8 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
       render,
       getRenderContext,
       settings,
-      className
+      className,
+      uniquenessKey
     } = this.props;
 
     const {
@@ -291,6 +293,7 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
           <CodeEditor
             dynamicHeight
             manualPrettify
+            uniquenessKey={uniquenessKey ? uniquenessKey + '::query' : undefined}
             hintOptions={{
               schema: schema || null,
               completeSingle: false
@@ -336,6 +339,7 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
         <div className="graphql-editor__variables">
           <CodeEditor
             dynamicHeight
+            uniquenessKey={uniquenessKey ? uniquenessKey + '::variables' : undefined}
             debounceMillis={DEBOUNCE_MILLIS * 4}
             manualPrettify={false}
             fontSize={settings.editorFontSize}
diff --git a/packages/insomnia-app/app/ui/components/editors/body/raw-editor.js b/packages/insomnia-app/app/ui/components/editors/body/raw-editor.js
index 4c0506f00..0adb59f0a 100644
--- a/packages/insomnia-app/app/ui/components/editors/body/raw-editor.js
+++ b/packages/insomnia-app/app/ui/components/editors/body/raw-editor.js
@@ -7,22 +7,24 @@ import CodeEditor from '../../codemirror/code-editor';
 class RawEditor extends PureComponent {
   render () {
     const {
-      contentType,
+      className,
       content,
+      contentType,
       fontSize,
+      getRenderContext,
       indentSize,
       keyMap,
-      render,
-      getRenderContext,
-      nunjucksPowerUserMode,
       lineWrapping,
+      nunjucksPowerUserMode,
       onChange,
-      className
+      render,
+      uniquenessKey
     } = this.props;
 
     return (
       <CodeEditor
         manualPrettify
+        uniquenessKey={uniquenessKey}
         fontSize={fontSize}
         indentSize={indentSize}
         keyMap={keyMap}
@@ -50,6 +52,7 @@ RawEditor.propTypes = {
   keyMap: PropTypes.string.isRequired,
   lineWrapping: PropTypes.bool.isRequired,
   nunjucksPowerUserMode: PropTypes.bool.isRequired,
+  uniquenessKey: PropTypes.string.isRequired,
 
   // Optional
   className: PropTypes.string,
diff --git a/packages/insomnia-app/app/ui/components/response-pane.js b/packages/insomnia-app/app/ui/components/response-pane.js
index b2d21c7af..0f046434e 100644
--- a/packages/insomnia-app/app/ui/components/response-pane.js
+++ b/packages/insomnia-app/app/ui/components/response-pane.js
@@ -277,31 +277,29 @@ class ResponsePane extends React.PureComponent<Props> {
             </Tab>
           </TabList>
           <TabPanel className="react-tabs__tab-panel">
-            <ErrorBoundary key={response._id} errorClassName="font-error pad text-center">
-              <ResponseViewer
-                // Send larger one because legacy responses have bytesContent === -1
-                responseId={response._id}
-                bytes={Math.max(response.bytesContent, response.bytesRead)}
-                contentType={response.contentType || ''}
-                previewMode={response.error ? PREVIEW_MODE_SOURCE : previewMode}
-                filter={filter}
-                filterHistory={filterHistory}
-                updateFilter={response.error ? null : handleSetFilter}
-                download={this._handleDownloadResponseBody}
-                getBody={this._handleGetResponseBody}
-                error={response.error}
-                editorLineWrapping={editorLineWrapping}
-                editorFontSize={editorFontSize}
-                editorIndentSize={editorIndentSize}
-                editorKeyMap={editorKeyMap}
-                url={response.url}
-              />
-            </ErrorBoundary>
+            <ResponseViewer
+              // Send larger one because legacy responses have bytesContent === -1
+              responseId={response._id}
+              bytes={Math.max(response.bytesContent, response.bytesRead)}
+              contentType={response.contentType || ''}
+              previewMode={response.error ? PREVIEW_MODE_SOURCE : previewMode}
+              filter={filter}
+              filterHistory={filterHistory}
+              updateFilter={response.error ? null : handleSetFilter}
+              download={this._handleDownloadResponseBody}
+              getBody={this._handleGetResponseBody}
+              error={response.error}
+              editorLineWrapping={editorLineWrapping}
+              editorFontSize={editorFontSize}
+              editorIndentSize={editorIndentSize}
+              editorKeyMap={editorKeyMap}
+              url={response.url}
+            />
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel scrollable-container">
             <div className="scrollable pad">
               <ErrorBoundary key={response._id} errorClassName="font-error pad text-center">
-                <ResponseHeadersViewer headers={response.headers} />
+                <ResponseHeadersViewer headers={response.headers}/>
               </ErrorBoundary>
             </div>
           </TabPanel>
diff --git a/packages/insomnia-app/app/ui/components/viewers/response-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
index 99fe5e1aa..8fc14286c 100644
--- a/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
+++ b/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
@@ -317,6 +317,7 @@ class ResponseViewer extends React.Component<Props, State> {
       const charset = (match && match.length >= 2) ? match[1] : 'utf-8';
       return (
         <ResponseRaw
+          key={responseId}
           value={iconv.decode(bodyBuffer, charset)}
           fontSize={editorFontSize}
         />
@@ -344,6 +345,7 @@ class ResponseViewer extends React.Component<Props, State> {
 
       return (
         <CodeEditor
+          uniquenessKey={responseId}
           onClickLink={this._handleOpenLink}
           defaultValue={body}
           updateFilter={updateFilter}