Merge branch 'develop' into feature/MFA

src/public/app/widgets/buttons/calendar.ts

@@ -1,5 +1,4 @@
 import { t } from "../../services/i18n.js";
-import libraryLoader from "../../services/library_loader.js";
 import utils from "../../services/utils.js";
 import dateNoteService from "../../services/date_notes.js";
 import server from "../../services/server.js";
@@ -9,6 +8,7 @@ import toastService from "../../services/toast.js";
 import options from "../../services/options.js";
 import { Dropdown } from "bootstrap";
 import type { EventData } from "../../components/app_context.js";
+import "../../../stylesheets/calendar.css";
 
 const MONTHS = [
     t("calendar.january"),
@@ -188,7 +188,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
     }
 
     async dropdownShown() {
-        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
         this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
     }
 

src/public/app/widgets/find_in_html.ts

@@ -1,7 +1,6 @@
 // ck-find-result and ck-find-result_selected are the styles ck-editor
 // uses for highlighting matches, use the same one on CodeMirror
 // for consistency
-import libraryLoader from "../services/library_loader.js";
 import utils from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import type FindWidget from "./find.js";
@@ -23,7 +22,7 @@ export default class FindInHtml {
     }
 
     async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
-        await libraryLoader.requireLibrary(libraryLoader.MARKJS);
+        await import("script-loader!mark.js/dist/jquery.mark.min.js");
 
         const $content = await this.parent?.noteContext?.getContentElement();
 

src/public/app/widgets/geo_map.ts

@@ -1,5 +1,6 @@
 import type { Map } from "leaflet";
-import library_loader from "../services/library_loader.js";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const TPL = `\
@@ -21,7 +22,7 @@ const TPL = `\
     <div class="geo-map-container"></div>
 </div>`;
 
-export type Leaflet = typeof import("leaflet");
+export type Leaflet = typeof L;
 export type InitCallback = (L: Leaflet) => void;
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
@@ -40,23 +41,18 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
 
         this.$container = this.$widget.find(".geo-map-container");
 
-        library_loader.requireLibrary(library_loader.LEAFLET).then(async () => {
-            const L = (await import("leaflet")).default;
-
-            const map = L.map(this.$container[0], {
-                worldCopyJump: true
-            });
-
-            this.map = map;
-            if (this.initCallback) {
-                this.initCallback(L);
-            }
-
-            L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-                detectRetina: true
-            }).addTo(map);
+        const map = L.map(this.$container[0], {
+            worldCopyJump: true
         });
-    }
 
+        this.map = map;
+        if (this.initCallback) {
+            this.initCallback(L);
+        }
+
+        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            detectRetina: true
+        }).addTo(map);
+    }
 }

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,19 @@ 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")}`, {
-                maxScale: 50,
-                speed: 1.3,
-                zoomOnClick: false
-            });
-        });
+        const initZoom = async () => {
+            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
+                    maxScale: 50,
+                    speed: 1.3,
+                    zoomOnClick: false
+                });
+            } else {
+                requestAnimationFrame(initZoom);
+            }
+        };
+        initZoom();
 
         imageContextMenuService.setupContextMenu(this.$imageView);
 

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

@@ -2,7 +2,6 @@ import linkService from "../../services/link.js";
 import contentRenderer from "../../services/content_renderer.js";
 import froca from "../../services/froca.js";
 import attributeRenderer from "../../services/attribute_renderer.js";
-import libraryLoader from "../../services/library_loader.js";
 import treeService from "../../services/tree.js";
 import utils from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
@@ -216,7 +215,7 @@ class ListOrGridView extends ViewMode {
 
         const highlightedTokens = this.parentNote.highlightedTokens || [];
         if (highlightedTokens.length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.MARKJS);
+            await import("script-loader!mark.js/dist/jquery.mark.min.js");
 
             const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
 
@@ -269,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) {