@plannotator/ui 0.51.0 → 0.52.0

package/components/settings/QuickLabelsTab.tsx

@@ -0,0 +1,378 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { isMac, isWindows, altKey } from '../../utils/platform';
+import {
+  type QuickLabel,
+  DEFAULT_QUICK_LABELS,
+  LABEL_COLOR_MAP,
+  emojiFromFieldInput,
+  getLabelColors,
+  getQuickLabels,
+  moveQuickLabel,
+  quickLabelShortcutDigit,
+  resetQuickLabels,
+  saveQuickLabels,
+} from '../../utils/quickLabels';
+
+/** Most labels the tab lets a person keep (only the first ten get a key). */
+const MAX_QUICK_LABELS = 12;
+
+/**
+ * One editable row. `key` is a session-only identity, never persisted: the
+ * saved shape stays exactly `QuickLabel[]`. A label's `id` cannot serve here —
+ * it is re-derived from the text on every keystroke and two labels with the
+ * same text share it — and position cannot either, because moving a row must
+ * not move the open tip editor, an emoji draft, or focus onto a neighbour
+ * (the #829 bug class, #1736).
+ */
+interface QuickLabelRow {
+  key: string;
+  label: QuickLabel;
+}
+
+let rowKeySeq = 0;
+const nextRowKey = () => `quick-label-row-${++rowKeySeq}`;
+const toRows = (labels: readonly QuickLabel[]): QuickLabelRow[] =>
+  labels.map((label) => ({ key: nextRowKey(), label }));
+
+const shortcutHint = (digit: string) => `${altKey}${isMac ? '' : '+'}${digit}`;
+const shortcutWords = (digit: string) => `${isMac ? 'Option' : 'Alt'}+${digit}`;
+const labelName = (label: QuickLabel) => label.text.trim() || 'label';
+
+const EMOJI_HINT = isMac
+  ? 'Enter one emoji. Control-Command-Space opens the emoji picker.'
+  : isWindows
+    ? 'Enter one emoji. Windows+period opens the emoji picker.'
+    : 'Enter one emoji.';
+
+const ChevronIcon: React.FC<{ up: boolean }> = ({ up }) => (
+  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" d={up ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'} />
+  </svg>
+);
+
+/** Settings → Labels: the Quick Labels editor (plan review and annotate). */
+export const QuickLabelsTab: React.FC = () => {
+  const [rows, setRows] = useState<QuickLabelRow[]>(() => toRows(getQuickLabels()));
+  const [editingTipKey, setEditingTipKey] = useState<string | null>(null);
+  const [editingTipValue, setEditingTipValue] = useState('');
+  /** Emoji fields whose current text is not (yet) one emoji, by row key. */
+  const [emojiDrafts, setEmojiDrafts] = useState<Record<string, string>>({});
+  const [announcement, setAnnouncement] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+  const pendingFocus = useRef<{ key: string; target: 'up' | 'down' | 'text' } | null>(null);
+
+  const commit = (next: QuickLabelRow[]) => {
+    setRows(next);
+    saveQuickLabels(next.map((row) => row.label));
+  };
+
+  const updateLabel = (key: string, patch: Partial<QuickLabel>) => {
+    commit(rows.map((row) => (row.key === key ? { ...row, label: { ...row.label, ...patch } } : row)));
+  };
+
+  const setEmojiDraft = (key: string, value: string | null) => {
+    setEmojiDrafts((drafts) => {
+      if (value === null) {
+        if (!(key in drafts)) return drafts;
+        const { [key]: _dropped, ...rest } = drafts;
+        return rest;
+      }
+      return { ...drafts, [key]: value };
+    });
+  };
+
+  const move = (index: number, delta: -1 | 1) => {
+    const to = index + delta;
+    if (to < 0 || to >= rows.length) return;
+    const row = rows[index];
+    commit(moveQuickLabel(rows, index, to));
+    pendingFocus.current = { key: row.key, target: delta < 0 ? 'up' : 'down' };
+    const digit = quickLabelShortcutDigit(to);
+    setAnnouncement(
+      `Moved ${labelName(row.label)} to position ${to + 1} of ${rows.length}, ${digit ? shortcutWords(digit) : 'no shortcut key'}.`,
+    );
+  };
+
+  // Moving a row re-orders DOM nodes, which can drop focus from the button
+  // that was pressed; put it back on the same row's button so repeated
+  // presses keep walking the same label. At either end the pressed button is
+  // disabled, so focus goes to the other direction instead.
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending) return;
+    pendingFocus.current = null;
+    const row = listRef.current?.querySelector<HTMLElement>(`[data-quick-label-row="${pending.key}"]`);
+    if (!row) return;
+    if (pending.target === 'text') {
+      const input = row.querySelector<HTMLInputElement>('[data-quick-label-text]');
+      input?.focus();
+      input?.select();
+      return;
+    }
+    const other = pending.target === 'up' ? 'down' : 'up';
+    const wanted = row.querySelector<HTMLButtonElement>(`[data-quick-label-move="${pending.target}"]`);
+    const fallback = row.querySelector<HTMLButtonElement>(`[data-quick-label-move="${other}"]`);
+    (wanted && !wanted.disabled ? wanted : fallback)?.focus();
+  }, [rows]);
+
+  const saveTip = (key: string) => {
+    updateLabel(key, { tip: editingTipValue || undefined });
+    setEditingTipKey(null);
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-medium flex items-center gap-2">Quick Labels</div>
+          <div className="text-xs text-muted-foreground">
+            Preset annotations for one-click feedback
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            resetQuickLabels();
+            setRows(toRows(DEFAULT_QUICK_LABELS));
+            setEditingTipKey(null);
+            setEmojiDrafts({});
+          }}
+          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Reset to defaults
+        </button>
+      </div>
+
+      <style>{`
+        @keyframes tip-slide-open {
+          from { opacity: 0; transform: translateY(-4px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+      <div ref={listRef} className="space-y-1.5">
+        {rows.map((row, index) => {
+          const { key, label } = row;
+          const colors = getLabelColors(label.color);
+          const hasTip = !!label.tip;
+          const isEditingTip = editingTipKey === key;
+          const digit = quickLabelShortcutDigit(index);
+          const name = labelName(label);
+          const emojiDraft = emojiDrafts[key];
+          const emojiInvalid = emojiDraft !== undefined;
+          const emojiErrorId = `${key}-emoji-error`;
+          return (
+            <div
+              key={key}
+              data-quick-label-row={key}
+              className="rounded-lg overflow-hidden"
+              style={{ backgroundColor: colors.bg }}
+            >
+              {/* Main row. On a narrow dialog the controls after the text
+                  field wrap onto a second line instead of being clipped by
+                  the row's overflow-hidden. */}
+              <div className="flex flex-wrap items-center gap-2 p-2">
+                <input
+                  type="text"
+                  data-quick-label-emoji
+                  value={emojiDraft ?? label.emoji}
+                  aria-label={`Emoji for ${name}`}
+                  aria-invalid={emojiInvalid || undefined}
+                  aria-describedby={emojiInvalid ? emojiErrorId : undefined}
+                  title="Change emoji"
+                  autoComplete="off"
+                  spellCheck={false}
+                  onFocus={(e) => e.target.select()}
+                  onChange={(e) => {
+                    const picked = emojiFromFieldInput(e.target.value, label.emoji);
+                    if (!picked) {
+                      setEmojiDraft(key, e.target.value);
+                      return;
+                    }
+                    setEmojiDraft(key, null);
+                    if (picked !== label.emoji) updateLabel(key, { emoji: picked });
+                  }}
+                  onBlur={() => setEmojiDraft(key, null)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Escape' && emojiInvalid) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setEmojiDraft(key, null);
+                    }
+                  }}
+                  className="w-8 py-1 bg-background/80 rounded text-sm text-center leading-none focus:outline-none focus:ring-1 focus:ring-primary/50 flex-shrink-0"
+                  style={emojiInvalid ? { boxShadow: '0 0 0 1px var(--destructive)' } : undefined}
+                />
+                <input
+                  type="text"
+                  data-quick-label-text
+                  value={label.text}
+                  aria-label={`Label text, position ${index + 1}`}
+                  onChange={(e) => {
+                    updateLabel(key, {
+                      text: e.target.value,
+                      id: e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
+                    });
+                  }}
+                  className="flex-1 min-w-0 px-2 py-1 bg-background/80 rounded text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+                  // The basis is what makes the controls wrap: a row that
+                  // cannot give the text this much room moves them below.
+                  style={{ flexBasis: '8rem' }}
+                />
+                <div className="flex items-center gap-2 ml-auto">
+                  {/* Tip indicator button */}
+                  <button
+                    data-quick-label-tip-toggle
+                    onClick={() => {
+                      if (isEditingTip) {
+                        setEditingTipKey(null);
+                      } else {
+                        setEditingTipKey(key);
+                        setEditingTipValue(label.tip || '');
+                      }
+                    }}
+                    className={`relative p-1 rounded transition-all flex-shrink-0 ${
+                      hasTip
+                        ? 'bg-foreground/10 text-foreground/70 hover:text-foreground border border-foreground/15'
+                        : 'text-muted-foreground/30 hover:text-muted-foreground/60 border border-dashed border-muted-foreground/20 hover:border-muted-foreground/40'
+                    }`}
+                    title={hasTip ? `Tip: ${label.tip}` : 'Add AI instruction tip'}
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                    {hasTip && (
+                      <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-foreground/50" />
+                    )}
+                  </button>
+                  <select
+                    value={label.color}
+                    aria-label={`Colour for ${name}`}
+                    onChange={(e) => updateLabel(key, { color: e.target.value })}
+                    className="px-1.5 py-1 bg-background/80 rounded text-[10px] focus:outline-none focus:ring-1 focus:ring-primary/50"
+                  >
+                    {Object.keys(LABEL_COLOR_MAP).map(c => (
+                      <option key={c} value={c}>{c}</option>
+                    ))}
+                  </select>
+                  <span
+                    data-quick-label-shortcut
+                    // Hidden below sm: touch devices that narrow rarely have an Alt key.
+                    className="hidden sm:block text-[10px] text-muted-foreground/50 font-mono w-8 text-center flex-shrink-0"
+                  >
+                    {digit ? shortcutHint(digit) : ''}
+                  </span>
+                  {/* Reorder: position decides which Alt/⌥ digit applies the label. */}
+                  <button
+                    type="button"
+                    data-quick-label-move="up"
+                    disabled={index === 0}
+                    onClick={() => move(index, -1)}
+                    aria-label={`Move ${name} up`}
+                    title="Move up"
+                    className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-30 disabled:pointer-events-none"
+                  >
+                    <ChevronIcon up />
+                  </button>
+                  <button
+                    type="button"
+                    data-quick-label-move="down"
+                    disabled={index === rows.length - 1}
+                    onClick={() => move(index, 1)}
+                    aria-label={`Move ${name} down`}
+                    title="Move down"
+                    className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-30 disabled:pointer-events-none"
+                  >
+                    <ChevronIcon up={false} />
+                  </button>
+                  <button
+                    onClick={() => {
+                      commit(rows.filter((r) => r.key !== key));
+                      setEmojiDraft(key, null);
+                      if (editingTipKey === key) setEditingTipKey(null);
+                    }}
+                    aria-label={`Remove ${name}`}
+                    className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors flex-shrink-0"
+                    title="Remove label"
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              {emojiInvalid && (
+                <div id={emojiErrorId} className="px-2 pb-2 text-[10px] text-destructive">
+                  {EMOJI_HINT}
+                </div>
+              )}
+              {/* Tip editor — slides open below the row */}
+              {isEditingTip && (
+                <div
+                  className="flex items-center gap-1.5 px-2 pb-2 pt-0"
+                  style={{ animation: 'tip-slide-open 0.15s ease-out' }}
+                >
+                  <svg className="w-3 h-3 text-muted-foreground/40 flex-shrink-0 ml-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                  <input
+                    type="text"
+                    data-quick-label-tip
+                    value={editingTipValue}
+                    aria-label={`AI instruction tip for ${name}`}
+                    onChange={(e) => setEditingTipValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') saveTip(key);
+                      if (e.key === 'Escape') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setEditingTipKey(null);
+                      }
+                    }}
+                    placeholder="AI instruction tip..."
+                    className="flex-1 px-2 py-1 bg-background/60 rounded text-[10px] text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                    autoFocus
+                    onFocus={(e) => { e.target.setSelectionRange(0, 0); e.target.scrollLeft = 0; }}
+                  />
+                  <button
+                    onClick={() => saveTip(key)}
+                    className="p-1 rounded text-muted-foreground/50 hover:text-green-500 hover:bg-green-500/10 transition-colors flex-shrink-0"
+                    title="Save tip"
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <div role="status" aria-live="polite" className="sr-only">{announcement}</div>
+
+      {rows.length < MAX_QUICK_LABELS && (
+        <button
+          onClick={() => {
+            const row: QuickLabelRow = {
+              key: nextRowKey(),
+              label: {
+                id: `custom-${Date.now()}`,
+                emoji: '📌',
+                text: 'New label',
+                color: 'blue',
+              },
+            };
+            commit([...rows, row]);
+            pendingFocus.current = { key: row.key, target: 'text' };
+          }}
+          className="w-full py-1.5 text-xs text-muted-foreground hover:text-foreground border border-dashed border-border rounded-lg hover:border-foreground/30 transition-colors"
+        >
+          + Add label
+        </button>
+      )}
+
+      <div className="text-[10px] text-muted-foreground/70">
+        Use {shortcutHint('1')} through {shortcutHint('0')} when the annotation toolbar is visible to apply a label instantly. The order of the list decides the key; use the arrows to move a label, and click its emoji to change it.
+      </div>
+    </>
+  );
+};

package/hooks/useAIChat.ts

@@ -46,8 +46,33 @@ export interface AskAIParams {
   /** "Ask this session" only: what to do when the host session is busy
    *  ("wait" = ask when it finishes, "interrupt" = stop its turn and ask now). */
   busyPolicy?: 'wait' | 'interrupt';
+  /** "Ask this session" only: the reviewer's CURRENT unsubmitted annotations
+   *  as a plain list (`formatDraftAnnotationsForAsk`; '' when there are none).
+   *  The hook sends it only when it differs from what this session last
+   *  received, and the server frames it as read-only context, never as
+   *  feedback (#1748). Leave unset for every other provider. */
+  draftAnnotations?: string;
 }
 
+/** What to send as `draftAnnotations` for one question: the list when this
+ *  session has not received it yet, '' once to clear drafts it saw earlier,
+ *  nothing when it already has the current list. */
+export function draftAnnotationsToSend(
+  delivered: { sessionId: string; text: string } | null,
+  sessionId: string,
+  current: string | undefined,
+): string | undefined {
+  if (current === undefined) return undefined;
+  const seen = delivered?.sessionId === sessionId ? delivered.text : '';
+  return current === seen ? undefined : current;
+}
+
+/** `draftAnnotationsToSend` key for "Ask this session": one host session per page. */
+const BRIDGE_DRAFTS_KEY = 'session-bridge';
+
+/** Stream messages that show the session received the question. */
+const DELIVERED_MESSAGE_TYPES = new Set(['text_delta', 'text', 'tool_use', 'tool_result', 'result']);
+
 /** Overrides for re-asking a question that ended in a busy/gone/blocked answer. */
 export interface AIRetryOptions {
   busyPolicy?: 'wait' | 'interrupt';
@@ -66,6 +91,16 @@ interface UseAIChatOptions {
   threadTitle?: string;
 }
 
+/** `line 41` / `lines 41–44` (the export's spelling) for a selection's
+ *  source lines; `null` when the scope carries no valid line. */
+function selectionLinesLabel(lineStart: unknown, lineEnd: unknown): string | null {
+  if (typeof lineStart !== 'number' || !Number.isInteger(lineStart) || lineStart < 1) return null;
+  const end = typeof lineEnd === 'number' && Number.isInteger(lineEnd) && lineEnd > lineStart
+    ? lineEnd
+    : lineStart;
+  return end === lineStart ? `line ${lineStart}` : `lines ${lineStart}–${end}`;
+}
+
 export function buildDefaultPrompt(params: AskAIParams): string {
   // The "changes under review" context (and any other preamble) leads the
   // message, so the agent is oriented to the live view before the question and
@@ -90,7 +125,9 @@ export function buildDefaultPrompt(params: AskAIParams): string {
 
     if (params.scope?.kind === 'selection') {
       const label = params.scope.label ? `Re: ${params.scope.label}` : 'Re: selected text';
-      const source = params.scope.sourcePath ? `\nSource: ${params.scope.sourcePath}` : '';
+      const lines = selectionLinesLabel(params.scope.lineStart, params.scope.lineEnd);
+      const sourceParts = [params.scope.sourcePath, lines].filter(Boolean);
+      const source = sourceParts.length > 0 ? `\nSource: ${sourceParts.join(', ')}` : '';
       const selection = params.scope.text ? `\n\nSelected text:\n\`\`\`\n${params.scope.text}\n\`\`\`` : '';
       const detail = params.scope.detail?.trim() ? `\n\nSelected element:\n${params.scope.detail.trim()}` : '';
       return `${label}${source}${selection}${detail}\n\n${params.prompt}`;
@@ -294,6 +331,14 @@ export function useAIChat({
   // The params each question was asked with, so a busy answer can be
   // re-asked ("Ask when it finishes", "Interrupt and ask now").
   const paramsByQuestionRef = useRef(new Map<string, AskAIParams>());
+  // The draft list the agent session last RECEIVED, so an unchanged list is
+  // not pasted into it again on every question. Kept for the page, not per
+  // Plannotator AI session: every Ask AI session (a new thread, a document
+  // switch in a folder or bundle) reaches the SAME host agent session through
+  // the bridge, which keeps what it already read. Per AI session, a new thread
+  // re-sent the whole list, and drafts cleared after one never reached the
+  // session as cleared.
+  const deliveredDraftsRef = useRef<{ sessionId: string; text: string } | null>(null);
 
   const ask = useCallback(async (params: AskAIParams, askOptions?: { providerId?: string }) => {
     if (abortRef.current) {
@@ -352,11 +397,21 @@ export function useAIChat({
       }
 
       const fullPrompt = buildPrompt(params);
+      const drafts = draftAnnotationsToSend(deliveredDraftsRef.current, BRIDGE_DRAFTS_KEY, params.draftAnnotations);
+      // Recorded once the session shows it received the question, so a busy,
+      // gone or failed ask sends the list again next time.
+      const markDraftsDelivered = (msg: { type?: unknown; code?: unknown }) => {
+        if (drafts === undefined) return;
+        const received = DELIVERED_MESSAGE_TYPES.has(String(msg.type))
+          || (msg.type === 'error' && msg.code === SESSION_ASK_ERROR_CODES.takenOver);
+        if (received) deliveredDraftsRef.current = { sessionId: BRIDGE_DRAFTS_KEY, text: drafts };
+      };
       const res = await aiTransport.query({
         sessionId: sid,
         prompt: fullPrompt,
         ...(params.contextUpdate && { contextUpdate: params.contextUpdate }),
         ...(params.busyPolicy && { busyPolicy: params.busyPolicy }),
+        ...(drafts !== undefined && { draftAnnotations: drafts }),
       }, controller.signal);
 
       if (!res.ok || !res.body) {
@@ -383,6 +438,7 @@ export function useAIChat({
 
           try {
             const msg = JSON.parse(data);
+            markDraftsDelivered(msg);
 
             if (msg.type === 'text_delta') {
               updateMessages(prev =>

package/hooks/useAnnotationHighlighter.ts

@@ -29,6 +29,9 @@ export interface CommentPopoverState {
   initialText?: string;
   source?: any;
   draftKey: string;
+  /** `data-block-id`s of the blocks the pending selection covers, in
+   *  document order (a host maps them to source lines for Ask AI). */
+  blockIds?: string[];
 }
 
 export interface QuickLabelPickerState {
@@ -63,6 +66,27 @@ function commentDraftTargetKey(source: any, selectedText: string): string {
   return `selection:${startKey}:${endKey}:${selectedText}`;
 }
 
+/** The blocks a pending selection covers: a math source names its own block;
+ *  a text selection is read off the highlighter's pending marks, each mapped
+ *  to its nearest `[data-block-id]` (the block its annotation would carry). */
+function selectionBlockIds(highlighter: any, source: any): string[] {
+  if (isMathAnnotationSource(source)) return [source.blockId];
+  if (!highlighter || !source?.id) return [];
+  let doms: unknown[] = [];
+  try {
+    doms = highlighter.getDoms(source.id) ?? [];
+  } catch {
+    return [];
+  }
+  const ids: string[] = [];
+  for (const dom of doms) {
+    if (!(dom instanceof HTMLElement)) continue;
+    const id = dom.closest<HTMLElement>('[data-block-id]')?.dataset.blockId;
+    if (id && !ids.includes(id)) ids.push(id);
+  }
+  return ids;
+}
+
 type MathAnnotationTarget = {
   element: HTMLElement;
   blockId: string;
@@ -1490,6 +1514,7 @@ export function useAnnotationHighlighter({
               selectedText: source.text,
               source,
               draftKey: commentDraftTargetKey(source, source.text),
+              blockIds: selectionBlockIds(highlighter, source),
             });
           } else if (effectiveMode === 'quickLabel') {
             pendingSourceRef.current = source;
@@ -1621,6 +1646,7 @@ export function useAnnotationHighlighter({
           selectedText: source.text,
           source,
           draftKey: commentDraftTargetKey(source, source.text),
+          blockIds: [source.blockId],
         });
         return;
       }
@@ -1767,6 +1793,7 @@ export function useAnnotationHighlighter({
         selectedText: source.text,
         source,
         draftKey: commentDraftTargetKey(source, source.text),
+        blockIds: [source.blockId],
       });
       return;
     }
@@ -1911,6 +1938,7 @@ export function useAnnotationHighlighter({
       initialText: initialChar,
       source: toolbarState.source,
       draftKey: commentDraftTargetKey(toolbarState.source, toolbarState.selectionText),
+      blockIds: selectionBlockIds(highlighterRef.current, toolbarState.source),
     });
     setToolbarState(null);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
@@ -77,7 +77,7 @@
     "@lezer/highlight": "^1.2.3",
     "@pierre/diffs": "1.3.6",
     "@plannotator/atomic-editor": "^0.9.0",
-    "@plannotator/core": "0.25.11",
+    "@plannotator/core": "0.25.12",
     "@plannotator/markdown-editor": "^0.5.0",
     "@plannotator/web-highlighter": "^0.8.1",
     "@tanstack/react-table": "^8.21.3",