fix mention problem

This commit is contained in:
beo3000 2026-02-20 17:12:40 +01:00
parent 3e0926da4b
commit 5a4b191536
4 changed files with 30 additions and 20 deletions

View File

@ -82,10 +82,13 @@ export function mention(node: HTMLInputElement | HTMLTextAreaElement) {
} }
async function selectItem(index: number) { async function selectItem(index: number) {
console.log('[mention-action] selectItem', index, 'items:', items.length, 'create:', createOptions.length, 'mentionStart:', mentionStart, 'value:', JSON.stringify(node.value));
suppressInput = true; suppressInput = true;
try { try {
if (index < items.length) { if (index < items.length) {
console.log('[mention-action] inserting:', items[index].insertText);
insertText(items[index].insertText); insertText(items[index].insertText);
console.log('[mention-action] after insert, value:', JSON.stringify(node.value));
} else { } else {
const opt = createOptions[index - items.length]; const opt = createOptions[index - items.length];
if (!opt) return; if (!opt) return;

View File

@ -96,8 +96,10 @@ export function renderDropdown(
row.className = 'mention-item' + (i === selectedIndex ? ' mention-item-active' : ''); row.className = 'mention-item' + (i === selectedIndex ? ' mention-item-active' : '');
row.textContent = `${item.icon} ${item.mentionName}`; row.textContent = `${item.icon} ${item.mentionName}`;
row.classList.add(item.context.type === 'company' ? 'mention-company' : item.context.type === 'person' ? 'mention-person' : 'mention-project'); row.classList.add(item.context.type === 'company' ? 'mention-company' : item.context.type === 'person' ? 'mention-person' : 'mention-project');
row.addEventListener('mousedown', (e) => { row.addEventListener('pointerdown', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
console.log('[mention] pointerdown item', i, item.mentionName);
onSelect(i); onSelect(i);
}); });
row.addEventListener('mouseenter', () => onHover(i)); row.addEventListener('mouseenter', () => onHover(i));
@ -109,8 +111,10 @@ export function renderDropdown(
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'mention-item mention-create' + (idx === selectedIndex ? ' mention-item-active' : ''); row.className = 'mention-item mention-create' + (idx === selectedIndex ? ' mention-item-active' : '');
row.textContent = opt.label; row.textContent = opt.label;
row.addEventListener('mousedown', (e) => { row.addEventListener('pointerdown', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
console.log('[mention] pointerdown create', idx, opt.label);
onSelect(idx); onSelect(idx);
}); });
row.addEventListener('mouseenter', () => onHover(idx)); row.addEventListener('mouseenter', () => onHover(idx));

View File

@ -235,8 +235,7 @@
upsertContext({ id: context.id, meta }); upsertContext({ id: context.id, meta });
} }
// Local state for meta notes (needed for bind:value + mention support) // Local state for meta notes — only sync from DB on context switch
// Only sync from DB on context switch, not on every liveQuery refire
let metaNotes = $state(''); let metaNotes = $state('');
let metaNotesContextId = ''; let metaNotesContextId = '';
$effect(() => { $effect(() => {
@ -245,8 +244,11 @@
metaNotes = (context.meta as any)?.notes ?? ''; metaNotes = (context.meta as any)?.notes ?? '';
} }
}); });
function saveMetaNotes() { let metaNotesTimer: ReturnType<typeof setTimeout>;
updateMeta('notes', metaNotes); function handleMetaNotesChange(md: string) {
metaNotes = md;
clearTimeout(metaNotesTimer);
metaNotesTimer = setTimeout(() => updateMeta('notes', md), 500);
} }
</script> </script>
@ -351,13 +353,12 @@
</div> </div>
<div class="mb-2.5 flex flex-col"> <div class="mb-2.5 flex flex-col">
<label class="mb-1 text-sm text-[#aaa]">Notizen:</label> <label class="mb-1 text-sm text-[#aaa]">Notizen:</label>
<textarea <MarkdownEditor
class="rounded border border-[#555] bg-[#111] px-2.5 py-1.5 text-[#ddd] min-h-[80px] font-mono text-sm" content={metaNotes}
rows="4" placeholder="Notizen..."
bind:value={metaNotes} minHeight="60px"
onblur={saveMetaNotes} onchange={handleMetaNotesChange}
use:mention />
></textarea>
</div> </div>
{:else} {:else}
{@const meta = (context.meta ?? { fullName: '', email: '', phone: '', duSince: '' }) as PersonMeta} {@const meta = (context.meta ?? { fullName: '', email: '', phone: '', duSince: '' }) as PersonMeta}
@ -394,13 +395,12 @@
</div> </div>
<div class="mb-2.5 flex flex-col"> <div class="mb-2.5 flex flex-col">
<label class="mb-1 text-sm text-[#aaa]">Notizen:</label> <label class="mb-1 text-sm text-[#aaa]">Notizen:</label>
<textarea <MarkdownEditor
class="rounded border border-[#555] bg-[#111] px-2.5 py-1.5 text-[#ddd] min-h-[80px] font-mono text-sm" content={metaNotes}
rows="4" placeholder="Notizen..."
bind:value={metaNotes} minHeight="60px"
onblur={saveMetaNotes} onchange={handleMetaNotesChange}
use:mention />
></textarea>
</div> </div>
{/if} {/if}
</div> </div>

View File

@ -76,13 +76,16 @@ export const TiptapMention = Extension.create({
} }
async function selectItem(index: number) { async function selectItem(index: number) {
console.log('[tiptap-mention] selectItem', index, 'items:', items.length, 'create:', createOptions.length, 'mentionFrom:', mentionFrom);
try { try {
if (index < items.length) { if (index < items.length) {
const text = items[index].insertText; const text = items[index].insertText;
console.log('[tiptap-mention] inserting:', text, 'deleteRange:', mentionFrom, '->', editor.state.selection.from);
editor.chain().focus() editor.chain().focus()
.deleteRange({ from: mentionFrom, to: editor.state.selection.from }) .deleteRange({ from: mentionFrom, to: editor.state.selection.from })
.insertContent(text + ' ') .insertContent(text + ' ')
.run(); .run();
console.log('[tiptap-mention] after insert, content:', editor.storage.markdown.getMarkdown().slice(0, 100));
} else { } else {
const opt = createOptions[index - items.length]; const opt = createOptions[index - items.length];
if (!opt) return; if (!opt) return;