chore(highlightjs): basic integration

apps/client/src/services/mime_type_definitions.ts

@@ -1,21 +1,12 @@
 // TODO: deduplicate with /src/services/import/mime_type_definitions.ts
 
+import type { MimeTypeDefinition } from "@triliumnext/commons";
+
 /**
  * A pseudo-MIME type which is used in the editor to automatically determine the language used in code blocks via heuristics.
  */
 export const MIME_TYPE_AUTO = "text-x-trilium-auto";
 
-export interface MimeTypeDefinition {
-    default?: boolean;
-    title: string;
-    mime: string;
-    /** The name of the language/mime type as defined by highlight.js (or one of the aliases), in order to be used for syntax highlighting such as inside code blocks. */
-    highlightJs?: string;
-    /** If specified, will load the corresponding highlight.js file from the `libraries/highlightjs/${id}.js` instead of `node_modules/@highlightjs/cdn-assets/languages/${id}.min.js`. */
-    highlightJsSource?: "libraries";
-    /** If specified, will load the corresponding highlight file from the given path instead of `node_modules`. */
-    codeMirrorSource?: string;
-}
 
 /**
  * For highlight.js-supported languages, see https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md.

apps/client/src/services/mime_types.ts

@@ -1,13 +1,7 @@
-import { MIME_TYPE_AUTO, MIME_TYPES_DICT, normalizeMimeTypeForCKEditor, type MimeTypeDefinition } from "./mime_type_definitions.js";
+import type { MimeType } from "@triliumnext/commons";
+import { MIME_TYPE_AUTO, MIME_TYPES_DICT, normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
 import options from "./options.js";
 
-interface MimeType extends MimeTypeDefinition {
-    /**
-     * True if this mime type was enabled by the user in the "Available MIME types in the dropdown" option in the Code Notes settings.
-     */
-    enabled: boolean;
-}
-
 let mimeTypes: MimeType[] | null = null;
 
 function loadMimeTypes() {

apps/client/src/services/syntax_highlight.ts

@@ -1,4 +1,4 @@
-import { highlight, highlightAuto } from "@triliumnext/highlightjs";
+import { ensureMimeTypes, highlight, highlightAuto } from "@triliumnext/highlightjs";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
 
@@ -47,12 +47,8 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
     if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
         highlightedText = highlightAuto(text);
     } else if (normalizedMimeType) {
-        const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
+        await ensureMimeTypesForHighlighting();
-        if (language) {
+        highlightedText = highlight(text, { language: normalizedMimeType });
-            highlightedText = highlight(text, { language });
-        } else {
-            console.warn(`Unknown mime type: ${normalizedMimeType}.`);
-        }
     }
 
     if (highlightedText) {
@@ -60,6 +56,11 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
     }
 }
 
+export async function ensureMimeTypesForHighlighting() {
+    const mimeTypes = mime_types.getMimeTypes();
+    await ensureMimeTypes(mimeTypes);
+}
+
 /**
  * Indicates whether syntax highlighting should be enabled for code blocks, by querying the value of the `codeblockTheme` option.
  * @returns whether syntax highlighting should be enabled for code blocks.

apps/client/src/widgets/type_widgets/ckeditor/config.ts

@@ -1,9 +1,8 @@
-import library_loader from "../../../services/library_loader.js";
 import { ALLOWED_PROTOCOLS } from "../../../services/link.js";
 import { MIME_TYPE_AUTO } from "../../../services/mime_type_definitions.js";
 import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
-import { isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
+import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
 import utils from "../../../services/utils.js";
 import emojiDefinitionsUrl from "@triliumnext/ckeditor5/emoji_definitions/en.json?external";
 
@@ -104,7 +103,10 @@ export function buildConfig() {
             definitionsUrl: emojiDefinitionsUrl
         },
         syntaxHighlighting: {
-            loadHighlightJs: async () => await import("@triliumnext/highlightjs"),
+            loadHighlightJs: async () => {
+                ensureMimeTypesForHighlighting();
+                return await import("@triliumnext/highlightjs");
+            },
             mapLanguageName: getHighlightJsNameForMime,
             defaultMimeType: MIME_TYPE_AUTO,
             enabled: isSyntaxHighlightEnabled

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

@@ -3,6 +3,7 @@ import { t } from "../../../../services/i18n.js";
 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";
 
 const SAMPLE_LANGUAGE = "javascript";
 const SAMPLE_CODE = `\
@@ -91,11 +92,14 @@ export default class CodeBlockOptions extends OptionsWidget {
     #setupPreview(shouldEnableSyntaxHighlight: boolean) {
         const text = SAMPLE_CODE;
         if (shouldEnableSyntaxHighlight) {
-            import("@triliumnext/highlightjs").then((hljs) => {
+            import("@triliumnext/highlightjs").then(async (hljs) => {
+                await ensureMimeTypesForHighlighting();
                 const highlightedText = hljs.highlight(text, {
                     language: SAMPLE_LANGUAGE
                 });
-                this.$sampleEl.html(highlightedText.value);
+                if (highlightedText) {
+                    this.$sampleEl.html(highlightedText.value);
+                }
             });
         } else {
             this.$sampleEl.text(text);

apps/client/tsconfig.app.json

@@ -34,6 +34,9 @@
     "src/**/*.ts"
   ],
   "references": [
+    {
+      "path": "../../packages/highlightjs/tsconfig.lib.json"
+    },
     {
       "path": "../../packages/codemirror/tsconfig.lib.json"
     },

apps/client/tsconfig.json

@@ -3,6 +3,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../../packages/highlightjs"
+    },
     {
       "path": "../../packages/codemirror"
     },

packages/commons/src/index.ts

@@ -3,4 +3,5 @@ export * from "./lib/options_interface.js";
 export * from "./lib/keyboard_actions_interface.js";
 export * from "./lib/hidden_subtree.js";
 export * from "./lib/rows.js";
-export * from "./lib/test-utils.js"
+export * from "./lib/test-utils.js";
+export * from "./lib/mime_type.js";

packages/commons/src/lib/mime_type.ts

@@ -0,0 +1,18 @@
+export interface MimeTypeDefinition {
+    default?: boolean;
+    title: string;
+    mime: string;
+    /** The name of the language/mime type as defined by highlight.js (or one of the aliases), in order to be used for syntax highlighting such as inside code blocks. */
+    highlightJs?: string;
+    /** If specified, will load the corresponding highlight.js file from the `libraries/highlightjs/${id}.js` instead of `node_modules/@highlightjs/cdn-assets/languages/${id}.min.js`. */
+    highlightJsSource?: "libraries";
+    /** If specified, will load the corresponding highlight file from the given path instead of `node_modules`. */
+    codeMirrorSource?: string;
+}
+
+export interface MimeType extends MimeTypeDefinition {
+    /**
+     * True if this mime type was enabled by the user in the "Available MIME types in the dropdown" option in the Code Notes settings.
+     */
+    enabled: boolean;
+}

packages/highlightjs/package.json

@@ -19,6 +19,7 @@
     "name": "highlightjs"
   },
   "dependencies": {
+    "@triliumnext/commons": "workspace:*",
     "highlight.js": "11.11.1"
   }
 }

packages/highlightjs/src/index.ts

@@ -1,3 +1,46 @@
 import hljs from "../node_modules/highlight.js/es/core.js";
+import type { MimeType } from "@triliumnext/commons";
+import definitions from "./syntax_highlighting.js";
+import { type HighlightOptions } from "highlight.js";
 
-export const { highlight, highlightAuto } = hljs;
+const registeredMimeTypes = new Set<string>();
+const unsupportedMimeTypes = new Set<string>();
+
+export async function ensureMimeTypes(mimeTypes: MimeType[]) {
+    for (const mimeType of mimeTypes) {
+        if (!mimeType.enabled) {
+            continue;
+        }
+
+        const mime = mimeType.mime;
+        if (registeredMimeTypes.has(mime)) {
+            continue;
+        }
+
+        registeredMimeTypes.add(mime);
+        const loader = definitions[mime];
+        if (!loader) {
+            unsupportedMimeTypes.add(mime);
+            continue;
+        }
+
+        const language = (await loader).default;
+        console.info(`Registered highlighting for ${mime}.`);
+        hljs.registerLanguage(mime, language);
+    }
+}
+
+export function highlight(code: string, options: HighlightOptions) {
+    if (unsupportedMimeTypes.has(options.language)) {
+        return null;
+    }
+
+    if (!registeredMimeTypes.has(options.language)) {
+        console.warn(`Unable to find highlighting for ${code}.`);
+        return null;
+    }
+
+    return hljs.highlight(code, options);
+}
+
+export const { highlightAuto } = hljs;

packages/highlightjs/tsconfig.json

@@ -3,6 +3,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../commons"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

packages/highlightjs/tsconfig.lib.json

@@ -17,7 +17,11 @@
   "include": [
     "src/**/*.ts"
   ],
-  "references": [],
+  "references": [
+    {
+      "path": "../commons/tsconfig.lib.json"
+    }
+  ],
   "exclude": [
     "vite.config.ts",
     "vite.config.mts",

pnpm-lock.yaml

@@ -1283,6 +1283,9 @@ importers:
 
   packages/highlightjs:
     dependencies:
+      '@triliumnext/commons':
+        specifier: workspace:*
+        version: link:../commons
       highlight.js:
         specifier: 11.11.1
         version: 11.11.1