chore: 🤖 move wheel zoom to webpack

package-lock.json

@@ -91,7 +91,6 @@
         "tmp": "0.2.3",
         "turndown": "7.2.0",
         "unescape": "1.0.1",
-        "vanilla-js-wheel-zoom": "9.0.4",
         "ws": "8.18.1",
         "xml2js": "0.6.2",
         "yauzl": "3.2.0"
@@ -192,6 +191,7 @@
         "typedoc": "0.28.1",
         "typescript": "5.8.2",
         "typescript-eslint": "8.28.0",
+        "vanilla-js-wheel-zoom": "9.0.4",
         "vitest": "3.0.9",
         "webpack": "5.98.0",
         "webpack-cli": "6.0.1",
@@ -21207,6 +21207,7 @@
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/vanilla-js-wheel-zoom/-/vanilla-js-wheel-zoom-9.0.4.tgz",
       "integrity": "sha512-OjmS9ihEKBCRw2OQ7IiIdQGXdC5gTEEmtcAWZcPeNAJaYiS61KCd02Z72YMtIoXLGN5TZP+wliBMylLAsr6wow==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/vary": {

package.json

@@ -150,7 +150,6 @@
     "tmp": "0.2.3",
     "turndown": "7.2.0",
     "unescape": "1.0.1",
-    "vanilla-js-wheel-zoom": "9.0.4",
     "ws": "8.18.1",
     "xml2js": "0.6.2",
     "yauzl": "3.2.0"
@@ -248,6 +247,7 @@
     "typedoc": "0.28.1",
     "typescript": "5.8.2",
     "typescript-eslint": "8.28.0",
+    "vanilla-js-wheel-zoom": "9.0.4",
     "vitest": "3.0.9",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",

src/public/app/services/content_renderer.ts

@@ -15,7 +15,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "i18next";
-import type { Mermaid } from "mermaid";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 let idCounter = 1;
 
@@ -150,13 +150,16 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     $renderedContent.append($img);
 
     if (options.imageHasZoom) {
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
-            WZoom.create(`#${$img.attr("id")}`, {
+        setTimeout(() => {
+            const element = document.querySelector(`#${$img.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${$img.attr("id")}`, {
                     maxScale: 50,
                     speed: 1.3,
                     zoomOnClick: false
                 });
-        });
+            }
+        }, 0);
     }
 
     imageContextMenuService.setupContextMenu($img);

src/public/app/services/library_loader.ts

@@ -51,10 +51,6 @@ const KATEX: Library = {
     css: ["node_modules/katex/dist/katex.min.css"]
 };
 
-const WHEEL_ZOOM: Library = {
-    js: ["node_modules/vanilla-js-wheel-zoom/dist/wheel-zoom.min.js"]
-};
-
 const MARKJS: Library = {
     js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"]
 };
@@ -176,7 +172,6 @@ export default {
     CODE_MIRROR,
     CALENDAR_WIDGET,
     KATEX,
-    WHEEL_ZOOM,
     MARKJS,
     HIGHLIGHT_JS,
     LEAFLET

src/public/app/types.d.ts

@@ -132,13 +132,6 @@ declare global {
     var renderMathInElement: (element: HTMLElement, options: {
         trust: boolean;
     }) => void;
-    var WZoom = {
-        create(selector: string, opts: {
-            maxScale: number;
-            speed: number;
-            zoomOnClick: boolean
-        })
-    };
     interface CKCodeBlockLanguage {
         language: string;
         label: string;

src/public/app/widgets/type_widgets/image.ts

@@ -1,10 +1,10 @@
 import utils from "../../services/utils.js";
 import TypeWidget from "./type_widget.js";
-import libraryLoader from "../../services/library_loader.js";
 import imageContextMenuService from "../../menus/image_context_menu.js";
 import imageService from "../../services/image.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
@@ -54,13 +54,16 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
         this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
 
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
-            WZoom.create(`#${this.$imageView.attr("id")}`, {
+        setTimeout(() => {
+            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
                     maxScale: 50,
                     speed: 1.3,
                     zoomOnClick: false
                 });
-        });
+            }
+        }, 0);
 
         imageContextMenuService.setupContextMenu(this.$imageView);