Added vim/sublime/emacs editor modes

app/main.development.js

@@ -3,6 +3,7 @@ if (reboot) {
   process.exit(0);
 }
 
+import fs from 'fs';
 import raven from 'raven';
 import request from 'request';
 import path from 'path';
@@ -507,7 +508,7 @@ function createWindow () {
           accelerator: "CmdOrCtrl+?",
           click: () => {
             trackEvent('App Menu', 'Help');
-            shell.openExternal('https://insomnia.rest/documentation');
+            shell.openExternal('https://insomnia.rest/documentation/');
           }
         }
       ]
@@ -530,6 +531,20 @@ function createWindow () {
         click: function () {
           mainWindow.toggleDevTools();
         }
+      }, {
+        label: 'Resize to Default',
+        click: function () {
+          mainWindow.setBounds({x: 100, y: 100, width: 1000, height: 480});
+        }
+      }, {
+        label: 'Take Screenshot',
+        click: function () {
+          mainWindow.capturePage(image => {
+            const buffer = image.toPNG();
+            const dir = app.getPath('desktop');
+            fs.writeFileSync(path.join(dir, `Screenshot-${new Date()}.png`), buffer);
+          });
+        }
       }]
     });
   }

app/models/request.js

@@ -16,7 +16,7 @@ export function init () {
     parameters: [],
     headers: [],
     authentication: {},
-    metaSortKey: -1 * Date.now()
+    metaSortKey: -1 * Date.now(),
   };
 }
 

app/models/settings.js

@@ -11,6 +11,7 @@ export function init () {
     followRedirects: true,
     editorFontSize: 12,
     editorLineWrapping: true,
+    editorKeyMap: 'default',
     httpProxy: '',
     httpsProxy: '',
     timeout: 0,

app/ui/components/RequestPane.js

@@ -68,6 +68,7 @@ class RequestPane extends PureComponent {
       environmentId,
       showPasswords,
       editorFontSize,
+      editorKeyMap,
       editorLineWrapping,
       handleSend,
       forceRefreshCounter,
@@ -189,6 +190,7 @@ class RequestPane extends PureComponent {
               request={request}
               onChange={updateRequestBody}
               fontSize={editorFontSize}
+              keyMap={editorKeyMap}
               lineWrapping={editorLineWrapping}
             />
           </TabPanel>
@@ -293,6 +295,7 @@ RequestPane.propTypes = {
   useBulkHeaderEditor: PropTypes.bool.isRequired,
   showPasswords: PropTypes.bool.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
   editorLineWrapping: PropTypes.bool.isRequired,
   workspace: PropTypes.object.isRequired,
   environmentId: PropTypes.string.isRequired,

app/ui/components/ResponsePane.js

@@ -91,6 +91,7 @@ class ResponsePane extends Component {
       loadStartTime,
       editorLineWrapping,
       editorFontSize,
+      editorKeyMap,
       filter,
       activeResponseId,
       showCookiesModal
@@ -230,6 +231,7 @@ class ResponsePane extends Component {
               responseId={response._id}
               editorLineWrapping={editorLineWrapping}
               editorFontSize={editorFontSize}
+              editorKeyMap={editorKeyMap}
               url={response.url}
             />
           </TabPanel>
@@ -268,6 +270,7 @@ ResponsePane.propTypes = {
   previewMode: PropTypes.string.isRequired,
   filter: PropTypes.string.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
   editorLineWrapping: PropTypes.bool.isRequired,
   loadStartTime: PropTypes.number.isRequired,
   activeResponseId: PropTypes.string.isRequired,

app/ui/components/Wrapper.js

@@ -230,6 +230,7 @@ class Wrapper extends Component {
           showPasswords={settings.showPasswords}
           useBulkHeaderEditor={settings.useBulkHeaderEditor}
           editorFontSize={settings.editorFontSize}
+          editorKeyMap={settings.editorKeyMap}
           editorLineWrapping={settings.editorLineWrapping}
           environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
           workspace={activeWorkspace}
@@ -257,6 +258,7 @@ class Wrapper extends Component {
           ref={handleSetResponsePaneRef}
           request={activeRequest}
           editorFontSize={settings.editorFontSize}
+          editorKeyMap={settings.editorKeyMap}
           editorLineWrapping={settings.editorLineWrapping}
           previewMode={responsePreviewMode}
           activeResponseId={activeResponseId}
@@ -287,12 +289,14 @@ class Wrapper extends Component {
         <EnvironmentEditModal
           ref={registerModal}
           editorFontSize={settings.editorFontSize}
+          editorKeyMap={settings.editorKeyMap}
           onChange={models.requestGroup.update}
         />
         <GenerateCodeModal
           ref={registerModal}
           environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
           editorFontSize={settings.editorFontSize}
+          editorKeyMap={settings.editorKeyMap}
         />
         <SettingsModal
           ref={registerModal}
@@ -314,6 +318,7 @@ class Wrapper extends Component {
           ref={registerModal}
           onChange={models.workspace.update}
           editorFontSize={settings.editorFontSize}
+          editorKeyMap={settings.editorKeyMap}
         />
       </div>
     )

app/ui/components/base/Editor.js

@@ -39,6 +39,9 @@ import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/json-lint';
 import 'codemirror/addon/lint/lint.css';
+import 'codemirror/keymap/vim';
+import 'codemirror/keymap/emacs';
+import 'codemirror/keymap/sublime';
 import '../../css/components/editor.less';
 import {showModal} from '../modals/index';
 import AlertModal from '../modals/AlertModal';
@@ -60,6 +63,7 @@ const BASE_CODEMIRROR_OPTIONS = {
   autoCloseBrackets: true,
   indentUnit: 4,
   indentWithTabs: true,
+  keyMap: 'default',
   gutters: [
     'CodeMirror-linenumbers',
     'CodeMirror-foldgutter',
@@ -222,7 +226,8 @@ class Editor extends Component {
       readOnly,
       placeholder: this.props.placeholder || '',
       mode: this.props.mode || 'text/plain',
-      lineWrapping: !!this.props.lineWrapping,
+      lineWrapping: this.props.lineWrapping,
+      keyMap: this.props.keyMap || 'default',
       matchBrackets: !readOnly,
       lint: !readOnly
     };
@@ -437,6 +442,7 @@ class Editor extends Component {
 Editor.propTypes = {
   onChange: PropTypes.func,
   onFocusChange: PropTypes.func,
+  keyMap: PropTypes.string,
   mode: PropTypes.string,
   placeholder: PropTypes.string,
   lineWrapping: PropTypes.bool,

app/ui/components/editors/EnvironmentEditor.js

@@ -22,12 +22,13 @@ class EnvironmentEditor extends Component {
   }
 
   render () {
-    const {environment, editorFontSize, ...props} = this.props;
+    const {environment, editorFontSize, editorKeyMap, ...props} = this.props;
 
     return (
       <Editor
         ref={this._setEditorRef}
         fontSize={editorFontSize}
+        keyMap={editorKeyMap}
         onChange={this._handleChange}
         value={JSON.stringify(environment)}
         autoPrettify={true}
@@ -42,6 +43,7 @@ EnvironmentEditor.propTypes = {
   environment: PropTypes.object.isRequired,
   didChange: PropTypes.func.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
 };
 
 export default EnvironmentEditor;

app/ui/components/editors/body/BodyEditor.js

@@ -35,7 +35,7 @@ class BodyEditor extends PureComponent {
   };
 
   render () {
-    const {fontSize, lineWrapping, request} = this.props;
+    const {keyMap, fontSize, lineWrapping, request} = this.props;
     const fileName = request.body.fileName;
     const mimeType = request.body.mimeType;
     const isBodyEmpty = typeof mimeType !== 'string' && !request.body.text;
@@ -70,6 +70,7 @@ class BodyEditor extends PureComponent {
         <RawEditor
           key={`${request._id}::${contentType}`}
           fontSize={fontSize}
+          keyMap={keyMap}
           lineWrapping={lineWrapping}
           contentType={contentType || 'text/plain'}
           content={request.body.text || ''}
@@ -98,6 +99,7 @@ BodyEditor.propTypes = {
 
   // Optional
   fontSize: PropTypes.number,
+  keyMap: PropTypes.string,
   lineWrapping: PropTypes.bool
 };
 

app/ui/components/editors/body/RawEditor.js

@@ -7,6 +7,7 @@ class RawEditor extends Component {
       contentType,
       content,
       fontSize,
+      keyMap,
       lineWrapping,
       onChange,
       className
@@ -16,6 +17,7 @@ class RawEditor extends Component {
       <Editor
         manualPrettify={true}
         fontSize={fontSize}
+        keyMap={keyMap}
         value={content}
         className={className}
         onChange={onChange}
@@ -35,6 +37,7 @@ RawEditor.propTypes = {
 
   // Optional
   fontSize: PropTypes.number,
+  keyMap: PropTypes.string,
   lineWrapping: PropTypes.bool
 };
 

app/ui/components/modals/EnvironmentEditModal.js

@@ -45,7 +45,7 @@ class EnvironmentEditModal extends Component {
   }
 
   render () {
-    const {editorFontSize, ...extraProps} = this.props;
+    const {editorKeyMap, editorFontSize, ...extraProps} = this.props;
     const {requestGroup, isValid} = this.state;
 
     return (
@@ -54,6 +54,7 @@ class EnvironmentEditModal extends Component {
         <ModalBody noScroll={true}>
           <EnvironmentEditor
             editorFontSize={editorFontSize}
+            editorKeyMap={editorKeyMap}
             ref={node => this._envEditor = node}
             key={requestGroup ? requestGroup._id : 'n/a'}
             environment={requestGroup ? requestGroup.environment : {}}
@@ -77,6 +78,7 @@ class EnvironmentEditModal extends Component {
 EnvironmentEditModal.propTypes = {
   onChange: PropTypes.func.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
 };
 
 export default EnvironmentEditModal;

app/ui/components/modals/GenerateCodeModal.js

@@ -95,7 +95,7 @@ class GenerateCodeModal extends Component {
 
   render () {
     const {cmd, target, client} = this.state;
-    const {editorFontSize} = this.props;
+    const {editorFontSize, editorKeyMap} = this.props;
 
     const targets = availableTargets();
 
@@ -147,6 +147,7 @@ class GenerateCodeModal extends Component {
             mode={MODE_MAP[target.key] || target.key}
             ref={n => this._editor = n}
             fontSize={editorFontSize}
+            keyMap={editorKeyMap}
             lightTheme={true}
             lineWrapping={true}
             value={cmd}
@@ -168,6 +169,7 @@ class GenerateCodeModal extends Component {
 GenerateCodeModal.propTypes = {
   environmentId: PropTypes.string.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
 };
 
 export default GenerateCodeModal;

app/ui/components/modals/WorkspaceEnvironmentsEditModal.js

@@ -139,7 +139,7 @@ class WorkspaceEnvironmentsEditModal extends Component {
   }
 
   render () {
-    const {editorFontSize} = this.props;
+    const {editorFontSize, editorKeyMap} = this.props;
     const {subEnvironments, rootEnvironment, isValid, forceRefreshKey} = this.state;
     const activeEnvironment = this._getActiveEnvironment();
 
@@ -201,6 +201,7 @@ class WorkspaceEnvironmentsEditModal extends Component {
             <div className="env-modal__editor">
               <EnvironmentEditor
                 editorFontSize={editorFontSize}
+                editorKeyMap={editorKeyMap}
                 ref={n => this._envEditor = n}
                 key={`${forceRefreshKey}::${(activeEnvironment ? activeEnvironment._id : 'n/a')}`}
                 environment={activeEnvironment ? activeEnvironment.data : {}}
@@ -230,6 +231,7 @@ class WorkspaceEnvironmentsEditModal extends Component {
 WorkspaceEnvironmentsEditModal.propTypes = {
   onChange: PropTypes.func.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
 };
 
 export default WorkspaceEnvironmentsEditModal;

app/ui/components/settings/SettingsGeneral.js

@@ -51,20 +51,32 @@ const SettingsGeneral = ({settings, updateSetting}) => (
     </div>
 
     <div className="form-control form-control--outlined pad-top-sm">
-      <label>Request/Response Font Size (px)
+      <label>Text Editor Font Size (px)
         <input type="number"
                min={8}
                max={20}
-               value={settings.editorFontSize}
+               defaultValue={settings.editorFontSize}
                onChange={e => updateSetting('editorFontSize', parseInt(e.target.value, 10))}/>
       </label>
     </div>
 
+    <div className="form-control form-control--outlined pad-top-sm">
+      <label>Text Editor Key Map
+        <select defaultValue={settings.editorKeyMap}
+                onChange={e => updateSetting('editorKeyMap', e.target.value)}>
+          <option value="default">Default</option>
+          <option value="vim">Vim</option>
+          <option value="emacs">Emacs</option>
+          <option value="sublime">Sublime</option>
+        </select>
+      </label>
+    </div>
+
     <div className="form-control form-control--outlined">
       <label>Request Timeout (ms) (0 for no timeout)
         <input type="number"
                min={0}
-               value={settings.timeout}
+               defaultValue={settings.timeout}
                onChange={e => updateSetting('timeout', parseInt(e.target.value, 10))}/>
       </label>
     </div>

app/ui/components/viewers/ResponseViewer.js

@@ -65,6 +65,7 @@ class ResponseViewer extends Component {
       contentType,
       editorLineWrapping,
       editorFontSize,
+      editorKeyMap,
       updateFilter,
       statusCode,
       body: base64Body,
@@ -156,6 +157,7 @@ class ResponseViewer extends Component {
             readOnly={true}
             lineWrapping={editorLineWrapping}
             fontSize={editorFontSize}
+            keyMap={editorKeyMap}
             placeholder="..."
           />
         );
@@ -176,6 +178,7 @@ ResponseViewer.propTypes = {
   previewMode: PropTypes.string.isRequired,
   filter: PropTypes.string.isRequired,
   editorFontSize: PropTypes.number.isRequired,
+  editorKeyMap: PropTypes.string.isRequired,
   editorLineWrapping: PropTypes.bool.isRequired,
   url: PropTypes.string.isRequired,
   bytes: PropTypes.number.isRequired,

app/ui/css/components/editor.less

@@ -140,108 +140,113 @@
 }
 
 /* Based on Sublime Text's Monokai theme */
-.editor {
+.CodeMirror {
-  .cm-s-default.CodeMirror {
+  color: var(--color-font);
-    color: var(--color-font);
-  }
 
-  .cm-s-default div.CodeMirror-selected {
+  div.CodeMirror-selected {
     background: @hl-md;
     border-radius: 2px;
   }
 
-  .cm-s-default .CodeMirror-gutters {
+  .CodeMirror-gutters {
     border-right: 0;
   }
 
-  .cm-s-default .CodeMirror-guttermarker {
+  .CodeMirror-guttermarker {
     color: var(--color-font);
   }
 
-  .cm-s-default .CodeMirror-guttermarker-subtle {
+  .CodeMirror-guttermarker-subtle {
     color: @hl-lg;
   }
 
-  .cm-s-default .CodeMirror-linenumber {
+  .CodeMirror-linenumber {
     color: @hl;
   }
 
-  .cm-s-default .CodeMirror-cursor {
+  .CodeMirror-cursor {
     border-left: 1px solid var(--color-font);
   }
 
-  .cm-s-default span.cm-comment,
+  .cm-animate-fat-cursor,
-  .cm-s-default span.cm-meta,
+  &.cm-fat-cursor .CodeMirror-cursor {
-  .cm-s-default span.cm-qualifier {
+    background-color: rgba(255, 139, 147, 0.5) !important;
+    border-bottom: 2px solid #d60000 !important;
+    box-sizing: border-box;
+  }
+
+  span.cm-comment,
+  span.cm-meta,
+  span.cm-qualifier {
     color: var(--color-font);
   }
 
-  .cm-s-default span.cm-atom {
+  span.cm-atom {
     color: var(--color-surprise);
   }
 
-  .cm-s-default span.cm-number {
+  span.cm-number {
     color: var(--color-surprise);
   }
 
-  .cm-s-default span.cm-keyword {
+  span.cm-keyword {
     color: var(--color-danger);
   }
 
-  .cm-s-default span.cm-builtin {
+  span.cm-builtin {
     color: var(--color-info);
   }
 
-  .cm-s-default span.cm-string {
+  span.cm-string {
     color: var(--color-notice);
   }
 
-  .cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
+  span.cm-property, span.cm-attribute {
     color: var(--color-success);
   }
 
-  .cm-s-default span.cm-variable {
+  span.cm-variable {
     color: var(--color-font);
   }
 
-  .cm-s-default span.cm-variable-2 {
+  span.cm-variable-2 {
     color: var(--color-info);
   }
 
-  .cm-s-default span.cm-variable-3 {
+  span.cm-variable-3 {
     color: var(--color-info);
   }
 
-  .cm-s-default span.cm-def {
+  span.cm-def {
     color: var(--color-warning);
   }
 
-  .cm-s-default span.cm-bracket {
+  span.cm-bracket {
     color: var(--color-font);
   }
 
-  .cm-s-default span.cm-tag {
+  span.cm-tag {
     color: var(--color-danger);
   }
 
-  .cm-s-default span.cm-header {
+  span.cm-header {
     color: var(--color-surprise);
   }
 
-  .cm-s-default span.cm-link {
+  span.cm-link {
     color: var(--color-surprise);
   }
 
-  .cm-s-default span.cm-error {
+  span.cm-error {
     background: var(--color-danger);
     color: var(--color-font-danger);
   }
 
-  .cm-s-default .CodeMirror-activeline-background {
+  .CodeMirror-activeline-background {
     background: @hl-md;
   }
 
-  .cm-s-default .CodeMirror-matchingbracket {
+  .CodeMirror-matchingbracket {
     text-decoration: underline;
     color: inherit !important;
   }

app/ui/css/components/sidebar.less

@@ -228,13 +228,11 @@
       color: @hl;
 
       .tag {
-        opacity: 1;
+        // This might be too faint...
+        //opacity: @opacity-subtle;
       }
     }
 
-    & > .tag {
-    }
-
     & > * {
       height: 100%;
     }
@@ -245,6 +243,7 @@
 
     &.sidebar__item--active > button {
       color: var(--color-font);
+
       .tag {
         opacity: 1;
       }