chore(highlightjs): reintroduce grouping of themes

apps/client/src/translations/cn/translation.json

@@ -1621,7 +1621,10 @@
     "color-scheme": "颜色方案"
   },
   "code_block": {
-    "word_wrapping": "自动换行"
+    "word_wrapping": "自动换行",
+    "theme_none": "无语法高亮",
+    "theme_group_light": "浅色主题",
+    "theme_group_dark": "深色主题"
   },
   "classic_editor_toolbar": {
     "title": "格式化"

apps/client/src/translations/de/translation.json

@@ -1573,7 +1573,10 @@
     "color-scheme": "Farbschema"
   },
   "code_block": {
-    "word_wrapping": "Wortumbruch"
+    "word_wrapping": "Wortumbruch",
+    "theme_none": "Keine Syntax-Hervorhebung",
+    "theme_group_light": "Helle Themen",
+    "theme_group_dark": "Dunkle Themen"
   },
   "classic_editor_toolbar": {
     "title": "Format"

apps/client/src/translations/en/translation.json

@@ -1827,7 +1827,10 @@
     "color-scheme": "Color Scheme"
   },
   "code_block": {
-    "word_wrapping": "Word wrapping"
+    "word_wrapping": "Word wrapping",
+    "theme_none": "No syntax highlighting",
+    "theme_group_light": "Light themes",
+    "theme_group_dark": "Dark themes"
   },
   "classic_editor_toolbar": {
     "title": "Formatting"

apps/client/src/translations/es/translation.json

@@ -1589,7 +1589,10 @@
     "color-scheme": "Esquema de color"
   },
   "code_block": {
-    "word_wrapping": "Ajuste de palabras"
+    "word_wrapping": "Ajuste de palabras",
+    "theme_none": "Sin resaltado de sintaxis",
+    "theme_group_light": "Temas claros",
+    "theme_group_dark": "Temas oscuros"
   },
   "classic_editor_toolbar": {
     "title": "Formato"

apps/client/src/translations/fr/translation.json

@@ -1579,7 +1579,10 @@
     "color-scheme": "Jeu de couleurs"
   },
   "code_block": {
-    "word_wrapping": "Saut à la ligne automatique suivant la largeur"
+    "word_wrapping": "Saut à la ligne automatique suivant la largeur",
+    "theme_none": "Pas de coloration syntaxique",
+    "theme_group_light": "Thèmes clairs",
+    "theme_group_dark": "Thèmes sombres"
   },
   "classic_editor_toolbar": {
     "title": "Mise en forme"

apps/client/src/translations/pt_br/translation.json

@@ -1,5 +1,10 @@
 {
   "revisions": {
     "delete_button": ""
+  },
+  "code_block": {
+    "theme_none": "Sem destaque de sintaxe",
+    "theme_group_light": "Temas claros",
+    "theme_group_dark": "Temas escuros"
   }
 }

apps/client/src/translations/ro/translation.json

@@ -1585,7 +1585,10 @@
     "description": "Controlează evidențierea de sintaxă pentru blocurile de cod în interiorul notițelor text, notițele de tip cod nu vor fi afectate de aceste setări."
   },
   "code_block": {
-    "word_wrapping": "Încadrare text"
+    "word_wrapping": "Încadrare text",
+    "theme_none": "Fără evidențiere de sintaxă",
+    "theme_group_dark": "Teme întunecate",
+    "theme_group_light": "Teme luminoase"
   },
   "classic_editor_toolbar": {
     "title": "Formatare"

apps/client/src/translations/tw/translation.json

@@ -1519,7 +1519,10 @@
     "color-scheme": "顏色方案"
   },
   "code_block": {
-    "word_wrapping": "自動換行"
+    "word_wrapping": "自動換行",
+    "theme_none": "無格式高亮",
+    "theme_group_light": "淺色主題",
+    "theme_group_dark": "深色主題"
   },
   "classic_editor_toolbar": {
     "title": "格式化"

apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts

@@ -3,7 +3,7 @@ import { t } from "../../../../services/i18n.js";
 import server from "../../../../services/server.js";
 import OptionsWidget from "../options_widget.js";
 import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../../services/syntax_highlight.js";
-import { Themes } from "@triliumnext/highlightjs";
+import { Themes, type Theme } from "@triliumnext/highlightjs";
 
 const SAMPLE_LANGUAGE = normalizeMimeTypeForCKEditor("application/javascript;env=frontend");
 const SAMPLE_CODE = `\
@@ -68,13 +68,28 @@ export default class CodeBlockOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$themeSelect = this.$widget.find(".theme-select");
+
         // Populate the list of themes.
-        for (const [ id, theme ] of Object.entries(Themes)) {
-            const option = $("<option>")
-                .attr("value", `default:${id}`)
-                .text(theme.name);
-            this.$themeSelect.append(option);
+        const themeGroups = groupThemesByLightOrDark();
+        for (const [key, themes] of Object.entries(themeGroups)) {
+            const $group = key ? $("<optgroup>").attr("label", key) : null;
+
+            for (const [id, theme] of Object.entries(themes)) {
+                const option = $("<option>")
+                    .attr("value", "default:" + id)
+                    .text(theme.name);
+
+                if ($group) {
+                    $group.append(option);
+                } else {
+                    this.$themeSelect.append(option);
+                }
+            }
+            if ($group) {
+                this.$themeSelect.append($group);
+            }
         }
+
         this.$themeSelect.on("change", async () => {
             const newTheme = String(this.$themeSelect.val());
             loadHighlightingTheme(newTheme);
@@ -113,3 +128,21 @@ export default class CodeBlockOptions extends OptionsWidget {
         this.#setupPreview(options.codeBlockTheme !== "none");
     }
 }
+
+function groupThemesByLightOrDark() {
+    const darkThemes: Record<string, Theme> = {};
+    const lightThemes: Record<string, Theme> = {};
+
+    for (const [ id, theme ] of Object.entries(Themes)) {
+        if (theme.name.includes("Dark")) {
+            darkThemes[id] = theme;
+        } else {
+            lightThemes[id] = theme;
+        }
+    }
+
+    const output: Record<string, Record<string, Theme>> = {};
+    output[t("code_block.theme_group_light")] = lightThemes;
+    output[t("code_block.theme_group_dark")] = darkThemes;
+    return output;
+}