marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(person-mention): centralise PERSON_MENTION_SELECTOR constant

Browse Source 
Markus flagged that 'a.person-mention' is a magic string repeated four times
in TranscriptionReadView, plus the CSS rule, plus tests. Extract into a single
exported constant so the renderer template, the delegated event handlers,
and the consumer-side selectors all import the same value.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-29 08:51:25 +02:00
parent 26519d029a
commit 1842e23c81
2 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/components/TranscriptionReadView.svelte
View File

@@ -2,7 +2,11 @@
import type { TranscriptionBlockData } from '$lib/types'; import type { TranscriptionBlockData } from '$lib/types';
import type { components } from '$lib/generated/api'; import type { components } from '$lib/generated/api';
import { splitByMarkers } from '$lib/utils/transcriptionMarkers'; import { splitByMarkers } from '$lib/utils/transcriptionMarkers';
import { renderTranscriptionBody, type SafeHtml } from '$lib/utils/mention'; import {
renderTranscriptionBody,
type SafeHtml,
PERSON_MENTION_SELECTOR
} from '$lib/utils/mention';
import PersonHoverCard from './PersonHoverCard.svelte'; import PersonHoverCard from './PersonHoverCard.svelte';
import type { HoverData, LoadState } from '$lib/types/personHoverCard'; import type { HoverData, LoadState } from '$lib/types/personHoverCard';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@@ -163,15 +167,15 @@ async function handleMentionClick(event: MouseEvent) {
function attachMentionHandlers(node: HTMLElement) { function attachMentionHandlers(node: HTMLElement) {
function onEnter(e: Event) { function onEnter(e: Event) {
const t = e.target as HTMLElement; const t = e.target as HTMLElement;
if (t.matches?.('a.person-mention')) handleMentionEnter(e); if (t.matches?.(PERSON_MENTION_SELECTOR)) handleMentionEnter(e);
} }
function onLeave(e: Event) { function onLeave(e: Event) {
const t = e.target as HTMLElement; const t = e.target as HTMLElement;
if (t.matches?.('a.person-mention')) handleMentionLeave(e); if (t.matches?.(PERSON_MENTION_SELECTOR)) handleMentionLeave(e);
} }
function onClick(e: MouseEvent) { function onClick(e: MouseEvent) {
const t = e.target as HTMLElement; const t = e.target as HTMLElement;
if (t.matches?.('a.person-mention')) handleMentionClick(e); if (t.matches?.(PERSON_MENTION_SELECTOR)) handleMentionClick(e);
} }
// mouseenter does not bubble — capture it. // mouseenter does not bubble — capture it.
node.addEventListener('mouseenter', onEnter, true); node.addEventListener('mouseenter', onEnter, true);

10
frontend/src/lib/utils/mention.ts
View File

@@ -1,5 +1,15 @@
import type { MentionDTO, PersonMention } from '$lib/types'; import type { MentionDTO, PersonMention } from '$lib/types';
/**
* Single-source CSS selector for rendered person-mention anchors. Used by:
* - layout.css (.person-mention rule, focus ring, underline)
* - TranscriptionReadView (delegated mouseenter/leave/click handlers)
* - unit + e2e tests
*
* Keep these in sync — the renderer template below emits exactly this class.
*/
export const PERSON_MENTION_SELECTOR = 'a.person-mention';
/** /**
* Branded string type for HTML that has been pre-escaped and assembled by * Branded string type for HTML that has been pre-escaped and assembled by
* one of the trusted renderers in this module. The brand exists so that * one of the trusted renderers in this module. The brand exists so that