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;
diff --git a/app/ui/components/modals/GenerateCodeModal.js b/app/ui/components/modals/GenerateCodeModal.js
index 5d125dd71..de87aac26 100644
--- a/app/ui/components/modals/GenerateCodeModal.js
+++ b/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;
diff --git a/app/ui/components/modals/WorkspaceEnvironmentsEditModal.js b/app/ui/components/modals/WorkspaceEnvironmentsEditModal.js
index c1a3c5e0e..8f2cfeafb 100644
--- a/app/ui/components/modals/WorkspaceEnvironmentsEditModal.js
+++ b/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 {
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;
diff --git a/app/ui/components/settings/SettingsGeneral.js b/app/ui/components/settings/SettingsGeneral.js
index e564e49d8..6f3715d96 100644
--- a/app/ui/components/settings/SettingsGeneral.js
+++ b/app/ui/components/settings/SettingsGeneral.js
@@ -51,20 +51,32 @@ const SettingsGeneral = ({settings, updateSetting}) => (
-
+
+ Text Editor Key Map
+
+
+
+
Request Timeout (ms) (0 for no timeout)
updateSetting('timeout', parseInt(e.target.value, 10))}/>
diff --git a/app/ui/components/viewers/ResponseViewer.js b/app/ui/components/viewers/ResponseViewer.js
index 1d06ba686..af1eeb815 100644
--- a/app/ui/components/viewers/ResponseViewer.js
+++ b/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,
diff --git a/app/ui/css/components/editor.less b/app/ui/css/components/editor.less
index 70dc5c145..510358707 100644
--- a/app/ui/css/components/editor.less
+++ b/app/ui/css/components/editor.less
@@ -140,108 +140,113 @@
}
/* Based on Sublime Text's Monokai theme */
-.editor {
- .cm-s-default.CodeMirror {
- color: var(--color-font);
- }
+.CodeMirror {
+ 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-s-default span.cm-meta,
- .cm-s-default span.cm-qualifier {
+ .cm-animate-fat-cursor,
+ &.cm-fat-cursor .CodeMirror-cursor {
+ 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;
}
diff --git a/app/ui/css/components/sidebar.less b/app/ui/css/components/sidebar.less
index 4d1c14e57..8e95609f9 100644
--- a/app/ui/css/components/sidebar.less
+++ b/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;
}