@witchcraft/editor 0.0.5 → 0.0.7

package/dist/runtime/pm/utils/internal/recurse.js

@@ -0,0 +1,39 @@
+export function recurse(node, deep = true, props = [], depth = 0) {
+  const obj = {};
+  const text = [];
+  text.push(`=${node?.type?.name ?? "any"} ${node.firstChild?.textContent ?? ""}`);
+  if (node.textContent !== "" && node.isText) {
+    text.push(`"${node.textContent}"`);
+  }
+  if (props.includes("size")) {
+    text.push(node.nodeSize);
+  }
+  if (props.includes("is")) {
+    obj.isBlock = node.isBlock;
+    obj.isInline = node.isInline;
+    obj.isLeaf = node.isLeaf;
+    obj.isText = node.isText;
+    obj.isTextblock = node.isTextblock;
+    obj.isAtom = node.isAtom;
+  }
+  if (props.includes("attrs")) {
+    obj.attrs = node.attrs;
+  }
+  const content = node.content.content;
+  if (content && content.length > 0) {
+    if (deep) {
+      obj.children = `
+${Object.values(content).map((nodeInner) => recurse(nodeInner, deep, props, depth + 1)).join("\n")}`;
+    } else {
+      obj.children = `[${content.length}]`;
+    }
+  }
+  const indent = "	".repeat(depth);
+  const top = text.length > 0 ? indent + text.join(`
+${indent}`) : "";
+  const bottomContent = Object.entries(obj).map(([key, val]) => key === "children" ? `${indent}${val}` : key === "attrs" ? `${val ? indent + (Object.keys(val).length > 0 ? JSON.stringify(val) : "") : ""}` : `${indent}${key}: ${val}`);
+  const bottom = bottomContent.length > 0 ? `
+${bottomContent.join("\n")}` : "";
+  const res = top + bottom;
+  return res;
+}

package/dist/runtime/pm/utils/internal/stripBlockId.d.ts

@@ -0,0 +1,2 @@
+/** For testing only, see testSchema.ts. */
+export declare function stripBlockId(obj: any): string;

package/dist/runtime/pm/utils/internal/stripBlockId.js

@@ -0,0 +1,9 @@
+import { Node } from "@tiptap/pm/model";
+export function stripBlockId(obj) {
+  if (obj instanceof Node && "attrs" in obj) {
+    delete obj.attrs.blockId;
+  } else {
+    delete obj.blockId;
+  }
+  return obj;
+}

package/dist/runtime/pm/utils/mapSelection.d.ts

@@ -0,0 +1,8 @@
+import type { Selection, Transaction } from "@tiptap/pm/state";
+/**
+ * Mimicks mapping a selection for the "block selections" returned by {@link splitIntoChunks}.
+ */
+export declare const mapSelection: (tr: Transaction, selection: Pick<Selection, "$from" | "$to">) => Pick<Selection, "$from" | "$to"> & {
+    from: number;
+    to: number;
+};

package/dist/runtime/pm/utils/mapSelection.js

@@ -0,0 +1,12 @@
+export const mapSelection = (tr, selection) => {
+  const from = tr.mapping.map(selection.$from.pos);
+  const $from = tr.doc.resolve(from);
+  const to = tr.mapping.map(selection.$to.pos);
+  const $to = tr.doc.resolve(to);
+  return {
+    $from,
+    $to,
+    from,
+    to
+  };
+};

package/dist/runtime/pm/utils/nodesBetween.d.ts

@@ -0,0 +1,21 @@
+import type { Node } from "@tiptap/pm/model";
+import type { Selection } from "@tiptap/pm/state";
+import type { NodesBetweenFilter } from "../../types/index.js";
+/**
+ * A more intuitive nodesBetween wrapper. Goes only through the nodes inside or touching the selection.
+ *
+ * Does not go through wrapping parents (except the first by default) that start/end before/after the given positions like nodesBetween.
+ *
+ * This can be changed by using the `shift` option, or `fromShift` and `toShift`.
+ *
+ * For example, if the cursor is in the middle of some text, using `{shift: 0}`, you would only get the text node.
+ *
+ * - Te|xt
+ *
+ * To get whatever it's parent item is, we need `{shift: -1}` (the default, since this is the most common use case).
+ */
+export declare function nodesBetween(doc: Node, { $from, $to }: Pick<Selection, "$from" | "$to">, filter: NodesBetweenFilter, { shift, fromShift, toShift }?: {
+    shift?: number;
+    fromShift?: number;
+    toShift?: number;
+}): void;

package/dist/runtime/pm/utils/nodesBetween.js

@@ -0,0 +1,21 @@
+export function nodesBetween(doc, { $from, $to }, filter, {
+  shift = -1,
+  fromShift,
+  toShift
+} = {}) {
+  let shiftFrom = fromShift;
+  let shiftTo = toShift;
+  if (shift) {
+    shiftFrom = shift;
+    shiftTo = shift;
+  }
+  doc.nodesBetween($from.start(), $to.end(), (node, pos, ...args) => {
+    const isAfterStart = pos >= $from.start(shiftFrom) - 1;
+    const isBeforeEnd = pos <= $to.end(shiftTo) + 1;
+    if (isAfterStart && isBeforeEnd) {
+      const res = filter(node, pos, ...args);
+      return res;
+    }
+    return void 0;
+  });
+}

package/dist/runtime/pm/utils/pointToPmPoint.d.ts

@@ -0,0 +1,2 @@
+import type { PmPoint, Point } from "../../types/index.js";
+export declare function pointToPmPoint(point: Point): PmPoint;

package/dist/runtime/pm/utils/pointToPmPoint.js

@@ -0,0 +1,3 @@
+export function pointToPmPoint(point) {
+  return { left: point.x, top: point.y };
+}

package/dist/runtime/pm/utils/splitIntoChunks.d.ts

@@ -0,0 +1,32 @@
+import { type Mutable } from "@alanscodelog/utils";
+import type { Node, NodeType } from "@tiptap/pm/model";
+import type { Selection } from "@tiptap/pm/state";
+/**
+ * When we have a selection like so:
+ * ```
+ * - A1
+ * 	- B|1
+ * - A|2
+ * 	- B2
+ * ```
+ *
+ * We can't lift/sink the range because they're in different depths.
+ *
+ * This will split a selection into a list of {$from, $to} that can be lifted/sunk, e.g. B1 and A2 (which includes it's children).
+ *
+ * If $from.depth > $to.depth like this, nothing is split (unless splitChildren is true) since sinking A1 implies sinking all it's children. The selection returned is adjusted though so $pos.node() is of the wanted node type.
+ *
+ * ```
+ * - A|1
+ * 	- B|1
+ * - A2
+ * ```
+ * `splitChildren` should be true when lifting a list, if we want the above to lift B1 if the selection touches it.
+ *
+ * The function returns a selection like object with just $from and $to. This is because we need something like a BlockSelection really (multiple node selection), but NodeSelection does not support this.
+ *
+ * {@link mapSelection} can be used to map the returned selection. This is necessary if changing the chunks as you go through them.
+ */
+export declare const splitIntoChunks: (doc: Node, itemType: NodeType, selection: Pick<Selection, "$from" | "$to">, { splitChildren }?: {
+    splitChildren?: boolean;
+}) => Mutable<Pick<Selection, "$from" | "$to">>[];

package/dist/runtime/pm/utils/splitIntoChunks.js

@@ -0,0 +1,31 @@
+import { last } from "@alanscodelog/utils";
+import { nodesBetween } from "./nodesBetween.js";
+export const splitIntoChunks = (doc, itemType, selection, {
+  splitChildren = false
+} = {}) => {
+  const { $from, $to } = selection;
+  const $newFrom = doc.resolve($from.before());
+  const $lastTo = doc.resolve($to.after());
+  const pairs = [{
+    $from: $newFrom,
+    $to: $lastTo
+  }];
+  let searchedDepth = 0;
+  let $last = $from;
+  nodesBetween(doc, { $from, $to }, (node, pos) => {
+    if (node?.type === itemType) {
+      const $pos = doc.resolve(pos + 1);
+      if ($pos.depth < $newFrom.depth - searchedDepth * 2) {
+        last(pairs).$to = $last;
+        pairs.push({ $from: $pos, $to: $lastTo });
+        searchedDepth++;
+      } else if (splitChildren && $pos.depth !== $newFrom.depth) {
+        pairs.push({ $from: $pos, $to: $lastTo });
+      }
+      $last = $pos;
+      return splitChildren;
+    }
+    return true;
+  });
+  return pairs;
+};

package/dist/runtime/testDocuments.d.ts

@@ -0,0 +1,53 @@
+export declare const someDoc: {
+    title: string;
+    content: string;
+    embedder: string;
+    subEmbedders: string[];
+};
+export declare const someDoc2: {
+    title: string;
+    content: string;
+    embedder: string;
+    subEmbedders: string[];
+};
+export declare const someDoc3: {
+    title: string;
+    content: string;
+    embedder: string;
+    subEmbedders: string[];
+};
+export declare const contentSimpleTable: string;
+export declare const contentParagraphs: string;
+export declare const contentMarks: string;
+export declare const contentBlockTypes: string;
+export declare const contentAllNodeTypes: string;
+export declare const root: {
+    title: string;
+    embedder: string;
+    content: string;
+};
+export declare const testDocuments: {
+    root: {
+        title: string;
+        embedder: string;
+        content: string;
+    };
+    someDoc: {
+        title: string;
+        content: string;
+        embedder: string;
+        subEmbedders: string[];
+    };
+    someDoc2: {
+        title: string;
+        content: string;
+        embedder: string;
+        subEmbedders: string[];
+    };
+    someDoc3: {
+        title: string;
+        content: string;
+        embedder: string;
+        subEmbedders: string[];
+    };
+};

package/dist/runtime/testDocuments.js

@@ -0,0 +1,122 @@
+import { crop as html } from "@alanscodelog/utils/crop";
+export const someDoc = {
+  title: "Some Doc",
+  content: html`
+		<li blockid="some-sub-id"><p>A</p></li>
+		<li blockid="some-sub-id2"><p>B</p></li>
+	`,
+  embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc"></div></li>
+	`,
+  subEmbedders: [
+    html` <li><div type="embeddedDoc" embeddocid="someDoc" embedblockid="some-sub-id"></div></li> `,
+    html` <li><div type="embeddedDoc" embeddocid="someDoc" embedblockid="some-sub-id2"></div></li> `
+  ]
+};
+export const someDoc2 = {
+  title: "Some Doc 2",
+  content: html`
+		<li blockid="some-sub-id"><p>C</p></li>
+	`,
+  embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc2"></div></li>
+	`,
+  subEmbedders: [html`
+		<li><div type="embeddedDoc" embeddocid="someDoc2" embedblockid="some-sub-id"></div></li>
+	`]
+};
+export const someDoc3 = {
+  title: "Some Doc 3",
+  content: html`
+		<li blockid="some-sub-id"><p>D</p></li>
+		<li blockid="some-sub-id2"><p>E</p></li>
+	`,
+  embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc3"></div></li>
+	`,
+  subEmbedders: [
+    html` <li><div type="embeddedDoc" embeddocid="someDoc3" embedblockid="some-sub-id"></div></li> `,
+    html` <li><div type="embeddedDoc" embeddocid="someDoc3" embedblockid="some-sub-id2"></div></li> `
+  ]
+};
+export const contentSimpleTable = html`
+<li>
+	<table>
+		<thead>
+			<th>a</th>
+			<th>b</th>
+		</thead>
+		<tbody>
+		<tr>
+			<td>a2</td>
+			<td>b2</td>
+		</tr>
+		<tr>
+			<td>a3</td>
+			<td>b3</td>
+		</tr>
+		</tbody>
+	</table>
+</li>
+`;
+export const contentParagraphs = html`
+<li><p>Paragraph</p></li>
+<li><p>Paragraph with<br/> line break.</p></li>
+`;
+export const contentMarks = html`
+<li><p><mark data-color="yellow">Yellow</mark></p></li>
+<li><p><mark data-color="orange">Orange</mark></p></li>
+<li><p><mark data-color="red">Red</mark></p></li>
+<li><p><mark data-color="green">Green</mark></p></li>
+<li><p><mark data-color="blue">Blue</mark></p></li>
+<li><b>Bold</b></li>
+<li><i>Italic</i></li>
+<li><s>Strikethrough</s></li>
+<li><u>Underline</u></li>
+<li><sub>Subscript</sub></li>
+<li><sup>Superscript</sup></li>
+<li><code>Inline Code</code></li>
+<li><b> Bold <i> Italic <a href="https://www.google.com">Link</a></i></b></li>
+<li><b> Bold <i> Italic <a href="internal://some-id">Internal Link</a></i></b></li>
+`;
+export const contentBlockTypes = html`
+<li><pre><code language="css">.code .block {
+	color: red;
+}</code></pre></li>
+<li><blockquote><p>Blockquote</p></blockquote></li>
+<li><h1>Heading 1</h1></li>
+<li><h2>Heading 2</h2></li>
+<li><h3>Heading 3</h3></li>
+<li><h4>Heading 4</h4></li>
+<li><h5>Heading 5</h5></li>
+<li><h6>Heading 6</h6></li>
+<li><p>Image</p></li>
+<!-- is removed-->
+<li><div type="fileLoader" file-name="some-file.png" file-loading="true" file-loading-id="some-id"></div> </li>
+<li><img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC"/></li>
+${contentSimpleTable}
+${someDoc.embedder}
+${someDoc.subEmbedders[0]}
+`;
+export const contentAllNodeTypes = html`
+${contentParagraphs}
+${contentMarks}
+${contentBlockTypes}
+`;
+export const root = {
+  title: "Root",
+  embedder: html`
+		<li><div embeddocid="root"></div></li>
+	`,
+  content: html`
+	<ul>
+		${contentAllNodeTypes}
+	<ul>
+`
+};
+export const testDocuments = {
+  root,
+  someDoc,
+  someDoc2,
+  someDoc3
+};

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,53 @@
+import type { Node } from "@tiptap/pm/model";
+export * from "../pm/features/Link/types.js";
+export * from "../pm/features/Base/types.js";
+export * from "../pm/features/Menus/types.js";
+export * from "../pm/features/Blocks/types.js";
+export * from "../pm/features/CommandsMenus/types.js";
+export * from "../pm/features/CodeBlock/types.js";
+export * from "../pm/features/FileLoader/types.js";
+export * from "../pm/features/DocumentApi/types.js";
+export * from "../pm/features/EmbeddedDocument/types.js";
+export type NodesBetweenFilter = (node: Node | null, start: number, parent: Node | null, index: number) => boolean;
+export type PmPoint = {
+    left: number;
+    top: number;
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+export type CssVariables = {
+    /** The space between the node type indicator and the node. */
+    pmNodeTypeMargin: string;
+    pmUnfocusedSelectionColor: string;
+    /**
+     * The background color for the code blocks.
+     * This has not effect unless you've injected the css. See {@link useHighlightJsTheme}.
+     */
+    pmCodeBlockBgColor: string;
+    pmMaxEmbedWidth: string;
+    pmDragScrollMargin: string;
+    /** The space between the handle and the node type indicator or node. */
+    dragHandleMargin: string;
+    /** The size of the draggable handle. */
+    dragHandleSize: string;
+    dragHandleImage: string;
+    dragHandleCollapseIndicatorImage: string;
+};
+export type HTMLAttributesOptions = {
+    HTMLAttributes: Record<string, any>;
+};
+export type CommandAttributeOptions<T> = CommandNodeOptions & {
+    attributeKey: string;
+    allowedValues: T[];
+};
+export type CommandNodeOptions = {
+    nodeType: string;
+};
+export type CommandToggleNodesOptions = {
+    /** Like {@link toggleNodeTypeNames}, but for groups. */
+    toggleGroups?: string[];
+    /** A list of node types that can be converted to the wanted node type. */
+    toggleNodeTypeNames?: string[];
+};

package/dist/runtime/types/index.js

@@ -0,0 +1,9 @@
+export * from "../pm/features/Link/types.js";
+export * from "../pm/features/Base/types.js";
+export * from "../pm/features/Menus/types.js";
+export * from "../pm/features/Blocks/types.js";
+export * from "../pm/features/CommandsMenus/types.js";
+export * from "../pm/features/CodeBlock/types.js";
+export * from "../pm/features/FileLoader/types.js";
+export * from "../pm/features/DocumentApi/types.js";
+export * from "../pm/features/EmbeddedDocument/types.js";

package/dist/types.d.mts

@@ -1,13 +1,3 @@
-import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+export { default } from './module.mjs'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
-}
-
-declare module '@nuxt/schema' {
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
-
-export * from "./module.mjs"
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/editor",
   "description": "Block base prosemirror editor with partial/full editable document embeds, infinite embeds, and document uploads.",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "./dist/runtime/main.lib.js",
   "type": "module",
   "sideEffects": false,
@@ -91,7 +91,7 @@
     "@tiptap/extension-underline": "^3.4.2",
     "@tiptap/pm": "^3.4.2",
     "@tiptap/vue-3": "^3.4.2",
-    "@witchcraft/ui": "^0.3.2",
+    "@witchcraft/ui": "^0.3.7",
     "tailwindcss": "^4.1.13",
     "vue": "^3.5.21"
   },
@@ -110,13 +110,15 @@
     "@alanscodelog/eslint-config": "^6.3.1",
     "@alanscodelog/utils": "^6.0.2",
     "@commitlint/cli": "^19.8.1",
+    "@faker-js/faker": "^10.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
     "@fortawesome/free-brands-svg-icons": "^7.0.1",
     "@fortawesome/free-regular-svg-icons": "^7.0.1",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@nuxt/eslint-config": "^1.9.0",
-    "@witchcraft/nuxt-utils": "^0.3.2",
-    "@witchcraft/ui": "^0.3.2",
+    "@tiptap/html": "^3.4.2",
+    "@witchcraft/nuxt-utils": "^0.3.6",
+    "@witchcraft/ui": "^0.3.7",
     "colord": "^2.9.3",
     "defu": "^6.1.4",
     "highlight.js": "^11.11.1",
@@ -141,7 +143,7 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.1.2",
     "@nuxt/types": "^2.18.1",
-    "@playwright/test": "^1.54.0",
+    "@playwright/test": "=1.56.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.5",
     "@tailwindcss/cli": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
@@ -150,18 +152,18 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@witchcraft/ui": "^0.3.2",
+    "@witchcraft/ui": "^0.3.7",
     "concurrently": "^9.2.1",
     "cross-env": "^10.0.0",
-    "eslint": "^9.35.0",
+    "eslint": "^9.38.0",
     "fast-glob": "^3.3.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "madge": "^8.0.0",
     "nuxt": "^4.1.2",
     "onchange": "^7.1.0",
-    "playwright": "^1.54.0",
-    "playwright-core": "^1.54.0",
+    "playwright": "=1.56.0",
+    "playwright-core": "=1.56.0",
     "prosemirror-test-builder": "^1.1.1",
     "radix-vue": "^1.9.17",
     "semantic-release": "^24.2.8",

package/src/runtime/pm/commands/changeAttrs.ts

@@ -9,7 +9,7 @@ declare module "@tiptap/core" {
 		changeAttrs: {
 			changeAttrs: (
 				nodeType: string | undefined,
-				attrs: Record<string, unknown>,
+				attrs: Record<string, unknown>
 			) => ReturnType
 		}
 	}

package/src/runtime/pm/features/Blocks/Item.ts

@@ -32,7 +32,6 @@ declare module "@tiptap/core" {
 export const Item = Node.create<ItemNodeOptions>({
 	name: "item" satisfies NodeItemName,
 	content: "block list? | list",
-
 	addOptions() {
 		return {
 			HTMLAttributes: {},
@@ -174,3 +173,4 @@ export const Item = Node.create<ItemNodeOptions>({
 	}
 })
 export type NodeItemName = "item"
+

package/src/runtime/pm/features/Blocks/commands/moveItem.ts

@@ -17,7 +17,7 @@ declare module "@tiptap/core" {
 			 */
 			moveItem: (
 				dir: "down" | "up",
-				pos?: number,
+				pos?: number
 			) => ReturnType
 		}
 	}

package/src/runtime/pm/features/Blocks/components/DragTreeHandle.vue

@@ -97,22 +97,27 @@
 </div>
 </template>
 
-<!--
-	Multipurpose drag handle + collapse indicator.
-
-	This is incredibly useful for making a compact draggable tree view.
-
-	The collapse indicator has a default height, but it should be set manually. For example `[&>.collapse-indicator]:h-[...]`
-
-	The component only emits a few events, it does not handle the dragging itself or what actually happens on any clicks/input.
--->
 <script lang="ts">
+/**
+ * 	Multipurpose drag handle + collapse indicator.
+ *
+ * 	This is incredibly useful for making a compact draggable tree view.
+ *
+ * 	The collapse indicator has a default height, but it should be set manually. For example `[&>.collapse-indicator]:h-[...]`
+ *
+ * 	The component only emits a few events, it does not handle the dragging itself or what actually happens on any clicks/input.
+ */
+export default { }
 </script>
 
 <script setup lang="ts">
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { onMounted, onUnmounted, ref, useAttrs } from "vue"
 
+
+defineOptions({
+	name: "DragTreeHandle"
+})
 interface Props {
 	hasChildren: boolean
 	passedDragThreshold: boolean

package/src/runtime/pm/features/EmbeddedDocument/Embedded.ts

@@ -10,7 +10,7 @@ declare module "@tiptap/core" {
 		embeddedCommandRedirect: {
 			embeddedCommandRedirect: (
 				commandName: string,
-				args: any,
+				args: any
 			) => ReturnType
 		}
 	}

package/src/runtime/pm/features/FileLoader/types.ts

@@ -46,7 +46,7 @@ export type IFileLoaderHandler<
 		editor: Editor,
 		pos: number | undefined,
 		error: Error,
-		loadingKey: TKey,
+		loadingKey: TKey
 	) => void
 
 	/**
@@ -77,7 +77,7 @@ export type IFileLoaderHandler<
 		editor: Editor,
 		pos: number,
 		res: T,
-		loadingKey: TKey,
+		loadingKey: TKey
 	) => void
 	/**
 	 * Return the file (or whatever type you'd like) to allow the extension to handle it.