9ca13ca3bc
* Export surrounder directly from RichTextInput * Change wording in editor/surround * Remove empty line * Change wording * Fix interfaces * Add field description directly in NoteEditor * Strip description logic from ContentEditable * Make RichTextInput position: relative * Make attachToShadow an async function * Apply field styling to field description * Show FieldDescription only if content empty * Remove descriptionStore and descriptionKey * Revert "Make attachToShadow an async function" This reverts commit b62705eadf7335c7ee0c6c8797047e1f1ccdbf44. SvelteActionReturnType does not accept Promise<void> * Fix mess after merge commit * Require registering surround formats
49 lines
1.2 KiB
Svelte
49 lines
1.2 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import type { Readable } from "svelte/store";
|
|
|
|
import { directionKey, fontFamilyKey, fontSizeKey } from "../lib/context-keys";
|
|
import { context } from "./EditingArea.svelte";
|
|
|
|
const { content } = context.get();
|
|
|
|
const fontFamily = getContext<Readable<string>>(fontFamilyKey);
|
|
const fontSize = getContext<Readable<number>>(fontSizeKey);
|
|
const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
|
|
|
|
$: empty = $content.length === 0;
|
|
</script>
|
|
|
|
{#if empty}
|
|
<div
|
|
class="field-description"
|
|
style:font-family={$fontFamily}
|
|
style:font-size="{$fontSize}px"
|
|
style:direction={$direction}
|
|
>
|
|
<slot />
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.field-description {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
cursor: text;
|
|
opacity: 0.4;
|
|
|
|
/* same as in ContentEditable */
|
|
padding: 6px;
|
|
|
|
/* stay a on single line */
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|