Release 0.5.3

src/lib/components/MarkdownEditorField.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+
+	let {
+		name,
+		label,
+		value = $bindable(),
+		rows = 7,
+		placeholder = '',
+		privateField = false,
+		form
+	}: {
+		name: string;
+		label: string;
+		value: string;
+		rows?: number;
+		placeholder?: string;
+		privateField?: boolean;
+		form?: string;
+	} = $props();
+
+	let textarea: HTMLTextAreaElement;
+
+	async function replaceSelection(before: string, after = before, fallback = 'Text') {
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const selected = value.slice(start, end) || fallback;
+		value = `${value.slice(0, start)}${before}${selected}${after}${value.slice(end)}`;
+		await tick();
+		textarea.focus();
+		textarea.setSelectionRange(start + before.length, start + before.length + selected.length);
+		textarea.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+
+	async function addList() {
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const selected = value.slice(start, end) || 'Stichpunkt';
+		const replacement = selected
+			.split('\n')
+			.map((line) => `- ${line}`)
+			.join('\n');
+		value = `${value.slice(0, start)}${replacement}${value.slice(end)}`;
+		await tick();
+		textarea.focus();
+		textarea.setSelectionRange(start + 2, start + replacement.length);
+		textarea.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+</script>
+
+<div class:private-field={privateField} class="markdown-editor-field">
+	<div class="markdown-editor-heading">
+		<span
+			>{label}{#if privateField}<small>Nur intern</small>{/if}</span
+		>
+		<span class="markdown-toolbar" role="toolbar" aria-label={`${label} formatieren`}>
+			<button type="button" aria-label="Fett" title="Fett" onclick={() => replaceSelection('**')}
+				><strong>B</strong></button
+			>
+			<button type="button" aria-label="Kursiv" title="Kursiv" onclick={() => replaceSelection('_')}
+				><em>I</em></button
+			>
+			<button type="button" aria-label="Liste" title="Liste" onclick={addList}>• Liste</button>
+			<button
+				type="button"
+				aria-label="Link"
+				title="Link"
+				onclick={() => replaceSelection('[', '](https://)', 'Linktext')}>↗ Link</button
+			>
+		</span>
+	</div>
+	<textarea
+		bind:this={textarea}
+		aria-label={label}
+		{name}
+		{rows}
+		{placeholder}
+		{form}
+		maxlength="50000"
+		bind:value></textarea>
+</div>