Display Mathjax error as title (tooltip)

This commit is contained in:
Henrik Giesel 2021-08-07 19:44:06 +02:00
parent 8fa6d0045d
commit 1e94f7f16f
2 changed files with 15 additions and 3 deletions

View file

@ -5,13 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts"> <script lang="ts">
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte";
export let title: string | undefined = undefined;
let background: HTMLDivElement; let background: HTMLDivElement;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { background })); onMount(() => dispatch("mount", { background }));
</script> </script>
<div bind:this={background} on:mousedown|preventDefault on:dblclick /> <div
bind:this={background}
{title}
on:mousedown|preventDefault
on:click|stopPropagation
on:dblclick
/>
<style lang="scss"> <style lang="scss">
div { div {

View file

@ -27,10 +27,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
resizeObserver.observe(container); resizeObserver.observe(container);
let updateSelection: () => void; let updateSelection: () => void;
let title: string;
function onUpdate(event: CustomEvent) { function onUpdate(event: CustomEvent) {
activeImage!.parentElement!.dataset.mathjax = event.detail.mathjax; activeImage!.parentElement!.dataset.mathjax = event.detail.mathjax;
setTimeout(updateSelection); setTimeout(() => {
updateSelection();
title = activeImage!.title;
});
} }
</script> </script>
@ -50,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:updateSelection bind:updateSelection
on:mount={(event) => createDropdown(event.detail.selection)} on:mount={(event) => createDropdown(event.detail.selection)}
> >
<HandleBackground on:click={(event) => event.stopPropagation()} /> <HandleBackground {title} />
<HandleControl offsetX={1} offsetY={1} /> <HandleControl offsetX={1} offsetY={1} />
</HandleSelection> </HandleSelection>