2778b9220c
* Remove unnecessary stopPropagation of mathjax-overlay events * Use CodeMirror component for MathjaxHandle * Refactor ResizeObserver code in MathjaxHandle * Wrap setRange in CodeMirror in try/catch * Add Mathjax Editor bottom margin * Add custom Enter and Shift+Enter shortcuts for the MathjaxHandle * Format * Move placeCaretAfter to domlib * Move focus back to field after editing Mathjax * Put Cursor after Mathjax after accepting * Add delete button for Mathjax * Change border color of mathjax menu * Refactor into MathjaxMenu * Put caretKeyword in variable * Use one ResizeObserver for all Mathjax images * Add minmimum width for Mathjax editor * is still smaller than minimal window width * Add bazel directories to .prettierignore and format from root * exclude ftl/usage (dae) the json files that live there are output from our tooling, and formatting them means an extra step each time we want to update them also exclude .mypy_cache, which is output by scripts/mypy* * minor ftl tweak: newline -> new line (dae)
104 lines
2.6 KiB
Svelte
104 lines
2.6 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script context="module" lang="ts">
|
|
import type { Writable } from "svelte/store";
|
|
|
|
const imageToHeightMap = new Map<string, Writable<number>>();
|
|
const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
|
|
for (const entry of entries) {
|
|
const image = entry.target as HTMLImageElement;
|
|
const store = imageToHeightMap.get(image.dataset.uuid!)!;
|
|
store.set(entry.contentRect.height);
|
|
|
|
setTimeout(() => entry.target.dispatchEvent(new Event("resize")));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { onDestroy, getContext } from "svelte";
|
|
import { nightModeKey } from "../components/context-keys";
|
|
import { convertMathjax } from "./mathjax";
|
|
import { randomUUID } from "../lib/uuid";
|
|
import { writable } from "svelte/store";
|
|
|
|
export let mathjax: string;
|
|
export let block: boolean;
|
|
|
|
export let autofocus = false;
|
|
export let fontSize = 20;
|
|
|
|
const nightMode = getContext<boolean>(nightModeKey);
|
|
$: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
|
|
$: empty = title === "MathJax";
|
|
$: encoded = encodeURIComponent(converted);
|
|
|
|
const uuid = randomUUID();
|
|
const imageHeight = writable(0);
|
|
imageToHeightMap.set(uuid, imageHeight);
|
|
|
|
$: verticalCenter = -$imageHeight / 2 + fontSize / 4;
|
|
|
|
function maybeAutofocus(image: Element): void {
|
|
if (!autofocus) {
|
|
return;
|
|
}
|
|
|
|
// This should trigger a focusing of the Mathjax Handle
|
|
const focusEvent = new CustomEvent("focusmathjax", {
|
|
detail: image,
|
|
bubbles: true,
|
|
composed: true,
|
|
});
|
|
|
|
image.dispatchEvent(focusEvent);
|
|
}
|
|
|
|
function observe(image: Element) {
|
|
observer.observe(image);
|
|
|
|
return {
|
|
destroy() {
|
|
observer.unobserve(image);
|
|
},
|
|
};
|
|
}
|
|
|
|
onDestroy(() => imageToHeightMap.delete(uuid));
|
|
</script>
|
|
|
|
<img
|
|
src="data:image/svg+xml,{encoded}"
|
|
class:block
|
|
class:empty
|
|
style="--vertical-center: {verticalCenter}px;"
|
|
alt="Mathjax"
|
|
{title}
|
|
data-anki="mathjax"
|
|
data-uuid={uuid}
|
|
on:dragstart|preventDefault
|
|
use:maybeAutofocus
|
|
use:observe
|
|
/>
|
|
|
|
<style lang="scss">
|
|
:global(anki-mathjax) {
|
|
white-space: pre;
|
|
}
|
|
|
|
img {
|
|
vertical-align: var(--vertical-center);
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.empty {
|
|
vertical-align: sub;
|
|
}
|
|
</style>
|