feat(custom-keymap): Custom Keymap Style (@thewickest)

frontend/src/html/pages/settings.html

@@ -1023,6 +1023,20 @@
         <button data-config-value="split_matrix">split matrix</button>
         <button data-config-value="steno">steno</button>
         <button data-config-value="steno_matrix">steno matrix</button>
+        <button data-config-value="custom">custom</button>
+      </div>
+    </div>
+    <div class="section fullWidth" data-config-name="keymapCustom">
+      <div class="inputs">
+        <div class="textareaAndButton">
+          <textarea
+            class="textarea"
+            placeholder="place here the KLE keymap..."
+          ></textarea>
+          <button class="save no-auto-handle">
+            <i class="fas fa-save fa-fw"></i>
+          </button>
+        </div>
       </div>
     </div>
     <div class="section fullWidth" data-config-name="keymapLegendStyle">

frontend/src/styles/keymap.scss

@@ -544,4 +544,22 @@
       position: relative;
     }
   }
+  &.custom {
+    .r1,
+    .r2,
+    .r3,
+    .r4,
+    .r5,
+    .r6 {
+      justify-content: center;
+      display: flex;
+      grid-template-columns: none;
+    }
+
+    .keymapSplitSpacer {
+      display: block;
+      width: 2rem;
+      height: 2rem;
+    }
+  }
 }

frontend/src/styles/settings.scss

@@ -106,6 +106,29 @@
       }
     }
 
+    .textareaAndButton {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+
+      span {
+        display: flex;
+        gap: 0.5rem;
+      }
+      .button {
+        height: auto;
+
+        .fas {
+          margin-right: 0rem;
+        }
+      }
+      .textarea {
+        height: 200px;
+        resize: none;
+      }
+    }
+
     .rangeGroup {
       display: grid;
       grid-template-columns: auto 1fr;

frontend/src/ts/commandline/lists/keymap-style.ts

@@ -1,5 +1,8 @@
+import { KeymapCustom } from "@monkeytype/contracts/schemas/configs";
 import * as UpdateConfig from "../../config";
 import { Command, CommandsSubgroup } from "../types";
+import { stringToKeymap } from "../../utils/custom-keymap";
+import * as TestLogic from "../../test/test-logic";
 
 const subgroup: CommandsSubgroup = {
   title: "Keymap style...",
@@ -61,6 +64,37 @@ const subgroup: CommandsSubgroup = {
         UpdateConfig.setKeymapStyle("steno_matrix");
       },
     },
+    {
+      id: "setKeymapStyleCustom",
+      display: "custom...",
+      configValue: "custom",
+      icon: "fa-keyboard",
+      subgroup: {
+        title: "Set custom keymap?",
+        configKey: "keymapCustom",
+        list: [
+          {
+            id: "setKeymapStyleCustomNew",
+            display: "new keymap",
+            input: true,
+            exec: ({ input }) => {
+              if (input === undefined || input === "") return;
+              const keymap: KeymapCustom = stringToKeymap(input);
+              UpdateConfig.setKeymapCustom(keymap);
+              UpdateConfig.setKeymapStyle("custom");
+              TestLogic.restart();
+            },
+          },
+          {
+            id: "setKeymapStyleCustomLoad",
+            display: "load keymap",
+            exec: () => {
+              UpdateConfig.setKeymapStyle("custom");
+            },
+          },
+        ],
+      },
+    },
   ],
 };
 

frontend/src/ts/config.ts

@@ -23,7 +23,7 @@ import {
   typedKeys,
 } from "./utils/misc";
 import * as ConfigSchemas from "@monkeytype/contracts/schemas/configs";
-import { Config } from "@monkeytype/contracts/schemas/configs";
+import { Config, KeymapCustom } from "@monkeytype/contracts/schemas/configs";
 import { Mode, ModeSchema } from "@monkeytype/contracts/schemas/shared";
 import { Language, LanguageSchema } from "@monkeytype/contracts/schemas/util";
 import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
@@ -1762,15 +1762,26 @@ export function setLayout(
   return true;
 }
 
-// export function setSavedLayout(layout: string, nosave?: boolean): boolean {
-//   if (layout === null || layout === undefined) {
-//     layout = "qwerty";
-//   }
-//   config.savedLayout = layout;
-//   setLayout(layout, nosave);
+export function setKeymapCustom(
+  keymapCustom: KeymapCustom,
+  nosave?: boolean
+): boolean {
+  if (
+    !isConfigValueValid(
+      "keymap custom",
+      keymapCustom,
+      ConfigSchemas.KeymapCustomSchema
+    )
+  )
+    return false;
+
+  //better validation for the custom keymap
+  config.keymapCustom = keymapCustom;
+  saveToLocalStorage("keymapCustom", nosave);
+  ConfigEvent.dispatch("keymapCustom", config.keymapCustom, nosave);
 
-//   return true;
-// }
+  return true;
+}
 
 export function setFontSize(
   fontSize: ConfigSchemas.FontSize,
@@ -2046,6 +2057,7 @@ export async function apply(
     setKeymapLayout(configObj.keymapLayout, true);
     setKeymapShowTopRow(configObj.keymapShowTopRow, true);
     setKeymapSize(configObj.keymapSize, true);
+    setKeymapCustom(configObj.keymapCustom, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothCaret(configObj.smoothCaret, true);
     setCodeUnindentOnBackspace(configObj.codeUnindentOnBackspace, true);

frontend/src/ts/constants/data-keys.ts

@@ -0,0 +1,48 @@
+export const dataKeys: { [key: string]: string } = {
+  a: "aA",
+  b: "bB",
+  c: "cC",
+  d: "dD",
+  e: "eE",
+  f: "fF",
+  g: "gG",
+  h: "hH",
+  i: "iI",
+  j: "jJ",
+  k: "kK",
+  l: "lL",
+  m: "mM",
+  n: "nN",
+  o: "oO",
+  p: "pP",
+  q: "qQ",
+  r: "rR",
+  s: "sS",
+  t: "tT",
+  u: "uU",
+  v: "vV",
+  w: "wW",
+  x: "xX",
+  y: "yY",
+  z: "zZ",
+  1: "1!",
+  2: "2@",
+  3: "3#",
+  4: "4$",
+  5: "5%",
+  6: "6^",
+  7: "7&",
+  8: "8*",
+  9: "9(",
+  0: "0)",
+  "-": "-_",
+  "=": "=+",
+  "[": "[{",
+  "]": "]}",
+  "\\": "\\|",
+  ";": ";:",
+  "'": "'"",
+  ",": ",<",
+  ".": ".>",
+  "/": "/?",
+};

frontend/src/ts/constants/default-config.ts

@@ -62,6 +62,7 @@ const obj = {
   keymapLayout: "overrideSync",
   keymapShowTopRow: "layout",
   keymapSize: 1,
+  keymapCustom: [[]],
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
   alwaysShowDecimalPlaces: false,

frontend/src/ts/elements/keymap.ts

@@ -14,6 +14,8 @@ import * as ShiftTracker from "../test/shift-tracker";
 import * as AltTracker from "../test/alt-tracker";
 import * as KeyConverter from "../utils/key-converter";
 import { getActiveFunboxNames } from "../test/funbox/list";
+import { getCustomKeymapSyle } from "../utils/custom-keymap";
+import { KeymapCustom, Layout } from "@monkeytype/contracts/schemas/configs";
 
 const stenoKeys: JSONData.Layout = {
   keymapShowTopRow: true,
@@ -416,6 +418,13 @@ export async function refresh(
       });
     }
 
+    if (Config.keymapStyle === "custom") {
+      const {
+        keymapCustom,
+        layout,
+      }: { keymapCustom: KeymapCustom; layout: Layout } = Config;
+      keymapElement = getCustomKeymapSyle(keymapCustom, layout);
+    }
     $("#keymap").html(keymapElement);
 
     $("#keymap").removeClass("staggered");
@@ -425,6 +434,7 @@ export async function refresh(
     $("#keymap").removeClass("alice");
     $("#keymap").removeClass("steno");
     $("#keymap").removeClass("steno_matrix");
+    $("#keymap").removeClass("custom");
     $("#keymap").addClass(Config.keymapStyle);
   } catch (e) {
     if (e instanceof Error) {

frontend/src/ts/pages/settings.ts

@@ -23,6 +23,7 @@ import * as CustomBackgroundFilter from "../elements/custom-background-filter";
 import {
   ConfigValue,
   CustomBackgroundSchema,
+  KeymapCustom,
 } from "@monkeytype/contracts/schemas/configs";
 import {
   getAllFunboxes,
@@ -33,6 +34,7 @@ import { getActiveFunboxNames } from "../test/funbox/list";
 import { SnapshotPreset } from "../constants/default-snapshot";
 import { LayoutsList } from "../constants/layouts";
 import { DataArrayPartial } from "slim-select/store";
+import { keymapToString, stringToKeymap } from "../utils/custom-keymap";
 
 type SettingsGroups<T extends ConfigValue> = Record<string, SettingsGroup<T>>;
 
@@ -91,6 +93,9 @@ async function initGroups(): Promise<void> {
         $(".pageSettings .section[data-config-name='keymapSize']").addClass(
           "hidden"
         );
+        $(".pageSettings .section[data-config-name='keymapCustom']").addClass(
+          "hidden"
+        );
       } else {
         $(".pageSettings .section[data-config-name='keymapStyle']").removeClass(
           "hidden"
@@ -107,13 +112,29 @@ async function initGroups(): Promise<void> {
         $(".pageSettings .section[data-config-name='keymapSize']").removeClass(
           "hidden"
         );
+        if (Config.keymapStyle === "custom") {
+          $(
+            ".pageSettings .section[data-config-name='keymapCustom']"
+          ).removeClass("hidden");
+        }
       }
     }
   ) as SettingsGroup<ConfigValue>;
   groups["keymapMatrix"] = new SettingsGroup(
     "keymapStyle",
     UpdateConfig.setKeymapStyle,
-    "button"
+    "button",
+    () => {
+      if (Config.keymapStyle !== "custom") {
+        $(".pageSettings .section[data-config-name='keymapCustom']").addClass(
+          "hidden"
+        );
+      } else {
+        $(
+          ".pageSettings .section[data-config-name='keymapCustom']"
+        ).removeClass("hidden");
+      }
+    }
   ) as SettingsGroup<ConfigValue>;
   groups["keymapLayout"] = new SettingsGroup(
     "keymapLayout",
@@ -339,6 +360,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setFontSize,
     "button"
   ) as SettingsGroup<ConfigValue>;
+  groups["keymapCustom"] = new SettingsGroup(
+    "keymapCustom",
+    UpdateConfig.setKeymapCustom,
+    "button"
+  ) as SettingsGroup<ConfigValue>;
   groups["maxLineWidth"] = new SettingsGroup(
     "maxLineWidth",
     UpdateConfig.setMaxLineWidth,
@@ -503,6 +529,16 @@ async function fillSettingsPage(): Promise<void> {
     ".pageSettings .section[data-config-name='keymapLayout'] select"
   ) as Element;
 
+  if (Config.keymapStyle !== "custom") {
+    $(".pageSettings .section[data-config-name='keymapCustom']").addClass(
+      "hidden"
+    );
+  } else {
+    $(".pageSettings .section[data-config-name='keymapCustom']").removeClass(
+      "hidden"
+    );
+  }
+
   let layoutHtml = '<option value="default">off</option>';
   let keymapLayoutHtml = '<option value="overrideSync">emulator sync</option>';
 
@@ -678,6 +714,9 @@ async function fillSettingsPage(): Promise<void> {
   $(".pageSettings .section[data-config-name='fontSize'] input").val(
     Config.fontSize
   );
+  $(".pageSettings .section[data-config-name='keymapCustom'] textarea").val(
+    keymapToString(Config.keymapCustom)
+  );
 
   $(".pageSettings .section[data-config-name='maxLineWidth'] input").val(
     Config.maxLineWidth
@@ -1202,6 +1241,38 @@ $(
   }
 });
 
+$(
+  ".pageSettings .section[data-config-name='keymapCustom'] .textareaAndButton button.save"
+).on("click", () => {
+  const stringValue = $(
+    ".pageSettings .section[data-config-name='keymapCustom'] .textareaAndButton textarea"
+  ).val() as string;
+  const keymap: KeymapCustom = stringToKeymap(stringValue);
+  const didConfigSave = UpdateConfig.setKeymapCustom(keymap);
+  if (didConfigSave) {
+    Notifications.add("Saved", 1, {
+      duration: 1,
+    });
+  }
+});
+
+$(
+  ".pageSettings .section[data-config-name='keymapCustom'] .textareaAndButton textarea"
+).on("keypress", (e) => {
+  if (e.key === "Enter") {
+    const stringValue = $(
+      ".pageSettings .section[data-config-name='keymapCustom'] .textareaAndButton textarea"
+    ).val() as string;
+    const keymap: KeymapCustom = stringToKeymap(stringValue);
+    const didConfigSave = UpdateConfig.setKeymapCustom(keymap);
+    if (didConfigSave) {
+      Notifications.add("Saved", 1, {
+        duration: 1,
+      });
+    }
+  }
+});
+
 $(
   ".pageSettings .section[data-config-name='tapeMargin'] .inputAndButton button.save"
 ).on("click", () => {