fix: 🐛 fix mark.js load error

package-lock.json

@@ -182,6 +182,7 @@
         "rimraf": "6.0.1",
         "sass": "1.86.0",
         "sass-loader": "16.0.5",
+        "script-loader": "0.7.2",
         "split.js": "1.6.5",
         "supertest": "7.1.0",
         "svg-pan-zoom": "3.6.2",
@@ -18035,6 +18036,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==",
+      "dev": true
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -19096,6 +19103,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/script-loader": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
+      "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "raw-loader": "~0.5.1"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",

package.json

@@ -238,6 +238,7 @@
     "rimraf": "6.0.1",
     "sass": "1.86.0",
     "sass-loader": "16.0.5",
+    "script-loader": "0.7.2",
     "split.js": "1.6.5",
     "supertest": "7.1.0",
     "svg-pan-zoom": "3.6.2",

src/public/app/widgets/find_in_html.ts

@@ -5,8 +5,6 @@ import utils from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import type FindWidget from "./find.js";
 import type { FindResult } from "./find.js";
-import 'mark.js';
-import 'mark.js/dist/jquery.mark.es6.min.js';
 
 const FIND_RESULT_SELECTED_CSS_CLASSNAME = "ck-find-result_selected";
 const FIND_RESULT_CSS_CLASSNAME = "ck-find-result";
@@ -24,6 +22,8 @@ export default class FindInHtml {
     }
 
     async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
+        await import("script-loader!mark.js/dist/jquery.mark.min.js");
+
         const $content = await this.parent?.noteContext?.getContentElement();
 
         const wholeWordChar = wholeWord ? "\\b" : "";

src/public/app/widgets/view_widgets/list_or_grid_view.ts

@@ -6,8 +6,6 @@ import treeService from "../../services/tree.js";
 import utils from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
 import ViewMode, { type ViewModeArgs } from "./view_mode.js";
-import 'mark.js';
-import 'mark.js/dist/jquery.mark.es6.min.js';
 
 const TPL = `
 <div class="note-list">
@@ -217,6 +215,8 @@ class ListOrGridView extends ViewMode {
 
         const highlightedTokens = this.parentNote.highlightedTokens || [];
         if (highlightedTokens.length > 0) {
+            await import("script-loader!mark.js/dist/jquery.mark.min.js");
+
             const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
 
             this.highlightRegex = new RegExp(regex, "gi");
@@ -268,12 +268,12 @@ class ListOrGridView extends ViewMode {
                     i === this.page
                         ? $("<span>").text(i).css("text-decoration", "underline").css("font-weight", "bold")
                         : $('<a href="javascript:">')
-                              .text(i)
-                              .attr("title", `Page of ${startIndex} - ${endIndex}`)
-                              .on("click", () => {
-                                  this.page = i;
-                                  this.renderList();
-                              }),
+                            .text(i)
+                            .attr("title", `Page of ${startIndex} - ${endIndex}`)
+                            .on("click", () => {
+                                this.page = i;
+                                this.renderList();
+                            }),
                     " &nbsp; "
                 );
             } else if (lastPrinted) {

src/types.d.ts

@@ -30,3 +30,5 @@ declare module "is-animated" {
     function isAnimated(buffer: Buffer): boolean;
     export default isAnimated;
 }
+
+declare module "script-loader!mark.js/dist/jquery.mark.min.js";