chore(highlightjs): introduce client-level list of themes

apps/client/src/services/library_loader.ts

@@ -31,7 +31,6 @@ const HIGHLIGHT_JS: Library = {
             }
         }
 
-        const currentTheme = String(optionsService.get("codeBlockTheme"));
         loadHighlightingTheme(currentTheme);
 
         return Array.from(scriptsToLoad);

apps/client/src/services/syntax_highlight.ts

@@ -1,4 +1,4 @@
-import { ensureMimeTypes, highlight, highlightAuto } from "@triliumnext/highlightjs";
+import { ensureMimeTypes, highlight, highlightAuto, loadTheme } from "@triliumnext/highlightjs";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
 
@@ -57,6 +57,11 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
 }
 
 export async function ensureMimeTypesForHighlighting() {
+    // Load theme.
+    const currentTheme = String(options.get("codeBlockTheme"));
+    loadTheme(currentTheme);
+
+    // Load mime types.
     const mimeTypes = mime_types.getMimeTypes();
     await ensureMimeTypes(mimeTypes);
 }

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

@@ -4,6 +4,7 @@ import library_loader from "../../../../services/library_loader.js";
 import server from "../../../../services/server.js";
 import OptionsWidget from "../options_widget.js";
 import { ensureMimeTypesForHighlighting } from "../../../../services/syntax_highlight.js";
+import { Themes } from "@triliumnext/highlightjs";
 
 const SAMPLE_LANGUAGE = "javascript";
 const SAMPLE_CODE = `\
@@ -76,6 +77,13 @@ export default class CodeBlockOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$themeSelect = this.$widget.find(".theme-select");
+        // Populate the list of themes.
+        for (const name of Object.keys(Themes)) {
+            const option = $("<option>")
+                .attr("value", `default:${name}`)
+                .text(name);
+            this.$themeSelect.append(option);
+        }
         this.$themeSelect.on("change", async () => {
             const newTheme = String(this.$themeSelect.val());
             library_loader.loadHighlightingTheme(newTheme);
@@ -107,25 +115,6 @@ export default class CodeBlockOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options: OptionMap) {
-        const themeGroups = await server.get<Response>("options/codeblock-themes");
-        this.$themeSelect.empty();
-
-        for (const [key, themes] of Object.entries(themeGroups)) {
-            const $group = key ? $("<optgroup>").attr("label", key) : null;
-
-            for (const theme of themes) {
-                const option = $("<option>").attr("value", theme.val).text(theme.title);
-
-                if ($group) {
-                    $group.append(option);
-                } else {
-                    this.$themeSelect.append(option);
-                }
-            }
-            if ($group) {
-                this.$themeSelect.append($group);
-            }
-        }
         this.$themeSelect.val(options.codeBlockTheme);
         this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
         this.$widget.closest(".note-detail-printable").toggleClass("word-wrap", options.codeBlockWordWrap === "true");

apps/server/src/routes/api/options.ts

@@ -6,7 +6,6 @@ import searchService from "../../services/search/services/search.js";
 import ValidationError from "../../errors/validation_error.js";
 import type { Request } from "express";
 import { changeLanguage, getLocales } from "../../services/i18n.js";
-import { listSyntaxHighlightingThemes } from "../../services/code_block_theme.js";
 import type { OptionNames } from "@triliumnext/commons";
 
 // options allowed to be updated directly in the Options dialog
@@ -190,10 +189,6 @@ function getUserThemes() {
     return ret;
 }
 
-function getSyntaxHighlightingThemes() {
-    return listSyntaxHighlightingThemes();
-}
-
 function getSupportedLocales() {
     return getLocales();
 }
@@ -210,6 +205,5 @@ export default {
     updateOption,
     updateOptions,
     getUserThemes,
-    getSyntaxHighlightingThemes,
     getSupportedLocales
 };

apps/server/src/routes/routes.ts

@@ -217,7 +217,6 @@ function register(app: express.Application) {
     apiRoute(PUT, "/api/options/:name/:value*", optionsApiRoute.updateOption);
     apiRoute(PUT, "/api/options", optionsApiRoute.updateOptions);
     apiRoute(GET, "/api/options/user-themes", optionsApiRoute.getUserThemes);
-    apiRoute(GET, "/api/options/codeblock-themes", optionsApiRoute.getSyntaxHighlightingThemes);
     apiRoute(GET, "/api/options/locales", optionsApiRoute.getSupportedLocales);
 
     apiRoute(PST, "/api/password/change", passwordApiRoute.changePassword);

apps/server/src/services/code_block_theme.ts

@@ -5,7 +5,6 @@
  */
 
 import fs from "fs";
-import themeNames from "./code_block_theme_names.json" with { type: "json" };
 import { t } from "i18next";
 import { join } from "path";
 import { isDev, isElectron, getResourceDir } from "./utils.js";
@@ -70,10 +69,6 @@ export function readThemesFromFileSystem(path: string): ColorTheme[] {
             const nameWithoutExtension = name.replace(".min.css", "");
             let title = nameWithoutExtension.replace(/-/g, " ");
 
-            if (title in themeNames) {
-                title = (themeNames as Record<string, string>)[title];
-            }
-
             return {
                 val: `default:${nameWithoutExtension}`,
                 title: title

apps/server/src/services/code_block_theme_names.json

@@ -1,82 +0,0 @@
-{
-  "1c light": "1C (Light)",
-  "a11y dark": "a11y (Dark)",
-  "a11y light": "a11y (Light)",
-  "agate": "Agate (Dark)",
-  "an old hope": "An Old Hope (Dark)",
-  "androidstudio": "Android Studio (Dark)",
-  "arduino light": "Arduino (Light)",
-  "arta": "Arta (Dark)",
-  "ascetic": "Ascetic (Light)",
-  "atom one dark reasonable": "Atom One with ReasonML support (Dark)",
-  "atom one dark": "Atom One (Dark)",
-  "atom one light": "Atom One (Light)",
-  "brown paper": "Brown Paper (Light)",
-  "codepen embed": "CodePen Embed (Dark)",
-  "color brewer": "Color Brewer (Light)",
-  "cybertopia cherry": "Cybertopia Cherry (Dark)",
-  "cybertopia dimmer": "Cybertopia Dimmer (Dark)",
-  "cybertopia icecap": "Cybertopia Icecap (Dark)",
-  "cybertopia saturated": "Cybertopia Saturated (Dark)",
-  "dark": "Dark",
-  "default": "Original highlight.js Theme (Light)",
-  "devibeans": "devibeans (Dark)",
-  "docco": "Docco (Light)",
-  "far": "FAR (Dark)",
-  "felipec": "FelipeC (Dark)",
-  "foundation": "Foundation 4 Docs (Light)",
-  "github dark dimmed": "GitHub Dimmed (Dark)",
-  "github dark": "GitHub (Dark)",
-  "github": "GitHub (Light)",
-  "gml": "GML (Dark)",
-  "googlecode": "Google Code (Light)",
-  "gradient dark": "Gradient (Dark)",
-  "gradient light": "Gradient (Light)",
-  "grayscale": "Grayscale (Light)",
-  "hybrid": "hybrid (Dark)",
-  "idea": "Idea (Light)",
-  "intellij light": "IntelliJ (Light)",
-  "ir black": "IR Black (Dark)",
-  "isbl editor dark": "ISBL Editor (Dark)",
-  "isbl editor light": "ISBL Editor (Light)",
-  "kimbie dark": "Kimbie (Dark)",
-  "kimbie light": "Kimbie (Light)",
-  "lightfair": "Lightfair (Light)",
-  "lioshi": "Lioshi (Dark)",
-  "magula": "Magula (Light)",
-  "mono blue": "Mono Blue (Light)",
-  "monokai sublime": "Monokai Sublime (Dark)",
-  "monokai": "Monokai (Dark)",
-  "night owl": "Night Owl (Dark)",
-  "nnfx dark": "NNFX (Dark)",
-  "nnfx light": "NNFX (Light)",
-  "nord": "Nord (Dark)",
-  "obsidian": "Obsidian (Dark)",
-  "panda syntax dark": "Panda (Dark)",
-  "panda syntax light": "Panda (Light)",
-  "paraiso dark": "Paraiso (Dark)",
-  "paraiso light": "Paraiso (Light)",
-  "pojoaque": "Pojoaque (Dark)",
-  "purebasic": "PureBasic (Light)",
-  "qtcreator dark": "Qt Creator (Dark)",
-  "qtcreator light": "Qt Creator (Light)",
-  "rainbow": "Rainbow (Dark)",
-  "routeros": "RouterOS Script (Light)",
-  "rose pine dawn": "Rose Pine Dawn (Light)",
-  "rose pine moon": "Rose Pine Moon (Dark)",
-  "rose pine": "Rose Pine (Dark)",
-  "school book": "School Book (Light)",
-  "shades of purple": "Shades of Purple (Dark)",
-  "srcery": "Srcery (Dark)",
-  "stackoverflow dark": "Stack Overflow (Dark)",
-  "stackoverflow light": "Stack Overflow (Light)",
-  "sunburst": "Sunburst (Dark)",
-  "tokyo night dark": "Tokyo Night (Dark)",
-  "tokyo night light": "Tokyo Night (Light)",
-  "tomorrow night blue": "Tomorrow Night Blue (Dark)",
-  "tomorrow night bright": "Tomorrow Night Bright (Dark)",
-  "vs": "Visual Studio (Light)",
-  "vs2015": "Visual Studio 2015 (Dark)",
-  "xcode": "Xcode (Light)",
-  "xt256": "xt256 (Dark)"
-}