GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 22:42:25 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Survive to Codable and back

Browse source
This commit is contained in:
Henrik Giesel 2021-08-04 04:21:35 +02:00
parent b0b2ae3ece
commit 1465d3a848
3 changed files with 65 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ts/editable/MathjaxBlock.svelte → ts/editable/Mathjax.svelte
View file

@ -6,7 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { convertMathjax } from "./mathjax";
export let mathjax: string;
$: converted = convertMathjax(`\\(${mathjax}\\)`);
export let type: "inline" | "block" | "chemistry";
$: delimiters = type === "inline" ? ["\\[", "\\]"] : ["\\(", "\\)"];
$: converted = convertMathjax(`${delimiters[0]}${mathjax}${delimiters[1]}`);
</script>
{@html converted}

16
ts/editable/editable.ts
View file

@ -25,6 +25,8 @@ function containsInlineContent(element: Element): boolean {
return true;
}
const components = ["anki-mathjax-block", "anki-mathjax-inline"];
export class Editable extends HTMLElement {
set fieldHTML(content: string) {
this.innerHTML = content;
@ -35,9 +37,17 @@ export class Editable extends HTMLElement {
}
get fieldHTML(): string {
return containsInlineContent(this) && this.innerHTML.endsWith("<br>")
? this.innerHTML.slice(0, -4) // trim trailing <br>
: this.innerHTML;
const clone = this.cloneNode(true) as Element;
for (const component of components) {
for (const element of clone.getElementsByTagName(component)) {
(element as any).undecorate();
}
}
return containsInlineContent(clone) && this.innerHTML.endsWith("<br>")
? clone.innerHTML.slice(0, -4) // trim trailing <br>
: clone.innerHTML;
}
connectedCallback(): void {

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

@ -1,35 +1,74 @@
import MathjaxBlock_svelte from "./MathjaxBlock.svelte";
import Mathjax_svelte from "./Mathjax.svelte";
class MathjaxBlock extends HTMLElement {
class MathjaxInline extends HTMLElement {
connectedCallback() {
this.decorate();
}
decorate(): void {
this.contentEditable = "false";
const mathjax = (this.dataset.mathjax = this.innerText);
const type = "inline";
this.innerHTML = "";
new MathjaxBlock_svelte({
new Mathjax_svelte({
target: this,
props: { mathjax },
props: { mathjax, type },
});
}
undecorate(): void {
this.removeAttribute("contentEditable");
this.innerHTML = this.dataset.mathjax ?? "";
delete this.dataset.mathjax;
}
}
customElements.define("anki-mathjax-inline", MathjaxInline);
class MathjaxBlock extends HTMLElement {
connectedCallback() {
this.decorate();
}
decorate(): void {
this.contentEditable = "false";
const mathjax = (this.dataset.mathjax = this.innerText);
const type = "block";
this.innerHTML = "";
new Mathjax_svelte({
target: this,
props: { mathjax, type },
});
}
undecorate(): void {
this.removeAttribute("contentEditable");
this.innerHTML = this.dataset.mathjax ?? "";
delete this.dataset.mathjax;
}
}
// customElements.define("anki-mathjax-inline", MathjaxInline);
customElements.define("anki-mathjax-block", MathjaxBlock);
// TODO mathjax regex will prob. fail at double quotes
const mathjaxInlineTagPattern =
/<anki-mathjax-inline.*?>(.*?)<\/anki-mathjax-inline>/gsu;
const mathjaxBlockTagPattern = /<anki-mathjax-block.*?>(.*?)<\/anki-mathjax-block>/gsu;
/<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}\)`
(_match: string, text: string) => `\\(${text}\\)`
)
.replace(
mathjaxBlockTagPattern,
(_match: string, text: string) => `\[${text}\]`
(_match: string, text: string) => `\\[${text}\\]`
);
}