@witchcraft/editor 0.0.6 → 0.0.8

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

@@ -0,0 +1,23 @@
+import type { Node } from "@tiptap/pm/model";
+import type { builders } from "prosemirror-test-builder";
+import { generateRandomTree } from "./generateRandomTree.js";
+import type { GeneratorConfigEntry } from "../generator.js";
+/**
+ * Generates a random doc using faker js.
+ *
+ * A config describing how to create the doc is required. One is available under `pm/generator`.
+ *
+ * @experimental
+ */
+export declare function generateRandomDoc<TBuilder extends ReturnType<typeof builders>, TData extends string>(builder: TBuilder, config?: GeneratorConfigEntry<any, any, any, any>[], treeOptions?: Parameters<typeof generateRandomTree>[1], { checkAfterNodeCreation }?: {
+    /**
+     * Checks if every returned node is valid for debugging invalid generator configs.
+     *
+     * A check is always done on the root node at the end regardless of this option.
+     *
+     * It is very slow (each check, rechecks children).
+     *
+     * @default false
+     */
+    checkAfterNodeCreation?: boolean;
+}): Node;

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

@@ -0,0 +1,83 @@
+import { unreachable } from "@alanscodelog/utils/unreachable";
+import { faker } from "@faker-js/faker";
+import { generateRandomTree } from "./generateRandomTree.js";
+import { generatorConfig } from "../generator.js";
+export function generateRandomDoc(builder, config = generatorConfig, treeOptions, {
+  checkAfterNodeCreation = false
+} = {}) {
+  const schema = builder.schema;
+  const map = {};
+  function schemaFilter(name) {
+    return name !== "text" && name !== schema.topNodeType.name;
+  }
+  for (const entry of config) {
+    for (const node of entry.parents.names) {
+      if (node === "") throw new Error(`Empty node name ""`);
+      const type = entry.parents.type === "node" ? schema.nodes[node] : schema.marks[node];
+      if (type === void 0 && node !== "text") {
+        throw new Error(`${node} (on entry of type ${entry.parents.type}) not found in schema. Valid names are ${Object.keys(entry.parents.type === "node" ? schema.nodes : schema.marks)}`);
+      }
+      for (const node2 of entry.parents.names) {
+        const subEntry = { ...entry };
+        if (entry.ignoreValidation === void 0 || entry.ignoreValidation !== true) {
+          const childrenToValidate = (entry.children.names ?? []).filter((_) => !Array.isArray(entry.ignoreValidation) || !entry.ignoreValidation.includes(_));
+          for (const child of childrenToValidate) {
+            if (child === "") throw new Error(`Empty node name ""`);
+            if (entry.children.type === "node") {
+              const childType = schema.nodes[child];
+              const possibleNames = [childType.name, ...(childType.spec.group ?? "").split(" ").filter((e) => e !== "")];
+              const isAllowedChild = type.spec.content && possibleNames.some((n) => type.spec.content.includes(n));
+              if (!(isAllowedChild && schemaFilter(childType.name))) {
+                throw new Error(`Node ${node2} cannot contain child of type ${child}`);
+              }
+            } else {
+              const childType = schema.marks[child];
+              if (entry.parents.type === "node") {
+              } else {
+                const possibleNames = [childType.name, ...(childType.spec.group ?? "").split(" ").filter((e) => e !== "")];
+                const t = type;
+                const isExcluded = t.spec.excludes !== void 0 && possibleNames.some((n) => {
+                  return t.spec.excludes.includes(n) || t.spec.excludes.includes("_");
+                });
+                if (isExcluded) {
+                  throw new Error(`Mark ${node2} cannot contain mark child of type ${child}`);
+                }
+              }
+            }
+          }
+        }
+        map[node2] = { ...subEntry };
+      }
+    }
+  }
+  const children = generateRandomTree({
+    parentData: (data) => {
+      if (data === "") return "";
+      if (!data) unreachable();
+      if (!map[data] || !map[data].children.names || map[data].children.names.length === 0) {
+        return "";
+      } else {
+        const picked = faker.helpers.arrayElement(map[data].children.names);
+        return picked;
+      }
+    },
+    createNode: (children2, _isLeaf, data) => {
+      if (data === "") return void 0;
+      if (!data) unreachable();
+      const type = schema.nodes[data];
+      if (!type) return void 0;
+      const parent = map[data]?.create?.(data, children2) ?? builder[data]({}, ...children2);
+      if (checkAfterNodeCreation) {
+        ;
+        parent?.check?.();
+      }
+      return parent;
+    }
+  }, {
+    ...treeOptions,
+    initialData: schema.topNodeType.name
+  });
+  const doc = map[schema.topNodeType.name]?.create?.(schema.topNodeType.name, children) ?? builder[schema.topNodeType.name]({}, ...children);
+  doc.check?.();
+  return doc;
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Generates a random tree structure where the probability of generating children
+ * decreases linearly with depth, resulting in a tree that is bushy at the top
+ * and sparse towards the maximum depth.
+ *
+ * This function is agnostic to the actual node structure, relying on the caller-provided
+ * callbacks to create and link nodes.
+ *
+ * It uses faker.js for randomness (even on the option parameters).
+ *
+ * See {@link generateRandomDoc} for an example of how to use it.
+ *
+ * @experimental
+ */
+export declare function generateRandomTree<T, TData>({ createNode, parentData }: {
+    /** A function that creates a new node (type T) given its depth. */
+    createNode: (children: T[], isLeaf: boolean, parentData?: TData) => T | undefined;
+    /**
+     * A function that is called before creating a a node or it's children whose result is passed to both. This allows creating children that will be compatible with the parent (via this same function, it is passed it's parent).
+     *
+     * For example, we could randomly generate a parent type. It's then passed both to the children, to limit the types of children nodes, and to the parent so it can actually create it.
+     */
+    parentData?: (parentData?: TData) => TData;
+}, { rootNodes: rootNodes, depth, minChildren, maxInitialChildren, initialData }?: {
+    /**
+     * The exact number of nodes at depth 0.
+     *
+     * @default faker.number.int({ min: 0, max: 5 })
+     */
+    rootNodes?: number;
+    /**
+     * The maximum depth of the tree (0-indexed). Nodes at this depth will have 0 children.
+     *
+     * @default faker.number.int({ min: 0, max: 5 })
+     */
+    depth?: number;
+    /**
+     * The absolute minimum number of children any node can have.
+     *
+     * @default 0
+     */
+    minChildren?: number;
+    /**
+     * The maximum children a node can have at depth 0. This value scales down as depth increases.
+     *
+     * @default 10
+     */
+    maxInitialChildren?: number;
+    initialData?: TData;
+}): T[];

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

@@ -0,0 +1,38 @@
+import { faker } from "@faker-js/faker";
+export function generateRandomTree({
+  createNode,
+  parentData
+}, {
+  rootNodes = faker.number.int({ min: 0, max: 5 }),
+  depth = faker.number.int({ min: 0, max: 5 }),
+  minChildren = 0,
+  maxInitialChildren = 10,
+  initialData
+} = {}) {
+  const generateChildren = (currentDepth, childCount, pData) => {
+    const res = [];
+    for (let i = 0; i < childCount; i++) {
+      const numChildren = calculateNumChildren(depth, currentDepth, minChildren, maxInitialChildren);
+      const data = parentData?.(pData) ?? void 0;
+      const parent = createNode(
+        generateChildren(currentDepth + 1, numChildren, data),
+        numChildren === 0,
+        data
+      );
+      if (parent === void 0) continue;
+      res.push(parent);
+    }
+    return res;
+  };
+  return generateChildren(0, rootNodes, initialData);
+}
+function calculateNumChildren(depth, currentDepth, minChildren, maxInitialChildren) {
+  const decayFactor = depth > 0 ? (depth - currentDepth) / depth : 0;
+  const maxAtDepth = minChildren + (maxInitialChildren - minChildren) * decayFactor;
+  const maxChildrenAtDepth = Math.max(minChildren, Math.floor(maxAtDepth));
+  let numChildren = 0;
+  if (currentDepth < depth) {
+    numChildren = faker.number.int({ min: minChildren, max: maxChildrenAtDepth });
+  }
+  return numChildren;
+}

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.6",
+  "version": "0.0.8",
   "main": "./dist/runtime/main.lib.js",
   "type": "module",
   "sideEffects": false,
@@ -110,11 +110,13 @@
     "@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",
+    "@tiptap/html": "^3.4.2",
     "@witchcraft/nuxt-utils": "^0.3.6",
     "@witchcraft/ui": "^0.3.7",
     "colord": "^2.9.3",
@@ -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",
@@ -153,15 +155,15 @@
     "@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/module.ts

@@ -89,6 +89,7 @@ export default defineNuxtModule<ModuleOptions>({
 		nuxt.options.build.transpile.push("@tiptap/pm")
 
 		nuxt.hook("vite:extendConfig", config => {
+			// @ts-expect-error - optimizeDeps is now readonly but also possibly undefined :/
 			config.optimizeDeps ??= {}
 			config.optimizeDeps.exclude ??= []
 			// causes issues with the import.meta.globs here

package/src/runtime/components/CodeBlockThemePicker.vue

@@ -42,7 +42,6 @@ const codeBlocksTheme = defineModel<string>("codeBlocksTheme", { required: true
 				gap-2
 			"
 		>
-			<!-- @vue-expect-error -->
 			<ComboboxInput
 				class="
 					bg-inherit

package/src/runtime/components/Editor.vue

@@ -26,7 +26,6 @@
 	v-bind="$attrs"
 >
 	<!-- The class `is-embedded-block` is not needed internally, but is added for consistency in case it might be useful. -->
-	<!-- @vue-expect-error -->
 	<editor-content
 		:editor="editor! as any"
 		spellcheck="false"

package/src/runtime/demo/App.vue

@@ -1,6 +1,5 @@
 <template>
 <WRoot class="items-center py-4">
-	<!-- @vue-expect-error use unhead in a real app -->
 	<style>
 		{{ codeBlocksThemeCss.join("\n") }}
 	</style>

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,27 +97,31 @@
 </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.
+ */
+interface Props {
+	hasChildren: boolean
+	passedDragThreshold: boolean
+	hideChildren: boolean
+}
 </script>
 
 <script setup lang="ts">
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { onMounted, onUnmounted, ref, useAttrs } from "vue"
 
-interface Props {
-	hasChildren: boolean
-	passedDragThreshold: boolean
-	hideChildren: boolean
-}
+
+defineOptions({
+	name: "DragTreeHandle"
+})
 
 const $attrs = useAttrs()
 defineProps<Props>()

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

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error -->
 <WPopup
 	:model-value="menu.opened"
 	:preferred-horizontal="['left-most']"

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

@@ -12,7 +12,6 @@
 	--pmNodeTypeMargin
 	--pmDragDropIndicatorHeight
 -->
-<!-- @vue-expect-error role is a valid attribute -->
 <node-view-wrapper
 	:class="twMerge(`
 		group/item

package/src/runtime/pm/features/CodeBlock/components/CodeBlockView.vue

@@ -44,7 +44,6 @@
 		/>
 	</div>
 
-	<!-- @vue-expect-error -->
 	<node-view-content
 		:class="twMerge(`
 			hljs

package/src/runtime/pm/features/CommandsMenus/components/CommandMenuGroup.vue

@@ -8,7 +8,6 @@
 		:item="item"
 		v-extract-root-el="(_: any) => el = _"
 	/>
-	<!-- @vue-expect-error -->
 	<WPopup
 		:model-value="showSubMenu"
 		:preferred-horizontal="['right-most']"

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/EmbeddedDocument/components/EmbeddedDocumentPicker.vue

@@ -84,7 +84,6 @@
 			@pointerdown.prevent
 			@pointerup.prevent="pickBlockId"
 		>
-			<!-- @vue-expect-error -->
 			<Editor
 				:is-embedded="true"
 				:doc-id="newEmbedId.docId"

package/src/runtime/pm/features/EmbeddedDocument/components/EmbeddedNodeView.vue

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error -->
 <node-view-wrapper
 	:class="`
 		group/embedded-doc

package/src/runtime/pm/features/FileLoader/components/FileLoaderNodeView.vue

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error contenteditable exists -->
 <node-view-wrapper
 	:class="twMerge(`
 		group/file-loader

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.