@abraca/nuxt 2.13.0 → 2.14.0

package/dist/runtime/composables/useDocSuggest.d.ts

@@ -0,0 +1,34 @@
+import type { useChildTree } from './useChildTree.js';
+type Tree = ReturnType<typeof useChildTree>;
+export interface DocSuggestItem {
+    id: string;
+    label: string;
+    icon: string;
+    /** Dimmed ancestor path (e.g. "Kanban Board / Todo") for nesting context. */
+    prefix?: string;
+    /** When true, selecting this item creates a new child doc named `label`. */
+    isCreate?: boolean;
+}
+/** Reactive state shared between the DocSuggest extension and its popup. */
+export interface DocSuggestPopupState {
+    active: boolean;
+    mode: 'link' | 'embed';
+    query: string;
+    items: DocSuggestItem[];
+    index: number;
+    rect: {
+        left: number;
+        top: number;
+        bottom: number;
+    } | null;
+    onSelect: ((item: DocSuggestItem) => void) | null;
+}
+export declare function emptyDocSuggestState(): DocSuggestPopupState;
+/**
+ * Build a whole-space doc search for the `[[` / `![[` popups. Ranks entries by
+ * label match and appends a "Create …" item when the query has no exact match.
+ * Each result carries a dimmed ancestor-path `prefix` for nesting context — the
+ * popup stays a flat, searchable list (no tree drill-down).
+ */
+export declare function makeDocSearch(tree: Tree, currentDocId: string): (rawQuery: string) => DocSuggestItem[];
+export {};

package/dist/runtime/composables/useDocSuggest.js

@@ -0,0 +1,56 @@
+import { resolveDocType } from "../utils/docTypes.js";
+export function emptyDocSuggestState() {
+  return { active: false, mode: "link", query: "", items: [], index: 0, rect: null, onSelect: null };
+}
+const MAX_RESULTS = 20;
+export function makeDocSearch(tree, currentDocId) {
+  return (rawQuery) => {
+    const query = rawQuery.trim();
+    const q = query.toLowerCase();
+    const entries = tree.entries.value;
+    const byId = new Map(entries.map((e) => [e.id, e]));
+    const pathOf = (parentId) => {
+      const out = [];
+      const seen = /* @__PURE__ */ new Set();
+      let pid = parentId;
+      while (pid && byId.has(pid) && !seen.has(pid)) {
+        seen.add(pid);
+        const e = byId.get(pid);
+        out.unshift(e.label || "Untitled");
+        pid = e.parentId;
+      }
+      return out.join(" / ");
+    };
+    const scored = [];
+    for (const e of entries) {
+      if (e.id === currentDocId) continue;
+      const label = (e.label || "").trim();
+      if (!label) continue;
+      const lower = label.toLowerCase();
+      let score = -1;
+      if (!q) score = 0;
+      else if (lower === q) score = 3;
+      else if (lower.startsWith(q)) score = 2;
+      else if (lower.includes(q)) score = 1;
+      if (score < 0) continue;
+      scored.push({ entry: e, score });
+    }
+    scored.sort((a, b) => b.score - a.score || a.entry.label.localeCompare(b.entry.label));
+    const items = scored.slice(0, MAX_RESULTS).map(({ entry }) => ({
+      id: entry.id,
+      label: entry.label,
+      icon: resolveDocType(entry.type).icon,
+      prefix: pathOf(entry.parentId) || void 0
+    }));
+    const hasExact = items.some((i) => i.label.toLowerCase() === q);
+    if (query && !hasExact) {
+      items.push({
+        id: "__create__",
+        label: `Create "${query}"`,
+        icon: "i-lucide-file-plus",
+        isCreate: true
+      });
+    }
+    return items;
+  };
+}

package/dist/runtime/extensions/doc-link-drop.js

@@ -14,7 +14,7 @@ export const DocLinkDrop = Extension.create({
               const de = event;
               if (!de.dataTransfer?.types.includes(DOC_DRAG_MIME)) return false;
               de.preventDefault();
-              de.dataTransfer.dropEffect = de.altKey ? "link" : "copy";
+              de.dataTransfer.dropEffect = de.metaKey || de.ctrlKey ? "link" : "copy";
               return false;
             },
             drop(view, event) {
@@ -38,7 +38,7 @@ export const DocLinkDrop = Extension.create({
               const dropPos = view.posAtCoords({ left: de.clientX, top: de.clientY })?.pos;
               if (dropPos == null) return true;
               const { schema, tr } = view.state;
-              if (de.altKey) {
+              if (de.metaKey || de.ctrlKey) {
                 const linkType = schema.nodes.docLink;
                 if (!linkType) return true;
                 const node = linkType.create({ docId: data.id });

package/dist/runtime/extensions/doc-suggest.d.ts

@@ -0,0 +1,28 @@
+import { Extension } from '@tiptap/core';
+import type { DocSuggestItem, DocSuggestPopupState } from '../composables/useDocSuggest.js';
+export interface DocSuggestOptions {
+    /** Whole-space doc search (label match + create-on-miss). */
+    search: (query: string) => DocSuggestItem[];
+    /** Commit the chosen item as a doc link or embed over `range`. */
+    onCommit: (item: DocSuggestItem, mode: 'link' | 'embed', range: {
+        from: number;
+        to: number;
+    }, query: string) => void;
+}
+export interface DocSuggestStorage {
+    popup: DocSuggestPopupState;
+}
+/**
+ * Inline `[[` (doc link) and `![[` (doc embed) suggestion popups — the
+ * mention-style counterpart for cross-document references.
+ *
+ * One `@tiptap/suggestion` plugin triggers on `[[`; the leading `!` (when
+ * present) is what distinguishes embed from link. The popup is driven through
+ * `editor.storage.docSuggest.popup` (a per-editor reactive object) which the
+ * `ADocSuggestMenu` component renders — so nested/embedded editors never share
+ * or duplicate one popup.
+ *
+ * Ported from cou-sh/app/extensions/doc-suggest.ts.
+ */
+export declare const DocSuggest: Extension<DocSuggestOptions, DocSuggestStorage>;
+export default DocSuggest;

package/dist/runtime/extensions/doc-suggest.js

@@ -0,0 +1,85 @@
+import { Extension } from "@tiptap/core";
+import { reactive } from "vue";
+import { Suggestion } from "@tiptap/suggestion";
+import { emptyDocSuggestState } from "../composables/useDocSuggest.js";
+export const DocSuggest = Extension.create({
+  name: "docSuggest",
+  addOptions() {
+    return {
+      search: () => [],
+      onCommit: () => {
+      }
+    };
+  },
+  addStorage() {
+    return { popup: reactive(emptyDocSuggestState()) };
+  },
+  addProseMirrorPlugins() {
+    const reset = () => Object.assign(this.storage.popup, emptyDocSuggestState());
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "[[",
+        startOfLine: false,
+        allowSpaces: true,
+        allowedPrefixes: null,
+        // allow triggering after `!` and mid-line
+        items: ({ query }) => this.options.search(query),
+        command: () => {
+        },
+        // selection handled via the popup / onKeyDown
+        render: () => {
+          const sync = (props) => {
+            const popup = this.storage.popup;
+            const from = props.range.from;
+            const before = props.editor.state.doc.textBetween(Math.max(0, from - 1), from);
+            const mode = before === "!" ? "embed" : "link";
+            const rect = props.clientRect?.();
+            popup.active = true;
+            popup.mode = mode;
+            popup.query = props.query;
+            popup.items = props.items;
+            popup.index = 0;
+            popup.rect = rect ? { left: rect.left, top: rect.top, bottom: rect.bottom } : null;
+            popup.onSelect = (item) => {
+              const realBefore = props.editor.state.doc.textBetween(Math.max(0, from - 1), from);
+              const realMode = realBefore === "!" ? "embed" : "link";
+              const realFrom = realMode === "embed" ? from - 1 : from;
+              this.options.onCommit(item, realMode, { from: realFrom, to: props.range.to }, props.query);
+              reset();
+            };
+          };
+          return {
+            onStart: sync,
+            onUpdate: sync,
+            onKeyDown: ({ event }) => {
+              const popup = this.storage.popup;
+              const items = popup.items;
+              if (event.key === "Escape") {
+                reset();
+                return true;
+              }
+              if (!items.length) return false;
+              if (event.key === "ArrowDown") {
+                popup.index = (popup.index + 1) % items.length;
+                return true;
+              }
+              if (event.key === "ArrowUp") {
+                popup.index = (popup.index - 1 + items.length) % items.length;
+                return true;
+              }
+              if (event.key === "Enter") {
+                const item = items[popup.index];
+                if (item) popup.onSelect?.(item);
+                return true;
+              }
+              return false;
+            },
+            onExit: () => reset()
+          };
+        }
+      })
+    ];
+  }
+});
+export default DocSuggest;

package/dist/runtime/utils/codeHighlightStyle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Atom One — Nuxt UI syntax highlighting.
+ *
+ * Keeps Atom One Dark's familiar token roles but pulls each colour from the
+ * host's Nuxt UI theme tokens (`--ui-*` / `--color-*`), so the code editor
+ * matches the surrounding UI. Every value falls back to the canonical Atom
+ * One hex when the token isn't defined.
+ *
+ * A factory (not a const) because CodeMirror is lazy-loaded — `HighlightStyle`
+ * and the lezer `tags` come from the bundle resolved in `loadCodeMirror.ts`.
+ */
+type HighlightStyleStatic = (typeof import('@codemirror/language'))['HighlightStyle'];
+type TagsObject = (typeof import('@lezer/highlight'))['tags'];
+export declare function buildAtomOneNuxtHighlight(HighlightStyleCtor: HighlightStyleStatic, t: TagsObject): import("@codemirror/language").HighlightStyle;
+export {};

package/dist/runtime/utils/codeHighlightStyle.js

@@ -0,0 +1,34 @@
+export function buildAtomOneNuxtHighlight(HighlightStyleCtor, t) {
+  return HighlightStyleCtor.define([
+    // Comments — dimmed + italic.
+    { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: "var(--ui-text-dimmed, #5c6370)", fontStyle: "italic" },
+    // Keywords / storage — brand colour (Atom One purple fallback).
+    { tag: [t.keyword, t.moduleKeyword, t.controlKeyword, t.operatorKeyword, t.definitionKeyword, t.self], color: "var(--ui-primary, #c678dd)" },
+    // Strings + escapes — green.
+    { tag: [t.string, t.special(t.string), t.docString, t.regexp, t.attributeValue], color: "var(--color-green-400, #98c379)" },
+    { tag: [t.escape, t.character], color: "var(--color-cyan-400, #56b6c2)" },
+    // Numbers / constants / booleans — orange.
+    { tag: [t.number, t.integer, t.float, t.bool, t.null, t.atom, t.unit, t.constant(t.name), t.standard(t.name)], color: "var(--color-orange-400, #d19a66)" },
+    // Functions / methods — blue.
+    { tag: [t.function(t.variableName), t.function(t.propertyName), t.labelName, t.macroName], color: "var(--color-blue-400, #61afef)" },
+    // Types / classes / namespaces — amber.
+    { tag: [t.typeName, t.className, t.namespace, t.definition(t.typeName)], color: "var(--color-amber-400, #e5c07b)" },
+    // Properties / attributes / tags — red.
+    { tag: [t.propertyName, t.attributeName, t.tagName], color: "var(--color-red-400, #e06c75)" },
+    // Plain identifiers — body text colour.
+    { tag: [t.variableName, t.definition(t.variableName)], color: "var(--ui-text-highlighted, #abb2bf)" },
+    // Operators — cyan.
+    { tag: [t.operator, t.derefOperator, t.arithmeticOperator, t.logicOperator, t.bitwiseOperator, t.compareOperator, t.updateOperator], color: "var(--color-cyan-400, #56b6c2)" },
+    // Punctuation / brackets — muted.
+    { tag: [t.punctuation, t.separator, t.bracket, t.angleBracket, t.squareBracket, t.paren, t.brace], color: "var(--ui-text-muted, #abb2bf)" },
+    // Meta / annotations — cyan.
+    { tag: [t.meta, t.documentMeta, t.annotation, t.processingInstruction], color: "var(--color-cyan-400, #56b6c2)" },
+    // Markdown / prose niceties.
+    { tag: [t.heading], fontWeight: "600", color: "var(--color-red-400, #e06c75)" },
+    { tag: [t.strong], fontWeight: "600" },
+    { tag: [t.emphasis], fontStyle: "italic" },
+    { tag: [t.strikethrough], textDecoration: "line-through" },
+    { tag: [t.link, t.url], color: "var(--ui-primary, #61afef)", textDecoration: "underline" },
+    { tag: [t.invalid], color: "var(--ui-error, #e06c75)" }
+  ]);
+}

package/dist/runtime/utils/loadCodeMirror.d.ts

@@ -28,5 +28,6 @@ export interface CodeMirrorBundle {
     langVue: typeof import('@codemirror/lang-vue');
     langJson: typeof import('@codemirror/lang-json');
     yCollab: typeof import('y-codemirror.next');
+    lezerHighlight: typeof import('@lezer/highlight');
 }
 export declare function loadCodeMirror(): Promise<CodeMirrorBundle | null>;

package/dist/runtime/utils/loadCodeMirror.js

@@ -17,7 +17,8 @@ export async function loadCodeMirror() {
         "@codemirror/lang-css",
         "@codemirror/lang-vue",
         "@codemirror/lang-json",
-        "y-codemirror.next"
+        "y-codemirror.next",
+        "@lezer/highlight"
       ];
       const [
         view,
@@ -30,7 +31,8 @@ export async function loadCodeMirror() {
         langCss,
         langVue,
         langJson,
-        yCollab
+        yCollab,
+        lezerHighlight
       ] = await Promise.all(names.map((n) => import(
         /* @vite-ignore */
         n
@@ -46,7 +48,8 @@ export async function loadCodeMirror() {
         langCss,
         langVue,
         langJson,
-        yCollab
+        yCollab,
+        lezerHighlight
       };
       return cache;
     } catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",
@@ -69,6 +69,7 @@
     "@tiptap/extension-text-align": "^3.0.0",
     "@tiptap/extension-text-style": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",
+    "@tiptap/suggestion": "^3.0.0",
     "@tiptap/vue-3": "^3.0.0",
     "@unovis/ts": "^1.6.5",
     "@unovis/vue": "^1.6.5",