feat(input): add 'code unindent on backspace' for code languages (@notTamion) (monkeytypegame#5991)

Author: notTamion

frontend/__tests__/root/config.spec.ts

@@ -145,6 +145,9 @@ describe("Config", () => {
     expect(Config.setSmoothCaret("medium")).toBe(true);
     expect(Config.setSmoothCaret("invalid" as any)).toBe(false);
   });
+  it("setCodeUnindentOnBackspace", () => {
+    testBoolean(Config.setCodeUnindentOnBackspace);
+  });
   it("setQuickRestartMode", () => {
     expect(Config.setQuickRestartMode("off")).toBe(true);
     expect(Config.setQuickRestartMode("tab")).toBe(true);

frontend/src/html/pages/settings.html

@@ -504,6 +504,20 @@
         <select></select>
       </div>
     </div>
+    <div class="section" data-config-name="codeUnindentOnBackspace">
+      <div class="groupTitle">
+        <i class="fas fa-code"></i>
+        <span>code unindent on backspace</span>
+      </div>
+      <div class="text">
+        Automatically go back to the previous line when deleting line leading
+        tab characters. Only works in code languages.
+      </div>
+      <div class="buttons">
+        <button data-config-value="false">off</button>
+        <button data-config-value="true">on</button>
+      </div>
+    </div>
     <div class="sectionSpacer"></div>
   </div>
 

frontend/src/ts/commandline/lists.ts

@@ -69,6 +69,7 @@ import ResultScreenCommands from "./lists/result-screen";
 import CustomBackgroundSizeCommands from "./lists/background-size";
 import CustomBackgroundFilterCommands from "./lists/background-filter";
 import AddOrRemoveThemeToFavorite from "./lists/add-or-remove-theme-to-favorites";
+import CodeUnindentOnBackspace from "./lists/code-unindent-on-backspace";
 
 import TagsCommands from "./lists/tags";
 import CustomThemesListCommands from "./lists/custom-themes-list";
@@ -264,6 +265,7 @@ export const commands: CommandsSubgroup = {
     ...HideExtraLettersCommands,
     ...LazyModeCommands,
     ...LayoutsCommands,
+    ...CodeUnindentOnBackspace,
 
     //sound
     ...SoundVolumeCommands,

frontend/src/ts/commandline/lists/code-unindent-on-backspace.ts

@@ -0,0 +1,36 @@
+import * as UpdateConfig from "../../config";
+import { Command, CommandsSubgroup } from "../types";
+
+const subgroup: CommandsSubgroup = {
+  title: "Code unindent on backspace...",
+  configKey: "codeUnindentOnBackspace",
+  list: [
+    {
+      id: "setCodeUnindentOnBackspaceOff",
+      display: "off",
+      configValue: false,
+      exec: (): void => {
+        UpdateConfig.setCodeUnindentOnBackspace(false);
+      },
+    },
+    {
+      id: "changeCodeUnindentOnBackspaceOn",
+      display: "on",
+      configValue: true,
+      exec: (): void => {
+        UpdateConfig.setCodeUnindentOnBackspace(true);
+      },
+    },
+  ],
+};
+
+const commands: Command[] = [
+  {
+    id: "changeCodeUnindentOnBackspace",
+    display: "Code unindent on backspace...",
+    icon: "fa-code",
+    subgroup,
+  },
+];
+
+export default commands;

frontend/src/ts/config.ts

@@ -1180,6 +1180,24 @@ export function setSmoothCaret(
   return true;
 }
 
+export function setCodeUnindentOnBackspace(
+  mode: boolean,
+  nosave?: boolean
+): boolean {
+  if (!isConfigValueValidBoolean("code unindent on backspace", mode)) {
+    return false;
+  }
+  config.codeUnindentOnBackspace = mode;
+
+  saveToLocalStorage("codeUnindentOnBackspace", nosave);
+  ConfigEvent.dispatch(
+    "codeUnindentOnBackspace",
+    config.codeUnindentOnBackspace,
+    nosave
+  );
+  return true;
+}
+
 export function setStartGraphsAtZero(mode: boolean, nosave?: boolean): boolean {
   if (!isConfigValueValidBoolean("start graphs at zero", mode)) {
     return false;
@@ -1993,6 +2011,7 @@ export async function apply(
     setKeymapSize(configObj.keymapSize, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothCaret(configObj.smoothCaret, true);
+    setCodeUnindentOnBackspace(configObj.codeUnindentOnBackspace, true);
     setSmoothLineScroll(configObj.smoothLineScroll, true);
     setAlwaysShowDecimalPlaces(configObj.alwaysShowDecimalPlaces, true);
     setAlwaysShowWordsHistory(configObj.alwaysShowWordsHistory, true);

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

@@ -25,6 +25,7 @@ const obj = {
   favThemes: [],
   showKeyTips: true,
   smoothCaret: "medium",
+  codeUnindentOnBackspace: false,
   quickRestart: "off",
   punctuation: false,
   numbers: false,

frontend/src/ts/controllers/input-controller.ts

@@ -1046,6 +1046,25 @@ $(document).on("keydown", async (event) => {
       event.preventDefault();
       return;
     }
+
+    // if the user backspaces the indentation in a code language we need to empty
+    // the current word so the user is set back to the end of the last line
+    if (
+      Config.codeUnindentOnBackspace &&
+      TestInput.input.current.length > 0 &&
+      /^\t*$/.test(TestInput.input.current) &&
+      Config.language.startsWith("code") &&
+      isCharCorrect(
+        TestInput.input.current.slice(-1),
+        TestInput.input.current.length - 1
+      ) &&
+      (TestInput.input.history[TestWords.words.currentIndex - 1] !=
+        TestWords.words.get(TestWords.words.currentIndex - 1) ||
+        Config.freedomMode)
+    ) {
+      TestInput.input.current = "";
+      await TestUI.updateActiveWordLetters();
+    }
   }
 
   if (event.key === "Backspace" && TestInput.input.current.length === 0) {

frontend/src/ts/pages/settings.ts

@@ -37,6 +37,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setSmoothCaret,
     "button"
   ) as SettingsGroup<ConfigValue>;
+  groups["codeUnindentOnBackspace"] = new SettingsGroup(
+    "codeUnindentOnBackspace",
+    UpdateConfig.setCodeUnindentOnBackspace,
+    "button"
+  ) as SettingsGroup<ConfigValue>;
   groups["difficulty"] = new SettingsGroup(
     "difficulty",
     UpdateConfig.setDifficulty,

packages/contracts/src/schemas/configs.ts

@@ -298,6 +298,7 @@ export const ConfigSchema = z
     favThemes: FavThemesSchema,
     showKeyTips: z.boolean(),
     smoothCaret: SmoothCaretSchema,
+    codeUnindentOnBackspace: z.boolean(),
     quickRestart: QuickRestartSchema,
     punctuation: z.boolean(),
     numbers: z.boolean(),