GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Unify anki-mathjax-* to just anki-mathjax

Browse source
This commit is contained in:
Henrik Giesel 2021-08-05 06:01:43 +02:00
parent 6b14afda27
commit d7e0f77439
9 changed files with 86 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ts/editable/Mathjax.svelte
View file

@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { convertMathjax } from "./mathjax";
export let mathjax: string;
export let type: "inline" | "block" | "chemistry";
export let block: boolean;
$: converted = convertMathjax(mathjax);
$: encoded = encodeURIComponent(converted);
@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<img
src="data:image/svg+xml,{encoded}"
class:block={type === "block"}
class:block
alt="Mathjax"
data-anki="mathjax"
data-mathjax={mathjax}

11
ts/editable/editable.ts
View file

@ -25,7 +25,12 @@ function containsInlineContent(element: Element): boolean {
return true;
}
const components = ["anki-mathjax-block", "anki-mathjax-inline"];
interface DecoratedElement extends HTMLElement {
decorate(): void;
undecorate(): void;
}
const decoratedTags = ["anki-mathjax"];
export class Editable extends HTMLElement {
set fieldHTML(content: string) {
@ -39,9 +44,9 @@ export class Editable extends HTMLElement {
get fieldHTML(): string {
const clone = this.cloneNode(true) as Element;
for (const component of components) {
for (const component of decoratedTags) {
for (const element of clone.getElementsByTagName(component)) {
(element as any).undecorate();
(element as DecoratedElement).undecorate();
}
}

2
ts/editable/index.ts
View file

@ -4,4 +4,4 @@
import "./editable-base.css";
import "./editable-container";
import "./editable";
import "./mathjax-components";
import "./mathjax-component";

72
ts/editable/mathjax-component.ts Normal file
View file

@ -0,0 +1,72 @@
import "mathjax/es5/tex-svg-full";
import Mathjax_svelte from "./Mathjax.svelte";
class Mathjax extends HTMLElement {
block: boolean = false;
static get observedAttributes(): string[] {
return ["block"];
}
connectedCallback(): void {
this.decorate();
}
attributeChangedCallback(_name: string, _old: string, newValue: string): void {
this.block = newValue !== "false";
}
decorate(): void {
const mathjax = (this.dataset.mathjax = this.innerText);
this.innerHTML = "";
new Mathjax_svelte({
target: this,
props: { mathjax, block: this.block },
});
}
undecorate(): void {
this.innerHTML = this.dataset.mathjax ?? "";
delete this.dataset.mathjax;
if (this.block) {
this.setAttribute("block", "true");
} else {
this.removeAttribute("block");
}
}
}
customElements.define("anki-mathjax", Mathjax);
// TODO mathjax regex will prob. fail at double quotes
const mathjaxTagPattern =
/<anki-mathjax(?:[^>]*?block="(.*?)")?[^>]*?>(.*?)<\/anki-mathjax>/gsu;
export function toMathjaxDelimiters(html: string): string {
return html.replace(
mathjaxTagPattern,
(_match: string, block: string | undefined, text: string) =>
typeof block === "string" && block !== "false"
? `\\[${text}\\]`
: `\\(${text}\\)`
);
}
const mathjaxBlockDelimiterPattern = /\\\[(.*?)\\\]/gsu;
const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
export function toMathjaxTags(html: string): string {
return html
.replace(
mathjaxBlockDelimiterPattern,
(_match: string, text: string) =>
`<anki-mathjax block="true">${text}</anki-mathjax>`
)
.replace(
mathjaxInlineDelimiterPattern,
(_match: string, text: string) => `<anki-mathjax>${text}</anki-mathjax>`
);
}

84
ts/editable/mathjax-components.ts
View file

@ -1,84 +0,0 @@
import Mathjax_svelte from "./Mathjax.svelte";
class MathjaxInline extends HTMLElement {
connectedCallback() {
this.decorate();
}
decorate(): void {
const mathjax = (this.dataset.mathjax = this.innerText);
const type = "inline";
this.innerHTML = "";
new Mathjax_svelte({
target: this,
props: { mathjax, type },
});
}
undecorate(): void {
this.innerHTML = this.dataset.mathjax ?? "";
delete this.dataset.mathjax;
}
}
customElements.define("anki-mathjax-inline", MathjaxInline);
class MathjaxBlock extends HTMLElement {
connectedCallback() {
this.decorate();
}
decorate(): void {
const mathjax = (this.dataset.mathjax = this.innerText);
const type = "block";
this.innerHTML = "";
new Mathjax_svelte({
target: this,
props: { mathjax, type },
});
}
undecorate(): void {
this.innerHTML = this.dataset.mathjax ?? "";
delete this.dataset.mathjax;
}
}
customElements.define("anki-mathjax-block", MathjaxBlock);
// TODO mathjax regex will prob. fail at double quotes
const mathjaxInlineTagPattern =
/<anki-mathjax-inline[^>]*?data-mathjax="(.*?)"[^>]*?>.*?<\/anki-mathjax-inline>/gsu;
const mathjaxBlockTagPattern =
/<anki-mathjax-block[^>]*?data-mathjax="(.*?)"[^>]*?>.*?<\/anki-mathjax-block>/gsu;
export function toMathjaxDelimiters(html: string): string {
return html
.replace(
mathjaxInlineTagPattern,
(_match: string, text: string) => `\\(${text}\\)`
)
.replace(
mathjaxBlockTagPattern,
(_match: string, text: string) => `\\[${text}\\]`
);
}
const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
const mathjaxBlockDelimiterPattern = /\\\[(.*?)\\\]/gsu;
export function toMathjaxTags(html: string): string {
return html
.replace(
mathjaxInlineDelimiterPattern,
(_match: string, text: string) =>
`<anki-mathjax-inline>${text}</anki-mathjax-inline>`
)
.replace(
mathjaxBlockDelimiterPattern,
(_match: string, text: string) =>
`<anki-mathjax-block>${text}</anki-mathjax-block>`
);
}

2
ts/editable/mathjax.ts
View file

@ -1,8 +1,6 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import "mathjax/es5/tex-svg-full";
export function convertMathjax(input: string): string {
const svg = globalThis.MathJax.tex2svg(input).children[0];

4
ts/editor/codable.ts
View file

@ -21,9 +21,7 @@ const latex = {
const htmlanki = {
name: "htmlmixed",
tags: {
"anki-mathjax-inline": [[null, null, latex]],
"anki-mathjax-block": [[null, null, latex]],
"anki-mathjax-chemistry": [[null, null, latex]],
"anki-mathjax": [[null, null, latex]],
},
};

2
ts/editor/editing-area.ts
View file

@ -17,7 +17,7 @@ import { bridgeCommand } from "./lib";
import { onInput, onKey, onKeyUp } from "./input-handlers";
import { onFocus, onBlur } from "./focus-handlers";
import { nightModeKey } from "components/context-keys";
import { toMathjaxTags, toMathjaxDelimiters } from "editable/mathjax-components";
import { toMathjaxTags, toMathjaxDelimiters } from "editable/mathjax-component";
function onCutOrCopy(): void {
bridgeCommand("cutOrCopy");

2
ts/editor/index.ts
View file

@ -29,7 +29,7 @@ import type { EditorField } from "./editor-field";
import { EditingArea } from "./editing-area";
import "editable/editable-container";
import "editable/editable";
import "editable/mathjax-components";
import "editable/mathjax-component";
import { initToolbar, fieldFocused } from "./toolbar";
import { initTagEditor } from "./tag-editor";