agentation-vue 0.2.5 → 0.2.10

package/dist/AgentationVue.d.vue.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     pageUrl?: string;
     theme?: 'light' | 'dark' | 'auto';
     activationKey?: 'none' | 'Meta' | 'Alt' | 'Shift';
+    disablePortal?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     copy: (markdown: string) => any;

package/dist/AgentationVue.vue

@@ -1,5 +1,13 @@
 <script setup>
-import { isVue2 as _isVue2, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue-demi";
+import {
+  isVue2 as _isVue2,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from "vue-demi";
 import AgentationToolbar from "./components/AgentationToolbar.vue";
 import AnnotationInput from "./components/AnnotationInput.vue";
 import AnnotationMarker from "./components/AnnotationMarker.vue";
@@ -10,15 +18,26 @@ import { useAnnotations } from "./composables/useAnnotations.mjs";
 import { useAreaSelect } from "./composables/useAreaSelect.mjs";
 import { useElementDetection } from "./composables/useElementDetection.mjs";
 import { useInteractionMode } from "./composables/useInteractionMode.mjs";
-import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts.mjs";
+import {
+  DEFAULT_SHORTCUT_CONFIG,
+  useKeyboardShortcuts
+} from "./composables/useKeyboardShortcuts.mjs";
 import { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
 import { useMultiSelect } from "./composables/useMultiSelect.mjs";
 import { useOutputFormatter } from "./composables/useOutputFormatter.mjs";
 import { useSettings } from "./composables/useSettings.mjs";
 import { useTextSelection } from "./composables/useTextSelection.mjs";
-import { VA_DATA_ATTR_SELECTOR } from "./constants.mjs";
+import { isInsideAgentationTree } from "./utils/agentation-tree.mjs";
 import { copyToClipboard } from "./utils/clipboard.mjs";
-import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector.mjs";
+import {
+  isFixed as checkIsFixed,
+  detectVueComponents,
+  getAccessibilityInfo,
+  getComputedStylesSummary,
+  getNearbyElements,
+  getNearbyText,
+  getRelevantComputedStyles
+} from "./utils/dom-inspector.mjs";
 import { createPortalContainer, destroyPortalContainer } from "./utils/portal.mjs";
 import { getElementName, getElementPath } from "./utils/selectors.mjs";
 import { boundingBoxToStyle } from "./utils/style.mjs";
@@ -30,7 +49,8 @@ const props = defineProps({
   autoHideToolbar: { type: Boolean, required: false },
   pageUrl: { type: String, required: false },
   theme: { type: String, required: false },
-  activationKey: { type: String, required: false }
+  activationKey: { type: String, required: false },
+  disablePortal: { type: Boolean, required: false }
 });
 const emit = defineEmits(["annotation-add", "annotation-delete", "annotation-update", "annotations-clear", "copy"]);
 const HISTORY_CHANGE_EVENT = "va:history-change";
@@ -59,8 +79,24 @@ const toolbarRef = ref(null);
 const currentUrl = ref(props.pageUrl || getCurrentUrl());
 const { settings } = useSettings();
 const { mode, transition } = useInteractionMode();
-const { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl } = useAnnotations(currentUrl.value);
-const { hoveredRect, hoveredName, hoveredComponentChain, onMouseMove, clearHighlight, getElementUnderOverlay, cleanup: cleanupDetection } = useElementDetection(overlayEl, () => settings.showComponentTree);
+const {
+  annotations,
+  addAnnotation,
+  removeAnnotation,
+  updateAnnotation,
+  clearAnnotations,
+  restoreAnnotations,
+  setScopeUrl
+} = useAnnotations(currentUrl.value);
+const {
+  hoveredRect,
+  hoveredName,
+  hoveredComponentChain,
+  onMouseMove,
+  clearHighlight,
+  getElementUnderOverlay,
+  cleanup: cleanupDetection
+} = useElementDetection(overlayEl, () => settings.showComponentTree);
 const textSelection = useTextSelection(mode);
 const multiSelect = useMultiSelect(mode, transition);
 const areaSelect = useAreaSelect(mode, transition);
@@ -77,11 +113,17 @@ const editingAnnotation = ref(null);
 const settingsOpen = ref(false);
 const settingsAnchorEl = ref(null);
 const copyFeedback = ref(false);
+const undoFeedback = ref(false);
+const undoSnapshot = ref([]);
+let undoTimer = null;
+const UNDO_TIMEOUT_MS = 5e3;
 const toolbarDragging = ref(false);
 const DRAG_END_SUPPRESSION_MS = 500;
 const SETTINGS_CLOSE_SUPPRESSION_MS = 220;
 let suppressInteractionsUntil = 0;
-const effectiveBlockPageInteractions = computed(() => props.blockPageInteractions ?? settings.blockPageInteractions);
+const effectiveBlockPageInteractions = computed(
+  () => props.blockPageInteractions ?? settings.blockPageInteractions
+);
 const rootStyle = computed(() => {
   const hex = settings.markerColor;
   if (!hex)
@@ -105,7 +147,16 @@ const pendingMarkerY = computed(() => {
     return 0;
   return pendingPosition.value.y + (window.scrollY || document.documentElement.scrollTop);
 });
-const pendingIsSelection = computed(() => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value));
+const pendingIsSelection = computed(
+  () => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value)
+);
+const mentionCandidates = computed(
+  () => annotations.value.map((ann, i) => ({
+    id: ann.id,
+    displayNumber: i + 1,
+    commentPreview: ann.comment.replace(/@\[\d+\]/g, "@\u2026").slice(0, 40) + (ann.comment.length > 40 ? "\u2026" : "")
+  })).filter((c) => !editingAnnotation.value || c.id !== editingAnnotation.value.id)
+);
 let portalContainer = null;
 const isVue2 = _isVue2;
 const PassThrough = defineComponent({
@@ -114,48 +165,81 @@ const PassThrough = defineComponent({
     return (typeof slot === "function" ? slot() : slot?.[0]) || null;
   }
 });
-const portalWrapper = isVue2 ? PassThrough : "Teleport";
-const portalProps = isVue2 ? {} : { to: "body" };
+const portalWrapper = computed(
+  () => props.disablePortal || isVue2 ? PassThrough : "Teleport"
+);
+const portalProps = computed(
+  () => props.disablePortal || isVue2 ? {} : { to: "body" }
+);
 onMounted(() => {
-  if (isVue2 && rootEl.value) {
+  if (!props.disablePortal && isVue2 && rootEl.value) {
     portalContainer = createPortalContainer();
     portalContainer.appendChild(rootEl.value);
   }
 });
 onBeforeUnmount(() => {
+  dismissUndo();
   animPause.cleanup();
   cleanupDetection();
   if (portalContainer) {
     destroyPortalContainer(portalContainer);
   }
 });
-watch(() => props.outputDetail, (v) => {
-  if (v)
-    settings.outputDetail = v;
-}, { immediate: true });
-watch(() => props.markerColor, (v) => {
-  if (v)
-    settings.markerColor = v;
-}, { immediate: true });
-watch(() => props.theme, (v) => {
-  if (v)
-    settings.theme = v;
-}, { immediate: true });
-watch(() => props.blockPageInteractions, (v) => {
-  if (v)
-    settings.blockPageInteractions = v;
-}, { immediate: true });
-watch(() => props.autoHideToolbar, (v) => {
-  if (v)
-    settings.autoHideToolbar = v;
-}, { immediate: true });
-watch(() => props.pageUrl, (url) => {
-  syncUrlScope(url || getCurrentUrl());
-}, { immediate: true });
-watch(() => props.activationKey, (v) => {
-  if (v !== void 0)
-    settings.activationKey = v;
-}, { immediate: true });
+watch(
+  () => props.outputDetail,
+  (v) => {
+    if (v)
+      settings.outputDetail = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.markerColor,
+  (v) => {
+    if (v)
+      settings.markerColor = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.theme,
+  (v) => {
+    if (v)
+      settings.theme = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.blockPageInteractions,
+  (v) => {
+    if (v)
+      settings.blockPageInteractions = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.autoHideToolbar,
+  (v) => {
+    if (v)
+      settings.autoHideToolbar = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.pageUrl,
+  (url) => {
+    syncUrlScope(url || getCurrentUrl());
+  },
+  { immediate: true }
+);
+watch(
+  () => props.activationKey,
+  (v) => {
+    if (v !== void 0)
+      settings.activationKey = v;
+  },
+  { immediate: true }
+);
 function onActivate() {
   transition("inspect");
 }
@@ -206,7 +290,10 @@ function onOverlayMouseUp(e) {
     areaSelect.onMouseUp();
     const rect = areaSelect.areaRect.value;
     if (rect && rect.width > 10 && rect.height > 10) {
-      pendingPosition.value = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+      pendingPosition.value = {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      };
       pendingElementName.value = "Area selection";
       pendingComponentChain.value = void 0;
       pendingComputedStyles.value = void 0;
@@ -228,7 +315,9 @@ function onOverlayMouseUp(e) {
     };
     pendingElementName.value = `"${textResult.selectedText.slice(0, 30)}"`;
     pendingComponentChain.value = getVueComponents(textResult.anchorElement);
-    pendingComputedStyles.value = getRelevantComputedStyles(textResult.anchorElement);
+    pendingComputedStyles.value = getRelevantComputedStyles(
+      textResult.anchorElement
+    );
     pendingTarget.value = textResult.anchorElement;
     pendingTextSelection.value = {
       text: textResult.selectedText,
@@ -244,7 +333,7 @@ function onOverlayMouseUp(e) {
     return;
   }
   const el = getElementUnderOverlay(e);
-  if (!el || el.closest(VA_DATA_ATTR_SELECTOR))
+  if (!el || isInsideAgentationTree(el))
     return;
   pendingPosition.value = { x: e.clientX, y: e.clientY };
   pendingElementName.value = getElementName(el);
@@ -281,7 +370,10 @@ function shouldUseDocumentFallbackEvents() {
   return mode.value === "inspect" && !effectiveBlockPageInteractions.value && !isInteractionLocked();
 }
 function lockInteractionsTemporarily(durationMs) {
-  suppressInteractionsUntil = Math.max(suppressInteractionsUntil, Date.now() + durationMs);
+  suppressInteractionsUntil = Math.max(
+    suppressInteractionsUntil,
+    Date.now() + durationMs
+  );
 }
 function isInteractionLocked() {
   return settingsOpen.value || toolbarDragging.value || Date.now() < suppressInteractionsUntil;
@@ -296,6 +388,7 @@ function closeSettings(lockInteractions = true) {
 function syncUrlScope(nextUrl) {
   if (!nextUrl || currentUrl.value === nextUrl)
     return;
+  dismissUndo();
   currentUrl.value = nextUrl;
   setScopeUrl(nextUrl);
 }
@@ -335,7 +428,7 @@ function onDocumentClick(e) {
   if (mode.value === "idle")
     return;
   const target = e.target;
-  if (!target || target.closest(VA_DATA_ATTR_SELECTOR))
+  if (!target || isInsideAgentationTree(target, e))
     return;
   e.preventDefault();
   e.stopPropagation();
@@ -394,7 +487,9 @@ function onInputAdd(comment) {
       comment,
       url,
       element: "multi",
-      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(boundingBox.y)})`,
+      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(
+        boundingBox.y
+      )})`,
       isMultiSelect: true,
       elements,
       boundingBox,
@@ -470,7 +565,12 @@ function onInputAdd(comment) {
       vueComponents: getVueComponents(el),
       nearbyElements: getNearbyElements(el),
       nearbyText: getNearbyText(el),
-      boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      boundingBox: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      },
       cssClasses: detail === "forensic" ? Array.from(el.classList).join(" ") : void 0,
       fullPath: detail === "forensic" ? getElementPath(el) : void 0,
       computedStyles: detail === "forensic" ? getComputedStylesSummary(el) : void 0,
@@ -488,7 +588,11 @@ function onInputCancel() {
   transition("inspect");
 }
 async function onCopy() {
-  const markdown = formatAnnotations(annotations.value, settings.outputDetail, resolvedUrl.value);
+  const markdown = formatAnnotations(
+    annotations.value,
+    settings.outputDetail,
+    resolvedUrl.value
+  );
   if (props.copyToClipboard !== false) {
     const success = await copyToClipboard(markdown);
     if (!success)
@@ -500,13 +604,37 @@ async function onCopy() {
   }
   emit("copy", markdown);
   if (settings.clearAfterCopy) {
-    const cleared = clearAnnotations();
-    emit("annotations-clear", cleared);
+    onClear();
+  }
+}
+function dismissUndo() {
+  undoFeedback.value = false;
+  undoSnapshot.value = [];
+  if (undoTimer) {
+    clearTimeout(undoTimer);
+    undoTimer = null;
   }
 }
+function startUndoTimer() {
+  if (undoTimer)
+    clearTimeout(undoTimer);
+  undoTimer = setTimeout(() => dismissUndo(), UNDO_TIMEOUT_MS);
+}
+function onUndo() {
+  const snapshot = undoSnapshot.value;
+  dismissUndo();
+  if (snapshot.length > 0)
+    restoreAnnotations(snapshot);
+}
 function onClear() {
+  dismissUndo();
   const cleared = clearAnnotations();
+  if (cleared.length === 0)
+    return;
   emit("annotations-clear", cleared);
+  undoSnapshot.value = cleared;
+  undoFeedback.value = true;
+  startUndoTimer();
 }
 function onMarkerClick(ann) {
   const scrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -514,12 +642,16 @@ function onMarkerClick(ann) {
   const markerY = ann.isFixed ? ann.y : ann.y - scrollTop;
   editingAnnotation.value = ann;
   pendingPosition.value = { x: markerX, y: markerY };
-  pendingElementName.value = getElementName(ann._targetRef?.deref() || document.createElement(ann.element));
+  pendingElementName.value = getElementName(
+    ann._targetRef?.deref() || document.createElement(ann.element)
+  );
   pendingComponentChain.value = ann.vueComponents;
-  pendingComputedStyles.value = ann.computedStyles ? Object.fromEntries(ann.computedStyles.split("\n").filter(Boolean).map((line) => {
-    const idx = line.indexOf(":");
-    return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, ""];
-  })) : ann._targetRef?.deref() ? getRelevantComputedStyles(ann._targetRef.deref()) : void 0;
+  pendingComputedStyles.value = ann.computedStyles ? Object.fromEntries(
+    ann.computedStyles.split("\n").filter(Boolean).map((line) => {
+      const idx = line.indexOf(":");
+      return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, ""];
+    })
+  ) : ann._targetRef?.deref() ? getRelevantComputedStyles(ann._targetRef.deref()) : void 0;
   pendingTextSelection.value = null;
   pendingTarget.value = ann._targetRef?.deref() || null;
   transition("input-open");
@@ -595,7 +727,10 @@ onMounted(() => {
   document.addEventListener("mousemove", onDocumentMouseMove, true);
   document.addEventListener("mousedown", onDocumentMouseDown, true);
   document.addEventListener("mouseup", onDocumentMouseUp, true);
-  document.addEventListener("wheel", onDocumentWheel, { passive: true, capture: true });
+  document.addEventListener("wheel", onDocumentWheel, {
+    passive: true,
+    capture: true
+  });
   document.addEventListener("click", onDocumentClick, true);
 });
 onBeforeUnmount(() => {
@@ -612,14 +747,21 @@ onBeforeUnmount(() => {
 
 <template>
   <component :is="portalWrapper" v-bind="portalProps">
-    <div ref="rootEl" data-agentation-vue :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0" :style="rootStyle">
+    <div
+      ref="rootEl"
+      data-agentation-vue
+      :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0"
+      :style="rootStyle"
+    >
       <!-- Intercept overlay -->
       <div
         v-if="mode !== 'idle'"
         ref="overlayEl"
         class="__va-intercept"
         :class="{ '__va-intercept--input-open': mode === 'input-open' }"
-        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0"
+        :style="
+  mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0
+"
         @mousemove="onOverlayMouseMove"
         @mousedown="onOverlayMouseDown"
         @mouseup="onOverlayMouseUp"
@@ -678,6 +820,7 @@ onBeforeUnmount(() => {
         :computed-styles="pendingComputedStyles"
         :initial-comment="editingAnnotation?.comment"
         :is-editing="!!editingAnnotation"
+        :mention-candidates="mentionCandidates"
         @add="onInputAdd"
         @cancel="onInputCancel"
         @delete="onInputDelete"
@@ -697,6 +840,18 @@ onBeforeUnmount(() => {
         Copied!
       </div>
 
+      <!-- Undo clear feedback -->
+      <div
+        v-if="undoFeedback"
+        class="__va-undo-feedback"
+        :class="{ '__va-undo-feedback--shifted': copyFeedback }"
+      >
+        <span>Annotations cleared</span>
+        <button type="button" class="__va-undo-btn" @click="onUndo">
+          Undo
+        </button>
+      </div>
+
       <!-- Toolbar -->
       <AgentationToolbar
         ref="toolbarRef"

package/dist/AgentationVue.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     pageUrl?: string;
     theme?: 'light' | 'dark' | 'auto';
     activationKey?: 'none' | 'Meta' | 'Alt' | 'Shift';
+    disablePortal?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     copy: (markdown: string) => any;

package/dist/components/AgentationToolbar.vue

@@ -77,8 +77,7 @@ function onDeactivate() {
   emit("deactivate");
 }
 function onClear() {
-  if (confirm("Clear all annotations?"))
-    emit("clear");
+  emit("clear");
 }
 function onOpenSettings(e) {
   const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;

package/dist/components/AnnotationInput.d.vue.ts

@@ -1,3 +1,4 @@
+import type { MentionCandidate } from '../utils/mention';
 type __VLS_Props = {
     position: {
         x: number;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     computedStyles?: Record<string, string>;
     initialComment?: string;
     isEditing?: boolean;
+    mentionCandidates?: MentionCandidate[];
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/components/AnnotationInput.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { computed, onMounted, ref } from "vue-demi";
+import { computed, onMounted, ref, toRef } from "vue-demi";
+import { useMentionDropdown } from "../composables/useMentionDropdown.mjs";
+import { hydrateMentions, serializeMentions } from "../utils/mention.mjs";
 import ComponentChain from "./ComponentChain.vue";
+import MentionDropdown from "./MentionDropdown.vue";
 import VaButton from "./VaButton.vue";
 import VaIcon from "./VaIcon.vue";
 const props = defineProps({
@@ -9,12 +12,16 @@ const props = defineProps({
   componentChain: { type: String, required: false },
   computedStyles: { type: Object, required: false },
   initialComment: { type: String, required: false },
-  isEditing: { type: Boolean, required: false }
+  isEditing: { type: Boolean, required: false },
+  mentionCandidates: { type: Array, required: false }
 });
 const emit = defineEmits(["add", "cancel", "delete"]);
-const comment = ref(props.initialComment || "");
 const inputEl = ref(null);
+const commentText = ref(props.initialComment || "");
 const computedStyleEntries = computed(() => Object.entries(props.computedStyles || {}));
+const candidates = toRef(props, "mentionCandidates");
+const safeCandidates = computed(() => candidates.value || []);
+const mention = useMentionDropdown(inputEl, safeCandidates);
 const inputStyle = computed(() => {
   const x = Math.min(props.position.x, window.innerWidth - 380);
   const y = Math.min(props.position.y + 20, window.innerHeight - 150);
@@ -23,14 +30,71 @@ const inputStyle = computed(() => {
     top: `${Math.max(10, y)}px`
   };
 });
+function autoResize() {
+  const el = inputEl.value;
+  if (!el)
+    return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+function getComment() {
+  const el = inputEl.value;
+  if (!el)
+    return "";
+  return serializeMentions(el);
+}
+function onInput() {
+  commentText.value = getComment();
+  autoResize();
+  mention.checkForTrigger();
+}
+function onKeyDown(e) {
+  if (mention.onKeyDown(e))
+    return;
+  if (e.key === "Enter" && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    onAdd();
+  } else if (e.key === "Escape") {
+    if (mention.isOpen.value) {
+      e.preventDefault();
+      mention.close();
+    } else {
+      emit("cancel");
+    }
+  }
+}
 function onAdd() {
-  const text = comment.value.trim();
+  const text = getComment().trim();
   if (!text)
     return;
   emit("add", text);
 }
+function onPaste(e) {
+  e.preventDefault();
+  const text = e.clipboardData?.getData("text/plain") || "";
+  document.execCommand("insertText", false, text);
+}
+function onSelectCandidate(candidate) {
+  mention.selectCandidate(candidate);
+}
 onMounted(() => {
-  inputEl.value?.focus();
+  const el = inputEl.value;
+  if (!el)
+    return;
+  if (props.initialComment) {
+    const html = hydrateMentions(props.initialComment, safeCandidates.value);
+    el.innerHTML = html;
+  }
+  el.focus();
+  const sel = window.getSelection();
+  if (sel && el.childNodes.length > 0) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+  autoResize();
 });
 </script>
 
@@ -66,13 +130,24 @@ onMounted(() => {
       <ComponentChain :chain="componentChain" variant="light" truncate="leaf" />
     </div>
     <span v-else class="__va-input-label">{{ elementName || "Annotation" }}</span>
-    <input
+    <div
       ref="inputEl"
-      v-model="comment"
-      placeholder="Add a comment..."
-      @keydown.enter="onAdd"
-      @keydown.escape="$emit('cancel')"
-    >
+      class="__va-input-editable"
+      contenteditable="true"
+      role="textbox"
+      aria-multiline="true"
+      data-placeholder="Add a comment..."
+      @input="onInput"
+      @keydown="onKeyDown"
+      @paste="onPaste"
+    />
+    <MentionDropdown
+      :open="mention.isOpen.value"
+      :candidates="mention.filteredCandidates.value"
+      :active-index="mention.activeIndex.value"
+      :position="mention.dropdownPosition.value"
+      @select="onSelectCandidate"
+    />
     <div class="__va-input-actions">
       <button
         v-if="isEditing"
@@ -86,7 +161,7 @@ onMounted(() => {
         <VaButton variant="secondary" @click="$emit('cancel')">
           Cancel
         </VaButton>
-        <VaButton :disabled="!comment.trim()" @click="onAdd">
+        <VaButton :disabled="!commentText.trim()" @click="onAdd">
           {{ isEditing ? "Save" : "Add" }}
         </VaButton>
       </div>

package/dist/components/AnnotationInput.vue.d.ts

@@ -1,3 +1,4 @@
+import type { MentionCandidate } from '../utils/mention';
 type __VLS_Props = {
     position: {
         x: number;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     computedStyles?: Record<string, string>;
     initialComment?: string;
     isEditing?: boolean;
+    mentionCandidates?: MentionCandidate[];
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/components/MentionDropdown.d.vue.ts

@@ -0,0 +1,16 @@
+import type { MentionCandidate } from '../utils/mention';
+type __VLS_Props = {
+    open: boolean;
+    candidates: MentionCandidate[];
+    activeIndex: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    select: (candidate: MentionCandidate) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((candidate: MentionCandidate) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;