ace9602f6e
Handles XSS escaping, whitespace-pre-line, 3-line clamp via inline style, and a toggle button that is only shown when content actually overflows. Refs #844 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.2 KiB
Svelte
48 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
let { description }: { description?: string | null } = $props();
|
|
|
|
let expanded = $state(false);
|
|
let clamped = $state(false);
|
|
let noteEl: HTMLElement | undefined = $state();
|
|
|
|
$effect(() => {
|
|
if (noteEl) {
|
|
clamped = noteEl.scrollHeight > noteEl.clientHeight;
|
|
}
|
|
});
|
|
|
|
function toggle() {
|
|
expanded = !expanded;
|
|
}
|
|
|
|
const hasContent = $derived(!!description && description.trim().length > 0);
|
|
</script>
|
|
|
|
{#if hasContent}
|
|
<div class="mt-1">
|
|
<p
|
|
data-testid="event-note"
|
|
bind:this={noteEl}
|
|
class="font-sans text-xs whitespace-pre-line text-ink-2"
|
|
style={expanded
|
|
? 'white-space:pre-line'
|
|
: 'white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3'}
|
|
>
|
|
{description}
|
|
</p>
|
|
{#if clamped || expanded}
|
|
<button
|
|
data-testid="note-toggle"
|
|
type="button"
|
|
class="mt-0.5 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
aria-expanded={expanded ? 'true' : 'false'}
|
|
onclick={toggle}
|
|
>
|
|
{expanded ? m.timeline_note_show_less() : m.timeline_note_show_more()}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|