6d8fb35fab
* Move field description into EditingArea as placeholder * Prevent insertion of breaks into empty fields to allow :empty CSS selector to also work on fields other than the first one. * Remove redundant setContext from EditingArea * Fix import order * Revert "Prevent insertion of breaks into empty fields" This reverts commit 1615fd5cf441b1047dae6a34265acb9c5cae50b2. * Use class:empty instead of :empty CSS pseudo-class * Restrict description to single line, ellipse overflow * Make description in field dialog a bit clearer
90 lines
2.6 KiB
Svelte
90 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">
|
|
export type { ContentEditableAPI } from "./content-editable";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import type { Readable, Writable } from "svelte/store";
|
|
|
|
import { updateAllState } from "../components/WithState.svelte";
|
|
import { descriptionKey } from "../lib/context-keys";
|
|
import actionList from "../sveltelib/action-list";
|
|
import type { MirrorAction } from "../sveltelib/dom-mirror";
|
|
import type { SetupInputHandlerAction } from "../sveltelib/input-handler";
|
|
import type { ContentEditableAPI } from "./content-editable";
|
|
import { preventBuiltinShortcuts, useFocusHandler } from "./content-editable";
|
|
|
|
export let resolve: (editable: HTMLElement) => void;
|
|
|
|
export let mirrors: MirrorAction[];
|
|
export let nodes: Writable<DocumentFragment>;
|
|
|
|
const mirrorAction = actionList(mirrors);
|
|
const mirrorOptions = { store: nodes };
|
|
|
|
export let inputHandlers: SetupInputHandlerAction[];
|
|
|
|
const inputHandlerAction = actionList(inputHandlers);
|
|
|
|
export let api: Partial<ContentEditableAPI>;
|
|
|
|
const [focusHandler, setupFocusHandling] = useFocusHandler();
|
|
|
|
Object.assign(api, { focusHandler });
|
|
|
|
const description = getContext<Readable<string>>(descriptionKey);
|
|
$: descriptionCSSValue = `"${$description}"`;
|
|
|
|
let innerHTML = "";
|
|
$: empty = ["", "<br>"].includes(innerHTML);
|
|
</script>
|
|
|
|
<anki-editable
|
|
class:empty
|
|
contenteditable="true"
|
|
bind:innerHTML
|
|
use:resolve
|
|
use:setupFocusHandling
|
|
use:preventBuiltinShortcuts
|
|
use:mirrorAction={mirrorOptions}
|
|
use:inputHandlerAction={{}}
|
|
on:focus
|
|
on:blur
|
|
on:click={updateAllState}
|
|
on:keyup={updateAllState}
|
|
style="--description: {descriptionCSSValue}"
|
|
/>
|
|
|
|
<style lang="scss">
|
|
anki-editable {
|
|
display: block;
|
|
position: relative;
|
|
padding: 6px;
|
|
overflow: auto;
|
|
overflow-wrap: anywhere;
|
|
/* fallback for iOS */
|
|
word-break: break-word;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
&.empty::before {
|
|
content: var(--description);
|
|
opacity: 0.4;
|
|
cursor: text;
|
|
/* stay on single line */
|
|
position: absolute;
|
|
max-width: 95%;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
/* editable-base.scss contains styling targeting user HTML */
|
|
</style>
|