refactor(PersonMentionEditor): use data-editor-inner attribute for stable querySelector
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m26s
CI / OCR Service Tests (push) Successful in 35s
CI / Backend Unit Tests (push) Failing after 3m2s
CI / Unit & Component Tests (pull_request) Failing after 3m19s
CI / OCR Service Tests (pull_request) Successful in 38s
CI / Backend Unit Tests (pull_request) Failing after 3m11s

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #375.
This commit is contained in:
Marcel
2026-04-29 21:29:49 +02:00
parent 3c7c7a9aa4
commit b3fe9b1171
2 changed files with 6 additions and 4 deletions

View File

@@ -225,6 +225,7 @@ onMount(() => {
role: 'textbox',
'aria-multiline': 'true',
'aria-label': m.transcription_editor_aria_label(),
'data-editor-inner': '',
class: [
'min-h-[120px] px-1 py-2.5',
'font-serif text-base leading-relaxed text-ink',
@@ -259,8 +260,9 @@ onDestroy(() => {
// placeholder CSS only fires when there is no content (not just on blur).
$effect(() => {
if (!editor || !placeholder) return;
void value; // track value as dependency so this re-runs on content changes
const inner = editorEl?.querySelector('.tiptap-editor-inner') as HTMLElement | null;
void value; // Tiptap's onUpdate always fires on content change, but $effect needs a
// reactive read to re-run — void value registers value as a dependency without using it.
const inner = editorEl?.querySelector('[data-editor-inner]') as HTMLElement | null;
if (!inner) return;
if (editor.isEmpty) {
inner.setAttribute('data-placeholder', placeholder);

View File

@@ -374,7 +374,7 @@ describe('PersonMentionEditor — placeholder behavior', () => {
onChange: () => {}
});
await vi.waitFor(() => {
const inner = document.querySelector('.tiptap-editor-inner') as HTMLElement | null;
const inner = document.querySelector('[data-editor-inner]') as HTMLElement | null;
expect(inner).not.toBeNull();
expect(inner!.getAttribute('data-placeholder')).toBe('Gib Text ein...');
});
@@ -388,7 +388,7 @@ describe('PersonMentionEditor — placeholder behavior', () => {
onChange: () => {}
});
await vi.waitFor(() => {
const inner = document.querySelector('.tiptap-editor-inner') as HTMLElement | null;
const inner = document.querySelector('[data-editor-inner]') as HTMLElement | null;
expect(inner).not.toBeNull();
expect(inner!.hasAttribute('data-placeholder')).toBe(false);
});