From 9d167feb8f59c9215d91be67a872af819135b2cd Mon Sep 17 00:00:00 2001 From: llama <100429699+iamllama@users.noreply.github.com> Date: Sun, 13 Apr 2025 14:21:22 +0800 Subject: [PATCH] Remove use of createClassComponent in mathjax-element.ts (#3919) * replace use of deprecated createClassComponent with mount * bump esbuild-svelte from 0.8.1 to 0.9.2 * mathjax-element.ts -> mathjax-element.svelte.ts * move caret after tick --- package.json | 2 +- ...x-element.ts => mathjax-element.svelte.ts} | 40 +++++++++++++------ ts/editor/NoteEditor.svelte | 2 +- ts/editor/decorated-elements.ts | 2 +- ts/editor/editor-toolbar/LatexButton.svelte | 2 +- ts/editor/editor-toolbar/OptionsButton.svelte | 2 +- .../mathjax-overlay/MathjaxOverlay.svelte | 2 +- yarn.lock | 14 +++---- 8 files changed, 40 insertions(+), 26 deletions(-) rename ts/editable/{mathjax-element.ts => mathjax-element.svelte.ts} (88%) diff --git a/package.json b/package.json index bd878eed6..1ce1353d5 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "dprint": "^0.47.2", "esbuild": "^0.25.0", "esbuild-sass-plugin": "^2", - "esbuild-svelte": "^0.8.1", + "esbuild-svelte": "^0.9.2", "eslint": "^8.44.0", "eslint-plugin-compat": "^4.1.4", "eslint-plugin-import": "^2.25.4", diff --git a/ts/editable/mathjax-element.ts b/ts/editable/mathjax-element.svelte.ts similarity index 88% rename from ts/editable/mathjax-element.ts rename to ts/editable/mathjax-element.svelte.ts index efd217cf1..c53844710 100644 --- a/ts/editable/mathjax-element.ts +++ b/ts/editable/mathjax-element.svelte.ts @@ -5,7 +5,7 @@ import { on } from "@tslib/events"; import { placeCaretAfter, placeCaretBefore } from "$lib/domlib/place-caret"; -import { createClassComponent } from "svelte/legacy"; +import { mount, tick } from "svelte"; import type { DecoratedElement, DecoratedElementConstructor } from "./decorated"; import { FrameElement, frameElement } from "./frame-element"; import Mathjax_svelte from "./Mathjax.svelte"; @@ -26,6 +26,12 @@ export const mathjaxConfig = { enabled: true, }; +interface MathjaxProps { + mathjax: string; + block: boolean; + fontSize: number; +} + export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLElement implements DecoratedElement { static tagName = "anki-mathjax"; @@ -60,7 +66,8 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLEl block = false; frame?: FrameElement; - component?: Mathjax_svelte; + component?: Record | null; + props?: MathjaxProps; static get observedAttributes(): string[] { return ["block", "data-mathjax"]; @@ -83,7 +90,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLEl switch (name) { case "block": this.block = newValue !== "false"; - this.component?.$set({ block: this.block }); + if (this.props) { this.props.block = this.block; } this.frame?.setAttribute("block", String(this.block)); break; @@ -91,7 +98,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLEl if (typeof newValue !== "string") { return; } - this.component?.$set({ mathjax: newValue }); + if (this.props) { this.props.mathjax = newValue; } break; } } @@ -114,16 +121,21 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLEl this.dataset.mathjax = this.innerHTML; this.innerHTML = ""; this.style.whiteSpace = "normal"; - this.component = createClassComponent({ - component: Mathjax_svelte, - target: this, - props: { - mathjax: this.dataset.mathjax, - block: this.block, - fontSize: 20, - }, + + const props = $state({ + mathjax: this.dataset.mathjax, + block: this.block, + fontSize: 20, }); + const component = mount(Mathjax_svelte, { + target: this, + props, + }); + + this.component = component; + this.props = props; + if (this.hasAttribute("focusonmount")) { let position: [number, number] | undefined = undefined; @@ -133,7 +145,9 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax extends HTMLEl .map(Number) as [number, number]; } - this.component.moveCaretAfter(position); + tick().then(() => { + this.component?.moveCaretAfter(position); + }); } this.setAttribute("contentEditable", "false"); diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte index 164d088ed..9bf66d858 100644 --- a/ts/editor/NoteEditor.svelte +++ b/ts/editor/NoteEditor.svelte @@ -412,7 +412,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Shortcut from "$lib/components/Shortcut.svelte"; - import { mathjaxConfig } from "../editable/mathjax-element"; + import { mathjaxConfig } from "../editable/mathjax-element.svelte"; import ImageOcclusionPage from "../routes/image-occlusion/ImageOcclusionPage.svelte"; import ImageOcclusionPicker from "../routes/image-occlusion/ImageOcclusionPicker.svelte"; import type { IOMode } from "../routes/image-occlusion/lib"; diff --git a/ts/editor/decorated-elements.ts b/ts/editor/decorated-elements.ts index 2a9d6883a..6eb603897 100644 --- a/ts/editor/decorated-elements.ts +++ b/ts/editor/decorated-elements.ts @@ -6,7 +6,7 @@ import { BLOCK_ELEMENTS } from "@tslib/dom"; import { CustomElementArray } from "../editable/decorated"; import { FrameElement } from "../editable/frame-element"; import { FrameEnd, FrameStart } from "../editable/frame-handle"; -import { Mathjax } from "../editable/mathjax-element"; +import { Mathjax } from "../editable/mathjax-element.svelte"; import { parsingInstructions } from "./plain-text-input"; const decoratedElements = new CustomElementArray(); diff --git a/ts/editor/editor-toolbar/LatexButton.svelte b/ts/editor/editor-toolbar/LatexButton.svelte index c98cd3b36..1d0df1f2e 100644 --- a/ts/editor/editor-toolbar/LatexButton.svelte +++ b/ts/editor/editor-toolbar/LatexButton.svelte @@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Shortcut from "$lib/components/Shortcut.svelte"; import WithFloating from "$lib/components/WithFloating.svelte"; - import { mathjaxConfig } from "../../editable/mathjax-element"; + import { mathjaxConfig } from "../../editable/mathjax-element.svelte"; import { context as noteEditorContext } from "../NoteEditor.svelte"; import type { RichTextInputAPI } from "../rich-text-input"; import { editingInputIsRichText } from "../rich-text-input"; diff --git a/ts/editor/editor-toolbar/OptionsButton.svelte b/ts/editor/editor-toolbar/OptionsButton.svelte index d247ffbaa..0f4e346ae 100644 --- a/ts/editor/editor-toolbar/OptionsButton.svelte +++ b/ts/editor/editor-toolbar/OptionsButton.svelte @@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Popover from "$lib/components/Popover.svelte"; import WithFloating from "$lib/components/WithFloating.svelte"; - import { mathjaxConfig } from "../../editable/mathjax-element"; + import { mathjaxConfig } from "../../editable/mathjax-element.svelte"; import { shrinkImagesByDefault } from "../image-overlay/ImageOverlay.svelte"; import { closeHTMLTags } from "../plain-text-input/PlainTextInput.svelte"; diff --git a/ts/editor/mathjax-overlay/MathjaxOverlay.svelte b/ts/editor/mathjax-overlay/MathjaxOverlay.svelte index 34a0e38d1..5913a2435 100644 --- a/ts/editor/mathjax-overlay/MathjaxOverlay.svelte +++ b/ts/editor/mathjax-overlay/MathjaxOverlay.svelte @@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { isComposing } from "$lib/sveltelib/composition"; import { escapeSomeEntities, unescapeSomeEntities } from "../../editable/mathjax"; - import { Mathjax } from "../../editable/mathjax-element"; + import { Mathjax } from "../../editable/mathjax-element.svelte"; import type { EditingInputAPI } from "../EditingArea.svelte"; import HandleBackground from "../HandleBackground.svelte"; import { context } from "../NoteEditor.svelte"; diff --git a/yarn.lock b/yarn.lock index 5bd3c5912..a1ee4eed6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2021,7 +2021,7 @@ __metadata: dprint: "npm:^0.47.2" esbuild: "npm:^0.25.0" esbuild-sass-plugin: "npm:^2" - esbuild-svelte: "npm:^0.8.1" + esbuild-svelte: "npm:^0.9.2" eslint: "npm:^8.44.0" eslint-plugin-compat: "npm:^4.1.4" eslint-plugin-import: "npm:^2.25.4" @@ -3409,15 +3409,15 @@ __metadata: languageName: node linkType: hard -"esbuild-svelte@npm:^0.8.1": - version: 0.8.2 - resolution: "esbuild-svelte@npm:0.8.2" +"esbuild-svelte@npm:^0.9.2": + version: 0.9.2 + resolution: "esbuild-svelte@npm:0.9.2" dependencies: "@jridgewell/trace-mapping": "npm:^0.3.19" peerDependencies: - esbuild: ">=0.9.6" - svelte: ">=3.43.0 <6 || ^5.0.0-next.0" - checksum: 10c0/4b4f11a2d851fb819826404a4971ea874472bfeda5a11387e62bdb4e3d114b4fd82b23b8ab83c82cab71a2afa8767a4075c121f4709240a9f373b19c03bd97e6 + esbuild: ">=0.17.0" + svelte: ">=4.2.1 <6" + checksum: 10c0/391141420f7806b45c774e0448a35706e242d71651bc4362f9aed300d6238ad0fa22bfeabdc3ca45c8e62b89eba641c0edee905980f2760aa6d281c01ee112a8 languageName: node linkType: hard