+ {#if model.items.length === 0}
+
diff --git a/frontend/src/lib/components/PersonHoverCard.svelte b/frontend/src/lib/components/PersonHoverCard.svelte
index 36a4989d..aac4f883 100644
--- a/frontend/src/lib/components/PersonHoverCard.svelte
+++ b/frontend/src/lib/components/PersonHoverCard.svelte
@@ -109,7 +109,10 @@ const ariaBusy = $derived(state.status === 'loading');
+ {m.person_mention_popup_empty()} +
+ + e.preventDefault()} + > + {m.person_mention_create_new()} + + + {:else} + {#each model.items as person, i (person.id)} + {
+ // Prevent blur on the editor before the selection fires.
+ e.preventDefault();
+ selectItem(person);
+ }}
+ >
+ {person.displayName}
+ {#if formatLifeDateRange(person.birthYear, person.deathYear)}
+
+ {formatLifeDateRange(person.birthYear, person.deathYear)}
+
+ {/if}
+
+ {/each}
+ {/if}
+{dateRange}
{/if}
{#if state.person.alias}
- geb. {state.person.alias}
+
+ {m.person_born_name_prefix()}
+ {state.person.alias}
+
{/if}
{#if familyChips.length > 0}
diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte b/frontend/src/lib/components/PersonMentionEditor.svelte
index df686334..3a9188c1 100644
--- a/frontend/src/lib/components/PersonMentionEditor.svelte
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte
@@ -1,263 +1,279 @@
-
-
-
- {#if popupOpen}
-
+
diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts b/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts
index ea8df7fe..bf4b59ea 100644
--- a/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts
@@ -1,26 +1,19 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+/**
+ * PersonMentionEditor — Tiptap-based component tests.
+ *
+ * All old tests used document.querySelector('textarea') which is dead after
+ * the Tiptap migration. These tests drive the contenteditable via
+ * userEvent.type() and inspect the serialized output from the test host.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
import PersonMentionEditorHost from './PersonMentionEditor.test-host.svelte';
import type { components } from '$lib/generated/api';
type Person = components['schemas']['Person'];
type PersonMention = components['schemas']['PersonMention'];
-// Editor's internal search debounce is 200ms — drive it via fake timers
-// so tests are deterministic and fast (Tester #5506 §1).
-const DEBOUNCE_MS = 200;
-
-async function flushDebounce() {
- await vi.advanceTimersByTimeAsync(DEBOUNCE_MS);
- // Let the awaited fetch resolve and the resulting state assignments flush.
- await vi.runAllTimersAsync();
-}
-
-async function tick() {
- await vi.advanceTimersByTimeAsync(0);
-}
-
const AUGUSTE: Person = {
id: 'p-aug',
firstName: 'Auguste',
@@ -39,39 +32,24 @@ const ANNA: Person = {
} as unknown as Person;
function mockFetchWithPersons(persons: Person[] = [AUGUSTE, ANNA]) {
- const fetchMock = vi
- .fn()
- .mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue(persons) });
- vi.stubGlobal('fetch', fetchMock);
- return fetchMock;
+ vi.stubGlobal(
+ 'fetch',
+ vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue(persons) })
+ );
}
function mockFetchEmpty() {
- const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([]) });
- vi.stubGlobal('fetch', fetchMock);
- return fetchMock;
-}
-
-function mockFetchRejects() {
- const fetchMock = vi.fn().mockRejectedValue(new TypeError('Failed to fetch'));
- vi.stubGlobal('fetch', fetchMock);
- return fetchMock;
-}
-
-function getTextarea(): HTMLTextAreaElement {
- return document.querySelector('textarea')!;
-}
-
-function clickOption(personId: string) {
- const opt = document.querySelector(
- `[role="option"][data-test-person-id="${personId}"]`
- ) as HTMLElement;
- opt.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+ vi.stubGlobal(
+ 'fetch',
+ vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([]) })
+ );
}
type Snapshot = { value: string; mentionedPersons: PersonMention[] };
-function renderHost(initial: { value?: string; mentionedPersons?: PersonMention[] } = {}) {
+function renderHost(
+ initial: { value?: string; mentionedPersons?: PersonMention[]; disabled?: boolean } = {}
+) {
let snapshot: Snapshot = {
value: initial.value ?? '',
mentionedPersons: initial.mentionedPersons ?? []
@@ -79,6 +57,7 @@ function renderHost(initial: { value?: string; mentionedPersons?: PersonMention[
render(PersonMentionEditorHost, {
initialValue: initial.value ?? '',
initialMentions: initial.mentionedPersons ?? [],
+ disabled: initial.disabled ?? false,
onChange: (snap: Snapshot) => {
snapshot = snap;
}
@@ -90,279 +69,300 @@ function renderHost(initial: { value?: string; mentionedPersons?: PersonMention[
};
}
-beforeEach(() => {
- vi.useFakeTimers({ shouldAdvanceTime: true });
-});
-
afterEach(() => {
cleanup();
vi.unstubAllGlobals();
- vi.useRealTimers();
});
// ─── Rendering ────────────────────────────────────────────────────────────────
describe('PersonMentionEditor — rendering', () => {
- it('renders the textarea with placeholder', async () => {
+ it('renders the editor as a textbox (ARIA role from editorProps)', async () => {
render(PersonMentionEditorHost, {
initialValue: '',
initialMentions: [],
- placeholder: 'Transkription…',
onChange: () => {}
});
- await expect.element(page.getByPlaceholder('Transkription…')).toBeInTheDocument();
+ await expect.element(page.getByRole('textbox')).toBeInTheDocument();
});
- it('reflects bound initial value', async () => {
+ it('reflects bound initial value as visible text', async () => {
render(PersonMentionEditorHost, {
initialValue: 'Hallo Welt',
initialMentions: [],
onChange: () => {}
});
- await expect.element(page.getByRole('textbox')).toHaveValue('Hallo Welt');
+ await expect.element(page.getByText('Hallo Welt')).toBeInTheDocument();
});
});
// ─── Typeahead opens on @ ─────────────────────────────────────────────────────
describe('PersonMentionEditor — typeahead', () => {
- it('opens the popup when typing @ + query and shows results', async () => {
+ it('opens the dropdown when typing @ + query and shows results', async () => {
mockFetchWithPersons();
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
- await flushDebounce();
-
- await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+ await vi.waitFor(async () => {
+ await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+ });
});
it('hits /api/persons?q= with the typed query', async () => {
- const fetchMock = mockFetchWithPersons();
+ const fetchMock = vi
+ .fn()
+ .mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([AUGUSTE]) });
+ vi.stubGlobal('fetch', fetchMock);
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
- await flushDebounce();
-
- expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/persons?q=Aug'));
+ await vi.waitFor(() => {
+ expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/persons?q=Aug'));
+ });
});
it('shows life dates next to the name in the dropdown', async () => {
mockFetchWithPersons();
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
- await expect.element(page.getByText('* 1882 – † 1944')).toBeInTheDocument();
+ await vi.waitFor(async () => {
+ await expect.element(page.getByText('* 1882 – † 1944')).toBeInTheDocument();
+ });
});
it('shows empty state when no persons match', async () => {
mockFetchEmpty();
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@xyz';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@xyz');
- await expect.element(page.getByText('Keine Personen gefunden')).toBeInTheDocument();
+ await vi.waitFor(async () => {
+ await expect.element(page.getByText('Keine Personen gefunden')).toBeInTheDocument();
+ });
});
- it('falls back to the empty state when the typeahead fetch rejects (network error)', async () => {
- mockFetchRejects();
+ it('offers a "create new person" link in the empty state', async () => {
+ mockFetchEmpty();
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@xyz');
- await expect.element(page.getByText('Keine Personen gefunden')).toBeInTheDocument();
- });
-
- it('keeps the popup open when the query has a trailing space (multi-word names)', async () => {
- mockFetchWithPersons();
- renderHost();
-
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Auguste ';
- ta.selectionStart = 9;
- ta.selectionEnd = 9;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
-
- await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+ await vi.waitFor(async () => {
+ const link = page.getByRole('link', { name: /Neue Person anlegen/ });
+ await expect.element(link).toBeVisible();
+ await expect.element(link).toHaveAttribute('href', '/persons/new');
+ });
});
});
-// ─── Selection writes text + sidecar ─────────────────────────────────────────
+// ─── AC-1: typed text becomes displayName, not DB name ───────────────────────
-describe('PersonMentionEditor — selecting a person', () => {
- it('inserts @DisplayName followed by a trailing space into the textarea', async () => {
+describe('PersonMentionEditor — AC-1: typed text as displayName', () => {
+ it('stores the typed query as displayName, not the person DB name', async () => {
mockFetchWithPersons();
const host = renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ // User types "@Aug" (not the full "Auguste Raddatz") and selects Auguste Raddatz
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
- clickOption('p-aug');
- await tick();
+ await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
- expect(host.snapshot.value).toBe('@Auguste Raddatz ');
+ await vi.waitFor(() => {
+ expect(host.snapshot.mentionedPersons).toHaveLength(1);
+ expect(host.snapshot.mentionedPersons[0]).toEqual({
+ personId: 'p-aug',
+ displayName: 'Aug' // typed text, not "Auguste Raddatz"
+ });
+ });
});
- it('pushes {personId, displayName} into the bound mentionedPersons array', async () => {
+ it('regression: text value contains the typed query, not the full DB name', async () => {
mockFetchWithPersons();
const host = renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
- clickOption('p-aug');
- await tick();
+ await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
- expect(host.snapshot.mentionedPersons).toEqual([
- { personId: 'p-aug', displayName: 'Auguste Raddatz' }
- ]);
+ await vi.waitFor(() => {
+ // Text should contain "@Aug " (typed text + space), not "@Auguste Raddatz "
+ expect(host.snapshot.value).toContain('@Aug');
+ expect(host.snapshot.value).not.toContain('@Auguste Raddatz');
+ });
+ });
+
+ it('pushes {personId, displayName} into mentionedPersons sidecar', async () => {
+ mockFetchWithPersons();
+ const host = renderHost();
+
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
+
+ await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
+
+ await vi.waitFor(() => {
+ expect(host.snapshot.mentionedPersons).toEqual([{ personId: 'p-aug', displayName: 'Aug' }]);
+ });
});
it('does not duplicate the sidecar entry when the same person is selected twice', async () => {
mockFetchWithPersons();
const host = renderHost({
- value: '@Auguste Raddatz ',
- mentionedPersons: [{ personId: 'p-aug', displayName: 'Auguste Raddatz' }]
+ value: '@Aug ',
+ mentionedPersons: [{ personId: 'p-aug', displayName: 'Aug' }]
});
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Auguste Raddatz @Aug';
- ta.selectionStart = ta.value.length;
- ta.selectionEnd = ta.value.length;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
- clickOption('p-aug');
- await tick();
+ await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
- expect(host.snapshot.mentionedPersons).toHaveLength(1);
+ await vi.waitFor(() => {
+ expect(host.snapshot.mentionedPersons).toHaveLength(1);
+ });
});
});
-// ─── Keyboard navigation (B11b) ──────────────────────────────────────────────
+// ─── Keyboard navigation ──────────────────────────────────────────────────────
-describe('PersonMentionEditor — keyboard navigation (B11b)', () => {
- it('ArrowDown / ArrowUp cycle the highlighted result', async () => {
+describe('PersonMentionEditor — keyboard navigation', () => {
+ it('Enter selects the highlighted result', async () => {
+ mockFetchWithPersons();
+ const host = renderHost();
+
+ await userEvent.type(page.getByRole('textbox'), '@A');
+
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
+
+ await userEvent.keyboard('{Enter}');
+
+ await vi.waitFor(() => {
+ expect(host.snapshot.mentionedPersons).toHaveLength(1);
+ });
+ });
+
+ it('ArrowDown moves the highlight to the next result', async () => {
mockFetchWithPersons();
renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@A';
- ta.selectionStart = 2;
- ta.selectionEnd = 2;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@A');
- const optAuguste = document.querySelector(
- '[role="option"][data-test-person-id="p-aug"]'
- ) as HTMLElement;
- const optAnna = document.querySelector(
- '[role="option"][data-test-person-id="p-anna"]'
- ) as HTMLElement;
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
+ });
- expect(optAuguste.getAttribute('aria-selected')).toBe('true');
- expect(optAnna.getAttribute('aria-selected')).toBe('false');
+ await userEvent.keyboard('{ArrowDown}');
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
- await tick();
-
- expect(optAuguste.getAttribute('aria-selected')).toBe('false');
- expect(optAnna.getAttribute('aria-selected')).toBe('true');
-
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
- await tick();
-
- expect(optAuguste.getAttribute('aria-selected')).toBe('true');
- expect(optAnna.getAttribute('aria-selected')).toBe('false');
+ await vi.waitFor(async () => {
+ const annaOption = page.getByRole('option', { name: /Anna Schmidt/ });
+ await expect.element(annaOption).toHaveAttribute('aria-selected', 'true');
+ });
});
- it('Enter selects the currently highlighted result', async () => {
+ it('Escape closes the dropdown without inserting', async () => {
mockFetchWithPersons();
const host = renderHost();
- const ta = getTextarea();
- ta.focus();
- ta.value = '@A';
- ta.selectionStart = 2;
- ta.selectionEnd = 2;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
+ await userEvent.type(page.getByRole('textbox'), '@Aug');
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
- await tick();
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
- await tick();
+ await vi.waitFor(async () => {
+ await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+ });
- expect(host.snapshot.mentionedPersons).toEqual([
- { personId: 'p-anna', displayName: 'Anna Schmidt' }
- ]);
- });
+ await userEvent.keyboard('{Escape}');
- it('Escape closes the popup without inserting anything', async () => {
- mockFetchWithPersons();
- const host = renderHost();
+ await vi.waitFor(async () => {
+ await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
+ });
- const ta = getTextarea();
- ta.focus();
- ta.value = '@Aug';
- ta.selectionStart = 4;
- ta.selectionEnd = 4;
- ta.dispatchEvent(new Event('input', { bubbles: true }));
- await flushDebounce();
-
- ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
- await tick();
-
- await expect.element(page.getByText('Auguste Raddatz')).not.toBeInTheDocument();
- expect(host.snapshot.value).toBe('@Aug');
expect(host.snapshot.mentionedPersons).toEqual([]);
});
});
+// ─── Disabled state (WCAG 2.1.1 — keyboard users) ────────────────────────────
+
+describe('PersonMentionEditor — disabled state', () => {
+ it('sets contenteditable=false on the editor when disabled', async () => {
+ renderHost({ value: 'Bestehender Text', disabled: true });
+
+ await vi.waitFor(() => {
+ const textbox = document.querySelector('[role="textbox"]') as HTMLElement | null;
+ expect(textbox).not.toBeNull();
+ expect(textbox!.getAttribute('contenteditable')).toBe('false');
+ });
+ });
+
+ it('exposes aria-disabled=true on the editor wrapper when disabled', async () => {
+ renderHost({ disabled: true });
+
+ await vi.waitFor(() => {
+ const wrapper = document.querySelector('[aria-disabled="true"]');
+ expect(wrapper).not.toBeNull();
+ });
+ });
+
+ it('keeps the editor editable (contenteditable=true) when not disabled', async () => {
+ renderHost({ disabled: false });
+
+ await vi.waitFor(() => {
+ const textbox = document.querySelector('[role="textbox"]') as HTMLElement | null;
+ expect(textbox).not.toBeNull();
+ expect(textbox!.getAttribute('contenteditable')).toBe('true');
+ });
+ });
+});
+
+// ─── Security — XSS in displayName (CWE-79) ──────────────────────────────────
+
+describe('PersonMentionEditor — XSS resistance', () => {
+ it('renders a malicious displayName as text, not as HTML elements', async () => {
+ // A historical sidecar entry whose displayName contains an HTML payload
+ // that would execute if interpolated as raw HTML. Tiptap's renderHTML
+ // returns the @-prefixed string as the third tuple entry, which
+ // ProseMirror's DOMSerializer treats as a Text node — escaping it.
+ const maliciousMention: PersonMention = {
+ personId: '00000000-0000-0000-0000-000000000001',
+ displayName: '
- {#if loading}
-
- {/if}
-{m.comp_typeahead_loading()}
- {:else if results.length === 0} -
-
- {:else}
- {#each results as person, i (person.id)}
- {m.person_mention_popup_empty()}
- - {m.person_mention_create_new()} → - - {
- e.preventDefault();
- selectPerson(person);
- }}
- >
- {person.displayName}
- {#if formatLifeDateRange(person.birthYear, person.deathYear)}
-
- {formatLifeDateRange(person.birthYear, person.deathYear)}
-
- {/if}
-
- {/each}
- {/if}
-
-
- localText,
+ (v) => {
+ localText = v;
+ emitChange();
+ }}
+ bind:mentionedPersons={() => localMentions,
+ (next) => {
+ localMentions = next;
+ emitChange();
+ }}
+ placeholder={m.transcription_block_placeholder()}
+ onfocus={onFocus}
+ onSelectionChange={(text) => (selectedQuote = text)}
+ />
{#if selectedQuote}
();
+ const lines: string[] = [];
+
+ for (const para of paragraphs) {
+ let line = '';
+ for (const node of para.content ?? []) {
+ if (node.type === 'text') {
+ line += node.text ?? '';
+ } else if (node.type === 'mention') {
+ const { displayName, personId } = node.attrs ?? {};
+ line += `@${displayName}`;
+ if (!seenIds.has(personId)) {
+ seenIds.add(personId);
+ mentionedPersons.push({ personId, displayName });
+ }
+ }
+ }
+ lines.push(line);
+ }
+
+ return { text: lines.join('\n'), mentionedPersons };
+}
diff --git a/frontend/src/lib/utils/personMention.spec.ts b/frontend/src/lib/utils/personMention.spec.ts
deleted file mode 100644
index 7101c27c..00000000
--- a/frontend/src/lib/utils/personMention.spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { detectPersonMention } from './personMention';
-
-describe('detectPersonMention', () => {
- it('returns null when text has no @', () => {
- expect(detectPersonMention('hello world', 11)).toBeNull();
- });
-
- it('returns null when @ is preceded by a non-whitespace character (email pattern)', () => {
- expect(detectPersonMention('user@example', 12)).toBeNull();
- });
-
- it('returns query for @ at the very start of string', () => {
- expect(detectPersonMention('@Aug', 4)).toBe('Aug');
- });
-
- it('returns empty string immediately after @', () => {
- expect(detectPersonMention('@', 1)).toBe('');
- });
-
- it('returns single-word query', () => {
- expect(detectPersonMention('hi @Auguste', 11)).toBe('Auguste');
- });
-
- it('keeps the trigger active when the query has a trailing space', () => {
- expect(detectPersonMention('hi @Auguste ', 12)).toBe('Auguste ');
- });
-
- it('returns multi-word query (spaces allowed)', () => {
- expect(detectPersonMention('hi @Auguste Raddatz', 19)).toBe('Auguste Raddatz');
- });
-
- it('returns single-character query', () => {
- expect(detectPersonMention('@M', 2)).toBe('M');
- });
-
- it('returns null when the query crosses a newline', () => {
- expect(detectPersonMention('@Aug\nfoo', 8)).toBeNull();
- });
-
- it('returns null when a second @ appears in the query (next mention starts)', () => {
- expect(detectPersonMention('@Aug@bar', 8)).toBeNull();
- });
-
- it('uses the most recent @ when separated by whitespace', () => {
- // '@Aug @Bert' with cursor at end — the second @ is the trigger.
- expect(detectPersonMention('@Aug @Bert', 10)).toBe('Bert');
- });
-
- it('returns the query when the cursor sits exactly at a newline boundary', () => {
- // '@Aug\nfoo' with cursor at index 4 — right at the newline before it
- // is consumed. The query is still 'Aug' because nothing past the cursor
- // counts.
- expect(detectPersonMention('@Aug\nfoo', 4)).toBe('Aug');
- });
-
- it('returns null when cursor is before the @', () => {
- expect(detectPersonMention('@Hans', 0)).toBeNull();
- });
-
- it('uses the most recent @ in the text', () => {
- // cursor is just after the second @ + a few chars
- expect(detectPersonMention('hi @Anna and @Bert', 18)).toBe('Bert');
- });
-});
diff --git a/frontend/src/lib/utils/personMention.ts b/frontend/src/lib/utils/personMention.ts
deleted file mode 100644
index 7611c89f..00000000
--- a/frontend/src/lib/utils/personMention.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Given the current textarea value and cursor position, returns the
- * @-person-mention query being typed (the text after the last triggering @),
- * or null if no person-mention is active.
- *
- * Rules — distinct from comment-mentions in `mention.ts`:
- * - @ must be at the start of the string or preceded by whitespace
- * - The query may contain spaces (historical persons commonly have multi-word
- * display names — "Auguste Raddatz", "Maria von Müller-Schultz")
- * - The query stops at a newline or at a second @ (the next mention starts)
- */
-export function detectPersonMention(text: string, cursorPos: number): string | null {
- const before = text.slice(0, cursorPos);
- const atIndex = before.lastIndexOf('@');
- if (atIndex === -1) return null;
-
- if (atIndex > 0 && !/\s/.test(before[atIndex - 1])) return null;
-
- const query = before.slice(atIndex + 1);
- if (query.includes('\n') || query.includes('@')) return null;
-
- return query;
-}
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index e4d9cce0..f44f295c 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -416,6 +416,23 @@
}
}
+/* ─── Tiptap editor ─────────────────────────────────────────────────────────── */
+
+/* Placeholder: shown on the inner contenteditable when the editor is empty
+ and unfocused. Uses the data-placeholder attribute set via editorProps. */
+.tiptap-editor-inner[data-placeholder]:not(:focus)::before {
+ content: attr(data-placeholder);
+ color: var(--c-ink-3);
+ pointer-events: none;
+ float: left;
+ height: 0;
+}
+
+/* Remove default ProseMirror focus ring — the outer wrapper has its own. */
+.tiptap-editor-inner:focus {
+ outline: none;
+}
+
@keyframes slide {
0% {
transform: translateX(-100%);
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0c70bf19..91d23d4b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -493,6 +493,181 @@
resolved "https://registry.npmjs.org/@testing-library/svelte-core/-/svelte-core-1.0.0.tgz"
integrity sha512-VkUePoLV6oOYwSUvX6ShA8KLnJqZiYMIbP2JW2t0GLWLkJxKGvuH5qrrZBV/X7cXFnLGuFQEC7RheYiZOW68KQ==
+"@tiptap/core@^3.22.5", "@tiptap/core@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/core/-/core-3.22.5.tgz"
+ integrity sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==
+
+"@tiptap/extension-blockquote@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.22.5.tgz"
+ integrity sha512-ajyP5W8fG5Hrru47T/eF3xMKOpNvWofgNJqBTeNuGl02sYxsy9a4EunyFxudsaZP9WW3VOD4SaIWr5+MqpbnOQ==
+
+"@tiptap/extension-bold@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.22.5.tgz"
+ integrity sha512-l/uDtpJISiFFyfctvnODNWBN/XPZI1jVZRacTRDDnSn8+x6KQ7G2qgFYueU7KvVJGDFVT39Iio56mcFRG/Pozg==
+
+"@tiptap/extension-bullet-list@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.22.5.tgz"
+ integrity sha512-cf54fG9AybU8NgPMv1TOcoqAkELeRc/VpnSCt/rIJZphWQx9nsFmrtkrlCatrIcCaGtNZYwlHlMnC5LVVMu0uA==
+
+"@tiptap/extension-code-block@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.22.5.tgz"
+ integrity sha512-d123kCfLdJTi4fue1m0+TNFztDkmIRSZGZmGu6H9KqwG5Q7IzjT9o8lzRsz+pXxYqHvqgYmXoEpM6srbzXx/Ag==
+
+"@tiptap/extension-code@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.22.5.tgz"
+ integrity sha512-mwDNOJC9rYbDu/JcqrN4dbUQRklJU8Fuk2raxD/IvFw9qUIcPCmxQ2XT9UTKmZz/Ju7Kdy72fss6XpgWv6gLAQ==
+
+"@tiptap/extension-document@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.22.5.tgz"
+ integrity sha512-8NJERd+pCtvSuEP4C4WMGYmRRCV12ePZL7bC+QUdFlbdXg+kNZS0zZ7hh879tYA0Kidbi8rWWD1Tx+H2ezkmMw==
+
+"@tiptap/extension-dropcursor@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.22.5.tgz"
+ integrity sha512-Mp40DaFrY3sEUVtFqmxrR0BmU4G3k8GCYYNGqNa9OqWv7BrcFDC03V2n3okESDKt4MKkzhQQmypq+ouLy8dLfA==
+
+"@tiptap/extension-gapcursor@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.22.5.tgz"
+ integrity sha512-4WkMu7qqjbsm8hCQS+8X+la1wjriN0SKoRdvpfKH33qM50MB34tYJuGLAO+y7TTh4MMMco3AZCKPBL5JVMqNIg==
+
+"@tiptap/extension-hard-break@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.22.5.tgz"
+ integrity sha512-n0R2mUVYZU2AVbJhg/WcY9+zx690wVwvsItHJf0DrYbf1tCYHx+PRHUt/AoXk6u8BSmnkb8/FDziS8m3mjfpSg==
+
+"@tiptap/extension-heading@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.22.5.tgz"
+ integrity sha512-hjyEG4947PAhMBfP1G6B0QAh6+y9mp2C5BQmNjprA05/lQzDAT7KFZzNh8ZVp3ol6aICKq/N1gFOW9Dc/9FUOw==
+
+"@tiptap/extension-horizontal-rule@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.5.tgz"
+ integrity sha512-vUV0/ugIbXOc8SJib0h8UMhgcqZXWu/dkEhlswZN4VVven1o5enkfxEiDw+OyIJHi5rUkrdhsQ/KTxG/Xb7X8A==
+
+"@tiptap/extension-italic@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.22.5.tgz"
+ integrity sha512-4T8baSiLkeIymTgEwirxDFt5YgYofkP3m1+MGYdGy2HKcOK+1vpvlPhEO1X5qtZngtJW5S4+njKjinRg52A4PA==
+
+"@tiptap/extension-link@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.22.5.tgz"
+ integrity sha512-d671MvF3GPKoS2OVxjIlQ7hIE7MS3hREdR+d4cvnnoiLLD+ZJ6KgDnxmWqF0a1s4qxLWK2KxKRSOIfYGE31QWQ==
+ dependencies:
+ linkifyjs "^4.3.2"
+
+"@tiptap/extension-list-item@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.22.5.tgz"
+ integrity sha512-W7uTmyKLhlsvuTPLv+8WwnsY+mlikBFIoLSvVcBaFt4MwpsZ+DeB6KQg02Y7tbtaAnG7rXu9Fvw2QORh2P728A==
+
+"@tiptap/extension-list-keymap@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.22.5.tgz"
+ integrity sha512-cGUnxJ0y515e1bVHNjUmbx7oWHoEon59w6BA5N2KwV9iW2mZZchlTX4yxJSOX+ixeVRChsa7YwC3Z1jUZ6AMEg==
+
+"@tiptap/extension-list@^3.22.5", "@tiptap/extension-list@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.22.5.tgz"
+ integrity sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==
+
+"@tiptap/extension-mention@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-mention/-/extension-mention-3.22.5.tgz"
+ integrity sha512-rGTbTjyxLc5C/6QjfbQF53nMbxjVgJU1VK6Si1i1J2c5DU09COgEFlYvi4YHjb3xz39SprPfG+GTtgD96eg7Ww==
+
+"@tiptap/extension-ordered-list@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.22.5.tgz"
+ integrity sha512-OXdh4k4CNrukwiSdWdEQ49uvgnqvR0Z9aNSP4HI5/kZQ/Te1NtRtYCpUrzWyO/7CtjcCisXHti0o9C/TV8YMbQ==
+
+"@tiptap/extension-paragraph@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.22.5.tgz"
+ integrity sha512-52KCto4+XKpnBWpIufspWLyq4UWxAWC72ANPdGuIhbi72NRTabiTbTVN40uwGSPkyakeESG0/vKdWJCVvB4f0g==
+
+"@tiptap/extension-strike@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.22.5.tgz"
+ integrity sha512-42WrrFK5gOom/0znH85x12Mw5IQ/6O6DWdyUWoRIrNA/qJpuHtU8oVU+bIgU2tuomMGHruRjIzgBQv5sBjEtww==
+
+"@tiptap/extension-text@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.22.5.tgz"
+ integrity sha512-bzpDOdAEo1JeoVZDIyV0oY0jGXkEG+AzF70SzHoRSjOvFDtKWunyXf9eO1OnOr2/fmMcckT2qwUBNBMQplWBzw==
+
+"@tiptap/extension-underline@^3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.22.5.tgz"
+ integrity sha512-9ut09rJD0iEbS6sk7yd2j6IwuFDLTNmDEGTDLodvqAfi+bq7ddsTDv0YviXoZaA9sdHAdTEVr2ITy2m6WK5jpA==
+
+"@tiptap/extensions@^3.22.5", "@tiptap/extensions@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.22.5.tgz"
+ integrity sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==
+
+"@tiptap/pm@^3.22.5", "@tiptap/pm@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/pm/-/pm-3.22.5.tgz"
+ integrity sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==
+ dependencies:
+ prosemirror-changeset "^2.3.0"
+ prosemirror-commands "^1.6.2"
+ prosemirror-dropcursor "^1.8.1"
+ prosemirror-gapcursor "^1.3.2"
+ prosemirror-history "^1.4.1"
+ prosemirror-keymap "^1.2.2"
+ prosemirror-model "^1.24.1"
+ prosemirror-schema-list "^1.5.0"
+ prosemirror-state "^1.4.3"
+ prosemirror-tables "^1.6.4"
+ prosemirror-transform "^1.10.2"
+ prosemirror-view "^1.38.1"
+
+"@tiptap/starter-kit@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.22.5.tgz"
+ integrity sha512-LZ/LYbwH6rnDi5DnRyagkuNsYAVyhM+yJvvz+ZuYA0JkPiTXJV86J5PWSKew8M0gVfMHcNVtKjfQCvViFCeIgw==
+ dependencies:
+ "@tiptap/core" "^3.22.5"
+ "@tiptap/extension-blockquote" "^3.22.5"
+ "@tiptap/extension-bold" "^3.22.5"
+ "@tiptap/extension-bullet-list" "^3.22.5"
+ "@tiptap/extension-code" "^3.22.5"
+ "@tiptap/extension-code-block" "^3.22.5"
+ "@tiptap/extension-document" "^3.22.5"
+ "@tiptap/extension-dropcursor" "^3.22.5"
+ "@tiptap/extension-gapcursor" "^3.22.5"
+ "@tiptap/extension-hard-break" "^3.22.5"
+ "@tiptap/extension-heading" "^3.22.5"
+ "@tiptap/extension-horizontal-rule" "^3.22.5"
+ "@tiptap/extension-italic" "^3.22.5"
+ "@tiptap/extension-link" "^3.22.5"
+ "@tiptap/extension-list" "^3.22.5"
+ "@tiptap/extension-list-item" "^3.22.5"
+ "@tiptap/extension-list-keymap" "^3.22.5"
+ "@tiptap/extension-ordered-list" "^3.22.5"
+ "@tiptap/extension-paragraph" "^3.22.5"
+ "@tiptap/extension-strike" "^3.22.5"
+ "@tiptap/extension-text" "^3.22.5"
+ "@tiptap/extension-underline" "^3.22.5"
+ "@tiptap/extensions" "^3.22.5"
+ "@tiptap/pm" "^3.22.5"
+
+"@tiptap/suggestion@3.22.5":
+ version "3.22.5"
+ resolved "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-3.22.5.tgz"
+ integrity sha512-Uv79Ht/o4mx1GWIT65jeQTE67LMrA+K7d8p51XOe9PJw0H0fS3iCdeMJ8tAo3h6QrMJFejdsB7z8jJL9UbAnhA==
+
"@types/chai@^5.2.2":
version "5.2.3"
resolved "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz"
@@ -1508,6 +1683,11 @@ lilconfig@^2.0.5:
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+linkifyjs@^4.3.2:
+ version "4.3.2"
+ resolved "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz"
+ integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
+
locate-character@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz"
@@ -1645,6 +1825,11 @@ optionator@^0.9.3:
type-check "^0.4.0"
word-wrap "^1.2.5"
+orderedmap@^2.0.0:
+ version "2.1.1"
+ resolved "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz"
+ integrity sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==
+
p-limit@^3.0.2:
version "3.1.0"
resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
@@ -1800,6 +1985,111 @@ prettier@^3.0, prettier@^3.0.0, prettier@^3.6.2:
resolved "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz"
integrity sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==
+prosemirror-changeset@^2.3.0:
+ version "2.4.1"
+ resolved "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz"
+ integrity sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==
+ dependencies:
+ prosemirror-transform "^1.0.0"
+
+prosemirror-commands@^1.6.2:
+ version "1.7.1"
+ resolved "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz"
+ integrity sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==
+ dependencies:
+ prosemirror-model "^1.0.0"
+ prosemirror-state "^1.0.0"
+ prosemirror-transform "^1.10.2"
+
+prosemirror-dropcursor@^1.8.1:
+ version "1.8.2"
+ resolved "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz"
+ integrity sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==
+ dependencies:
+ prosemirror-state "^1.0.0"
+ prosemirror-transform "^1.1.0"
+ prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.3.2:
+ version "1.4.1"
+ resolved "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz"
+ integrity sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==
+ dependencies:
+ prosemirror-keymap "^1.0.0"
+ prosemirror-model "^1.0.0"
+ prosemirror-state "^1.0.0"
+ prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.4.1:
+ version "1.5.0"
+ resolved "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz"
+ integrity sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==
+ dependencies:
+ prosemirror-state "^1.2.2"
+ prosemirror-transform "^1.0.0"
+ prosemirror-view "^1.31.0"
+ rope-sequence "^1.3.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.2, prosemirror-keymap@^1.2.3:
+ version "1.2.3"
+ resolved "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz"
+ integrity sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==
+ dependencies:
+ prosemirror-state "^1.0.0"
+ w3c-keyname "^2.2.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.24.1, prosemirror-model@^1.25.4:
+ version "1.25.4"
+ resolved "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz"
+ integrity sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==
+ dependencies:
+ orderedmap "^2.0.0"
+
+prosemirror-schema-list@^1.5.0:
+ version "1.5.1"
+ resolved "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz"
+ integrity sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==
+ dependencies:
+ prosemirror-model "^1.0.0"
+ prosemirror-state "^1.0.0"
+ prosemirror-transform "^1.7.3"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.3, prosemirror-state@^1.4.4:
+ version "1.4.4"
+ resolved "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz"
+ integrity sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==
+ dependencies:
+ prosemirror-model "^1.0.0"
+ prosemirror-transform "^1.0.0"
+ prosemirror-view "^1.27.0"
+
+prosemirror-tables@^1.6.4:
+ version "1.8.5"
+ resolved "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz"
+ integrity sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==
+ dependencies:
+ prosemirror-keymap "^1.2.3"
+ prosemirror-model "^1.25.4"
+ prosemirror-state "^1.4.4"
+ prosemirror-transform "^1.10.5"
+ prosemirror-view "^1.41.4"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.10.5, prosemirror-transform@^1.7.3:
+ version "1.12.0"
+ resolved "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz"
+ integrity sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==
+ dependencies:
+ prosemirror-model "^1.21.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.38.1, prosemirror-view@^1.41.4:
+ version "1.41.8"
+ resolved "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.8.tgz"
+ integrity sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==
+ dependencies:
+ prosemirror-model "^1.20.0"
+ prosemirror-state "^1.0.0"
+ prosemirror-transform "^1.1.0"
+
punycode@^2.1.0:
version "2.3.1"
resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -1863,6 +2153,11 @@ rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^2.68.0||^3.0.0||^4.0.0, rollup@^
"@rollup/rollup-win32-x64-msvc" "4.59.0"
fsevents "~2.3.2"
+rope-sequence@^1.3.0:
+ version "1.3.4"
+ resolved "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz"
+ integrity sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==
+
sade@^1.7.4:
version "1.8.1"
resolved "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
@@ -2178,6 +2473,11 @@ vitest@^4.0.0, vitest@^4.0.10, vitest@4.1.0:
vite "^6.0.0 || ^7.0.0 || ^8.0.0-0"
why-is-node-running "^2.3.0"
+w3c-keyname@^2.2.0:
+ version "2.2.8"
+ resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz"
+ integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
webpack-virtual-modules@^0.6.2:
version "0.6.2"
resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz"
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 00000000..bcb6238b
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,10 @@
+{
+ "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+ "packageRules": [
+ {
+ "matchPackagePatterns": ["^@tiptap/"],
+ "groupName": "tiptap",
+ "automerge": false
+ }
+ ]
+}
- localText,
- (v) => {
- localText = v;
- emitChange();
- }}
- bind:mentionedPersons={() => localMentions,
- (next) => {
- localMentions = next;
- emitChange();
- }}
- placeholder={m.transcription_block_placeholder()}
- onfocus={onFocus}
- captureTextarea={captureTextarea}
- />
-
+
+ {m.transcription_block_quote_hint()}
diff --git a/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts b/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts index c05a8c88..85961e75 100644 --- a/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts +++ b/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts @@ -41,8 +41,7 @@ describe('TranscriptionBlock — rendering', () => { it('renders text in textarea', async () => { renderBlock(); - const textarea = page.getByRole('textbox'); - await expect.element(textarea).toHaveValue('Liebe Mutter,'); + await expect.element(page.getByText('Liebe Mutter,')).toBeInTheDocument(); }); it('renders optional label when provided', async () => { @@ -226,14 +225,18 @@ describe('TranscriptionBlock — delete confirmation', () => { // ─── Quote selection ───────────────────────────────────────────────────────── describe('TranscriptionBlock — quote selection', () => { - it('shows quote hint after text is selected in textarea', async () => { + it('shows quote hint after text is selected in the editor', async () => { renderBlock({ text: 'Breslau, den 12. August' }); await page.getByRole('textbox').click(); - // Select text and fire mouseup via native DOM — locator.selectText/dispatchEvent not available - const el = document.querySelector('textarea') as HTMLTextAreaElement; - el.focus(); - el.setSelectionRange(0, el.value.length); - el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })); + // Select all text in the contenteditable via the native Selection API. + // Tiptap fires selectionUpdate which the block forwards as onSelectionChange. + const editorEl = document.querySelector('[role="textbox"]') as HTMLElement; + const range = document.createRange(); + range.selectNodeContents(editorEl); + const selection = window.getSelection()!; + selection.removeAllRanges(); + selection.addRange(range); + editorEl.dispatchEvent(new Event('input', { bubbles: true })); await expect.element(page.getByText(/Zitat/)).toBeInTheDocument(); }); }); diff --git a/frontend/src/lib/errors.ts b/frontend/src/lib/errors.ts index 3c80a1da..e57f212e 100644 --- a/frontend/src/lib/errors.ts +++ b/frontend/src/lib/errors.ts @@ -8,7 +8,6 @@ export type ErrorCode = | 'PERSON_NOT_FOUND' | 'ALIAS_NOT_FOUND' | 'INVALID_PERSON_TYPE' - | 'PERSON_RENAME_CONFLICT' | 'DOCUMENT_NOT_FOUND' | 'DOCUMENT_NO_FILE' | 'FILE_NOT_FOUND' @@ -80,8 +79,6 @@ export function getErrorMessage(code: ErrorCode | string | undefined): string { return m.error_alias_not_found(); case 'INVALID_PERSON_TYPE': return m.error_invalid_person_type(); - case 'PERSON_RENAME_CONFLICT': - return m.error_person_rename_conflict(); case 'DOCUMENT_NOT_FOUND': return m.error_document_not_found(); case 'DOCUMENT_NO_FILE': diff --git a/frontend/src/lib/utils/mentionSerializer.spec.ts b/frontend/src/lib/utils/mentionSerializer.spec.ts new file mode 100644 index 00000000..19b4c4a2 --- /dev/null +++ b/frontend/src/lib/utils/mentionSerializer.spec.ts @@ -0,0 +1,138 @@ +import { describe, it, expect } from 'vitest'; +import { deserialize, serialize } from './mentionSerializer'; +import type { PersonMention } from '$lib/types'; + +// ─── deserialize ───────────────────────────────────────────────────────────── + +describe('deserialize', () => { + it('returns a valid Tiptap doc for an empty string', () => { + const doc = deserialize('', []); + expect(doc.type).toBe('doc'); + expect(doc.content).toHaveLength(1); + expect(doc.content![0].type).toBe('paragraph'); + }); + + it('returns plain text node for text with no mentions', () => { + const doc = deserialize('Hallo Welt', []); + const para = doc.content![0]; + expect(para.content).toHaveLength(1); + expect(para.content![0]).toEqual({ type: 'text', text: 'Hallo Welt' }); + }); + + it('places a mention node at the correct position in the paragraph', () => { + const sidecar: PersonMention[] = [{ personId: 'uuid-x', displayName: 'Clara' }]; + const doc = deserialize('Hallo @Clara Welt', sidecar); + const nodes = doc.content![0].content!; + expect(nodes).toHaveLength(3); + expect(nodes[0]).toEqual({ type: 'text', text: 'Hallo ' }); + expect(nodes[1]).toMatchObject({ + type: 'mention', + attrs: { displayName: 'Clara', personId: 'uuid-x' } + }); + expect(nodes[2]).toEqual({ type: 'text', text: ' Welt' }); + }); + + it('prefers the longer displayName when two sidecar entries share a prefix', () => { + const sidecar: PersonMention[] = [ + { personId: 'uuid-short', displayName: 'Auguste' }, + { personId: 'uuid-long', displayName: 'Auguste Raddatz' } + ]; + const doc = deserialize('@Auguste Raddatz', sidecar); + const nodes = doc.content![0].content!; + expect(nodes).toHaveLength(1); + expect(nodes[0]).toMatchObject({ + type: 'mention', + attrs: { personId: 'uuid-long', displayName: 'Auguste Raddatz' } + }); + }); + + it('splits multiple paragraphs on newline', () => { + const doc = deserialize('Zeile 1\nZeile 2', []); + expect(doc.content).toHaveLength(2); + expect(doc.content![0].content![0]).toEqual({ type: 'text', text: 'Zeile 1' }); + expect(doc.content![1].content![0]).toEqual({ type: 'text', text: 'Zeile 2' }); + }); +}); + +// ─── serialize ─────────────────────────────────────────────────────────────── + +describe('serialize', () => { + it('serializes plain text unchanged', () => { + const doc = deserialize('Hallo Welt', []); + const { text, mentionedPersons } = serialize(doc); + expect(text).toBe('Hallo Welt'); + expect(mentionedPersons).toEqual([]); + }); + + it('serializes mention node back to @displayName', () => { + const sidecar: PersonMention[] = [{ personId: 'uuid-x', displayName: 'Clara' }]; + const doc = deserialize('Hallo @Clara Welt', sidecar); + const { text, mentionedPersons } = serialize(doc); + expect(text).toBe('Hallo @Clara Welt'); + expect(mentionedPersons).toEqual([{ personId: 'uuid-x', displayName: 'Clara' }]); + }); + + it('joins multi-paragraph doc back with newlines', () => { + const doc = deserialize('Zeile 1\nZeile 2', []); + const { text } = serialize(doc); + expect(text).toBe('Zeile 1\nZeile 2'); + }); + + it('de-duplicates repeated mentions in the sidecar', () => { + const sidecar: PersonMention[] = [{ personId: 'uuid-x', displayName: 'Clara' }]; + const doc = deserialize('@Clara und @Clara', sidecar); + const { mentionedPersons } = serialize(doc); + expect(mentionedPersons).toHaveLength(1); + expect(mentionedPersons[0].personId).toBe('uuid-x'); + }); +}); + +// ─── Round-trip invariant ───────────────────────────────────────────────────── + +describe('round-trip invariant', () => { + it('text is preserved exactly through deserialize → serialize', () => { + const cases = [ + ['', []], + ['Hallo Welt', []], + ['@Clara schreibt', [{ personId: 'uuid-x', displayName: 'Clara' }]], + ['Zeile 1\nZeile 2', []], + ['Sehr geehrte @Auguste Raddatz,', [{ personId: 'uuid-aug', displayName: 'Auguste Raddatz' }]] + ] as const; + + for (const [text, sidecar] of cases) { + const doc = deserialize(text, sidecar as PersonMention[]); + const { text: out } = serialize(doc); + expect(out, `round-trip failed for: "${text}"`).toBe(text); + } + }); +}); + +// ─── Backward compatibility (AC-6) ──────────────────────────────────────────── + +describe('backward compatibility', () => { + it('old-format full-name sidecar entry still round-trips correctly', () => { + // Before this issue, displayName stored the person's full DB name. + // renderTranscriptionBody already handles this — so does the serializer. + const oldSidecar: PersonMention[] = [{ personId: 'uuid-aug', displayName: 'Auguste Raddatz' }]; + const text = 'Brief von @Auguste Raddatz'; + const doc = deserialize(text, oldSidecar); + const { text: out, mentionedPersons } = serialize(doc); + expect(out).toBe(text); + expect(mentionedPersons).toEqual(oldSidecar); + }); +}); + +// ─── Security ───────────────────────────────────────────────────────────────── + +describe('security', () => { + it('displayName containing HTML special chars is preserved as a string, not injected', () => { + const sidecar: PersonMention[] = [ + { personId: 'uuid-x', displayName: '' } + ]; + const text = '@'; + const doc = deserialize(text, sidecar); + const { mentionedPersons } = serialize(doc); + // The displayName is stored verbatim — HTML escaping is the renderer's job + expect(mentionedPersons[0].displayName).toBe(''); + }); +}); diff --git a/frontend/src/lib/utils/mentionSerializer.ts b/frontend/src/lib/utils/mentionSerializer.ts new file mode 100644 index 00000000..b6213f25 --- /dev/null +++ b/frontend/src/lib/utils/mentionSerializer.ts @@ -0,0 +1,113 @@ +import type { JSONContent } from '@tiptap/core'; +import type { PersonMention } from '$lib/types'; + +/** + * Converts stored block text + sidecar into a Tiptap ProseMirror document. + * + * The text is split by "\n" into paragraphs. Within each paragraph, sidecar + * entries are matched against "@displayName" tokens (longest first) and + * converted to mention nodes. Unmatched text becomes plain text nodes. + * + * Round-trip invariant: serialize(deserialize(text, sidecar)).text === text + */ +export function deserialize(text: string, sidecar: PersonMention[]): JSONContent { + const lines = text === '' ? [''] : text.split('\n'); + + // Sort sidecar by displayName length descending so longer names shadow + // shorter prefix matches (same heuristic as renderTranscriptionBody). + const sorted = [...sidecar].sort((a, b) => b.displayName.length - a.displayName.length); + + return { + type: 'doc', + content: lines.map((line) => ({ + type: 'paragraph', + content: parseLine(line, sorted) + })) + }; +} + +function parseLine(text: string, sidecar: PersonMention[]): JSONContent[] { + if (text === '') return []; + + if (sidecar.length === 0) { + return [{ type: 'text', text }]; + } + + // Build a list of mention ranges: { start, end, mention } + const ranges: Array<{ start: number; end: number; mention: PersonMention }> = []; + + for (const mention of sidecar) { + const needle = `@${mention.displayName}`; + let idx = 0; + while (idx < text.length) { + const pos = text.indexOf(needle, idx); + if (pos === -1) break; + // Check that the range doesn't overlap an already-found range + const end = pos + needle.length; + const overlaps = ranges.some((r) => r.start < end && r.end > pos); + if (!overlaps) { + ranges.push({ start: pos, end, mention }); + } + idx = pos + 1; + } + } + + if (ranges.length === 0) { + return [{ type: 'text', text }]; + } + + // Sort by position + ranges.sort((a, b) => a.start - b.start); + + const nodes: JSONContent[] = []; + let cursor = 0; + + for (const { start, end, mention } of ranges) { + if (start > cursor) { + nodes.push({ type: 'text', text: text.slice(cursor, start) }); + } + nodes.push({ + type: 'mention', + attrs: { displayName: mention.displayName, personId: mention.personId } + }); + cursor = end; + } + + if (cursor < text.length) { + nodes.push({ type: 'text', text: text.slice(cursor) }); + } + + return nodes; +} + +/** + * Converts a Tiptap ProseMirror document back to stored block text + sidecar. + * + * Paragraphs are joined with "\n". Mention nodes are emitted as "@displayName" + * and collected into mentionedPersons (de-duplicated by personId). + */ +export function serialize(doc: JSONContent): { text: string; mentionedPersons: PersonMention[] } { + const paragraphs = doc.content ?? []; + const mentionedPersons: PersonMention[] = []; + const seenIds = new Set