@abraca/nuxt 0.3.0 → 1.5.0

package/dist/runtime/extensions/field.js

@@ -0,0 +1,53 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import FieldView from "./views/FieldView.vue";
+import FieldGroupView from "./views/FieldGroupView.vue";
+export const Field = Node.create({
+  name: "field",
+  content: "block+",
+  addAttributes() {
+    return {
+      name: { default: "" },
+      type: { default: "string" },
+      required: { default: false }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-field]",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getAttrs: (el) => ({
+          name: el.getAttribute("data-name"),
+          type: el.getAttribute("data-type"),
+          required: el.getAttribute("data-required") === "true"
+        })
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({
+      "data-field": "",
+      "data-name": HTMLAttributes.name,
+      "data-type": HTMLAttributes.type,
+      "data-required": HTMLAttributes.required
+    }), 0];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(FieldView);
+  }
+});
+export const FieldGroup = Node.create({
+  name: "fieldGroup",
+  group: "block",
+  content: "field+",
+  parseHTML() {
+    return [{ tag: "div[data-field-group]" }];
+  },
+  renderHTML() {
+    return ["div", { "data-field-group": "" }, 0];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(FieldGroupView);
+  }
+});

package/dist/runtime/extensions/mention-drop.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@tiptap/core';
+export declare const MENTION_DRAG_MIME = "application/x-abracadabra-mention";
+export interface MentionDragPayload {
+    id: string;
+    label: string;
+}
+export declare const MentionDrop: Extension<any, any>;
+export default MentionDrop;

package/dist/runtime/extensions/mention-drop.js

@@ -0,0 +1,47 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+export const MENTION_DRAG_MIME = "application/x-abracadabra-mention";
+export const MentionDrop = Extension.create({
+  name: "mentionDrop",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("mentionDrop"),
+        props: {
+          handleDOMEvents: {
+            dragover(_view, event) {
+              const de = event;
+              if (!de.dataTransfer?.types.includes(MENTION_DRAG_MIME)) return false;
+              de.preventDefault();
+              de.dataTransfer.dropEffect = "copy";
+              return false;
+            },
+            drop(view, event) {
+              const de = event;
+              const raw = de.dataTransfer?.getData(MENTION_DRAG_MIME);
+              if (!raw) return false;
+              let data;
+              try {
+                data = JSON.parse(raw);
+              } catch {
+                return false;
+              }
+              de.preventDefault();
+              const dropPos = view.posAtCoords({ left: de.clientX, top: de.clientY })?.pos;
+              if (dropPos == null) return true;
+              const { schema, tr } = view.state;
+              const mentionType = schema.nodes.mention;
+              if (!mentionType) return true;
+              const mentionNode = mentionType.create({ id: data.id, label: data.label });
+              tr.insert(dropPos, mentionNode);
+              tr.insertText(" ", dropPos + mentionNode.nodeSize);
+              view.dispatch(tr);
+              return true;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+export default MentionDrop;

package/dist/runtime/extensions/meta-field.js

@@ -91,6 +91,7 @@ export function schemaFieldToAttrs(field) {
   if (t === "colorPicker") return { fieldType: "colorPicker", fieldLabel: field.label ?? "", userDefined: false, metaKey: String(field.key) };
   if (t === "location") return { fieldType: "location", fieldLabel: field.label ?? "", userDefined: false, latKey: String(field.latKey), lngKey: String(field.lngKey) };
   if (t === "icon") return { fieldType: "icon", fieldLabel: field.label ?? "", userDefined: false, metaKey: String(field.key), iconOptions: JSON.stringify(field.options ?? []) };
+  if (t === "members") return { fieldType: "members", fieldLabel: field.label ?? "", userDefined: false, metaKey: String(field.key) };
   return { fieldType: "colorPreset", fieldLabel: "" };
 }
 export function userFieldToAttrs(f) {
@@ -106,5 +107,6 @@ export function userFieldToAttrs(f) {
   if (["select", "multiselect", "tags"].includes(f.type)) return { ...base, metaKey: f.key ?? "", options: JSON.stringify(f.options ?? []) };
   if (f.type === "location") return { ...base, latKey: f.latKey ?? "", lngKey: f.lngKey ?? "" };
   if (f.type === "icon") return { ...base, metaKey: f.key ?? "", iconOptions: JSON.stringify(f.options ?? []) };
+  if (f.type === "members") return { ...base, metaKey: f.key ?? "" };
   return base;
 }

package/dist/runtime/extensions/selection-drag.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from '@tiptap/core';
+export interface SelectionDragOptions {
+    onDragStart: (html: string, deleteSelection: () => void) => void;
+    onDragEnd: () => void;
+}
+/**
+ * ProseMirror normally prevents native text-selection drags. This plugin enables
+ * them by temporarily setting `draggable="true"` on the editor element when the
+ * user mouses down on already-selected text. The browser then initiates an HTML5
+ * drag, which we intercept to populate tiptapDragState for the DocumentTree.
+ */
+export declare const SelectionDrag: Extension<SelectionDragOptions, any>;
+export default SelectionDrag;

package/dist/runtime/extensions/selection-drag.js

@@ -0,0 +1,126 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey, NodeSelection, TextSelection } from "@tiptap/pm/state";
+import { DOMSerializer } from "@tiptap/pm/model";
+export const SelectionDrag = Extension.create({
+  name: "selectionDrag",
+  addOptions() {
+    return {
+      onDragStart: () => {
+      },
+      onDragEnd: () => {
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    let active = false;
+    let primed = false;
+    let boundView = null;
+    return [
+      new Plugin({
+        key: new PluginKey("selectionDrag"),
+        props: {
+          handleDOMEvents: {
+            // @ts-expect-error ProseMirror handler type mismatch
+            dragstart(view, event) {
+              if (!primed) return false;
+              primed = false;
+              view.dom.removeAttribute("draggable");
+              const { state } = view;
+              const { selection } = state;
+              if (selection.empty) return false;
+              const { from, to } = selection;
+              let html = "";
+              try {
+                const slice = state.doc.slice(from, to);
+                const serializer = DOMSerializer.fromSchema(state.schema);
+                const fragment = serializer.serializeFragment(slice.content);
+                const tmp = document.createElement("div");
+                tmp.appendChild(fragment);
+                html = tmp.innerHTML;
+              } catch {
+                return false;
+              }
+              if (!html) return false;
+              const de = event;
+              if (de.dataTransfer) {
+                de.dataTransfer.effectAllowed = "copyMove";
+                de.dataTransfer.setData("text/html", html);
+                de.dataTransfer.setData("text/plain", html.replace(/<[^>]*>/g, ""));
+              }
+              const capturedFrom = from;
+              const capturedTo = to;
+              const deleteSelection = () => {
+                if (!view.dom.isConnected) return;
+                try {
+                  const { tr } = view.state;
+                  tr.delete(capturedFrom, capturedTo);
+                  view.dispatch(tr);
+                } catch {
+                }
+              };
+              active = true;
+              options.onDragStart(html, deleteSelection);
+              return false;
+            },
+            // @ts-expect-error ProseMirror handler type mismatch
+            dragend(view, _event) {
+              view.dom.removeAttribute("draggable");
+              primed = false;
+              if (!active) return false;
+              active = false;
+              options.onDragEnd();
+              return false;
+            }
+          }
+        },
+        // @ts-expect-error PluginView return type mismatch
+        view(editorView) {
+          boundView = editorView;
+          const onMouseDown = (e) => {
+            if (e.button !== 0) return;
+            if (e.detail >= 2) return;
+            const { state } = editorView;
+            const { selection } = state;
+            if (selection instanceof NodeSelection) return;
+            if (selection.empty) return;
+            if (!(selection instanceof TextSelection)) return;
+            const pos = editorView.posAtCoords({ left: e.clientX, top: e.clientY });
+            if (!pos) return;
+            if (pos.pos < selection.from || pos.pos > selection.to) return;
+            editorView.dom.setAttribute("draggable", "true");
+            primed = true;
+            e.stopPropagation();
+            const reset = () => {
+              document.removeEventListener("mouseup", reset, true);
+              if (primed) {
+                primed = false;
+                editorView.dom.removeAttribute("draggable");
+                const clickPos = editorView.posAtCoords({ left: e.clientX, top: e.clientY });
+                if (clickPos) {
+                  const tr = editorView.state.tr.setSelection(
+                    TextSelection.create(editorView.state.doc, clickPos.pos)
+                  );
+                  editorView.dispatch(tr);
+                  editorView.focus();
+                }
+              }
+            };
+            document.addEventListener("mouseup", reset, true);
+          };
+          editorView.dom.addEventListener("mousedown", onMouseDown, true);
+          return {
+            destroy() {
+              if (boundView) {
+                boundView.dom.removeEventListener("mousedown", onMouseDown, true);
+                boundView.dom.removeAttribute("draggable");
+                boundView = null;
+              }
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+export default SelectionDrag;

package/dist/runtime/extensions/views/AccordionItemView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref, computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/BadgeView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/CardView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/CodeCollapseView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/CodeGroupView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref, computed, watch } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/CodePreviewView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/CodePreviewView.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref } from "vue";
+defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const showCode = ref(true);
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
+    <div
+      class="flex justify-center border border-(--ui-border-muted) relative p-4 rounded-md"
+      :class="showCode ? 'border-b-0 rounded-b-none' : ''"
+      contenteditable="false"
+    >
+      <span class="text-sm text-(--ui-text-muted)">Preview</span>
+      <div class="absolute top-2 right-2">
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :label="showCode ? 'Hide code' : 'Show code'"
+          @click="showCode = !showCode"
+        />
+      </div>
+    </div>
+    <div
+      v-show="showCode"
+      class="[&>*]:my-0 [&_pre]:rounded-t-none"
+    >
+      <NodeViewContent class="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/CodePreviewView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/CodeTreeView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/CodeTreeView.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed, ref } from "vue";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const files = computed(() => {
+  try {
+    return JSON.parse(props.node.attrs.files || "[]");
+  } catch {
+    return [];
+  }
+});
+const selected = ref("");
+function isFolder(entry) {
+  return Array.isArray(entry.children);
+}
+function getIcon(entry) {
+  if (isFolder(entry)) return "i-lucide-folder";
+  const ext = entry.name.split(".").pop();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "i-lucide-file-code";
+    case "js":
+    case "jsx":
+      return "i-lucide-file-code";
+    case "vue":
+      return "i-lucide-file-code";
+    case "json":
+      return "i-lucide-file-json";
+    case "md":
+      return "i-lucide-file-text";
+    case "css":
+    case "scss":
+      return "i-lucide-file-code";
+    default:
+      return "i-lucide-file";
+  }
+}
+function flatEntries(entries, depth = 0) {
+  const result = [];
+  for (const entry of entries) {
+    result.push({ entry, depth });
+    if (isFolder(entry) && entry.children) {
+      result.push(...flatEntries(entry.children, depth + 1));
+    }
+  }
+  return result;
+}
+const flatFiles = computed(() => flatEntries(files.value));
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-(--ui-border-muted) rounded-md"
+    contenteditable="false"
+  >
+    <div class="isolate relative p-2 border-b lg:border-b-0 lg:border-e border-(--ui-border-muted) overflow-y-auto">
+      <button
+        v-for="{ entry, depth } in flatFiles"
+        :key="entry.name + depth"
+        class="relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm rounded-md text-left transition-colors"
+        :class="selected === entry.name ? 'text-(--ui-text-highlighted) bg-(--ui-bg-elevated)' : 'text-(--ui-text) hover:text-(--ui-text-highlighted) hover:bg-(--ui-bg-elevated)/50'"
+        :style="{ paddingLeft: `${depth * 18 + 10}px` }"
+        @click="selected = entry.name"
+      >
+        <UIcon
+          :name="getIcon(entry)"
+          class="size-4 shrink-0"
+        />
+        <span class="truncate">{{ entry.name }}</span>
+      </button>
+    </div>
+    <div class="lg:col-span-2 overflow-hidden flex flex-col" />
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/CodeTreeView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/CollapsibleView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref, computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/DocEmbedView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;