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

@@ -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",

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<string, any> | 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,
+        const props = $state<MathjaxProps>({
-            target: this,
-            props: {
             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");

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";

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();

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";

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";
 

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";

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":
+"esbuild-svelte@npm:^0.9.2":
-  version: 0.8.2
+  version: 0.9.2
-  resolution: "esbuild-svelte@npm:0.8.2"
+  resolution: "esbuild-svelte@npm:0.9.2"
   dependencies:
     "@jridgewell/trace-mapping": "npm:^0.3.19"
   peerDependencies:
-    esbuild: ">=0.9.6"
+    esbuild: ">=0.17.0"
-    svelte: ">=3.43.0 <6 || ^5.0.0-next.0"
+    svelte: ">=4.2.1 <6"
-  checksum: 10c0/4b4f11a2d851fb819826404a4971ea874472bfeda5a11387e62bdb4e3d114b4fd82b23b8ab83c82cab71a2afa8767a4075c121f4709240a9f373b19c03bd97e6
+  checksum: 10c0/391141420f7806b45c774e0448a35706e242d71651bc4362f9aed300d6238ad0fa22bfeabdc3ca45c8e62b89eba641c0edee905980f2760aa6d281c01ee112a8
   languageName: node
   linkType: hard