From 693418b91ba3ede14383b9287206479d1b46443f Mon Sep 17 00:00:00 2001
From: Nad Alaba <37968805+NadAlaba@users.noreply.github.com>
Date: Wed, 11 Sep 2024 23:06:57 +0300
Subject: [PATCH] fix(custom font): allow underscore in custom-font's name
 (@NadAlaba)

---
 frontend/src/ts/commandline/lists/font-family.ts |  9 +++++----
 frontend/src/ts/config.ts                        |  4 +++-
 frontend/src/ts/modals/simple-modals.ts          |  4 +++-
 frontend/src/ts/pages/settings.ts                | 14 ++++++--------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/commandline/lists/font-family.ts b/frontend/src/ts/commandline/lists/font-family.ts
index e6f500b20..b0b08e284 100644
--- a/frontend/src/ts/commandline/lists/font-family.ts
+++ b/frontend/src/ts/commandline/lists/font-family.ts
@@ -18,7 +18,8 @@ const commands: MonkeyTypes.Command[] = [
 
 function update(fonts: MonkeyTypes.FontObject[]): void {
   fonts.forEach((font) => {
-    const configVal = font.name.replace(/ /g, "_");
+    const configFontName = font.name.replace(/_/g, "__").replace(/ /g, "_");
+    const configVal = configFontName;
 
     const customData: Record<string, string | boolean> = {
       name: font.name,
@@ -31,7 +32,7 @@ function update(fonts: MonkeyTypes.FontObject[]): void {
     customData["isSystem"] = font.systemFont ?? false;
 
     subgroup.list.push({
-      id: "changeFont" + font.name.replace(/ /g, "_"),
+      id: "changeFont" + configFontName,
       display: font.display !== undefined ? font.display : font.name,
       configValue: configVal,
       customData,
@@ -39,7 +40,7 @@ function update(fonts: MonkeyTypes.FontObject[]): void {
         UI.previewFontFamily(font.name);
       },
       exec: (): void => {
-        UpdateConfig.setFontFamily(font.name.replace(/ /g, "_"));
+        UpdateConfig.setFontFamily(configFontName);
       },
     });
   });
@@ -52,7 +53,7 @@ function update(fonts: MonkeyTypes.FontObject[]): void {
     },
     exec: ({ input }) => {
       if (input === undefined || input === "") return;
-      UpdateConfig.setFontFamily(input.replace(/\s/g, "_"));
+      UpdateConfig.setFontFamily(input.replace(/_/g, "__").replace(/\s/g, "_"));
       // Settings.groups.fontFamily.updateInput();
     },
   });
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index ec0ba020e..39b6b5616 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -1255,7 +1255,9 @@ export function setFontFamily(
   config.fontFamily = font;
   document.documentElement.style.setProperty(
     "--font",
-    `"${font.replace(/_/g, " ")}", "Roboto Mono", "Vazirmatn", monospace`
+    `"${font
+      .replace(/(?<!_)_(?!_)/g, " ")
+      .replace(/__/g, "_")}", "Roboto Mono", "Vazirmatn", monospace`
   );
   saveToLocalStorage("fontFamily", nosave);
   ConfigEvent.dispatch("fontFamily", config.fontFamily);
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index 89bc1195b..0632572d4 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -892,7 +892,9 @@ list.applyCustomFont = new SimpleModal({
   text: "Make sure you have the font installed on your computer before applying",
   buttonText: "apply",
   execFn: async (_thisPopup, fontName): Promise<ExecReturn> => {
-    Settings.groups["fontFamily"]?.setValue(fontName.replace(/\s/g, "_"));
+    Settings.groups["fontFamily"]?.setValue(
+      fontName.replace(/_/g, "__").replace(/\s/g, "_")
+    );
 
     return {
       status: 1,
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 24dc593f2..89af23ab7 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -652,17 +652,15 @@ async function fillSettingsPage(): Promise<void> {
       const activeClass = Config.fontFamily === font.name ? " active" : "";
       const display = font.display !== undefined ? font.display : font.name;
       if (Config.fontFamily === font.name) isCustomFont = false;
-      fontsElHTML += `<button class="${activeClass}" style="font-family:${fontFamily}" data-config-value="${font.name.replace(
-        / /g,
-        "_"
-      )}">${display}</button>`;
+      fontsElHTML += `<button class="${activeClass}" style="font-family:${fontFamily}" data-config-value="${font.name
+        .replace(/_/g, "__")
+        .replace(/ /g, "_")}">${display}</button>`;
     }
 
     fontsElHTML += isCustomFont
-      ? `<button class="no-auto-handle active" data-config-value="custom">Custom (${Config.fontFamily.replace(
-          /_/g,
-          " "
-        )})</button>`
+      ? `<button class="no-auto-handle active" data-config-value="custom">Custom (${Config.fontFamily
+          .replace(/(?<!_)_(?!_)/g, " ")
+          .replace(/__/g, "_")})</button>`
       : '<button class="no-auto-handle" data-config-value="custom"">Custom</button>';
 
     fontsEl.innerHTML = fontsElHTML;