fix(client/vite): highlight.js not playing well with ESM-native

.vscode/extensions.json

@@ -9,6 +9,7 @@
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "aaron-bond.better-comments"
   ]
 }

apps/client/package.json

@@ -18,7 +18,6 @@
     "@fullcalendar/list": "6.1.17",
     "@fullcalendar/multimonth": "6.1.17",
     "@fullcalendar/timegrid": "6.1.17",
-    "@highlightjs/cdn-assets": "11.11.1",
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.5",
     "@popperjs/core": "2.11.8",

packages/highlightjs/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@exercism/highlightjs-gdscript": "0.0.1",
     "@triliumnext/commons": "workspace:*",
-    "highlight.js": "11.11.1",
+    "@highlightjs/cdn-assets": "11.11.1",
     "highlightjs-cobol": "0.3.3",
     "highlightjs-cypher": "1.2.0"
   }

packages/highlightjs/src/index.ts

@@ -1,4 +1,4 @@
-import hljs from "../node_modules/highlight.js/es/core.js";
+import hljs from "@highlightjs/cdn-assets/es/core.js";
 import { normalizeMimeTypeForCKEditor, type MimeType } from "@triliumnext/commons";
 import syntaxDefinitions from "./syntax_highlighting.js";
 import { type Theme } from "./themes.js";

packages/highlightjs/src/syntax_highlighting.ts

@@ -1,5 +1,5 @@
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import type { LanguageFn } from "highlight.js";
+import type { LanguageFn } from "@highlightjs/cdn-assets/es/core.js";
 
 type MimeRecord = Record<string, (() => Promise<{ default: LanguageFn}>) | null>;
 

packages/highlightjs/src/themes.ts

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

packages/highlightjs/src/types-highlight.d.ts

@@ -0,0 +1,279 @@
+/**
+ * ! Keep in sync with https://raw.githubusercontent.com/highlightjs/highlight.js/refs/heads/main/types/index.d.ts.
+ * ? Once highlight.js releases a new major version, it should include ESM-native builds. See https://github.com/highlightjs/highlight.js/issues/4116 for more info.
+ */
+
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-use-before-define */
+// For TS consumers who use Node and don't have dom in their tsconfig lib, import the necessary types here.
+/// <reference lib="dom" />
+
+declare module 'highlight.js/private' {
+    import { CompiledMode, Mode, Language } from "highlight.js";
+
+    type MatchType = "begin" | "end" | "illegal"
+    type EnhancedMatch = RegExpMatchArray & {rule: CompiledMode, type: MatchType}
+    type AnnotatedError = Error & {mode?: Mode | Language, languageName?: string, badRule?: Mode}
+
+    type KeywordData = [string, number];
+    type KeywordDict = Record<string, KeywordData>
+}
+declare module '@highlightjs/cdn-assets/es/core.js' {
+
+    import { KeywordDict } from "highlight.js/private";
+
+    export type HLJSApi = PublicApi & ModesAPI
+
+    export interface VuePlugin {
+        install: (vue: any) => void
+    }
+
+    // perhaps make this an interface?
+    type RegexEitherOptions = {
+        capture?: boolean
+    }
+
+    interface PublicApi {
+        highlight(code: string, options: HighlightOptions): HighlightResult
+        /** @deprecated use `highlight(code, {language: ..., ignoreIllegals: ...})` */
+        highlight(languageName: string, code: string, ignoreIllegals?: boolean): HighlightResult
+        highlightAuto: (code: string, languageSubset?: string[]) => AutoHighlightResult
+        highlightBlock: (element: HTMLElement) => void
+        highlightElement: (element: HTMLElement) => void
+        configure: (options: Partial<HLJSOptions>) => void
+        initHighlighting: () => void
+        initHighlightingOnLoad: () => void
+        highlightAll: () => void
+        registerLanguage: (languageName: string, language: LanguageFn) => void
+        unregisterLanguage: (languageName: string) => void
+        listLanguages: () => string[]
+        registerAliases: (aliasList: string | string[], { languageName } : {languageName: string}) => void
+        getLanguage: (languageName: string) => Language | undefined
+        autoDetection: (languageName: string) => boolean
+        inherit: <T>(original: T, ...args: Record<string, any>[]) => T
+        addPlugin: (plugin: HLJSPlugin) => void
+        removePlugin: (plugin: HLJSPlugin) => void
+        debugMode: () => void
+        safeMode: () => void
+        versionString: string
+        vuePlugin: () => VuePlugin
+        regex: {
+            concat: (...args: (RegExp | string)[]) => string,
+            lookahead: (re: RegExp | string) => string,
+            either: (...args: (RegExp | string)[] | [...(RegExp | string)[], RegexEitherOptions]) => string,
+            optional: (re: RegExp | string) => string,
+            anyNumberOfTimes: (re: RegExp | string) => string
+        }
+        newInstance: () => HLJSApi
+    }
+
+    interface ModesAPI {
+        SHEBANG: (mode?: Partial<Mode> & {binary?: string | RegExp}) => Mode
+        BACKSLASH_ESCAPE: Mode
+        QUOTE_STRING_MODE: Mode
+        APOS_STRING_MODE: Mode
+        PHRASAL_WORDS_MODE: Mode
+        COMMENT: (begin: string | RegExp, end: string | RegExp, modeOpts?: Mode | {}) => Mode
+        C_LINE_COMMENT_MODE: Mode
+        C_BLOCK_COMMENT_MODE: Mode
+        HASH_COMMENT_MODE: Mode
+        NUMBER_MODE: Mode
+        C_NUMBER_MODE: Mode
+        BINARY_NUMBER_MODE: Mode
+        REGEXP_MODE: Mode
+        TITLE_MODE: Mode
+        UNDERSCORE_TITLE_MODE: Mode
+        METHOD_GUARD: Mode
+        END_SAME_AS_BEGIN: (mode: Mode) => Mode
+        // built in regex
+        IDENT_RE: string
+        UNDERSCORE_IDENT_RE: string
+        MATCH_NOTHING_RE: string
+        NUMBER_RE: string
+        C_NUMBER_RE: string
+        BINARY_NUMBER_RE: string
+        RE_STARTERS_RE: string
+    }
+
+    export type LanguageFn = (hljs: HLJSApi) => Language
+    export type CompilerExt = (mode: Mode, parent: Mode | Language | null) => void
+
+    export interface HighlightResult {
+        code?: string
+        relevance : number
+        value : string
+        language? : string
+        illegal : boolean
+        errorRaised? : Error
+        // * for auto-highlight
+        secondBest? : Omit<HighlightResult, 'second_best'>
+        // private
+        _illegalBy? : illegalData
+        _emitter : Emitter
+        _top? : Language | CompiledMode
+    }
+    export interface AutoHighlightResult extends HighlightResult {}
+
+    export interface illegalData {
+        message: string
+        context: string
+        index: number
+        resultSoFar : string
+        mode: CompiledMode
+    }
+
+    export type BeforeHighlightContext = {
+        code: string,
+        language: string,
+        result?: HighlightResult
+    }
+    export type PluginEvent = keyof HLJSPlugin;
+    export type HLJSPlugin = {
+        'after:highlight'?: (result: HighlightResult) => void,
+        'before:highlight'?: (context: BeforeHighlightContext) => void,
+        'after:highlightElement'?: (data: { el: Element, result: HighlightResult, text: string}) => void,
+        'before:highlightElement'?: (data: { el: Element, language: string}) => void,
+        // TODO: Old API, remove with v12
+        'after:highlightBlock'?: (data: { block: Element, result: HighlightResult, text: string}) => void,
+        'before:highlightBlock'?: (data: { block: Element, language: string}) => void,
+    }
+
+    interface EmitterConstructor {
+        new (opts: any): Emitter
+    }
+
+    export interface HighlightOptions {
+        language: string
+        ignoreIllegals?: boolean
+    }
+
+    export interface HLJSOptions {
+        noHighlightRe: RegExp
+        languageDetectRe: RegExp
+        classPrefix: string
+        cssSelector: string
+        languages?: string[]
+        __emitter: EmitterConstructor
+        ignoreUnescapedHTML?: boolean
+        throwUnescapedHTML?: boolean
+    }
+
+    export interface CallbackResponse {
+        data: Record<string, any>
+        ignoreMatch: () => void
+        isMatchIgnored: boolean
+    }
+
+    export type ModeCallback = (match: RegExpMatchArray, response: CallbackResponse) => void
+    export type Language = LanguageDetail & Partial<Mode>
+    export interface Mode extends ModeCallbacks, ModeDetails {}
+
+    export interface LanguageDetail {
+        name?: string
+        unicodeRegex?: boolean
+        rawDefinition?: () => Language
+        aliases?: string[]
+        disableAutodetect?: boolean
+        contains: (Mode)[]
+        case_insensitive?: boolean
+        keywords?: string | string[] | Record<string, string | string[] | RegExp>
+        isCompiled?: boolean,
+        exports?: any,
+        classNameAliases?: Record<string, string>
+        compilerExtensions?: CompilerExt[]
+        supersetOf?: string
+    }
+
+    // technically private, but exported for convenience as this has
+    // been a pretty stable API and is quite useful
+    export interface Emitter {
+        startScope(name: string): void
+        endScope(): void
+        addText(text: string): void
+        toHTML(): string
+        finalize(): void
+        __addSublanguage(emitter: Emitter, subLanguageName: string): void
+    }
+
+    export type HighlightedHTMLElement = HTMLElement & {result?: object, secondBest?: object, parentNode: HTMLElement}
+
+    /* modes */
+
+    interface ModeCallbacks {
+        "on:end"?: Function,
+        "on:begin"?: ModeCallback
+    }
+
+    export interface CompiledLanguage extends LanguageDetail, CompiledMode {
+        isCompiled: true
+        contains: CompiledMode[]
+        keywords: Record<string, any>
+    }
+
+    export type CompiledScope = Record<number, string> & {_emit?: Record<number, boolean>, _multi?: boolean, _wrap?: string};
+
+    export type CompiledMode = Omit<Mode, 'contains'> &
+        {
+            begin?: RegExp | string
+            end?: RegExp | string
+            scope?: string
+            contains: CompiledMode[]
+            keywords: KeywordDict
+            data: Record<string, any>
+            terminatorEnd: string
+            keywordPatternRe: RegExp
+            beginRe: RegExp
+            endRe: RegExp
+            illegalRe: RegExp
+            matcher: any
+            isCompiled: true
+            starts?: CompiledMode
+            parent?: CompiledMode
+            beginScope?: CompiledScope
+            endScope?: CompiledScope
+        }
+
+    interface ModeDetails {
+        begin?: RegExp | string | (RegExp | string)[]
+        match?: RegExp | string | (RegExp | string)[]
+        end?: RegExp | string | (RegExp | string)[]
+        // deprecated in favor of `scope`
+        className?: string
+        scope?: string | Record<number, string>
+        beginScope?: string | Record<number, string>
+        endScope?: string | Record<number, string>
+        contains?: ("self" | Mode)[]
+        endsParent?: boolean
+        endsWithParent?: boolean
+        endSameAsBegin?: boolean
+        skip?: boolean
+        excludeBegin?: boolean
+        excludeEnd?: boolean
+        returnBegin?: boolean
+        returnEnd?: boolean
+        __beforeBegin?: Function
+        parent?: Mode
+        starts?:Mode
+        lexemes?: string | RegExp
+        keywords?: string | string[] | Record<string, string | string[]>
+        beginKeywords?: string
+        relevance?: number
+        illegal?: string | RegExp | Array<string | RegExp>
+        variants?: Mode[]
+        cachedVariants?: Mode[]
+        // parsed
+        subLanguage?: string | string[]
+        isCompiled?: boolean
+        label?: string
+    }
+
+    const hljs : HLJSApi;
+    export default hljs;
+
+}
+
+declare module 'highlight.js/lib/languages/*' {
+    import { LanguageFn } from "highlight.js";
+    const defineLanguage: LanguageFn;
+    export default defineLanguage;
+}

pnpm-lock.yaml

@@ -191,9 +191,6 @@ importers:
       '@fullcalendar/timegrid':
         specifier: 6.1.17
         version: 6.1.17(@fullcalendar/core@6.1.17)
-      '@highlightjs/cdn-assets':
-        specifier: 11.11.1
-        version: 11.11.1
       '@mermaid-js/layout-elk':
         specifier: 0.1.7
         version: 0.1.7(mermaid@11.6.0)
@@ -1286,12 +1283,12 @@ importers:
       '@exercism/highlightjs-gdscript':
         specifier: 0.0.1
         version: 0.0.1
+      '@highlightjs/cdn-assets':
+        specifier: 11.11.1
+        version: 11.11.1
       '@triliumnext/commons':
         specifier: workspace:*
         version: link:../commons
-      highlight.js:
-        specifier: 11.11.1
-        version: 11.11.1
       highlightjs-cobol:
         specifier: 0.3.3
         version: 0.3.3
@@ -3384,6 +3381,10 @@ packages:
   '@hapi/topo@5.1.0':
     resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
 
+  '@highlightjs/cdn-assets@11.11.1':
+    resolution: {integrity: sha512-VEPdHzwelZ12hEX18BHduqxMZGolcUsrbeokHYxOUIm8X2+M7nx5QPtPeQgRxR9XjhdLv4/7DD5BWOlSrJ3k7Q==}
+    engines: {node: '>=12.0.0'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -8769,10 +8770,6 @@ packages:
     resolution: {integrity: sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==}
     engines: {node: '>=18.0.0'}
 
-  highlight.js@11.11.1:
-    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
-    engines: {node: '>=12.0.0'}
-
   highlightjs-cobol@0.3.3:
     resolution: {integrity: sha512-sdEHzA1UQM9Fjx6wMkWLq8VN70SHascq84aFJJzenOF2TwHE4nwtKCbhHGzOWQKN0AUnn0yAHfXQqaH8i2C8YA==}
 
@@ -17068,6 +17065,8 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
+  '@highlightjs/cdn-assets@11.11.1': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -23735,8 +23734,6 @@ snapshots:
 
   helmet@8.1.0: {}
 
-  highlight.js@11.11.1: {}
-
   highlightjs-cobol@0.3.3:
     dependencies:
       minimist: 1.2.8