Display Mathjax editor and buttons at the same time

This commit is contained in:
Henrik Giesel 2021-08-07 02:25:16 +02:00
parent b06b5e9151
commit b361bcc69f
2 changed files with 22 additions and 29 deletions

View file

@ -130,8 +130,10 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
case "block":
this.block = newValue !== "false";
this.component?.$set({ block: this.block });
break;
case "data-mathjax":
this.component?.$set({ mathjax: newValue });
break;
}
}

View file

@ -27,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
resizeObserver.observe(container);
let updateSelection: () => void;
let edit = false;
function onUpdate(event: CustomEvent) {
activeImage!.parentElement!.dataset.mathjax = event.detail.mathjax;
@ -51,37 +50,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:updateSelection
on:mount={(event) => createDropdown(event.detail.selection)}
>
<HandleBackground
on:click={(event) => event.stopPropagation()}
on:dblclick={() => (edit = !edit)}
/>
<HandleBackground on:click={(event) => event.stopPropagation()} />
<HandleControl offsetX={1} offsetY={1} />
</HandleSelection>
{#if !edit}
<DropdownMenu>
<MathjaxHandleEditor
initialValue={activeImage.parentElement?.dataset.mathjax ?? ""}
on:update={(event) => {
onUpdate(event);
setTimeout(dropdownObject.update);
}}
/>
</DropdownMenu>
{:else}
<ButtonDropdown>
<div
on:click={() => {
updateSelection();
dropdownObject.update();
}}
>
<Item>
<MathjaxHandleInlineBlock {activeImage} {isRtl} />
</Item>
</div>
</ButtonDropdown>
{/if}
<DropdownMenu>
<MathjaxHandleEditor
initialValue={activeImage.parentElement?.dataset.mathjax ?? ""}
on:update={(event) => {
onUpdate(event);
setTimeout(dropdownObject.update);
}}
/>
<div
on:click={() => {
updateSelection();
dropdownObject.update();
}}
>
<Item>
<MathjaxHandleInlineBlock {activeImage} {isRtl} />
</Item>
</div>
</DropdownMenu>
{/if}
</WithDropdown>