Added editor-keymap preference selection under Display/Code Editor

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>