2021-10-18 14:01:15 +02:00
|
|
|
<!--
|
|
|
|
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";
|
2022-02-04 09:36:34 +01:00
|
|
|
|
2021-10-18 14:01:15 +02:00
|
|
|
import contextProperty from "../sveltelib/context-property";
|
|
|
|
|
|
|
|
export interface EditingInputAPI {
|
|
|
|
readonly name: string;
|
|
|
|
focus(): void;
|
|
|
|
refocus(): void;
|
2021-12-13 05:00:35 +01:00
|
|
|
focusable: boolean;
|
|
|
|
moveCaretToEnd(): void;
|
2021-10-18 14:01:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface EditingAreaAPI {
|
|
|
|
content: Writable<string>;
|
|
|
|
editingInputs: Writable<EditingInputAPI[]>;
|
|
|
|
focus(): void;
|
|
|
|
refocus(): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const key = Symbol("editingArea");
|
2022-02-03 05:52:11 +01:00
|
|
|
const [context, setContextProperty] = contextProperty<EditingAreaAPI>(key);
|
2021-10-18 14:01:15 +02:00
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
export { context };
|
2021-10-18 14:01:15 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { onMount, setContext as svelteSetContext } from "svelte";
|
2022-02-04 09:36:34 +01:00
|
|
|
import { writable } from "svelte/store";
|
|
|
|
|
2021-10-18 14:01:15 +02:00
|
|
|
import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
|
2022-02-04 09:36:34 +01:00
|
|
|
import FocusTrap from "./FocusTrap.svelte";
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
export let fontFamily: string;
|
|
|
|
const fontFamilyStore = writable(fontFamily);
|
|
|
|
$: $fontFamilyStore = fontFamily;
|
|
|
|
svelteSetContext(fontFamilyKey, fontFamilyStore);
|
|
|
|
|
|
|
|
export let fontSize: number;
|
|
|
|
const fontSizeStore = writable(fontSize);
|
|
|
|
$: $fontSizeStore = fontSize;
|
|
|
|
svelteSetContext(fontSizeKey, fontSizeStore);
|
|
|
|
|
|
|
|
export let content: Writable<string>;
|
|
|
|
export let autofocus = false;
|
|
|
|
|
|
|
|
let editingArea: HTMLElement;
|
2022-01-08 02:46:01 +01:00
|
|
|
let focusTrap: FocusTrap;
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
const inputsStore = writable<EditingInputAPI[]>([]);
|
|
|
|
$: editingInputs = $inputsStore;
|
|
|
|
|
|
|
|
function getAvailableInput(): EditingInputAPI | undefined {
|
|
|
|
return editingInputs.find((input) => input.focusable);
|
|
|
|
}
|
|
|
|
|
|
|
|
function focusEditingInputIfAvailable(): boolean {
|
|
|
|
const availableInput = getAvailableInput();
|
|
|
|
|
|
|
|
if (availableInput) {
|
|
|
|
availableInput.focus();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
function focusEditingInputIfFocusTrapFocused(): void {
|
2022-01-08 02:46:01 +01:00
|
|
|
if (focusTrap && focusTrap.isFocusTrap(document.activeElement!)) {
|
2021-10-18 14:01:15 +02:00
|
|
|
focusEditingInputIfAvailable();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$: {
|
|
|
|
$inputsStore;
|
2022-01-08 02:46:01 +01:00
|
|
|
/**
|
|
|
|
* Triggers when all editing inputs are hidden,
|
|
|
|
* the editor field has focus, and then some
|
|
|
|
* editing input is shown
|
|
|
|
*/
|
2021-10-18 14:01:15 +02:00
|
|
|
focusEditingInputIfFocusTrapFocused();
|
|
|
|
}
|
|
|
|
|
|
|
|
function focus(): void {
|
|
|
|
if (editingArea.contains(document.activeElement)) {
|
|
|
|
// do nothing
|
|
|
|
} else if (!focusEditingInputIfAvailable()) {
|
|
|
|
focusTrap.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function refocus(): void {
|
|
|
|
const availableInput = getAvailableInput();
|
|
|
|
|
|
|
|
if (availableInput) {
|
|
|
|
availableInput.refocus();
|
|
|
|
} else {
|
|
|
|
focusTrap.blur();
|
|
|
|
focusTrap.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function focusEditingInputInsteadIfAvailable(event: FocusEvent): void {
|
|
|
|
if (focusEditingInputIfAvailable()) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// prevents editor field being entirely deselected when
|
|
|
|
// closing active field
|
|
|
|
function trapFocusOnBlurOut(event: FocusEvent): void {
|
|
|
|
if (!event.relatedTarget && editingInputs.every((input) => !input.focusable)) {
|
|
|
|
focusTrap.focus();
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
let apiPartial: Partial<EditingAreaAPI>;
|
|
|
|
export { apiPartial as api };
|
|
|
|
|
|
|
|
const api = Object.assign(apiPartial, {
|
|
|
|
content,
|
|
|
|
editingInputs: inputsStore,
|
|
|
|
focus,
|
|
|
|
refocus,
|
|
|
|
});
|
|
|
|
|
|
|
|
setContextProperty(api);
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
if (autofocus) {
|
|
|
|
focus();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
2022-01-08 02:46:01 +01:00
|
|
|
<FocusTrap bind:this={focusTrap} on:focus={focusEditingInputInsteadIfAvailable} />
|
2021-10-18 14:01:15 +02:00
|
|
|
|
|
|
|
<div bind:this={editingArea} class="editing-area" on:focusout={trapFocusOnBlurOut}>
|
|
|
|
<slot />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.editing-area {
|
2022-01-08 02:46:01 +01:00
|
|
|
display: grid;
|
|
|
|
/* TODO allow configuration of grid #1503 */
|
|
|
|
/* grid-template-columns: repeat(2, 1fr); */
|
|
|
|
|
2021-10-18 14:01:15 +02:00
|
|
|
position: relative;
|
|
|
|
background: var(--frame-bg);
|
|
|
|
border-radius: 0 0 5px 5px;
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|