fix(highlightjs): unable to match due to init normalization

apps/client/src/services/content_renderer.ts

@@ -12,10 +12,10 @@ import FAttachment from "../entities/fattachment.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
 import { applySingleBlockSyntaxHighlight, applySyntaxHighlight } from "./syntax_highlight.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "../services/i18n.js";
 import WheelZoom from 'vanilla-js-wheel-zoom';
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
 let idCounter = 1;
 

apps/client/src/services/mime_type_definitions.ts

@@ -179,17 +179,6 @@ export const MIME_TYPES_DICT: readonly MimeTypeDefinition[] = Object.freeze([
     { title: "Z80", mime: "text/x-z80" }
 ]);
 
-/**
- * Given a MIME type in the usual format (e.g. `text/csrc`), it returns a MIME type that can be passed down to the CKEditor
- * code plugin.
- *
- * @param mimeType The MIME type to normalize, in the usual format (e.g. `text/c-src`).
- * @returns the normalized MIME type (e.g. `text-c-src`).
- */
-export function normalizeMimeTypeForCKEditor(mimeType: string) {
-    return mimeType.toLowerCase().replace(/[\W_]+/g, "-");
-}
-
 let byHighlightJsNameMappings: Record<string, MimeTypeDefinition> | null = null;
 
 /**

apps/client/src/services/mime_types.ts

@@ -1,5 +1,5 @@
-import type { MimeType } from "@triliumnext/commons";
-import { MIME_TYPE_AUTO, MIME_TYPES_DICT, normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
+import { normalizeMimeTypeForCKEditor, type MimeType } from "@triliumnext/commons";
+import { MIME_TYPE_AUTO, MIME_TYPES_DICT } from "./mime_type_definitions.js";
 import options from "./options.js";
 
 let mimeTypes: MimeType[] | null = null;

apps/client/src/widgets/type_widgets/editable_text.ts

@@ -12,13 +12,13 @@ import appContext, { type CommandListenerData, type EventData } from "../../comp
 import dialogService from "../../services/dialog.js";
 import options from "../../services/options.js";
 import toast from "../../services/toast.js";
-import { normalizeMimeTypeForCKEditor } from "../../services/mime_type_definitions.js";
 import { buildSelectedBackgroundColor } from "../../components/touch_bar.js";
 import { buildConfig, buildToolbarConfig } from "./ckeditor/config.js";
 import type FNote from "../../entities/fnote.js";
 import { getMermaidConfig } from "../../services/mermaid.js";
 import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type MentionFeed, type WatchdogConfig } from "@triliumnext/ckeditor5";
 import "@triliumnext/ckeditor5/index.css";
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
 const ENABLE_INSPECTOR = false;
 

apps/server/src/services/import/markdown.ts

@@ -127,9 +127,10 @@ const renderer = new CustomMarkdownRenderer({ async: false });
 
 import htmlSanitizer from "../html_sanitizer.js";
 import importUtils from "./utils.js";
-import { getMimeTypeFromHighlightJs, MIME_TYPE_AUTO, normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
+import { getMimeTypeFromHighlightJs, MIME_TYPE_AUTO } from "./mime_type_definitions.js";
 import { ADMONITION_TYPE_MAPPINGS } from "../export/markdown.js";
 import utils from "../utils.js";
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
 function renderToHtml(content: string, title: string) {
     // Double-escape slashes in math expression because they are otherwise consumed by the parser somewhere.

apps/server/src/services/import/mime_type_definitions.ts

@@ -188,17 +188,6 @@ export const MIME_TYPES_DICT: readonly MimeTypeDefinition[] = Object.freeze([
     { title: "Z80", mime: "text/x-z80" }
 ]);
 
-/**
- * Given a MIME type in the usual format (e.g. `text/csrc`), it returns a MIME type that can be passed down to the CKEditor
- * code plugin.
- *
- * @param mimeType The MIME type to normalize, in the usual format (e.g. `text/c-src`).
- * @returns the normalized MIME type (e.g. `text-c-src`).
- */
-export function normalizeMimeTypeForCKEditor(mimeType: string) {
-    return mimeType.toLowerCase().replace(/[\W_]+/g, "-");
-}
-
 let byHighlightJsNameMappings: Record<string, MimeTypeDefinition> | null = null;
 
 /**

packages/ckeditor5/src/plugins/syntax_highlighting/index.ts

@@ -173,14 +173,6 @@ export default class SyntaxHighlighting extends Plugin {
             return;
         }
 
-        // Find the corresponding language for the given mimetype.
-        const highlightJsLanguage = this.config.mapLanguageName(mimeType);
-
-        if (mimeType !== this.config.defaultMimeType && !highlightJsLanguage) {
-            console.warn(`Unsupported highlight.js for mime type ${mimeType}.`);
-            return;
-        }
-
         // Don't highlight if the code is too big, as the typing performance will be highly degraded.
         if (codeBlock.childCount >= HIGHLIGHT_MAX_BLOCK_COUNT) {
             return;
@@ -230,8 +222,13 @@ export default class SyntaxHighlighting extends Plugin {
         if (mimeType === this.config.defaultMimeType) {
             highlightRes = this.hljs.highlightAuto(text);
         } else {
-            highlightRes = this.hljs.highlight(text, { language: highlightJsLanguage });
+            highlightRes = this.hljs.highlight(text, { language: mimeType });
         }
+
+        if (!highlightRes) {
+            return;
+        }
+
         dbg("text\n" + text);
         dbg("html\n" + highlightRes.value);
 

packages/commons/src/lib/mime_type.ts

@@ -16,3 +16,14 @@ export interface MimeType extends MimeTypeDefinition {
      */
     enabled: boolean;
 }
+
+/**
+ * Given a MIME type in the usual format (e.g. `text/csrc`), it returns a MIME type that can be passed down to the CKEditor
+ * code plugin.
+ *
+ * @param mimeType The MIME type to normalize, in the usual format (e.g. `text/c-src`).
+ * @returns the normalized MIME type (e.g. `text-c-src`).
+ */
+export function normalizeMimeTypeForCKEditor(mimeType: string) {
+    return mimeType.toLowerCase().replace(/[\W_]+/g, "-");
+}

packages/highlightjs/src/index.ts

@@ -1,5 +1,5 @@
 import hljs from "../node_modules/highlight.js/es/core.js";
-import type { MimeType } from "@triliumnext/commons";
+import { normalizeMimeTypeForCKEditor, type MimeType } from "@triliumnext/commons";
 import definitions from "./syntax_highlighting.js";
 import { type HighlightOptions } from "highlight.js";
 
@@ -12,7 +12,7 @@ export async function ensureMimeTypes(mimeTypes: MimeType[]) {
             continue;
         }
 
-        const mime = mimeType.mime;
+        const mime = normalizeMimeTypeForCKEditor(mimeType.mime);
         if (registeredMimeTypes.has(mime)) {
             continue;
         }
@@ -25,7 +25,6 @@ export async function ensureMimeTypes(mimeTypes: MimeType[]) {
         }
 
         const language = (await loader).default;
-        console.info(`Registered highlighting for ${mime}.`);
         hljs.registerLanguage(mime, language);
     }
 }
@@ -36,7 +35,7 @@ export function highlight(code: string, options: HighlightOptions) {
     }
 
     if (!registeredMimeTypes.has(options.language)) {
-        console.warn(`Unable to find highlighting for ${code}.`);
+        console.warn(`Unable to find highlighting for ${options.language}.`);
         return null;
     }
 

packages/highlightjs/src/syntax_highlighting.ts

@@ -1,6 +1,9 @@
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 import type { LanguageFn } from "highlight.js";
 
-const byMimeType: Record<string, (Promise<{ default: LanguageFn}> | null)> = {
+type MimeRecord = Record<string, (Promise<{ default: LanguageFn}> | null)>;
+
+const byMimeType: MimeRecord = {
     "text/plain": import("highlight.js/lib/languages/plaintext"),
     "application/dart": import("highlight.js/lib/languages/dart"),
     "application/edn": null,
@@ -166,4 +169,10 @@ const byMimeType: Record<string, (Promise<{ default: LanguageFn}> | null)> = {
     "text/xml": import("highlight.js/lib/languages/xml"),
 }
 
-export default byMimeType;
+const normalizedByMimeType: MimeRecord = {};
+for (const [mimeType, loader] of Object.entries(byMimeType)) {
+    const normalizedMimeType = normalizeMimeTypeForCKEditor(mimeType);
+    normalizedByMimeType[normalizedMimeType] = loader;
+}
+
+export default normalizedByMimeType;