Added editor-keymap preference selection under Display/Code Editor

packages/bruno-app/src/components/CodeEditor/index.js

@@ -13,6 +13,7 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
+import { connect } from 'react-redux';
 
 let CodeMirror;
 const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@@ -117,7 +118,7 @@ if (!SERVER_RENDERED) {
   };
 }
 
-export default class CodeEditor extends React.Component {
+class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -142,7 +143,7 @@ export default class CodeEditor extends React.Component {
       lineWrapping: true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      keyMap: 'sublime',
+      keyMap: this.props.editorPrefs?.keymap || 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
@@ -424,3 +425,7 @@ export default class CodeEditor extends React.Component {
     }
   };
 }
+
+const mapStateToProps = (state) => ({ editorPrefs: state.app?.preferences?.editor });
+
+export default connect(mapStateToProps)(CodeEditor);

packages/bruno-app/src/components/Preferences/Display/EditorKeymapSettings/StyledWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  color: ${(props) => props.theme.text};
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Display/EditorKeymapSettings/index.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useSelector, useDispatch } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
+
+// https://codemirror.net/5/keymap/
+const codemirrorKeymaps = [
+  { value: 'sublime', label: 'Sublime' },
+  { value: 'vim', label: 'Vim' },
+  { value: 'emacs', label: 'Emacs' },
+];
+
+const EditorKeymapSettings = ({ close }) => {
+  const dispatch = useDispatch();
+  const preferences = useSelector((state) => state.app.preferences);
+  const keymap = useMemo(() => get(preferences, 'editor.keymap', 'sublime'), [preferences]);
+
+  const handleKeymapChange = (e) => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        editor: { keymap: e.target.value }
+      })
+    ).catch(console.error);
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="bruno-form">
+        <label className="block">Keymap</label>
+        <div className="flex items-center mt-2">
+          {codemirrorKeymaps.map(({ value, label }) => (
+            <>
+              <input
+                id={label}
+                className="cursor-pointer ml-4 first:ml-0"
+                type="radio"
+                name="keymap"
+                onChange={handleKeymapChange}
+                value={value}
+                checked={keymap === value}
+              />
+              <label htmlFor={label} className="ml-1 cursor-pointer select-none">
+                {label}
+              </label>
+            </>
+          ))}
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default EditorKeymapSettings;

packages/bruno-app/src/components/Preferences/Display/Font/index.js

@@ -37,9 +37,9 @@ const Font = ({ close }) => {
 
   return (
     <StyledWrapper>
-      <div className="flex flex-row gap-2 w-full">
+      <div className="flex flex-row gap-2 w-fit">
         <div className="w-4/5">
-          <label className="block">Code Editor Font</label>
+          <label className="block">Font Family</label>
           <input
             type="text"
             className="block textbox mt-2 w-full"

packages/bruno-app/src/components/Preferences/Display/index.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import Font from './Font/index';
 import Theme from './Theme/index';
+import EditorKeymapSettings from './EditorKeymapSettings/index';
 
 const Display = ({ close }) => {
   return (
       <div className="flex flex-col my-2 gap-10 w-full">
         <div className='w-full flex flex-col gap-2'>
-          <span>
+          <span className="font-semibold">
             Theme
           </span>
           <Theme close={close} />
         </div>
         <div className='h-[1px] bg-[#aaa5] w-full'></div>
-        <div className='w-fit flex flex-col gap-2'>
+        <div className='w-full flex flex-col gap-2'>
+          <span className="font-semibold">
+            Code Editor
+          </span>
+          <EditorKeymapSettings />
+          <div className='w-full'></div>
           <Font close={close} />
         </div>
       </div>

packages/bruno-app/src/pages/Bruno/index.js

@@ -33,6 +33,8 @@ if (!SERVER_RENDERED) {
   require('codemirror/addon/search/searchcursor');
   require('codemirror/addon/display/placeholder');
   require('codemirror/keymap/sublime');
+  require('codemirror/keymap/vim');
+  require('codemirror/keymap/emacs');
 
   require('codemirror-graphql/hint');
   require('codemirror-graphql/info');