From 7b787fff59e1359c84e221602e593bf7bb957265 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 17 May 2025 10:31:31 +0300
Subject: [PATCH] feat(client): integrate katex

---
 apps/client/package.json                            |  1 +
 apps/client/src/services/content_renderer.ts        |  4 +---
 apps/client/src/services/library_loader.ts          |  1 -
 apps/client/src/services/math.ts                    |  5 +++++
 apps/client/src/types-lib.d.ts                      |  7 +++++++
 apps/client/src/types.d.ts                          |  9 ---------
 apps/client/src/widgets/dialogs/revisions.ts        |  4 +---
 apps/client/src/widgets/highlights_list.ts          |  3 +--
 apps/client/src/widgets/toc.ts                      | 13 ++++++-------
 .../src/widgets/type_widgets/editable_text.ts       |  4 +++-
 .../src/widgets/type_widgets/read_only_text.ts      |  4 +---
 apps/server/package.json                            |  3 +--
 pnpm-lock.yaml                                      |  6 +++---
 13 files changed, 30 insertions(+), 34 deletions(-)
 create mode 100644 apps/client/src/services/math.ts

diff --git a/apps/client/package.json b/apps/client/package.json
index 485e81e28..e10a4b77a 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -40,6 +40,7 @@
     "jquery-hotkeys": "0.2.2",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
+    "katex": "0.16.22",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts
index 619d2d7a6..11156ae7a 100644
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -1,7 +1,6 @@
 import renderService from "./render.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import libraryLoader from "./library_loader.js";
 import openService from "./open.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
@@ -16,6 +15,7 @@ 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 { renderMathInElement } from "./math.js";
 
 let idCounter = 1;
 
@@ -94,8 +94,6 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
 
         if ($renderedContent.find("span.math-tex").length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.KATEX);
-
             renderMathInElement($renderedContent[0], { trust: true });
         }
 
diff --git a/apps/client/src/services/library_loader.ts b/apps/client/src/services/library_loader.ts
index a5ad0e3fc..548afe912 100644
--- a/apps/client/src/services/library_loader.ts
+++ b/apps/client/src/services/library_loader.ts
@@ -121,6 +121,5 @@ export default {
     requireCss,
     requireLibrary,
     loadHighlightingTheme,
-    KATEX,
     HIGHLIGHT_JS
 };
diff --git a/apps/client/src/services/math.ts b/apps/client/src/services/math.ts
new file mode 100644
index 000000000..2a5fc45b2
--- /dev/null
+++ b/apps/client/src/services/math.ts
@@ -0,0 +1,5 @@
+import katex from "katex";
+import "katex/contrib/mhchem";
+import "katex/dist/katex.min.css";
+export { default as renderMathInElement } from "katex/contrib/auto-render";
+export default katex;
diff --git a/apps/client/src/types-lib.d.ts b/apps/client/src/types-lib.d.ts
index 57b810f76..a19bffa9d 100644
--- a/apps/client/src/types-lib.d.ts
+++ b/apps/client/src/types-lib.d.ts
@@ -24,3 +24,10 @@ declare module "draggabilly" {
 declare module "@mind-elixir/node-menu" {
     export default mindmap;
 }
+
+declare module "katex/contrib/auto-render" {
+    var renderMathInElement: (element: HTMLElement, options: {
+        trust: boolean;
+    }) => void;
+    export default renderMathInElement;
+}
diff --git a/apps/client/src/types.d.ts b/apps/client/src/types.d.ts
index 70e51aede..5fd57c1f8 100644
--- a/apps/client/src/types.d.ts
+++ b/apps/client/src/types.d.ts
@@ -131,15 +131,6 @@ declare global {
             language: string
         });
     };
-    var renderMathInElement: (element: HTMLElement, options: {
-        trust: boolean;
-    }) => void;
-
-    var katex: {
-        renderToString(text: string, opts: {
-            throwOnError: boolean
-        });
-    }
 
     /*
      * Panzoom
diff --git a/apps/client/src/widgets/dialogs/revisions.ts b/apps/client/src/widgets/dialogs/revisions.ts
index c97864e22..8083dd935 100644
--- a/apps/client/src/widgets/dialogs/revisions.ts
+++ b/apps/client/src/widgets/dialogs/revisions.ts
@@ -3,7 +3,6 @@ import utils from "../../services/utils.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import appContext from "../../components/app_context.js";
-import libraryLoader from "../../services/library_loader.js";
 import openService from "../../services/open.js";
 import protectedSessionHolder from "../../services/protected_session_holder.js";
 import BasicWidget from "../basic_widget.js";
@@ -12,6 +11,7 @@ import options from "../../services/options.js";
 import type FNote from "../../entities/fnote.js";
 import type { NoteType } from "../../entities/fnote.js";
 import { Dropdown, Modal } from "bootstrap";
+import { renderMathInElement } from "../../services/math.js";
 
 const TPL = /*html*/`
 <div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -315,8 +315,6 @@ export default class RevisionsDialog extends BasicWidget {
             this.$content.html(`<div class="ck-content">${fullRevision.content}</div>`);
 
             if (this.$content.find("span.math-tex").length > 0) {
-                await libraryLoader.requireLibrary(libraryLoader.KATEX);
-
                 renderMathInElement(this.$content[0], { trust: true });
             }
         } else if (revisionItem.type === "code") {
diff --git a/apps/client/src/widgets/highlights_list.ts b/apps/client/src/widgets/highlights_list.ts
index 8fc1ceb54..f37b82955 100644
--- a/apps/client/src/widgets/highlights_list.ts
+++ b/apps/client/src/widgets/highlights_list.ts
@@ -11,8 +11,8 @@ import RightPanelWidget from "./right_panel_widget.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
 import appContext, { type EventData } from "../components/app_context.js";
-import libraryLoader from "../services/library_loader.js";
 import type FNote from "../entities/fnote.js";
+import katex from "../services/math.js";
 
 const TPL = /*html*/`<div class="highlights-list-widget">
     <style>
@@ -175,7 +175,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
                 } catch (e) {
                     if (e instanceof ReferenceError && e.message.includes("katex is not defined")) {
                         // Load KaTeX if it is not already loaded
-                        await libraryLoader.requireLibrary(libraryLoader.KATEX);
                         try {
                             rendered = katex.renderToString(latexCode, {
                                 throwOnError: false
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index f88c3549f..b33cb2a9e 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -19,7 +19,7 @@ import RightPanelWidget from "./right_panel_widget.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
 import appContext, { type EventData } from "../components/app_context.js";
-import libraryLoader from "../services/library_loader.js";
+import katex from "../services/math.js";
 import type FNote from "../entities/fnote.js";
 
 const TPL = /*html*/`<div class="toc-widget">
@@ -59,7 +59,7 @@ const TPL = /*html*/`<div class="toc-widget">
             display: flex;
             position: relative;
             list-style: none;
-            align-items: center; 
+            align-items: center;
             padding-left: 7px;
             cursor: pointer;
             text-align: justify;
@@ -234,7 +234,6 @@ export default class TocWidget extends RightPanelWidget {
                 } catch (e) {
                     if (e instanceof ReferenceError && e.message.includes("katex is not defined")) {
                         // Load KaTeX if it is not already loaded
-                        await libraryLoader.requireLibrary(libraryLoader.KATEX);
                         try {
                             rendered = katex.renderToString(latexCode, {
                                 throwOnError: false
@@ -277,13 +276,13 @@ export default class TocWidget extends RightPanelWidget {
         let curLevel = 2;
         const $ols = [$toc];
         let $previousLi: JQuery<HTMLElement> | undefined;
-        
+
         if (!(this.noteContext?.viewScope?.tocCollapsedHeadings instanceof Set)) {
             this.noteContext!.viewScope!.tocCollapsedHeadings = new Set<string>();
         }
         const tocCollapsedHeadings = this.noteContext!.viewScope!.tocCollapsedHeadings as Set<string>;
         const validHeadingKeys = new Set<string>(); // Used to clean up obsolete entries in tocCollapsedHeadings
-        
+
         let headingCount = 0;
         for (let m = null, headingIndex = 0; (m = headingTagsRegex.exec(html)) !== null; headingIndex++) {
             //
@@ -301,7 +300,7 @@ export default class TocWidget extends RightPanelWidget {
                     if ($previousLi) {
                         const headingKey = `h${newLevel}_${headingIndex}_${$previousLi?.text().trim()}`;
                         this.setupCollapsibleHeading($ol, $previousLi, headingKey, tocCollapsedHeadings, validHeadingKeys);
-                    }                    
+                    }
                 }
             } else if (levelDelta < 0) {
                 // Close as many lists as curLevel - newLevel
@@ -406,7 +405,7 @@ export default class TocWidget extends RightPanelWidget {
                 const willCollapse  = !$previousLi.hasClass("collapsed");
                 $previousLi.addClass("animating");
 
-                if (willCollapse) { // Collapse 
+                if (willCollapse) { // Collapse
                     $ol.css("maxHeight", `${$ol.prop("scrollHeight")}px`);
                     requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
index e1faac24f..d4537815d 100644
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets/editable_text.ts
@@ -310,7 +310,9 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
             math: {
                 engine: "katex",
                 outputType: "span", // or script
-                lazyLoad: async () => await libraryLoader.requireLibrary(libraryLoader.KATEX),
+                lazyLoad: async () => {
+                    (window as any).katex = (await import("../../services/math.js")).default
+                },
                 forceOutputType: false, // forces output to use outputType
                 enablePreview: true // Enable preview view
             },
diff --git a/apps/client/src/widgets/type_widgets/read_only_text.ts b/apps/client/src/widgets/type_widgets/read_only_text.ts
index 9e3daa084..55d45a5ae 100644
--- a/apps/client/src/widgets/type_widgets/read_only_text.ts
+++ b/apps/client/src/widgets/type_widgets/read_only_text.ts
@@ -1,11 +1,11 @@
 import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
-import libraryLoader from "../../services/library_loader.js";
 import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
 import type FNote from "../../entities/fnote.js";
 import type { CommandListenerData, EventData } from "../../components/app_context.js";
 import { getLocaleById } from "../../services/i18n.js";
 import appContext from "../../components/app_context.js";
 import { getMermaidConfig } from "../../services/mermaid.js";
+import { renderMathInElement } from "../../services/math.js";
 
 const TPL = /*html*/`
 <div class="note-detail-readonly-text note-detail-printable" tabindex="100">
@@ -121,8 +121,6 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
         });
 
         if (this.$content.find("span.math-tex").length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.KATEX);
-
             renderMathInElement(this.$content[0], { trust: true });
         }
 
diff --git a/apps/server/package.json b/apps/server/package.json
index 8a60d6fa6..5895621f6 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -42,8 +42,7 @@
     "@types/ws": "8.18.1",
     "@types/xml2js": "0.4.14",
     "express-http-proxy": "2.1.1",
-    "jquery": "3.7.1",
-    "katex": "0.16.22",
+    "jquery": "3.7.1",    
     "@anthropic-ai/sdk": "0.51.0",
     "@braintree/sanitize-url": "7.1.1",
     "@triliumnext/commons": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61d5fb7d3..78b1cad4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -257,6 +257,9 @@ importers:
       jsplumb:
         specifier: 2.15.6
         version: 2.15.6
+      katex:
+        specifier: 0.16.22
+        version: 0.16.22
       knockout:
         specifier: 3.5.1
         version: 3.5.1
@@ -725,9 +728,6 @@ importers:
       jsdom:
         specifier: 26.1.0
         version: 26.1.0(bufferutil@4.0.9)(utf-8-validate@6.0.5)
-      katex:
-        specifier: 0.16.22
-        version: 0.16.22
       marked:
         specifier: 15.0.11
         version: 15.0.11