From 94bc550c67bf55f6fe568833c93f9fb70932d577 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:16:33 +0100 Subject: [PATCH 1/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20move=20wheel=20zoom?= =?UTF-8?q?=20to=20webpack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 3 ++- package.json | 2 +- src/public/app/services/content_renderer.ts | 19 +++++++++++-------- src/public/app/services/library_loader.ts | 5 ----- src/public/app/types.d.ts | 7 ------- src/public/app/widgets/type_widgets/image.ts | 19 +++++++++++-------- 6 files changed, 25 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d6021055..fef3349ec 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 7ef7a8055..bb0c7c357 100644 --- a/package.json +++ b/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", diff --git a/src/public/app/services/content_renderer.ts b/src/public/app/services/content_renderer.ts index a1999cffe..7afdc76d0 100644 --- a/src/public/app/services/content_renderer.ts +++ b/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 { - WZoom.create(`#${$img.attr("id")}`, { - maxScale: 50, - speed: 1.3, - zoomOnClick: false - }); - }); + 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); diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index 129dca688..babd4a14d 100644 --- a/src/public/app/services/library_loader.ts +++ b/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 diff --git a/src/public/app/types.d.ts b/src/public/app/types.d.ts index da0ad927a..0228c3756 100644 --- a/src/public/app/types.d.ts +++ b/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; diff --git a/src/public/app/widgets/type_widgets/image.ts b/src/public/app/widgets/type_widgets/image.ts index e235abaef..a14af8af8 100644 --- a/src/public/app/widgets/type_widgets/image.ts +++ b/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 = `
@@ -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")}`, { - maxScale: 50, - speed: 1.3, - zoomOnClick: false - }); - }); + 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); From 2476e0b5040e599ac4ee18f622c055cb4c0549f2 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:23:06 +0100 Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20move=20mark.js=20to?= =?UTF-8?q?=20webpack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 3 ++- package.json | 2 +- src/public/app/services/library_loader.ts | 5 ----- src/public/app/widgets/find_in_html.ts | 4 +--- src/public/app/widgets/view_widgets/list_or_grid_view.ts | 4 +--- 5 files changed, 5 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index fef3349ec..4552087b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,7 +66,6 @@ "katex": "0.16.21", "leaflet": "1.9.4", "leaflet-gpx": "2.1.2", - "mark.js": "8.11.1", "marked": "15.0.7", "mermaid": "11.6.0", "mime-types": "2.1.35", @@ -173,6 +172,7 @@ "jsdoc": "4.0.4", "knockout": "3.5.1", "lorem-ipsum": "2.0.8", + "mark.js": "8.11.1", "mind-elixir": "4.4.3", "mini-css-extract-plugin": "2.9.2", "nodemon": "3.1.9", @@ -15066,6 +15066,7 @@ "version": "8.11.1", "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==", + "dev": true, "license": "MIT" }, "node_modules/markdown-it": { diff --git a/package.json b/package.json index bb0c7c357..b16a233a0 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,6 @@ "katex": "0.16.21", "leaflet": "1.9.4", "leaflet-gpx": "2.1.2", - "mark.js": "8.11.1", "marked": "15.0.7", "mermaid": "11.6.0", "mime-types": "2.1.35", @@ -229,6 +228,7 @@ "jsdoc": "4.0.4", "knockout": "3.5.1", "lorem-ipsum": "2.0.8", + "mark.js": "8.11.1", "mind-elixir": "4.4.3", "mini-css-extract-plugin": "2.9.2", "nodemon": "3.1.9", diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index babd4a14d..3f8d95c88 100644 --- a/src/public/app/services/library_loader.ts +++ b/src/public/app/services/library_loader.ts @@ -51,10 +51,6 @@ const KATEX: Library = { css: ["node_modules/katex/dist/katex.min.css"] }; -const MARKJS: Library = { - js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"] -}; - const HIGHLIGHT_JS: Library = { js: () => { const mimeTypes = mimeTypesService.getMimeTypes(); @@ -172,7 +168,6 @@ export default { CODE_MIRROR, CALENDAR_WIDGET, KATEX, - MARKJS, HIGHLIGHT_JS, LEAFLET }; diff --git a/src/public/app/widgets/find_in_html.ts b/src/public/app/widgets/find_in_html.ts index d1e9a93db..f64d403ff 100644 --- a/src/public/app/widgets/find_in_html.ts +++ b/src/public/app/widgets/find_in_html.ts @@ -1,11 +1,11 @@ // 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"; import type { FindResult } from "./find.js"; +import 'mark.js'; const FIND_RESULT_SELECTED_CSS_CLASSNAME = "ck-find-result_selected"; const FIND_RESULT_CSS_CLASSNAME = "ck-find-result"; @@ -23,8 +23,6 @@ export default class FindInHtml { } async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) { - await libraryLoader.requireLibrary(libraryLoader.MARKJS); - const $content = await this.parent?.noteContext?.getContentElement(); const wholeWordChar = wholeWord ? "\\b" : ""; diff --git a/src/public/app/widgets/view_widgets/list_or_grid_view.ts b/src/public/app/widgets/view_widgets/list_or_grid_view.ts index 56ee00b86..8760dc4ca 100644 --- a/src/public/app/widgets/view_widgets/list_or_grid_view.ts +++ b/src/public/app/widgets/view_widgets/list_or_grid_view.ts @@ -2,11 +2,11 @@ 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"; import ViewMode, { type ViewModeArgs } from "./view_mode.js"; +import 'mark.js'; const TPL = `
@@ -216,8 +216,6 @@ class ListOrGridView extends ViewMode { const highlightedTokens = this.parentNote.highlightedTokens || []; if (highlightedTokens.length > 0) { - await libraryLoader.requireLibrary(libraryLoader.MARKJS); - const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|"); this.highlightRegex = new RegExp(regex, "gi"); From 3dc7636910062ee175e372e2fab4d02782790312 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:40:48 +0100 Subject: [PATCH 3/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20wheelzoom?= =?UTF-8?q?=20from=20asset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/assets.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/assets.ts b/src/routes/assets.ts index f5cf33612..59fe23dbc 100644 --- a/src/routes/assets.ts +++ b/src/routes/assets.ts @@ -73,8 +73,6 @@ async function register(app: express.Application) { app.use(`/${assetPath}/node_modules/eslint/bin/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/eslint/bin/"))); - app.use(`/${assetPath}/node_modules/vanilla-js-wheel-zoom/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/vanilla-js-wheel-zoom/dist/"))); - app.use(`/${assetPath}/node_modules/mark.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mark.js/dist/"))); // Deprecated, https://www.npmjs.com/package/autocomplete.js?activeTab=readme From b30035834af51eec084a45383410f23cc29f3337 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:43:11 +0100 Subject: [PATCH 4/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20mark.js=20?= =?UTF-8?q?from=20asset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/public/app/widgets/find_in_html.ts | 1 + src/public/app/widgets/view_widgets/list_or_grid_view.ts | 1 + src/routes/assets.ts | 2 -- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/public/app/widgets/find_in_html.ts b/src/public/app/widgets/find_in_html.ts index f64d403ff..7b74e3792 100644 --- a/src/public/app/widgets/find_in_html.ts +++ b/src/public/app/widgets/find_in_html.ts @@ -6,6 +6,7 @@ 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"; diff --git a/src/public/app/widgets/view_widgets/list_or_grid_view.ts b/src/public/app/widgets/view_widgets/list_or_grid_view.ts index 8760dc4ca..53b7204c2 100644 --- a/src/public/app/widgets/view_widgets/list_or_grid_view.ts +++ b/src/public/app/widgets/view_widgets/list_or_grid_view.ts @@ -7,6 +7,7 @@ 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 = `
diff --git a/src/routes/assets.ts b/src/routes/assets.ts index 59fe23dbc..6117d4bab 100644 --- a/src/routes/assets.ts +++ b/src/routes/assets.ts @@ -73,8 +73,6 @@ async function register(app: express.Application) { app.use(`/${assetPath}/node_modules/eslint/bin/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/eslint/bin/"))); - app.use(`/${assetPath}/node_modules/mark.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mark.js/dist/"))); - // Deprecated, https://www.npmjs.com/package/autocomplete.js?activeTab=readme app.use(`/${assetPath}/node_modules/autocomplete.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/autocomplete.js/dist/"))); From accf24517914f235c68198b936ca9bc53678d706 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:58:06 +0100 Subject: [PATCH 5/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20leaflet=20?= =?UTF-8?q?css=20from=20library=5Floader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/public/app/services/library_loader.ts | 7 +---- src/public/app/widgets/geo_map.ts | 34 ++++++++++------------- 2 files changed, 16 insertions(+), 25 deletions(-) diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index 3f8d95c88..04cfa4ff6 100644 --- a/src/public/app/services/library_loader.ts +++ b/src/public/app/services/library_loader.ts @@ -77,10 +77,6 @@ const HIGHLIGHT_JS: Library = { } }; -const LEAFLET: Library = { - css: ["node_modules/leaflet/dist/leaflet.css"] -}; - async function requireLibrary(library: Library) { if (library.css) { library.css.map((cssUrl) => requireCss(cssUrl)); @@ -168,6 +164,5 @@ export default { CODE_MIRROR, CALENDAR_WIDGET, KATEX, - HIGHLIGHT_JS, - LEAFLET + HIGHLIGHT_JS }; diff --git a/src/public/app/widgets/geo_map.ts b/src/public/app/widgets/geo_map.ts index fabefcdc9..699d71a51 100644 --- a/src/public/app/widgets/geo_map.ts +++ b/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 = `\
`; -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: '© OpenStreetMap 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: '© OpenStreetMap contributors', + detectRetina: true + }).addTo(map); + } } From 4a2c0759359817ee239d19a94869cae3d6c4a6d6 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 17:08:34 +0100 Subject: [PATCH 6/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20calendar?= =?UTF-8?q?=20css=20from=20library=5Floader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/public/app/services/library_loader.ts | 5 ----- src/public/app/widgets/buttons/calendar.ts | 3 +-- webpack.config.ts | 8 +++++++- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index 04cfa4ff6..cbc8771cb 100644 --- a/src/public/app/services/library_loader.ts +++ b/src/public/app/services/library_loader.ts @@ -42,10 +42,6 @@ const CODE_MIRROR: Library = { css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"] }; -const CALENDAR_WIDGET: Library = { - css: ["stylesheets/calendar.css"] -}; - const KATEX: Library = { js: ["node_modules/katex/dist/katex.min.js", "node_modules/katex/dist/contrib/mhchem.min.js", "node_modules/katex/dist/contrib/auto-render.min.js"], css: ["node_modules/katex/dist/katex.min.css"] @@ -162,7 +158,6 @@ export default { loadHighlightingTheme, CKEDITOR, CODE_MIRROR, - CALENDAR_WIDGET, KATEX, HIGHLIGHT_JS }; diff --git a/src/public/app/widgets/buttons/calendar.ts b/src/public/app/widgets/buttons/calendar.ts index 131d176bf..11e9092bc 100644 --- a/src/public/app/widgets/buttons/calendar.ts +++ b/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); } diff --git a/webpack.config.ts b/webpack.config.ts index f51df96ab..2258bc580 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -56,7 +56,10 @@ const config: Configuration = { loader: miniCssExtractPlugin.loader }, { - loader: "css-loader" + loader: "css-loader", + options: { + esModule: true + } }, { loader: "postcss-loader", @@ -99,6 +102,9 @@ const config: Configuration = { ".js": [".js", ".ts"], ".cjs": [".cjs", ".cts"], ".mjs": [".mjs", ".mts"] + }, + alias: { + stylesheets: path.resolve(rootDir, "src/public/stylesheets") } }, devtool: "nosources-source-map", From df6c6647c70b8ed00b373cfa33fac012b76385e1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Mar 2025 22:40:19 +0200 Subject: [PATCH 7/9] chore(deps): remove leaflet from dist --- src/routes/assets.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/assets.ts b/src/routes/assets.ts index 6117d4bab..70cd4de8f 100644 --- a/src/routes/assets.ts +++ b/src/routes/assets.ts @@ -87,8 +87,6 @@ async function register(app: express.Application) { app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/codemirror/keymap/"))); app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/"))); - - app.use(`/${assetPath}/node_modules/leaflet/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/leaflet/dist/"))); } export default { From 47a363be0f9443576d05a6f5fc3cbad429f60889 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 22:28:09 +0100 Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20improve=20image?= =?UTF-8?q?=20zoom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/public/app/services/content_renderer.ts | 7 +++++-- src/public/app/widgets/type_widgets/image.ts | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/public/app/services/content_renderer.ts b/src/public/app/services/content_renderer.ts index 7afdc76d0..0bf7bca28 100644 --- a/src/public/app/services/content_renderer.ts +++ b/src/public/app/services/content_renderer.ts @@ -150,7 +150,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery { + const initZoom = async () => { const element = document.querySelector(`#${$img.attr("id")}`); if (element) { WheelZoom.create(`#${$img.attr("id")}`, { @@ -158,8 +158,11 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery { + const initZoom = async () => { const element = document.querySelector(`#${this.$imageView.attr("id")}`); if (element) { WheelZoom.create(`#${this.$imageView.attr("id")}`, { @@ -62,8 +62,11 @@ class ImageTypeWidget extends TypeWidget { speed: 1.3, zoomOnClick: false }); + } else { + requestAnimationFrame(initZoom); } - }, 0); + }; + initZoom(); imageContextMenuService.setupContextMenu(this.$imageView); From 608378193f12c512c6ada1a890b588fee82b4d1f Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Sat, 29 Mar 2025 00:51:36 +0100 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20mark.js=20load?= =?UTF-8?q?=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 17 +++++++++++++++++ package.json | 1 + src/public/app/widgets/find_in_html.ts | 4 ++-- .../widgets/view_widgets/list_or_grid_view.ts | 16 ++++++++-------- src/types.d.ts | 2 ++ 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index a7ef940c0..e5944f332 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e0548fce8..72c59aaa9 100644 --- a/package.json +++ b/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", diff --git a/src/public/app/widgets/find_in_html.ts b/src/public/app/widgets/find_in_html.ts index 7b74e3792..bc63d78ce 100644 --- a/src/public/app/widgets/find_in_html.ts +++ b/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" : ""; diff --git a/src/public/app/widgets/view_widgets/list_or_grid_view.ts b/src/public/app/widgets/view_widgets/list_or_grid_view.ts index 53b7204c2..1c70d791a 100644 --- a/src/public/app/widgets/view_widgets/list_or_grid_view.ts +++ 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 = `
@@ -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 ? $("").text(i).css("text-decoration", "underline").css("font-weight", "bold") : $('') - .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(); + }), "   " ); } else if (lastPrinted) { diff --git a/src/types.d.ts b/src/types.d.ts index 671408321..f1d67c904 100644 --- a/src/types.d.ts +++ b/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";