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
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:
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user