@witchcraft/editor 0.0.1 → 0.0.3

package/README.md

@@ -106,6 +106,7 @@ src/
 # Dev Notes
 
 - Be very careful passing things from vue to tiptap/prosemirror. The reactive wrappings can break a lot of things.
+- If making an editor it MUST use the import from `@tiptap/vue-3` and not `@tiptap/core` as the former will mark itself with vue's markRaw so it doesn't accidentally become reactive.
 - Be careful when applying steps/transactions across different editor instances. They do not share the same schema instance and are therefore considered incompatible for many operations. Likeliest cause of "invalid content" errors.
 - Invalid node content errors while testing are likely the result of using an invalid doc since the builder nodes are not created and filled. For example, items require some content (e.g. a paragraph).
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftEditor",
   "configKey": "witchcraftEditor",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,8 +1,13 @@
 import { crop } from '@alanscodelog/utils';
-import { createResolver, defineNuxtModule, installModule, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
 import fs from 'node:fs/promises';
 
+const dependencies = {
+	"@witchcraft/ui": "^0.3.0"};
+const pkg = {
+	dependencies: dependencies};
+
 const { resolve } = createResolver(import.meta.url);
 const module = defineNuxtModule({
   meta: {
@@ -12,12 +17,16 @@ const module = defineNuxtModule({
   defaults: {
     _playgroundWorkaround: false
   },
+  moduleDependencies: {
+    "@witchcraft/ui/nuxt": {
+      version: pkg.dependencies["@witchcraft/ui"]
+    }
+  },
   async setup(options, nuxt) {
     nuxt.options.runtimeConfig.public.witchcraftEditor = defu(
       nuxt.options.runtimeConfig.public.witchcraftEditor,
       {}
     );
-    await installModule("@witchcraft/ui/nuxt", nuxt.options.witchcraftUi);
     addComponentsDir({ path: resolve("./runtime/components") });
     const pmFeatures = await fs.readdir(resolve("./runtime/pm/features"));
     for (const feature of pmFeatures) {

package/dist/runtime/components/Editor.d.vue.ts

@@ -19,7 +19,7 @@ type __VLS_Props = {
     menus?: Record<string, MenuRenderInfo>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    editor: import("vue").ShallowRef<import("@tiptap/core").Editor | undefined, import("@tiptap/core").Editor | undefined>;
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     load: () => any;
     unload: () => any;

package/dist/runtime/components/Editor.vue.d.ts

@@ -19,7 +19,7 @@ type __VLS_Props = {
     menus?: Record<string, MenuRenderInfo>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    editor: import("vue").ShallowRef<import("@tiptap/core").Editor | undefined, import("@tiptap/core").Editor | undefined>;
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     load: () => any;
     unload: () => any;

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

@@ -1,5 +1,5 @@
 import type { EditorOptions } from "@tiptap/core";
-import { Editor } from "@tiptap/core";
+import { Editor } from "@tiptap/vue-3";
 /**
  * Unline tiptap's useEditor, this does not auto-mount the editor. Instead the returned `recreate` function must be called manually. This was built with the use of {@link useContentEditor} in mind.
  */

package/dist/runtime/composables/useEditor.js

@@ -1,4 +1,4 @@
-import { Editor } from "@tiptap/core";
+import { Editor } from "@tiptap/vue-3";
 import { onBeforeUnmount, shallowRef } from "vue";
 export const useEditor = (options = {}) => {
   const editor = shallowRef();
@@ -9,6 +9,10 @@ export const useEditor = (options = {}) => {
   }
   onBeforeUnmount(() => {
     const nodes = editor.value?.options.element;
+    if (nodes && !(nodes instanceof HTMLElement)) {
+      console.warn(`Expected editor element to be an HTMLElement, got ${nodes.constructor.name}: ${nodes}`);
+      return;
+    }
     const newEl = nodes?.cloneNode(true);
     nodes?.parentNode?.replaceChild(newEl, nodes);
     editor.value?.destroy();

package/dist/runtime/composables/useWindowDebugging.js

@@ -5,7 +5,7 @@ export const useWindowDebugging = (editor) => {
   watch(editor, () => {
     if (!editor.value) return;
     if (typeof window === "undefined" || typeof process === "undefined") return;
-    if (process.env.NODE_ENV === "development" && editor.value !== void 0) {
+    if (import.meta.dev && editor.value !== void 0) {
       const w = window;
       w.editor = editor.value;
       w.tr = () => editor.value.state.tr;

package/dist/runtime/pm/features/Base/plugins/debugSelectionPlugin.d.ts

@@ -2,7 +2,7 @@ import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 export declare const debugSelectionPluginKey: PluginKey<any>;
 /**
- * Sets the window title to the current selection for debugging in development mode (by checking process.env.NODE_ENV).
+ * Sets the window title to the current selection for debugging in development mode (by checking import.meta.dev).
  *
  * For embedded editors, adds the selection as `[from - to]`.
  */

package/dist/runtime/pm/features/Base/plugins/debugSelectionPlugin.js

@@ -11,7 +11,7 @@ export const debugSelectionPlugin = (editor, log = false) => {
       init() {
       },
       apply(tr) {
-        if (process.env.NODE_ENV === "production") {
+        if (!import.meta.dev) {
           return;
         }
         const sel = `${tr.selection.from} - ${tr.selection.to}`;

package/dist/runtime/pm/features/DocumentApi/DocumentApi.d.ts

@@ -1,6 +1,7 @@
-import { type Content, Editor, type EditorOptions } from "@tiptap/core";
+import type { Content, EditorOptions } from "@tiptap/core";
 import type { Schema } from "@tiptap/pm/model";
 import type { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/vue-3";
 import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js.js";
 /**
  * Configures the document api which tells the editor how to load/unload/save/cache documents, including embedded ones.

package/dist/runtime/pm/features/DocumentApi/DocumentApi.js

@@ -1,7 +1,7 @@
 import { debounce } from "@alanscodelog/utils/debounce";
 import { unreachable } from "@alanscodelog/utils/unreachable";
-import { Editor } from "@tiptap/core";
-import { toRaw } from "vue";
+import { Editor } from "@tiptap/vue-3";
+import { isProxy } from "vue";
 import { convertTransactionForFullState } from "./utils/convertTransactionForFullState.js";
 import { getEmbedJson } from "./utils/getEmbedJson.js";
 import { getEmbedNodeFromDoc } from "./utils/getEmbedNodeFromDoc.js";
@@ -87,7 +87,7 @@ export class DocumentApi {
     const newState = stateBefore.apply(modifiedTr);
     this._cache.set(embedId.docId, newState);
     for (const cb of this._callbacks.update) {
-      cb(embedId, modifiedTr, toRaw(stateBefore), toRaw(newState), updaterSymbol);
+      cb(embedId, modifiedTr, stateBefore, newState, updaterSymbol);
     }
   }
   addEventListener(type, cb) {
@@ -110,11 +110,17 @@ export class DocumentApi {
     if (res === void 0) unreachable();
     this._loading[docId] = void 0;
     this._refCounter.load(docId, res);
+    if (isProxy(res.state)) {
+      throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive");
+    }
     this._cache.set(docId, res.state);
     return res;
   }
   async _loadInternal({ docId }) {
     const cachedState = this.getFromCache({ docId }, { errorIfNotFound: false });
+    if (isProxy(cachedState)) {
+      throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive");
+    }
     if (cachedState) {
       const res = { state: cachedState };
       this._refCounter.load(docId, res);
@@ -146,6 +152,9 @@ export class DocumentApi {
     if (options?.errorIfNotFound) {
       throw new Error(`Could not find cached state for document ${docId}. Expected document to be loaded.`);
     }
+    if (isProxy(cached)) {
+      throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive");
+    }
     return void 0;
   }
   getEmbeddedContent(embedId) {

package/dist/runtime/pm/features/DocumentApi/composables/useEditorContent.d.ts

@@ -1,5 +1,5 @@
 import type { Content, Editor, EditorOptions } from "@tiptap/core";
-import { type Ref } from "vue";
+import { type Ref, type ShallowRef } from "vue";
 import type { DocumentApiInterface } from "../types.js.js";
 /**
     * Provides two ways to load content into the editor.
@@ -10,4 +10,4 @@ import type { DocumentApiInterface } from "../types.js.js";
     *
     * The second option is usually the best, as multiple editors can load the same content and it's automatically kept in sync. See {@link DocumentApi} for more info.
     */
-export declare function useEditorContent(editor: Ref<Editor | undefined>, content: Ref<Content | undefined>, id: Ref<string | undefined>, documentApi: DocumentApiInterface | undefined, recreate: (modifyOptions?: (options: Partial<EditorOptions>) => Partial<EditorOptions>) => void): void;
+export declare function useEditorContent(editor: ShallowRef<Editor | undefined>, content: Ref<Content | undefined>, id: Ref<string | undefined>, documentApi: DocumentApiInterface | undefined, recreate: (modifyOptions?: (options: Partial<EditorOptions>) => Partial<EditorOptions>) => void): void;

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.1",
+	"version": "0.0.3",
 	"main": "./dist/runtime/main.lib.js",
 	"type": "module",
 	"sideEffects": false,
@@ -79,11 +79,11 @@
 		"lint:types": "vue-tsc --noEmit",
 		"test": "vitest",
 		"test:watch": "vitest --watch",
-		"doc": "typedoc --options typedoc.config.js",
-		"doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.cjs\" -- pnpm doc",
+		"doc": "typedoc",
+		"doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.js\" -- pnpm doc",
 		"doc:serve": "http-server docs --port=5001",
 		"doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
-		"doc:check-invalid": "typedoc --options typedoc.config.cjs --listInvalidSymbolLinks",
+		"doc:check-invalid": "typedoc --listInvalidSymbolLinks",
 		"//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
 		"actions:debug": "act -r -v -j release",
 		"gen:highlightJsLangInfo": "node src/runtime/pm/features/CodeBlock/build/generateHighlightJsInfo.js"
@@ -123,7 +123,7 @@
 		"@tiptap/extension-underline": "^3.4.2",
 		"@tiptap/pm": "^3.4.2",
 		"@tiptap/vue-3": "^3.4.2",
-		"@witchcraft/ui": "^0.2.1",
+		"@witchcraft/ui": "^0.3.0",
 		"tailwindcss": "^4.0.0",
 		"vue": "^3.2.47"
 	},
@@ -140,7 +140,7 @@
 	},
 	"dependencies": {
 		"@alanscodelog/eslint-config": "^6.3.1",
-		"@alanscodelog/utils": "^6.0.1",
+		"@alanscodelog/utils": "^6.0.2",
 		"@commitlint/cli": "^19.8.1",
 		"@fortawesome/fontawesome-svg-core": "^7.0.1",
 		"@fortawesome/free-brands-svg-icons": "^7.0.1",
@@ -148,7 +148,7 @@
 		"@fortawesome/free-solid-svg-icons": "^7.0.1",
 		"@nuxt/eslint-config": "^1.9.0",
 		"@witchcraft/nuxt-utils": "^0.3.2",
-		"@witchcraft/ui": "^0.2.1",
+		"@witchcraft/ui": "^0.3.0",
 		"colord": "^2.9.3",
 		"defu": "^6.1.4",
 		"highlight.js": "^11.11.1",
@@ -158,7 +158,7 @@
 		"nanoid": "^5.1.5",
 		"reka-ui": "^2.5.0",
 		"tailwind-merge": "^3.3.1",
-		"unplugin-vue-components": "^29.0.0",
+		"unplugin-vue-components": "^29.1.0",
 		"uuid": "^13.0.0",
 		"y-prosemirror": "^1.3.7",
 		"yjs": "^13.6.27"
@@ -168,21 +168,21 @@
 		"@alanscodelog/semantic-release-config": "^5.0.4",
 		"@alanscodelog/tsconfigs": "^6.2.0",
 		"@alanscodelog/vite-config": "^0.0.6",
-		"@iconify/json": "^2.2.384",
+		"@iconify/json": "^2.2.385",
 		"@nuxt/kit": "^4.1.2",
 		"@nuxt/module-builder": "^1.0.2",
 		"@nuxt/schema": "^4.1.2",
 		"@nuxt/types": "^2.18.1",
-		"@playwright/test": "=1.54.0",
+		"@playwright/test": "^1.54.0",
 		"@rollup/plugin-dynamic-import-vars": "^2.1.5",
 		"@tailwindcss/cli": "^4.1.13",
 		"@tailwindcss/vite": "^4.1.13",
 		"@testing-library/vue": "^8.1.0",
-		"@types/node": "^24.4.0",
+		"@types/node": "^24.5.1",
 		"@vitejs/plugin-vue": "^6.0.1",
-		"@vitest/browser": "^3.0.0",
-		"@vitest/coverage-v8": "^3.0.0",
-		"@witchcraft/ui": "^0.2.1",
+		"@vitest/browser": "^3.2.4",
+		"@vitest/coverage-v8": "^3.2.4",
+		"@witchcraft/ui": "^0.3.0",
 		"concurrently": "^9.2.1",
 		"cross-env": "^10.0.0",
 		"eslint": "^9.35.0",
@@ -192,8 +192,8 @@
 		"madge": "^8.0.0",
 		"nuxt": "^4.1.2",
 		"onchange": "^7.1.0",
-		"playwright": "=1.54.0",
-		"playwright-core": "=1.54.0",
+		"playwright": "^1.54.0",
+		"playwright-core": "^1.54.0",
 		"prosemirror-test-builder": "^1.1.1",
 		"radix-vue": "^1.9.17",
 		"semantic-release": "^24.2.8",
@@ -202,7 +202,7 @@
 		"typescript": "~5.9.2",
 		"unplugin-icons": "^22.3.0",
 		"vite": "^7.1.5",
-		"vitest": "^3.0.0",
+		"vitest": "^3.2.4",
 		"vue": "^3.5.21",
 		"vue-component-type-helpers": "^3.0.7",
 		"vue-tsc": "^2.2.12"

package/src/module.ts

@@ -4,11 +4,13 @@ import {
 	addImportsDir,
 	addTemplate,
 	createResolver,
-	defineNuxtModule,
-	installModule } from "@nuxt/kit"
+	defineNuxtModule
+} from "@nuxt/kit"
 import { defu } from "defu"
 import fs from "node:fs/promises"
 
+import pkg from "../package.json" with { type: "json" }
+
 const { resolve } = createResolver(import.meta.url)
 
 declare module "@nuxt/schema" {
@@ -31,13 +33,17 @@ export default defineNuxtModule<ModuleOptions>({
 	defaults: {
 		_playgroundWorkaround: false
 	},
+	moduleDependencies: {
+		"@witchcraft/ui/nuxt": {
+			version: pkg.dependencies["@witchcraft/ui"]
+		}
+	},
 	async setup(options, nuxt) {
 		nuxt.options.runtimeConfig.public.witchcraftEditor = defu(
 			nuxt.options.runtimeConfig.public.witchcraftEditor,
 			{
 			}
 		)
-		await installModule("@witchcraft/ui/nuxt", (nuxt.options as any).witchcraftUi)
 
 		addComponentsDir({ path: resolve("./runtime/components") })
 

package/src/runtime/composables/useEditor.ts

@@ -1,5 +1,5 @@
 import type { EditorOptions } from "@tiptap/core"
-import { Editor } from "@tiptap/core"
+import { Editor } from "@tiptap/vue-3"
 import { onBeforeUnmount, shallowRef } from "vue"
 /**
  * Unline tiptap's useEditor, this does not auto-mount the editor. Instead the returned `recreate` function must be called manually. This was built with the use of {@link useContentEditor} in mind.
@@ -18,6 +18,11 @@ export const useEditor = (options: Partial<EditorOptions> = {}) => {
 	onBeforeUnmount(() => {
 		// Cloning root node (and its children) to avoid content being lost by destroy
 		const nodes = editor.value?.options.element
+		if (nodes && !(nodes instanceof HTMLElement)) {
+			// eslint-disable-next-line no-console
+			console.warn(`Expected editor element to be an HTMLElement, got ${nodes.constructor.name}: ${nodes}`)
+			return
+		}
 		const newEl = nodes?.cloneNode(true) as HTMLElement
 
 		nodes?.parentNode?.replaceChild(newEl, nodes)

package/src/runtime/composables/useWindowDebugging.ts

@@ -9,7 +9,7 @@ export const useWindowDebugging = (editor: ShallowRef<Editor | undefined>): void
 	watch(editor, () => {
 		if (!editor.value) return
 		if (typeof window === "undefined" || typeof process === "undefined") return
-		if (process.env.NODE_ENV === "development" && editor.value !== undefined) {
+		if (import.meta.dev && editor.value !== undefined) {
 			const w = window as any
 			w.editor = editor.value
 			w.tr = () => editor.value!.state.tr

package/src/runtime/pm/features/Base/plugins/debugSelectionPlugin.ts

@@ -9,7 +9,7 @@ const SUB_SELECTION_REGEX = /(\[[0-9 -]*\])/
 
 export const debugSelectionPluginKey = new PluginKey("debugSelection")
 /**
- * Sets the window title to the current selection for debugging in development mode (by checking process.env.NODE_ENV).
+ * Sets the window title to the current selection for debugging in development mode (by checking import.meta.dev).
  *
  * For embedded editors, adds the selection as `[from - to]`.
  */
@@ -20,7 +20,7 @@ export const debugSelectionPlugin = (editor: Editor, log: boolean = false): Plug
 		state: {
 			init(): void { /**/ },
 			apply(tr: Transaction): void {
-				if (process.env.NODE_ENV === "production") { return }
+				if (!import.meta.dev) { return }
 				const sel = `${tr.selection.from} - ${tr.selection.to}`
 				if (isEmbeddedBlock(editor.view)) {
 					if (log) {

package/src/runtime/pm/features/DocumentApi/DocumentApi.ts

@@ -1,9 +1,10 @@
 import { debounce, type DebounceQueue } from "@alanscodelog/utils/debounce"
 import { unreachable } from "@alanscodelog/utils/unreachable"
-import { type Content, Editor, type EditorOptions } from "@tiptap/core"
+import type { Content, EditorOptions } from "@tiptap/core"
 import type { Schema } from "@tiptap/pm/model"
 import type { EditorState, Plugin, Transaction } from "@tiptap/pm/state"
-import { toRaw } from "vue"
+import { Editor } from "@tiptap/vue-3"
+import { isProxy } from "vue"
 
 import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js"
 import { convertTransactionForFullState } from "./utils/convertTransactionForFullState.js"
@@ -165,7 +166,7 @@ export class DocumentApi<
 		const newState = stateBefore.apply(modifiedTr)
 		this._cache.set(embedId.docId, newState)
 		for (const cb of this._callbacks.update) {
-			cb(embedId, modifiedTr, toRaw(stateBefore), toRaw(newState), updaterSymbol)
+			cb(embedId, modifiedTr, stateBefore, newState, updaterSymbol)
 		}
 	}
 
@@ -210,12 +211,18 @@ export class DocumentApi<
 		if (res === undefined) unreachable()
 		this._loading[docId] = undefined
 		this._refCounter.load(docId, res)
+		if (isProxy(res.state)) {
+			throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive")
+		}
 		this._cache.set(docId, res.state)
 		return res
 	}
 
 	private async _loadInternal({ docId }: DocId): Promise<{ state: EditorState, data?: T }> {
 		const cachedState = this.getFromCache({ docId }, { errorIfNotFound: false })
+		if (isProxy(cachedState)) {
+			throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive")
+		}
 		if (cachedState) {
 			const res = { state: cachedState }
 			this._refCounter.load(docId, res)
@@ -256,6 +263,9 @@ export class DocumentApi<
 		if (options?.errorIfNotFound) {
 			throw new Error(`Could not find cached state for document ${docId}. Expected document to be loaded.`)
 		}
+		if (isProxy(cached)) {
+			throw new Error("State cannot be a reactive proxy. You can use toRaw as a temporary workaround but you should ideally not make it reactive")
+		}
 		return undefined
 	}
 

package/src/runtime/pm/features/DocumentApi/composables/useEditorContent.ts

@@ -1,6 +1,6 @@
 import type { Content, Editor, EditorOptions } from "@tiptap/core"
 import type { Transaction } from "@tiptap/pm/state"
-import { nextTick, onBeforeUnmount, type Ref, watch } from "vue"
+import { nextTick, onBeforeUnmount, type Ref, type ShallowRef, watch } from "vue"
 
 import type { DocumentApiInterface, OnUpdateDocumentCallback } from "../types.js"
 import { convertTrForInstance } from "../utils/convertTrForInstance.js"
@@ -15,7 +15,7 @@ import { convertTrForInstance } from "../utils/convertTrForInstance.js"
 	* The second option is usually the best, as multiple editors can load the same content and it's automatically kept in sync. See {@link DocumentApi} for more info.
 	*/
 export function useEditorContent(
-	editor: Ref<Editor | undefined>,
+	editor: ShallowRef<Editor | undefined>,
 	content: Ref<Content | undefined>,
 	id: Ref<string | undefined>,
 	documentApi: DocumentApiInterface | undefined,