@abraca/nuxt 2.11.0 → 2.14.0

package/dist/runtime/components/AEditor.vue

@@ -1,12 +1,24 @@
 <script setup>
 import { shallowRef, ref, watch, watchEffect, computed, nextTick, onBeforeUnmount } from "vue";
-import { useNuxtApp } from "#imports";
+import { useNuxtApp, navigateTo, useRuntimeConfig } from "#imports";
 import { Fragment } from "@tiptap/pm/model";
 import { useSyncedMap } from "../composables/useYDoc";
 import { resolveDocType, GEO_TYPE_META_SCHEMAS } from "../utils/docTypes";
 import { schemaFieldToAttrs, userFieldToAttrs } from "../extensions/meta-field";
+import { decideTitleSync, setHeaderText as applyHeaderText, UNTITLED } from "../utils/titleSync";
 import { useEditor } from "../composables/useEditor";
 import { useDocTree } from "../composables/useDocTree";
+import { useDocBreadcrumb } from "../composables/useDocBreadcrumb";
+import { useDocSlugs } from "../composables/useDocSlugs";
+import { useChildTree } from "../composables/useChildTree";
+import { useFavorites } from "../composables/useFavorites";
+import { useWindowManager } from "../composables/useWindowManager";
+import { useDocDragBus } from "../composables/useDocDragBus";
+import { useDocLinkPick } from "../composables/useDocLinkPick";
+import { makeDocSearch } from "../composables/useDocSuggest";
+import { DocSuggest } from "../extensions/doc-suggest";
+import { useNodeContextMenu } from "../composables/useNodeContextMenu";
+import { DOC_DRAG_MIME, isDocDrag, parseDocDragPayload, isDescendantInMap } from "../utils/docDragDrop";
 import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
@@ -14,6 +26,8 @@ import { useEditorEmojis } from "../composables/useEditorEmojis";
 import { useEditorMentions } from "../composables/useEditorMentions";
 import ALinkPopover from "./editor/ALinkPopover.vue";
 import ADocLinkPopover from "./editor/ADocLinkPopover.vue";
+import ANodeContextMenu from "./shell/ANodeContextMenu.vue";
+import ADocSuggestMenu from "./editor/ADocSuggestMenu.vue";
 import ACodeEditor from "./ACodeEditor.vue";
 const props = defineProps({
   docId: { type: String, required: true },
@@ -28,7 +42,8 @@ const props = defineProps({
   parentType: { type: String, required: false },
   metaSchema: { type: Array, required: false },
   variant: { type: String, required: false, default: "doc" },
-  showSourceToggle: { type: Boolean, required: false, default: false }
+  showSourceToggle: { type: Boolean, required: false, default: false },
+  showBreadcrumb: { type: Boolean, required: false, default: true }
 });
 const viewMode = ref("rich");
 const emit = defineEmits(["ready", "update", "rename", "updateMeta"]);
@@ -48,9 +63,26 @@ watch(provider, async (prov) => {
 onBeforeUnmount(() => {
   provider.value?.unpinChild?.(props.docId);
 });
+const docSuggestEnabled = (useRuntimeConfig().public?.abracadabra?.docPicker ?? "inline") === "inline";
+const _suggestTree = useChildTree(doc, props.docId);
+const docSuggestExt = DocSuggest.configure({
+  search: makeDocSearch(_suggestTree, props.docId),
+  onCommit: (item, mode, range, query) => {
+    const ed = editorRef.value?.editor;
+    if (!ed || !props.editable) return;
+    let docId = item.id;
+    if (item.isCreate) docId = _suggestTree.createChild(props.docId, query.trim() || "Untitled", "doc");
+    if (!docId) return;
+    const chain = ed.chain().focus().deleteRange(range);
+    if (mode === "embed") chain.insertDocEmbed({ docId });
+    else chain.insertDocLink({ docId });
+    chain.run();
+  }
+});
 const { extensions, connectedUsers, ready } = useEditor({
   childProvider,
-  docId: props.docId
+  docId: props.docId,
+  extraExtensions: docSuggestEnabled ? [docSuggestExt] : []
 });
 watch(ready, (val) => {
   if (val) emit("ready");
@@ -77,7 +109,7 @@ const resolvedMetaSchema = computed(() => {
 });
 const { items: allSuggestionItems, propertiesOnlyItems } = useEditorSuggestions({ docId: props.docId });
 const { items: emojiItems } = useEditorEmojis();
-const { items: mentionItems } = useEditorMentions({ docId: props.docId });
+const { items: mentionItems } = useEditorMentions({ docId: props.docId, includeDocuments: false });
 const isInDocumentMeta = ref(false);
 watchEffect((onCleanup) => {
   const ed = editorRef.value?.editor;
@@ -167,85 +199,126 @@ function initDocumentMeta(ed) {
   metaInitDone = true;
 }
 let syncingFromEditor = false;
-const _lastEmittedHeader = ref("");
+let lastSyncedLabel = null;
 function getHeaderText(ed) {
   const first = ed.state.doc.firstChild;
   if (!first || first.type.name !== "documentHeader") return "";
   return first.textContent;
 }
-function setHeaderText(ed, text) {
-  const first = ed.state.doc.firstChild;
-  if (!first || first.type.name !== "documentHeader") return;
-  if (first.textContent === text) return;
-  const { tr, schema } = ed.state;
-  const to = 1 + first.content.size;
-  if (text) {
-    tr.replaceWith(1, to, schema.text(text));
-  } else {
-    tr.delete(1, to);
-  }
-  ed.view.dispatch(tr);
+function currentTreeLabel() {
+  return _treeMap.data[props.docId]?.label ?? props.docLabel ?? "";
 }
-function syncHeaderToTree(ed) {
-  const text = getHeaderText(ed);
-  if (text === _lastEmittedHeader.value) return;
-  _lastEmittedHeader.value = text;
+function writeTreeLabel(label) {
+  const e = _treeMap.data[props.docId];
+  const next = label || UNTITLED;
+  if (!e || e.label === next) return;
   syncingFromEditor = true;
-  emit("rename", text || "Untitled");
+  lastSyncedLabel = next;
+  _treeMap.set(props.docId, { ...e, label: next, updatedAt: Date.now() });
+  emit("rename", next);
   nextTick(() => {
     syncingFromEditor = false;
   });
 }
+function syncHeader(ed, isRemoteUpdate, initialSyncDone) {
+  const action = decideTitleSync({
+    headerText: getHeaderText(ed),
+    treeLabel: currentTreeLabel(),
+    isRemoteUpdate,
+    initialSyncDone
+  });
+  if (action.kind === "noop") return;
+  if (action.kind === "header-from-tree") {
+    applyHeaderText(ed, action.text);
+    return;
+  }
+  writeTreeLabel(action.label);
+}
 watchEffect((onCleanup) => {
   const ed = editorRef.value?.editor;
   if (!ed || !ready.value) return;
   let initialSyncDone = false;
-  function doInitialSync() {
-    if (initialSyncDone) return;
-    initialSyncDone = true;
-    const headerText = getHeaderText(ed);
-    const treeLabel = props.docLabel ?? "";
-    if (headerText !== treeLabel) {
-      const treeMeansEmpty = !treeLabel || treeLabel === "Untitled";
-      const headerMeansEmpty = !headerText;
-      if (treeMeansEmpty && headerMeansEmpty) return;
-      if (!treeMeansEmpty && headerMeansEmpty) {
-        setHeaderText(ed, treeLabel);
-        return;
+  let headerTimer = null;
+  const runSync = (isRemote) => {
+    const wasInitial = !initialSyncDone;
+    if (wasInitial) initialSyncDone = true;
+    syncHeader(ed, isRemote, !wasInitial);
+  };
+  function onUpdate({ transaction }) {
+    const isRemote = !!transaction?.getMeta?.("y-sync$")?.isChangeOrigin;
+    initDocumentMeta(ed);
+    if (isRemote || !initialSyncDone) {
+      if (headerTimer) {
+        clearTimeout(headerTimer);
+        headerTimer = null;
       }
-      _lastEmittedHeader.value = headerText;
-      syncingFromEditor = true;
-      emit("rename", headerText);
-      nextTick(() => {
-        syncingFromEditor = false;
-      });
+      runSync(isRemote);
+    } else {
+      if (headerTimer) clearTimeout(headerTimer);
+      headerTimer = setTimeout(() => {
+        headerTimer = null;
+        runSync(false);
+      }, 200);
     }
   }
-  function onUpdate() {
-    syncHeaderToTree(ed);
-    initDocumentMeta(ed);
-  }
   nextTick(() => {
-    doInitialSync();
+    runSync(false);
     initDocumentMeta(ed);
   });
   ed.on("update", onUpdate);
-  onCleanup(() => ed.off("update", onUpdate));
-});
-watch(() => props.docLabel, (newLabel) => {
-  if (syncingFromEditor) return;
-  if (newLabel === _lastEmittedHeader.value) return;
-  if (!_treeMap.lastUpdateLocal.value) return;
-  const ed = editorRef.value?.editor;
-  if (!ed || !ready.value) return;
-  setHeaderText(ed, newLabel || "");
+  onCleanup(() => {
+    if (headerTimer) clearTimeout(headerTimer);
+    ed.off("update", onUpdate);
+  });
 });
+watch(
+  () => _treeMap.data[props.docId]?.label ?? props.docLabel,
+  (newLabel) => {
+    if (syncingFromEditor) return;
+    if (lastSyncedLabel !== null && newLabel === lastSyncedLabel) {
+      lastSyncedLabel = null;
+      return;
+    }
+    lastSyncedLabel = null;
+    if (newLabel === void 0 || newLabel === "" || newLabel === UNTITLED) return;
+    const ed = editorRef.value?.editor;
+    if (!ed || !ready.value) return;
+    applyHeaderText(ed, newLabel);
+  }
+);
 function insertNode(editor, type, attrs, content) {
   const node = { type, attrs };
   if (content) node.content = content;
   return editor.chain().focus().insertContent(node);
 }
+const { pickDoc } = useDocLinkPick();
 const editorHandlers = {
+  // Slash → pick a document → embed it as a block. `execute` returns a chain
+  // synchronously (the dispatcher .run()s it); the actual insert happens async
+  // once the picker resolves.
+  docEmbed: {
+    canExecute: () => true,
+    execute: (editor) => {
+      pickDoc().then((result) => {
+        if (!result) return;
+        editor.chain().focus().insertDocEmbed({ docId: result.id }).run();
+      });
+      return editor.chain().focus();
+    },
+    isActive: (editor) => editor.isActive("docEmbed")
+  },
+  // Slash/drag-handle → pick a document → insert an inline link to it.
+  docLink: {
+    canExecute: () => true,
+    execute: (editor) => {
+      pickDoc().then((result) => {
+        if (!result) return;
+        editor.chain().focus().insertDocLink({ docId: result.id }).run();
+      });
+      return editor.chain().focus();
+    },
+    isActive: (editor) => editor.isActive("docLink")
+  },
   insertMetaField: {
     canExecute: () => true,
     execute: (editor, item) => editor.chain().focus().insertMetaField(item.attrs),
@@ -357,6 +430,104 @@ const editorHandlers = {
 const _mentionItems = computed(
   () => registry.getAllMentionProviders().flatMap((p) => p.label ? [p] : [])
 );
+const { items: _breadcrumbItems } = useDocBreadcrumb(() => props.docId);
+const { getDocUrl } = useDocSlugs();
+const ancestorChain = computed(
+  () => _breadcrumbItems.value.slice(0, -1).map((a) => {
+    const entry = docTree.getEntry(a.id);
+    return { ...a, type: entry?.type, to: getDocUrl(a.id) };
+  })
+);
+const bcTree = useChildTree(doc, props.docId);
+const { isFavorite, toggleFavorite } = useFavorites(doc);
+const docDragBus = useDocDragBus();
+const breadcrumbDragId = ref(null);
+const breadcrumbDropTargetId = ref(null);
+function onBcDragStart(e, a) {
+  if (!props.editable) return;
+  breadcrumbDragId.value = a.id;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", a.id);
+    e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: a.id, label: a.label }));
+  }
+  docDragBus.startDrag({
+    docIds: [a.id],
+    labels: [a.label],
+    icons: a.icon ? [a.icon] : void 0,
+    source: "renderer",
+    sourceDocId: props.docId,
+    pointer: { x: e.clientX, y: e.clientY }
+  });
+}
+function onBcDragEnd() {
+  breadcrumbDragId.value = null;
+  breadcrumbDropTargetId.value = null;
+  docDragBus.endDrag();
+}
+function onBcDragOver(e, ancestorId) {
+  if (!isDocDrag(e)) return;
+  if (breadcrumbDragId.value === ancestorId) return;
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  breadcrumbDropTargetId.value = ancestorId;
+}
+function onBcDragLeave(e) {
+  const related = e.relatedTarget;
+  if (related && e.currentTarget.contains(related)) return;
+  breadcrumbDropTargetId.value = null;
+}
+function onBcDrop(e, ancestorId) {
+  e.preventDefault();
+  e.stopPropagation();
+  breadcrumbDropTargetId.value = null;
+  if (!props.editable) return;
+  const payload = parseDocDragPayload(e);
+  if (!payload) return;
+  if (payload.id === ancestorId) return;
+  if (isDescendantInMap(bcTree.treeMap.data, payload.id, ancestorId)) return;
+  bcTree.moveEntry(payload.id, ancestorId, Date.now());
+  breadcrumbDragId.value = null;
+  docDragBus.endDrag();
+}
+async function bcOpenAsWindow(id, label) {
+  const wm = useWindowManager();
+  if (wm.windows.has(id)) {
+    wm.focusWindow(id);
+    return;
+  }
+  const childProv = await provider.value?.loadChild(id);
+  if (!childProv) return;
+  if (!childProv.isSynced) {
+    await new Promise((resolve) => {
+      const done = () => {
+        childProv.off("synced", done);
+        resolve();
+      };
+      childProv.on("synced", done);
+      setTimeout(resolve, 6e3);
+    });
+  }
+  const entry = bcTree.treeMap.get(id);
+  wm.openWindow({ id, title: label, docId: id, docType: entry?.type, provider: childProv, initialTab: "editor" });
+}
+function bcMenuItems(a) {
+  return useNodeContextMenu({
+    nodeId: a.id,
+    label: a.label,
+    type: a.type,
+    tree: bcTree,
+    registry,
+    favorites: { isFavorite, toggleFavorite },
+    onOpen: (id) => navigateTo(getDocUrl(id)),
+    onOpenInWindow: () => bcOpenAsWindow(a.id, a.label),
+    onCopyLink: (id) => {
+      if (!import.meta.client || !navigator?.clipboard) return;
+      navigator.clipboard.writeText(new URL(getDocUrl(id), location.origin).href).catch(() => {
+      });
+    }
+  }).items;
+}
 function onPlusClick(e, onClick) {
   e.stopPropagation();
   onClick();
@@ -387,7 +558,10 @@ function onPlusClick(e, onClick) {
     >
       <div class="aeditor-source-toolbar">
         <span class="aeditor-source-toolbar__label">
-          <UIcon name="i-lucide-code-xml" class="size-3.5" />
+          <UIcon
+            name="i-lucide-code-xml"
+            class="size-3.5"
+          />
           XML source — read-only mirror of <code>getXmlFragment('default')</code>
         </span>
         <UButton
@@ -408,136 +582,198 @@ function onPlusClick(e, onClick) {
       />
     </div>
 
-    <UEditor
+    <!-- Editor canvas: ancestor breadcrumb (cou-sh parity) + the TipTap editor,
+         stacked in one scroll container (the parent's overflow class falls
+         through to this wrapper). -->
+    <div
       v-else
-      :class="{ 'prose-variant': variant === 'prose' }"
-      ref="editorRef"
-      v-slot="{ editor }"
-      v-model="model"
-      :content-type="contentType"
-      :editable="editable"
-      :extensions="extensions"
-      :starter-kit="{ undoRedo: false, codeBlock: false, document: false }"
-      :handlers="editorHandlers"
-      :placeholder="placeholder"
-      @update:model-value="emit('update', $event)"
+      class="aeditor-canvas"
     >
-      <!-- Floating source-view toggle (opt-in via :show-source-toggle="true") -->
-      <UButton
-        v-if="showSourceToggle"
-        class="aeditor-source-toggle"
-        icon="i-lucide-code-xml"
-        size="xs"
-        variant="ghost"
-        color="neutral"
-        :title="'View XML source'"
-        @click="viewMode = 'source'"
-      />
-      <!-- Default slot: app can override entire editor content -->
-      <slot
-        :editor="editor"
-        :connected-users="connectedUsers"
-        :ready="ready"
+      <nav
+        v-if="showBreadcrumb && ancestorChain.length"
+        aria-label="Breadcrumb"
+        class="aeditor-breadcrumb"
       >
-        <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
-        <!-- 4 named slots are forwarded to consumers:
-             #link / #doc-link — defaulted to ALinkPopover / ADocLinkPopover
-             #create-child-doc / #send-to-chat — empty by default; app-defined -->
-        <UEditorToolbar
-          v-if="showToolbar"
-          :editor="editor"
-          :items="toolbarItems"
-          layout="bubble"
-          :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty"
-        >
-          <template #link>
-            <slot
-              name="link"
-              :editor="editor"
-            >
-              <ALinkPopover :editor="editor" />
-            </slot>
-          </template>
-          <template #doc-link>
-            <slot
-              name="doc-link"
-              :editor="editor"
+        <ol class="flex items-center gap-0.5 min-w-0">
+          <template
+            v-for="(ancestor, idx) in ancestorChain"
+            :key="ancestor.id"
+          >
+            <li
+              v-if="idx > 0"
+              class="flex shrink-0"
             >
-              <ADocLinkPopover :editor="editor" />
-            </slot>
-          </template>
-          <template #create-child-doc>
-            <slot
-              name="create-child-doc"
-              :editor="editor"
-            />
-          </template>
-          <template #send-to-chat>
-            <slot
-              name="send-to-chat"
-              :editor="editor"
-            />
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="size-4 text-(--ui-text-dimmed)"
+              />
+            </li>
+            <li class="flex min-w-0">
+              <ANodeContextMenu :items="bcMenuItems(ancestor)">
+                <button
+                  type="button"
+                  draggable="true"
+                  class="flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-sm font-medium transition-colors min-w-0 select-none cursor-pointer"
+                  :class="[
+  breadcrumbDragId === ancestor.id ? 'opacity-30' : '',
+  breadcrumbDropTargetId === ancestor.id ? 'bg-(--ui-primary)/10 ring-2 ring-(--ui-primary)/50 text-(--ui-text)' : 'text-(--ui-text-muted) hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text)'
+]"
+                  @click="navigateTo(ancestor.to)"
+                  @dragstart="onBcDragStart($event, ancestor)"
+                  @dragend="onBcDragEnd"
+                  @dragover="onBcDragOver($event, ancestor.id)"
+                  @dragleave="onBcDragLeave"
+                  @drop="onBcDrop($event, ancestor.id)"
+                >
+                  <UIcon
+                    :name="ancestor.icon"
+                    class="size-4 shrink-0"
+                  />
+                  <span class="truncate">{{ ancestor.label }}</span>
+                </button>
+              </ANodeContextMenu>
+            </li>
           </template>
-        </UEditorToolbar>
+        </ol>
+      </nav>
 
-        <!-- ── Slash command menu ──────────────────────────────────────────── -->
-        <UEditorSuggestionMenu
-          v-if="showSuggestionMenu"
-          :editor="editor"
-          :items="suggestionItems"
+      <UEditor
+        ref="editorRef"
+        v-slot="{ editor }"
+        v-model="model"
+        :class="{ 'prose-variant': variant === 'prose' }"
+        :content-type="contentType"
+        :editable="editable"
+        :extensions="extensions"
+        :starter-kit="{ undoRedo: false, codeBlock: false, document: false }"
+        :handlers="editorHandlers"
+        :placeholder="placeholder"
+        @update:model-value="emit('update', $event)"
+      >
+        <!-- Floating source-view toggle (opt-in via :show-source-toggle="true") -->
+        <UButton
+          v-if="showSourceToggle"
+          class="aeditor-source-toggle"
+          icon="i-lucide-code-xml"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :title="'View XML source'"
+          @click="viewMode = 'source'"
         />
-
-        <!-- ── Emoji menu (`:` trigger) ───────────────────────────────────── -->
-        <UEditorEmojiMenu
+        <!-- Default slot: app can override entire editor content -->
+        <slot
           :editor="editor"
-          :items="emojiItems"
-        />
+          :connected-users="connectedUsers"
+          :ready="ready"
+        >
+          <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
+          <!-- 4 named slots are forwarded to consumers:
+             #link / #doc-link — defaulted to ALinkPopover / ADocLinkPopover
+             #create-child-doc / #send-to-chat — empty by default; app-defined -->
+          <UEditorToolbar
+            v-if="showToolbar"
+            :editor="editor"
+            :items="toolbarItems"
+            layout="bubble"
+            :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty"
+          >
+            <template #link>
+              <slot
+                name="link"
+                :editor="editor"
+              >
+                <ALinkPopover :editor="editor" />
+              </slot>
+            </template>
+            <template #doc-link>
+              <slot
+                name="doc-link"
+                :editor="editor"
+              >
+                <ADocLinkPopover :editor="editor" />
+              </slot>
+            </template>
+            <template #create-child-doc>
+              <slot
+                name="create-child-doc"
+                :editor="editor"
+              />
+            </template>
+            <template #send-to-chat>
+              <slot
+                name="send-to-chat"
+                :editor="editor"
+              />
+            </template>
+          </UEditorToolbar>
 
-        <!-- ── Mention menu (`@` trigger) — users + docs + plugin providers ── -->
-        <UEditorMentionMenu
-          :editor="editor"
-          :items="mentionItems"
-        />
+          <!-- ── Slash command menu ──────────────────────────────────────────── -->
+          <UEditorSuggestionMenu
+            v-if="showSuggestionMenu"
+            :editor="editor"
+            :items="suggestionItems"
+          />
 
-        <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
-        <UEditorDragHandle
-          v-if="showDragHandle"
-          v-slot="{ ui, onClick }"
-          :editor="editor"
-          @node-change="dragHandle.onNodeChange"
-        >
-          <!-- Plus: insert block via slash menu -->
-          <UButton
-            icon="i-lucide-plus"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :class="ui.handle()"
-            @click="(e) => onPlusClick(e, onClick)"
+          <!-- ── Emoji menu (`:` trigger) ───────────────────────────────────── -->
+          <UEditorEmojiMenu
+            :editor="editor"
+            :items="emojiItems"
+          />
+
+          <!-- ── Mention menu (`@` trigger) — users + docs + plugin providers ── -->
+          <UEditorMentionMenu
+            :editor="editor"
+            :items="mentionItems"
           />
 
-          <!-- Grip: block context menu -->
-          <UDropdownMenu
-            v-slot="{ open }"
-            :modal="false"
-            :items="dragHandle.getItems(editor)"
-            :content="{ side: 'left' }"
-            :ui="{ content: 'w-48', label: 'text-xs' }"
-            @update:open="(v) => editor.chain().setMeta('lockDragHandle', v).run()"
+          <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
+          <UEditorDragHandle
+            v-if="showDragHandle"
+            v-slot="{ ui, onClick }"
+            :editor="editor"
+            @node-change="dragHandle.onNodeChange"
           >
+            <!-- Plus: insert block via slash menu -->
             <UButton
+              icon="i-lucide-plus"
               color="neutral"
               variant="ghost"
-              :active-variant="'soft'"
               size="sm"
-              icon="i-lucide-grip-vertical"
-              :active="open"
               :class="ui.handle()"
+              @click="(e) => onPlusClick(e, onClick)"
             />
-          </UDropdownMenu>
-        </UEditorDragHandle>
-      </slot>
-    </UEditor>
+
+            <!-- Grip: block context menu -->
+            <UDropdownMenu
+              v-slot="{ open }"
+              :modal="false"
+              :items="dragHandle.getItems(editor)"
+              :content="{ side: 'left' }"
+              :ui="{ content: 'w-48', label: 'text-xs' }"
+              @update:open="(v) => editor.chain().setMeta('lockDragHandle', v).run()"
+            >
+              <UButton
+                color="neutral"
+                variant="ghost"
+                :active-variant="'soft'"
+                size="sm"
+                icon="i-lucide-grip-vertical"
+                :active="open"
+                :class="ui.handle()"
+              />
+            </UDropdownMenu>
+          </UEditorDragHandle>
+
+          <!-- Inline `[[` doc-link / `![[` doc-embed mention-style popup
+               (only mounted when docPicker === 'inline'). -->
+          <ADocSuggestMenu
+            v-if="docSuggestEnabled && editor?.storage?.docSuggest"
+            :state="editor.storage.docSuggest.popup"
+          />
+        </slot>
+      </UEditor>
+    </div>
 
     <template #fallback>
       <div
@@ -553,5 +789,5 @@ function onPlusClick(e, onClick) {
 </template>
 
 <style scoped>
-.prose-variant :deep(.tiptap){color:var(--ui-text);font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:1.0625rem;line-height:1.75}.prose-variant :deep(.tiptap p){margin-bottom:1em;margin-top:0}.prose-variant :deep(.tiptap h1),.prose-variant :deep(.tiptap h2),.prose-variant :deep(.tiptap h3),.prose-variant :deep(.tiptap h4){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;letter-spacing:-.01em;line-height:1.25;margin-bottom:.5em;margin-top:1.75em}.prose-variant :deep(.tiptap h1){font-size:2rem;font-weight:700}.prose-variant :deep(.tiptap h2){font-size:1.5rem;font-weight:700}.prose-variant :deep(.tiptap h3){font-size:1.25rem;font-weight:600}.prose-variant :deep(.tiptap blockquote){border-left:3px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;margin-left:0;padding-left:1em}.prose-variant :deep(.tiptap ol),.prose-variant :deep(.tiptap ul){margin-bottom:1em;padding-left:1.5em}.prose-variant :deep(.tiptap .document-header){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem}.aeditor-source-wrap{display:flex;flex:1 1 0;flex-direction:column;min-height:0}.aeditor-source-toolbar{align-items:center;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);display:flex;flex-shrink:0;justify-content:space-between;padding:.375rem .75rem}.aeditor-source-toolbar__label{align-items:center;color:var(--ui-text-muted);display:inline-flex;font-size:.75rem;gap:.375rem}.aeditor-source-toolbar__label code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-family:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:.7rem;padding:.05rem .3rem}.aeditor-source-toggle{opacity:.6;position:absolute;right:.375rem;top:.375rem;transition:opacity .12s ease;z-index:5}.aeditor-source-toggle:hover{opacity:1}
+.aeditor-canvas{display:flex;flex-direction:column;min-height:0}.aeditor-breadcrumb{flex-shrink:0;padding:1rem 0 0}@media (min-width:640px){.aeditor-breadcrumb{padding-left:2rem;padding-right:2rem}}.prose-variant :deep(.tiptap){color:var(--ui-text);font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:1.0625rem;line-height:1.75}.prose-variant :deep(.tiptap p){margin-bottom:1em;margin-top:0}.prose-variant :deep(.tiptap h1),.prose-variant :deep(.tiptap h2),.prose-variant :deep(.tiptap h3),.prose-variant :deep(.tiptap h4){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;letter-spacing:-.01em;line-height:1.25;margin-bottom:.5em;margin-top:1.75em}.prose-variant :deep(.tiptap h1){font-size:2rem;font-weight:700}.prose-variant :deep(.tiptap h2){font-size:1.5rem;font-weight:700}.prose-variant :deep(.tiptap h3){font-size:1.25rem;font-weight:600}.prose-variant :deep(.tiptap blockquote){border-left:3px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;margin-left:0;padding-left:1em}.prose-variant :deep(.tiptap ol),.prose-variant :deep(.tiptap ul){margin-bottom:1em;padding-left:1.5em}.prose-variant :deep(.tiptap .document-header){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem}.aeditor-source-wrap{display:flex;flex:1 1 0;flex-direction:column;min-height:0}.aeditor-source-toolbar{align-items:center;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);display:flex;flex-shrink:0;justify-content:space-between;padding:.375rem .75rem}.aeditor-source-toolbar__label{align-items:center;color:var(--ui-text-muted);display:inline-flex;font-size:.75rem;gap:.375rem}.aeditor-source-toolbar__label code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-family:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:.7rem;padding:.05rem .3rem}.aeditor-source-toggle{opacity:.6;position:absolute;right:.375rem;top:.375rem;transition:opacity .12s ease;z-index:5}.aeditor-source-toggle:hover{opacity:1}
 </style>