Prevent MathJax editor from closing unexpectedly when selecting text

This commit is contained in:
hikaru-y 2023-04-26 21:48:06 +09:00
parent 103be366c9
commit b43d33a6de
2 changed files with 32 additions and 1 deletions

View file

@ -70,6 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let closeOnInsideClick = false; export let closeOnInsideClick = false;
export let keepOnKeyup = false; export let keepOnKeyup = false;
export let keepOnTextSelection = false;
export let hideArrow = false; export let hideArrow = false;
export let reference: ReferenceElement | undefined = undefined; export let reference: ReferenceElement | undefined = undefined;
@ -165,6 +166,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: updateFloating(reference, floating, show); $: updateFloating(reference, floating, show);
/**
* Prevents the floating element from closing when the cursor is outside
* of it at the end of text selection. `stopPropagation()` has to be called
* in the capturing phase.
*/
function preventClosingOnTextSelection(event: MouseEvent) {
if (event.button === 0) {
const floating = event.currentTarget as HTMLDivElement;
document.addEventListener(
"click",
(secondaryEvent: MouseEvent) => {
if (
secondaryEvent.target instanceof HTMLElement &&
!floating.contains(secondaryEvent.target)
) {
secondaryEvent.stopPropagation();
}
},
{ capture: true, once: true },
);
}
}
onDestroy(() => cleanup?.()); onDestroy(() => cleanup?.());
</script> </script>
@ -182,7 +206,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{/if} {/if}
{/if} {/if}
<div bind:this={floating} class="floating" class:show use:portal={portalTarget}> <div
bind:this={floating}
class="floating"
class:show
on:mousedown={keepOnTextSelection ? preventClosingOnTextSelection : null}
use:portal={portalTarget}
>
{#if show} {#if show}
<slot name="floating" /> <slot name="floating" />
{/if} {/if}

View file

@ -210,6 +210,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
reference={activeImage} reference={activeImage}
offset={20} offset={20}
keepOnKeyup keepOnKeyup
keepOnTextSelection
portalTarget={document.body} portalTarget={document.body}
let:position={positionFloating} let:position={positionFloating}
on:close={resetHandle} on:close={resetHandle}