@abraca/nuxt 0.1.0

package/dist/runtime/composables/useDocImport.js

@@ -0,0 +1,227 @@
+import { ref } from "vue";
+import * as Y from "yjs";
+import { populateYDocFromMarkdown, filenameToLabel, parseFrontmatter } from "../utils/markdownToYjs.js";
+const TEXT_EXTENSIONS = ["md", "mdx", "txt", "html", "htm"];
+export function useDocImport() {
+  const toast = useToast();
+  const { provider, client, isReady } = useAbracadabra();
+  const { enqueue } = useOfflineUploadQueue();
+  const externalDragActive = ref(false);
+  let externalDragCounter = 0;
+  function getTreeMap() {
+    const p = provider.value;
+    if (!p?.document) return null;
+    return p.document.getMap("doc-tree");
+  }
+  function isExternalFileDrag(e) {
+    return !!e.dataTransfer?.types.includes("Files");
+  }
+  function onDragEnter(e) {
+    if (!isExternalFileDrag(e)) return;
+    externalDragCounter++;
+    externalDragActive.value = true;
+  }
+  function onDragLeave(e) {
+    if (!isExternalFileDrag(e)) return;
+    externalDragCounter--;
+    if (externalDragCounter <= 0) {
+      externalDragCounter = 0;
+      externalDragActive.value = false;
+    }
+  }
+  function onDragOver(e) {
+    if (!isExternalFileDrag(e)) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  }
+  async function onFileDrop(e, parentId = null) {
+    externalDragActive.value = false;
+    externalDragCounter = 0;
+    if (!isReady.value || !provider.value) return;
+    e.preventDefault();
+    const entries = Array.from(e.dataTransfer?.items ?? []).map((item) => item.webkitGetAsEntry()).filter((entry) => entry !== null);
+    if (!entries.length) return;
+    let firstId = null;
+    for (const entry of entries) {
+      const id = await importEntry(entry, parentId);
+      if (firstId === null && id !== null) firstId = id;
+    }
+    if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+  }
+  function importFiles(parentId = null) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = true;
+    input.onchange = async () => {
+      if (!input.files?.length) return;
+      let firstId = null;
+      for (const file of Array.from(input.files)) {
+        const id = await importFile(file, parentId);
+        if (firstId === null) firstId = id;
+      }
+      if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+    };
+    input.click();
+  }
+  function importFolder(parentId = null) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.setAttribute("webkitdirectory", "");
+    input.onchange = async () => {
+      if (!input.files?.length) return;
+      const folderIds = /* @__PURE__ */ new Map();
+      const files = Array.from(input.files).sort(
+        (a, b) => (a.webkitRelativePath || a.name).localeCompare(b.webkitRelativePath || b.name)
+      );
+      let firstId = null;
+      for (const file of files) {
+        if (file.name.startsWith(".")) continue;
+        const relPath = file.webkitRelativePath || file.name;
+        const segments = relPath.split("/");
+        let currentParent = parentId;
+        for (let i = 0; i < segments.length - 1; i++) {
+          const folderPath = segments.slice(0, i + 1).join("/");
+          if (!folderIds.has(folderPath)) {
+            const folderId = crypto.randomUUID();
+            getTreeMap()?.set(folderId, {
+              label: filenameToLabel(segments[i]),
+              parentId: currentParent,
+              order: Date.now() + i,
+              type: "doc"
+            });
+            folderIds.set(folderPath, folderId);
+          }
+          currentParent = folderIds.get(folderPath);
+        }
+        const id = await importFile(file, currentParent);
+        if (firstId === null) firstId = id;
+      }
+      if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+    };
+    input.click();
+  }
+  async function importEntry(entry, parentId) {
+    if (entry.isFile) {
+      if (entry.name.startsWith(".")) return null;
+      const file = await new Promise(
+        (resolve, reject) => entry.file(resolve, reject)
+      );
+      return importFile(file, parentId);
+    }
+    if (entry.isDirectory) {
+      if (entry.name.startsWith(".")) return null;
+      const label = filenameToLabel(entry.name);
+      const id = crypto.randomUUID();
+      getTreeMap()?.set(id, { label, parentId, order: Date.now(), type: "doc" });
+      const children = await readDirEntries(entry);
+      children.sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+      for (const child of children) await importEntry(child, id);
+      return id;
+    }
+    return null;
+  }
+  async function importFile(file, parentId) {
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+    if (TEXT_EXTENSIONS.includes(ext)) {
+      return importTextFile(file, parentId);
+    }
+    return importBinaryFile(file, parentId);
+  }
+  async function importTextFile(file, parentId) {
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+    const text = await file.text();
+    let label = filenameToLabel(file.name);
+    let meta = {};
+    let body = text;
+    let docType = "doc";
+    if (ext === "md" || ext === "mdx" || ext === "txt") {
+      const fm = parseFrontmatter(text);
+      if (fm.title) label = fm.title;
+      if (fm.type) docType = fm.type;
+      meta = fm.meta;
+      body = fm.body;
+    }
+    const id = crypto.randomUUID();
+    getTreeMap()?.set(id, {
+      label,
+      parentId,
+      order: Date.now(),
+      type: docType,
+      ...Object.keys(meta).length ? { meta } : {}
+    });
+    const childProv = await provider.value.loadChild(id);
+    const fragment = childProv.document.getXmlFragment("default");
+    if (ext === "html" || ext === "htm") {
+      const stripped = text.replace(/<[^>]+>/g, "");
+      populateYDocFromMarkdown(fragment, stripped, label);
+    } else {
+      populateYDocFromMarkdown(fragment, body, label);
+    }
+    return id;
+  }
+  async function importBinaryFile(file, parentId) {
+    const id = crypto.randomUUID();
+    const label = filenameToLabel(file.name);
+    const mimeType = file.type || "application/octet-stream";
+    getTreeMap()?.set(id, { label, parentId, order: Date.now(), type: "doc" });
+    let uploadId;
+    let uploadDocId;
+    try {
+      if (!client.value) throw new Error("offline");
+      const meta = await client.value.upload(id, file);
+      uploadId = meta.id;
+      uploadDocId = meta.doc_id;
+    } catch {
+      const meta = await enqueue(id, file);
+      uploadId = meta.id;
+      uploadDocId = meta.doc_id;
+      toast.add({
+        title: "Upload queued",
+        description: `"${file.name}" will upload when reconnected.`,
+        color: "warning",
+        icon: "i-lucide-cloud-off"
+      });
+    }
+    const childProv = await provider.value.loadChild(id);
+    const fragment = childProv.document.getXmlFragment("default");
+    childProv.document.transact(() => {
+      const el = new Y.XmlElement("fileBlock");
+      el.setAttribute("uploadId", uploadId);
+      el.setAttribute("docId", uploadDocId);
+      el.setAttribute("filename", file.name);
+      el.setAttribute("mimeType", mimeType);
+      fragment.insert(0, [el]);
+    });
+    return id;
+  }
+  function readDirEntries(dir) {
+    return new Promise((resolve, reject) => {
+      const reader = dir.createReader();
+      const all = [];
+      function next() {
+        reader.readEntries((batch) => {
+          if (!batch.length) {
+            resolve(all);
+            return;
+          }
+          all.push(...batch);
+          next();
+        }, reject);
+      }
+      next();
+    });
+  }
+  return {
+    externalDragActive,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDrop,
+    importFiles,
+    importFolder,
+    importFile
+  };
+}

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

@@ -0,0 +1,29 @@
+interface JumpTarget {
+    docId: string;
+    from: number;
+    to: number;
+}
+export declare const useDocJump: () => {
+    hoverHighlight: import("vue").Ref<{
+        docId: string;
+        from: number;
+        to: number;
+    } | null, JumpTarget | {
+        docId: string;
+        from: number;
+        to: number;
+    } | null>;
+    pendingJump: import("vue").Ref<{
+        docId: string;
+        from: number;
+        to: number;
+    } | null, JumpTarget | {
+        docId: string;
+        from: number;
+        to: number;
+    } | null>;
+    hoverStart: (docId: string, from: number, to: number) => void;
+    hoverEnd: () => void;
+    jumpTo: (docId: string, from: number, to: number) => void;
+};
+export {};

package/dist/runtime/composables/useDocJump.js

@@ -0,0 +1,17 @@
+import { ref } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+const _useDocJump = () => {
+  const hoverHighlight = ref(null);
+  const pendingJump = ref(null);
+  function hoverStart(docId, from, to) {
+    hoverHighlight.value = { docId, from, to };
+  }
+  function hoverEnd() {
+    hoverHighlight.value = null;
+  }
+  function jumpTo(docId, from, to) {
+    pendingJump.value = { docId, from, to };
+  }
+  return { hoverHighlight, pendingJump, hoverStart, hoverEnd, jumpTo };
+};
+export const useDocJump = createSharedComposable(_useDocJump);

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

@@ -0,0 +1,20 @@
+import { type MaybeRef } from 'vue';
+/**
+ * RBAC composable — maps a role string to permission flags.
+ *
+ * Usage:
+ *   const { canWrite, canDelete, meetsRole } = useDocumentPermissions(role)
+ *   if (canWrite.value) { ... }
+ *   if (meetsRole('editor')) { ... }
+ */
+export declare function useDocumentPermissions(role: MaybeRef<string | undefined | null>): {
+    canRead: import("vue").ComputedRef<boolean>;
+    canWrite: import("vue").ComputedRef<boolean>;
+    canCreate: import("vue").ComputedRef<boolean>;
+    canDelete: import("vue").ComputedRef<boolean>;
+    canUpload: import("vue").ComputedRef<boolean>;
+    canManage: import("vue").ComputedRef<boolean>;
+    isOwner: import("vue").ComputedRef<boolean>;
+    meetsRole: (required: string | string[]) => boolean;
+    level: import("vue").ComputedRef<number>;
+};

package/dist/runtime/composables/useDocumentPermissions.js

@@ -0,0 +1,33 @@
+import { computed, toValue } from "vue";
+const ROLE_HIERARCHY = {
+  owner: 5,
+  admin: 4,
+  member: 3,
+  editor: 2,
+  viewer: 1
+};
+export function useDocumentPermissions(role) {
+  const level = computed(() => ROLE_HIERARCHY[toValue(role) ?? ""] ?? 0);
+  const canRead = computed(() => level.value >= 1);
+  const canWrite = computed(() => level.value >= 2);
+  const canCreate = computed(() => level.value >= 2);
+  const canDelete = computed(() => level.value >= 3);
+  const canUpload = computed(() => level.value >= 2);
+  const canManage = computed(() => level.value >= 4);
+  const isOwner = computed(() => level.value >= 5);
+  function meetsRole(required) {
+    const requirements = Array.isArray(required) ? required : [required];
+    return requirements.some((r) => level.value >= (ROLE_HIERARCHY[r] ?? 0));
+  }
+  return {
+    canRead,
+    canWrite,
+    canCreate,
+    canDelete,
+    canUpload,
+    canManage,
+    isOwner,
+    meetsRole,
+    level
+  };
+}

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

@@ -0,0 +1,45 @@
+/**
+ * TipTap collaboration editor composable.
+ *
+ * Sets up Collaboration + CollaborationCaret extensions for a child Y.Doc,
+ * merges in all plugin-contributed extensions, and manages awareness user state.
+ *
+ * This composable is used internally by <AbracadabraEditor> but is also
+ * exported for app authors who want to use <UEditor> directly:
+ *
+ *   const { extensions } = useEditor({ childProvider, docId })
+ *   <UEditor :extensions="extensions" v-model="content" />
+ *
+ * IMPORTANT: provider and doc references are shallowRef — never deep-watch them.
+ *
+ * Ported from cou-sh/app/composables/useEditorCollaboration.ts.
+ */
+import { type Ref, type ShallowRef } from 'vue';
+import type { Extensions } from '@tiptap/core';
+import type { CollaborationUser } from '../types.js';
+export { type CollaborationUser } from '../types.js';
+export interface UseEditorOptions {
+    /** Child Y.Doc provider (shallowRef). Loaded via provider.value.loadChild(docId). */
+    childProvider: ShallowRef<any | null>;
+    /** Document ID — used in editor plugin context objects. */
+    docId: string;
+    /** Extra TipTap extensions beyond what the plugin registry contributes. */
+    extraExtensions?: Extensions;
+    /** Whether the editor is editable. Default: true. */
+    editable?: Ref<boolean> | boolean;
+}
+export declare function useEditor(options: UseEditorOptions): {
+    extensions: ShallowRef<Extensions, Extensions>;
+    connectedUsers: Ref<{
+        name: string;
+        color: string;
+        publicKey?: string | undefined;
+        docId?: string | undefined;
+    }[], CollaborationUser[] | {
+        name: string;
+        color: string;
+        publicKey?: string | undefined;
+        docId?: string | undefined;
+    }[]>;
+    ready: Ref<boolean, boolean>;
+};

package/dist/runtime/composables/useEditor.js

@@ -0,0 +1,121 @@
+import { ref, shallowRef, watch, onUnmounted } from "vue";
+import { XmlElement } from "yjs";
+export function useEditor(options) {
+  const { childProvider, extraExtensions = [] } = options;
+  const { userName, userColor, publicKeyB64, registry } = useNuxtApp().$abracadabra;
+  const connectedUsers = ref([]);
+  const extensions = shallowRef([]);
+  const ready = ref(false);
+  let cleanup = null;
+  watch(childProvider, async (prov) => {
+    cleanup?.();
+    cleanup = null;
+    if (!prov) {
+      ready.value = false;
+      extensions.value = [];
+      connectedUsers.value = [];
+      return;
+    }
+    const [
+      { default: Collaboration },
+      { default: CollaborationCaret }
+    ] = await Promise.all([
+      import("@tiptap/extension-collaboration"),
+      import("@tiptap/extension-collaboration-caret")
+    ]);
+    const user = { name: userName.value, color: userColor.value, publicKey: publicKeyB64.value };
+    prov.awareness?.setLocalStateField("user", user);
+    await registry.waitForExtensions();
+    const pluginExtensions = registry.getAllExtensions();
+    extensions.value = [
+      ...pluginExtensions,
+      Collaboration.configure({ document: prov.document }),
+      CollaborationCaret.configure({
+        provider: prov,
+        user,
+        selectionRender: (u) => {
+          const color = u.color || "#999";
+          const selectionColor = color.startsWith("hsl") ? color.replace("hsl", "hsla").replace(")", ", 0.4)") : `${color}66`;
+          return {
+            class: "collaboration-carets__selection",
+            style: `--collaboration-selection-color: ${selectionColor}`
+          };
+        }
+      }),
+      ...extraExtensions
+    ];
+    const ydoc = prov.document;
+    const fragment = ydoc?.getXmlFragment?.("default");
+    function dedupeByName(nodeName) {
+      if (!fragment) return;
+      const children = fragment.toArray();
+      const indices = [];
+      children.forEach((child, idx) => {
+        if (child.nodeName === nodeName) indices.push(idx);
+      });
+      if (indices.length <= 1) return;
+      const toRemove = /* @__PURE__ */ new Set();
+      for (let i = 1; i < indices.length; i++) {
+        const hi = indices[i];
+        toRemove.add(hi);
+        const afterIdx = hi + 1;
+        const beforeIdx = hi - 1;
+        if (afterIdx < children.length && !toRemove.has(afterIdx) && children[afterIdx]?.nodeName === "paragraph" && children[afterIdx].length === 0) {
+          toRemove.add(afterIdx);
+        } else if (beforeIdx >= 0 && !toRemove.has(beforeIdx) && children[beforeIdx]?.nodeName === "paragraph" && children[beforeIdx].length === 0) {
+          toRemove.add(beforeIdx);
+        }
+      }
+      const sortedDesc = [...toRemove].sort((a, b) => b - a);
+      ydoc.transact(() => {
+        for (const idx of sortedDesc) fragment.delete(idx, 1);
+      });
+    }
+    const dedupeHeaders = () => dedupeByName("documentHeader");
+    const dedupeDocumentMeta = () => dedupeByName("documentMeta");
+    function ensureDocumentMeta() {
+      if (!fragment) return;
+      const children = fragment.toArray();
+      if (children.some((c) => c.nodeName === "documentMeta")) return;
+      const headerIdx = children.findIndex((c) => c.nodeName === "documentHeader");
+      const insertIdx = headerIdx >= 0 ? headerIdx + 1 : 0;
+      const metaEl = new XmlElement("documentMeta");
+      ydoc.transact(() => {
+        fragment.insert(insertIdx, [metaEl]);
+      });
+    }
+    if (fragment) {
+      fragment.observe(dedupeHeaders);
+      fragment.observe(dedupeDocumentMeta);
+      dedupeHeaders();
+      dedupeDocumentMeta();
+      ensureDocumentMeta();
+    }
+    ready.value = true;
+    const updateUsers = () => {
+      const states = prov.awareness?.getStates() ?? /* @__PURE__ */ new Map();
+      const users = [];
+      states.forEach((state) => {
+        if (state.user && typeof state.user === "object") {
+          const u = state.user;
+          users.push({ name: u.name || "", color: u.color || "#999", publicKey: u.publicKey || void 0 });
+        }
+      });
+      connectedUsers.value = users;
+    };
+    prov.awareness?.on("change", updateUsers);
+    updateUsers();
+    cleanup = () => {
+      prov.awareness?.off("change", updateUsers);
+      if (fragment) {
+        fragment.unobserve(dedupeHeaders);
+        fragment.unobserve(dedupeDocumentMeta);
+      }
+    };
+  }, { immediate: true });
+  onUnmounted(() => cleanup?.());
+  watch([userName, userColor, publicKeyB64], ([name, color, publicKey]) => {
+    childProvider.value?.awareness?.setLocalStateField("user", { name, color, publicKey });
+  });
+  return { extensions, connectedUsers, ready };
+}

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

@@ -0,0 +1,26 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { Editor, JSONContent } from '@tiptap/vue-3';
+import type { DragHandlePluginCtx } from '../types.js';
+export declare function useEditorDragHandle(pageConfig?: {
+    pageTypes?: Array<{
+        key: string;
+        label: string;
+        icon: string;
+    }>;
+    onChangePageType?: (typeKey: string) => void;
+    onInsertDocLink?: () => void;
+}): {
+    selectedNode: import("vue").Ref<{
+        node: JSONContent | null;
+        pos: number;
+    } | undefined, {
+        node: JSONContent | null;
+        pos: number;
+    } | undefined>;
+    getItems: (editor: Editor) => DropdownMenuItem[][];
+    getMergedItems: (editor: Editor, ctx: DragHandlePluginCtx) => DropdownMenuItem[][];
+    onNodeChange: (event: {
+        node: JSONContent | null;
+        pos: number;
+    }) => void;
+};