mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-12-22 22:54:24 +00:00
Compare commits
No commits in common. "2df251dcd43345faa9cc8316f669a55d56c68a61" and "154711b63c18eb838f8c0b9b10cf62c6c0e0aa53" have entirely different histories.
2df251dcd4
...
154711b63c
3 changed files with 5 additions and 124 deletions
|
@ -1,7 +1,5 @@
|
||||||
import {CustomElement} from "../base.mjs";
|
import {CustomElement} from "../base.mjs";
|
||||||
import {default as katex} from 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.mjs';
|
import {default as katex} from 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.mjs';
|
||||||
import { MarkdownElement } from "./renderer.mjs";
|
|
||||||
import { findFirstAncestor } from "../../utils/traversal.mjs";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Element rendering TeX math.
|
* Element rendering TeX math.
|
||||||
|
@ -11,21 +9,6 @@ export class MathElement extends CustomElement {
|
||||||
return document.getElementById("template-math")
|
return document.getElementById("template-math")
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Element representing the Markdown context where this math formula is displayed in.
|
|
||||||
* Can be recalculated with {@link recalculateRenderer}.
|
|
||||||
* @type {MarkdownElement}
|
|
||||||
*/
|
|
||||||
renderer
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Recalculate the value of {@link browse} and {@link vault} using this element's current position in the DOM.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
recalculateRenderer() {
|
|
||||||
this.renderer = findFirstAncestor(this, MarkdownElement)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The math to render, obtained from the `document` attribute.
|
* The math to render, obtained from the `document` attribute.
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
|
@ -68,7 +51,7 @@ export class MathElement extends CustomElement {
|
||||||
/**
|
/**
|
||||||
* Recreate {@link katexElement} with the current values of {@link texDocument} and {@link isBlock}.
|
* Recreate {@link katexElement} with the current values of {@link texDocument} and {@link isBlock}.
|
||||||
*/
|
*/
|
||||||
async recreateKatexElement() {
|
recreateKatexElement() {
|
||||||
if(this.katexElement) {
|
if(this.katexElement) {
|
||||||
this.katexElement.remove()
|
this.katexElement.remove()
|
||||||
this.katexElement = null
|
this.katexElement = null
|
||||||
|
@ -79,16 +62,12 @@ export class MathElement extends CustomElement {
|
||||||
this.katexElement.classList.add("math")
|
this.katexElement.classList.add("math")
|
||||||
this.katexElement.classList.add(this.isBlock ? "math-block" : "math-inline")
|
this.katexElement.classList.add(this.isBlock ? "math-block" : "math-inline")
|
||||||
|
|
||||||
await this.renderer.sleepUntilKatexMacrosAreAvailable()
|
|
||||||
|
|
||||||
katex.render(
|
katex.render(
|
||||||
this.texDocument,
|
this.texDocument,
|
||||||
this.katexElement,
|
this.katexElement,
|
||||||
{
|
{
|
||||||
throwOnError: false,
|
throwOnError: false,
|
||||||
globalGroup: true,
|
globalGroup: true,
|
||||||
macros: this.renderer.katexMacros,
|
|
||||||
trust: true,
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -97,7 +76,7 @@ export class MathElement extends CustomElement {
|
||||||
|
|
||||||
onConnect() {
|
onConnect() {
|
||||||
super.onConnect()
|
super.onConnect()
|
||||||
this.recalculateRenderer()
|
|
||||||
this.recreateKatexElement()
|
this.recreateKatexElement()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
|
import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
|
||||||
import { CustomElement } from "../base.mjs";
|
import { CustomElement } from "../base.mjs";
|
||||||
import {toTitleCase} from "../../utils/case.mjs";
|
import {toTitleCase} from "../../utils/case.mjs";
|
||||||
import {findFirstAncestor} from "../../utils/traversal.mjs";
|
|
||||||
import {VaultElement} from "../vault.mjs";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -13,21 +11,6 @@ export class MarkdownElement extends CustomElement {
|
||||||
return document.getElementById("template-markdown")
|
return document.getElementById("template-markdown")
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Element representing the Obsidian Vault.
|
|
||||||
* Can be recalculated with {@link recalculateVault}.
|
|
||||||
* @type {VaultElement}
|
|
||||||
*/
|
|
||||||
vault
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Recalculate the value of {@link browse} and {@link vault} using this element's current position in the DOM.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
recalculateVault() {
|
|
||||||
this.vault = findFirstAncestor(this, VaultElement)
|
|
||||||
}
|
|
||||||
|
|
||||||
// noinspection JSUnusedGlobalSymbols
|
// noinspection JSUnusedGlobalSymbols
|
||||||
/**
|
/**
|
||||||
* {@link Marked} Markdown renderer.
|
* {@link Marked} Markdown renderer.
|
||||||
|
@ -231,38 +214,6 @@ export class MarkdownElement extends CustomElement {
|
||||||
*/
|
*/
|
||||||
static DOCUMENT_ELEMENT_SLOT = "markdown-document"
|
static DOCUMENT_ELEMENT_SLOT = "markdown-document"
|
||||||
|
|
||||||
/**
|
|
||||||
* Macros to be used in every single {@link MathElement} of the renderer.
|
|
||||||
*/
|
|
||||||
katexMacros
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update {@link katexMacros} from the root {@link VaultElement}.
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
async refetchKatexMacros() {
|
|
||||||
await this.vault.sleepUntilKatexMacrosAreAvailable()
|
|
||||||
this.katexMacros = {...this.vault.katexMacros}
|
|
||||||
this.#katexMacrosQueue.forEach(resolve => resolve(undefined))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Array of resolve {@link Promise} objects of tasks awaiting {@link sleepUntilKatexPreambleIsAvailable}.
|
|
||||||
* @type {((v: undefined) => void)[]}
|
|
||||||
*/
|
|
||||||
#katexMacrosQueue = []
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Await until {@link katexPreamble} becomes available.
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
async sleepUntilKatexMacrosAreAvailable() {
|
|
||||||
if(this.katexMacros !== undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
await new Promise(resolve => this.#katexMacrosQueue.push(resolve))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Recreate {@link documentElement} using the current value of {@link markdownDocument}.
|
* Recreate {@link documentElement} using the current value of {@link markdownDocument}.
|
||||||
*/
|
*/
|
||||||
|
@ -275,14 +226,11 @@ export class MarkdownElement extends CustomElement {
|
||||||
this.documentElement = document.createElement("div")
|
this.documentElement = document.createElement("div")
|
||||||
this.documentElement.slot = this.constructor.DOCUMENT_ELEMENT_SLOT
|
this.documentElement.slot = this.constructor.DOCUMENT_ELEMENT_SLOT
|
||||||
this.documentElement.innerHTML = this.constructor.MARKED.parse(this.markdownDocument)
|
this.documentElement.innerHTML = this.constructor.MARKED.parse(this.markdownDocument)
|
||||||
|
|
||||||
this.appendChild(this.documentElement)
|
this.appendChild(this.documentElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
onConnect() {
|
onConnect() {
|
||||||
super.onConnect()
|
super.onConnect()
|
||||||
this.recalculateVault()
|
|
||||||
this.recreateDocumentElement()
|
this.recreateDocumentElement()
|
||||||
this.refetchKatexMacros().then()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { CustomElement } from "./base.mjs";
|
import { CustomElement } from "./base.mjs";
|
||||||
import { sleep } from "../utils/sleep.mjs";
|
import { sleep } from "../utils/sleep.mjs";
|
||||||
import {default as katex} from 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.mjs';
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -187,56 +186,11 @@ export class VaultElement extends CustomElement {
|
||||||
await new Promise(resolve => this.#fileIndexQueue.push(resolve))
|
await new Promise(resolve => this.#fileIndexQueue.push(resolve))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
async onConnect() {
|
||||||
* Macros to be used in every single {@link MathElement} of the vault.
|
|
||||||
*/
|
|
||||||
katexMacros
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update {@link katexMacros} by fetching the `preamble.sty` file located at the root of the Vault, and then having KaTeX render it to a string, which is then discarded.
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
async refetchKatexMacros() {
|
|
||||||
const response = await this.fetchCooldown("preamble.sty")
|
|
||||||
if(response.status >= 400) {
|
|
||||||
this.katexMacros = {}
|
|
||||||
this.#katexMacrosQueue.forEach(resolve => resolve(undefined))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const preamble = await response.text()
|
|
||||||
this.katexMacros = {}
|
|
||||||
katex.renderToString(preamble, {
|
|
||||||
throwOnError: false,
|
|
||||||
globalGroup: true,
|
|
||||||
macros: this.katexMacros,
|
|
||||||
trust: true,
|
|
||||||
})
|
|
||||||
this.#katexMacrosQueue.forEach(resolve => resolve(undefined))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Array of resolve {@link Promise} objects of tasks awaiting {@link sleepUntilKatexPreambleIsAvailable}.
|
|
||||||
* @type {((v: undefined) => void)[]}
|
|
||||||
*/
|
|
||||||
#katexMacrosQueue = []
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Await until {@link katexPreamble} becomes available.
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
async sleepUntilKatexMacrosAreAvailable() {
|
|
||||||
if(this.katexMacros !== undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
await new Promise(resolve => this.#katexMacrosQueue.push(resolve))
|
|
||||||
}
|
|
||||||
|
|
||||||
onConnect() {
|
|
||||||
super.onConnect()
|
super.onConnect()
|
||||||
this.recalculateVaultElement()
|
this.recalculateVaultElement()
|
||||||
this.#fetchQueueScheduler().then()
|
this.#fetchQueueScheduler().then()
|
||||||
this.refetchAppearance().then()
|
await this.refetchAppearance()
|
||||||
this.refetchFileIndex().then()
|
await this.refetchFileIndex()
|
||||||
this.refetchKatexMacros().then()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue