GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Remove use of createClassComponent in mathjax-element.ts (#3919)

Browse source 
* 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
This commit is contained in:
llama 2025-04-13 14:21:22 +08:00 committed by GitHub
parent 8b2a64852b
commit 9d167feb8f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

40
ts/editable/mathjax-element.ts → ts/editable/mathjax-element.svelte.ts
View file

@ -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,
target: this,
props: {
mathjax: this.dataset.mathjax,
block: this.block,
fontSize: 20,
},
const props = $state<MathjaxProps>({
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");

2
ts/editor/NoteEditor.svelte
View file

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

2
ts/editor/decorated-elements.ts
View file

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

2
ts/editor/editor-toolbar/LatexButton.svelte
View file

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

2
ts/editor/editor-toolbar/OptionsButton.svelte
View file

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

2
ts/editor/mathjax-overlay/MathjaxOverlay.svelte
View file

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

14
yarn.lock
View file

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