Release 0.5.2

src/lib/components/EditorialMarkdownField.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import MarkdownPreview from './MarkdownPreview.svelte';
+
+	let {
+		name,
+		label,
+		inputLabel = label,
+		hint = '',
+		emptyText,
+		value = $bindable(),
+		html,
+		privateField = false,
+		rows = 7
+	}: {
+		name: string;
+		label: string;
+		inputLabel?: string;
+		hint?: string;
+		emptyText: string;
+		value: string;
+		html: string;
+		privateField?: boolean;
+		rows?: number;
+	} = $props();
+
+	let editing = $state(false);
+</script>
+
+<section class:private-field={privateField} class:empty={!value.trim()} class="editorial-field">
+	<header>
+		<div>
+			<h3>{label}</h3>
+			{#if hint}<p>{hint}</p>{/if}
+		</div>
+		<button
+			class="text-button editorial-edit-button"
+			type="button"
+			aria-expanded={editing}
+			onclick={() => (editing = !editing)}
+		>
+			{editing ? 'Lesen' : value.trim() ? 'Bearbeiten' : 'Schreiben'}
+		</button>
+	</header>
+
+	{#if editing}
+		<label class="editorial-input">
+			<span class="sr-only">{inputLabel}</span>
+			<textarea aria-label={inputLabel} {name} {rows} maxlength="50000" bind:value></textarea>
+		</label>
+	{:else}
+		<input type="hidden" {name} {value} />
+		{#if value.trim()}
+			<MarkdownPreview {html} />
+		{:else}
+			<button class="editorial-empty" type="button" onclick={() => (editing = true)}>
+				<span>{emptyText}</span><small>Zum Schreiben öffnen</small>
+			</button>
+		{/if}
+	{/if}
+</section>