@witchcraft/editor 0.2.0 → 0.2.1

package/README.md

@@ -54,6 +54,7 @@ The components library explains how to configure anything, you just need to add
 //without Nuxt:
 @import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
+@import "@witchcraft/ui/animations.css";
 // source used components
 @source "/path/to/node_modules/@witchcraft/ui/src/runtime/components";
 

package/dist/module.d.mts

@@ -7,7 +7,7 @@ declare module "@nuxt/schema" {
 }
 interface ModuleOptions {
     /** @internal */
-    _playgroundWorkaround?: boolean;
+    _playgroundWorkaround?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -10,7 +10,7 @@ const module$1 = defineNuxtModule({
     configKey: "witchcraftEditor"
   },
   defaults: {
-    _playgroundWorkaround: false
+    _playgroundWorkaround: void 0
   },
   moduleDependencies: {
     "@witchcraft/ui/nuxt": {
@@ -36,7 +36,7 @@ const module$1 = defineNuxtModule({
     addTemplate({
       filename: "witchcraft-editor.css",
       write: true,
-      getContents: () => options._playgroundWorkaround ? crop`
+      getContents: () => options._playgroundWorkaround === "@witchcraft/editor" ? crop`
 					@import "${resolve("./runtime/assets/base.css")}";
 					@import "${resolve("./runtime/assets/utils.css")}";
 					@source "${resolve("./runtime/components")}";

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

@@ -1,9 +1,5 @@
 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 import.meta.dev).
- *
- * For embedded editors, adds the selection as `[from - to]`.
- */
+/** Renders a floating tooltip directly above the selection point in dev mode only. */
 export declare const debugSelectionPlugin: (editor: Editor, log?: boolean) => Plugin;

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

@@ -1,47 +1,73 @@
 import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { isEmbeddedBlock } from "../../EmbeddedDocument/utils/isEmbeddedBlock.js";
-const ROOT_SELECTION_REGEX = /([0-9 -]*)(\[|$)/;
+const ROOT_SELECTION_REGEX = /(DEBUG: [0-9 -]*)(\[|$)/;
 const SUB_SELECTION_REGEX = /(\[[0-9 -]*\])/;
 export const debugSelectionPluginKey = new PluginKey("debugSelection");
 export const debugSelectionPlugin = (editor, log = false) => {
   let initialized = false;
+  let currentDisplayString = "";
   return new Plugin({
     key: debugSelectionPluginKey,
     state: {
       init() {
+        return DecorationSet.empty;
       },
-      apply(tr) {
-        if (!import.meta.dev) {
-          return;
-        }
+      apply(tr, oldSet) {
+        if (!import.meta.dev) return oldSet.map(tr.mapping, tr.doc);
         const sel = `${tr.selection.from} - ${tr.selection.to}`;
         if (isEmbeddedBlock(editor.view)) {
-          if (log) {
-            console.log(`embedded selection: ${tr.selection.from} - ${tr.selection.to}`);
-          }
-          const hasEmbeddedSelection = document.title.match(SUB_SELECTION_REGEX);
+          if (log) console.log(`embedded selection: ${sel}`);
+          const hasEmbeddedSelection = currentDisplayString.match(SUB_SELECTION_REGEX);
           if (hasEmbeddedSelection) {
-            document.title = document.title.replace(
+            currentDisplayString = currentDisplayString.replace(
               SUB_SELECTION_REGEX,
               `[${sel}]`
             );
           } else {
-            document.title = `${document.title} [${sel}]`;
+            const prefix = currentDisplayString.startsWith("DEBUG: ") ? "" : "DEBUG: ";
+            currentDisplayString = `${prefix}${currentDisplayString} [${sel}]`;
           }
         } else {
-          if (log) {
-            console.log(`root selection: ${tr.selection.from} - ${tr.selection.to}`);
-          }
+          if (log) console.log(`root selection: ${sel}`);
           if (!initialized) {
             initialized = true;
-            document.title = sel;
+            currentDisplayString = `DEBUG: ${sel}`;
           } else {
-            document.title = document.title.replace(
+            currentDisplayString = currentDisplayString.replace(
               ROOT_SELECTION_REGEX,
-              `${sel} $2`
+              `DEBUG: ${sel} $2`
             );
           }
         }
+        const widget = document.createElement("div");
+        Object.assign(widget.style, {
+          position: "absolute",
+          top: "110%",
+          right: "0",
+          zIndex: "100",
+          padding: "2px 6px",
+          fontSize: "10px",
+          fontFamily: "monospace",
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          borderRadius: "2px",
+          pointerEvents: "none",
+          whiteSpace: "nowrap",
+          lineHeight: "1"
+        });
+        widget.textContent = currentDisplayString;
+        const deco = Decoration.widget(tr.selection.to, widget, {
+          side: -1,
+          // Ensure it stays to the left of the cursor
+          key: "debug-selection-tooltip"
+        });
+        return DecorationSet.create(tr.doc, [deco]);
+      }
+    },
+    props: {
+      decorations(state) {
+        return debugSelectionPluginKey.getState(state);
       }
     }
   });

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

@@ -20,7 +20,6 @@
 		ref="codeBlockLangPickerEl"
 	>
 		<!-- and here we only style everything but the suggestions so the input matches the code block background -->
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			:border="false"
 			wrapper-class="lang-picker-input flex-nowrap z-10"

package/dist/runtime/pm/features/Collaboration/createCollaborationPlugins.js

@@ -9,7 +9,10 @@ export function createCollaborationPlugins(options, schema, getConnectedEditors)
   const storage = {
     isDisabled: false
   };
-  const fragment = options.fragment ? options.fragment : options.document.getXmlFragment(options.field);
+  const fragment = options.fragment ? options.fragment : options.document?.getXmlFragment(options.field);
+  if (!fragment) {
+    throw new Error("No fragment or document provided.");
+  }
   const yUndoPluginInstance = yUndoPlugin(options.yUndoOptions);
   const originalUndoPluginView = yUndoPluginInstance.spec.view;
   yUndoPluginInstance.spec.view = (view) => {

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

@@ -25,7 +25,11 @@ export function useEditorContent(editor, content, id, documentApi, recreate) {
   let attached = false;
   async function load(changed) {
     if (content.value) {
-      editor.value?.commands.setContent(content.value);
+      if (!editor.value) {
+        recreate((options) => ({ ...options, content: content.value }));
+      } else {
+        editor.value?.commands.setContent(content.value);
+      }
     } else if (documentApi) {
       if (changed && id.value) {
         await documentApi.load({ docId: id.value });
@@ -65,7 +69,7 @@ export function useEditorContent(editor, content, id, documentApi, recreate) {
     if (oldId !== void 0 && newId !== oldId && documentApi) {
       unload(oldId);
       await load(true);
-    } else if (_newContent) {
+    } else if (_newContent !== _oldContent && _newContent) {
       await load(false);
     }
   }, { deep: false });

package/dist/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -4,7 +4,6 @@
 	ref="el"
 >
 	<div class="flex flex-col gap-1">
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="text-input"
 			wrapper-class="flex flex-nowrap gap-1"
@@ -24,7 +23,6 @@
 				</WLabel>
 			</template>
 		</WSimpleInput>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="link-input"
 			wrapper-class="flex flex-nowrap gap-1"

package/dist/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -15,7 +15,6 @@
 		>
 			<i-ic-round-link class="w-[1.25em] !h-auto"/>
 		</WLabel>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			id="menu-link-input"
 			class="link-input"

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.2.0",
+  "version": "0.2.1",
   "main": "./dist/runtime/main.lib.js",
   "type": "module",
   "sideEffects": false,
@@ -94,7 +94,7 @@
     "@tiptap/pm": "^3.12.0",
     "@tiptap/vue-3": "^3.12.0",
     "@tiptap/y-tiptap": "^3.0.1",
-    "@witchcraft/ui": "^0.3.19",
+    "@witchcraft/ui": "^0.3.25",
     "tailwindcss": "^4.1.17",
     "vue": "^3.5.25"
   },
@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "@alanscodelog/eslint-config": "^6.3.1",
-    "@alanscodelog/utils": "^6.0.2",
+    "@alanscodelog/utils": "^6.2.0",
     "@commitlint/cli": "^20.1.0",
     "@faker-js/faker": "^10.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
@@ -121,7 +121,7 @@
     "@nuxt/eslint-config": "^1.11.0",
     "@tiptap/html": "^3.12.0",
     "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.3.19",
+    "@witchcraft/ui": "^0.3.25",
     "colord": "^2.9.3",
     "defu": "^6.1.4",
     "highlight.js": "^11.11.1",
@@ -137,8 +137,8 @@
   },
   "devDependencies": {
     "@alanscodelog/commitlint-config": "^3.1.2",
-    "@alanscodelog/semantic-release-config": "^6.0.0",
-    "@alanscodelog/tsconfigs": "^6.2.0",
+    "@alanscodelog/semantic-release-config": "^6.0.2",
+    "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.7",
     "@iconify/json": "^2.2.412",
     "@nuxt/kit": "^4.2.1",
@@ -154,7 +154,7 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-v8": "^4.0.14",
-    "@witchcraft/ui": "^0.3.19",
+    "@witchcraft/ui": "^0.3.25",
     "concurrently": "^9.2.1",
     "cross-env": "^10.0.0",
     "eslint": "^9.39.1",

package/src/module.ts

@@ -21,7 +21,7 @@ declare module "@nuxt/schema" {
 
 export interface ModuleOptions {
 	/** @internal */
-	_playgroundWorkaround?: boolean
+	_playgroundWorkaround?: string
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -30,7 +30,7 @@ export default defineNuxtModule<ModuleOptions>({
 		configKey: "witchcraftEditor"
 	},
 	defaults: {
-		_playgroundWorkaround: false
+		_playgroundWorkaround: undefined
 	},
 	moduleDependencies: {
 		"@witchcraft/ui/nuxt": {
@@ -60,7 +60,7 @@ export default defineNuxtModule<ModuleOptions>({
 		addTemplate({
 			filename: "witchcraft-editor.css",
 			write: true,
-			getContents: () => options._playgroundWorkaround
+			getContents: () => options._playgroundWorkaround === "@witchcraft/editor"
 				? crop`
 					@import "${resolve("./runtime/assets/base.css")}";
 					@import "${resolve("./runtime/assets/utils.css")}";

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

@@ -1,56 +1,81 @@
 /* eslint-disable no-console */
 import type { Editor } from "@tiptap/core"
-import { Plugin, PluginKey, type Transaction } from "@tiptap/pm/state"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import { Decoration, DecorationSet } from "@tiptap/pm/view"
 
 import { isEmbeddedBlock } from "../../EmbeddedDocument/utils/isEmbeddedBlock.js"
 
-const ROOT_SELECTION_REGEX = /([0-9 -]*)(\[|$)/
+const ROOT_SELECTION_REGEX = /(DEBUG: [0-9 -]*)(\[|$)/
 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 import.meta.dev).
- *
- * For embedded editors, adds the selection as `[from - to]`.
- */
+
+/** Renders a floating tooltip directly above the selection point in dev mode only. */
 export const debugSelectionPlugin = (editor: Editor, log: boolean = false): Plugin => {
 	let initialized = false
+	let currentDisplayString = ""
+
 	return new Plugin({
 		key: debugSelectionPluginKey,
 		state: {
-			init(): void { /**/ },
-			apply(tr: Transaction): void {
-				if (!import.meta.dev) { return }
+			init() { return DecorationSet.empty },
+			apply(tr, oldSet) {
+				if (!import.meta.dev) return oldSet.map(tr.mapping, tr.doc)
 				const sel = `${tr.selection.from} - ${tr.selection.to}`
+
 				if (isEmbeddedBlock(editor.view)) {
-					if (log) {
-						console.log(`embedded selection: ${tr.selection.from} - ${tr.selection.to}`)
-					}
-					const hasEmbeddedSelection = document.title.match(SUB_SELECTION_REGEX)
+					if (log) console.log(`embedded selection: ${sel}`)
+					const hasEmbeddedSelection = currentDisplayString.match(SUB_SELECTION_REGEX)
 					if (hasEmbeddedSelection) {
-						document.title = document.title
-							.replace(
-								SUB_SELECTION_REGEX,
-								`[${sel}]`
-							)
+						currentDisplayString = currentDisplayString.replace(
+							SUB_SELECTION_REGEX,
+							`[${sel}]`
+						)
 					} else {
-						document.title = `${document.title} [${sel}]`
+						// Ensure prefix is present even if starting as an embedded block
+						const prefix = currentDisplayString.startsWith("DEBUG: ") ? "" : "DEBUG: "
+						currentDisplayString = `${prefix}${currentDisplayString} [${sel}]`
 					}
 				} else {
-					if (log) {
-						console.log(`root selection: ${tr.selection.from} - ${tr.selection.to}`)
-					}
-
+					if (log) console.log(`root selection: ${sel}`)
 					if (!initialized) {
 						initialized = true
-						document.title = sel
+						currentDisplayString = `DEBUG: ${sel}`
 					} else {
-						document.title = document.title.replace(
+						currentDisplayString = currentDisplayString.replace(
 							ROOT_SELECTION_REGEX,
-							`${sel} $2`
+							`DEBUG: ${sel} $2`
 						)
 					}
-				}
+				} const widget = document.createElement("div")
+				Object.assign(widget.style, {
+					position: "absolute",
+					top: "110%",
+					right: "0",
+					zIndex: "100",
+					padding: "2px 6px",
+					fontSize: "10px",
+					fontFamily: "monospace",
+					color: "white",
+					backgroundColor: "rgba(0, 0, 0, 0.7)",
+					borderRadius: "2px",
+					pointerEvents: "none",
+					whiteSpace: "nowrap",
+					lineHeight: "1"
+				})
+				widget.textContent = currentDisplayString
+
+				const deco = Decoration.widget(tr.selection.to, widget, {
+					side: -1, // Ensure it stays to the left of the cursor
+					key: "debug-selection-tooltip"
+				})
+
+				return DecorationSet.create(tr.doc, [deco])
+			}
+		},
+		props: {
+			decorations(state) {
+				return debugSelectionPluginKey.getState(state)
 			}
 		}
 	})

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

@@ -23,7 +23,6 @@
 		ref="codeBlockLangPickerEl"
 	>
 		<!-- and here we only style everything but the suggestions so the input matches the code block background -->
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			:border="false"
 			wrapper-class="lang-picker-input flex-nowrap z-10"

package/src/runtime/pm/features/Collaboration/createCollaborationPlugins.ts

@@ -7,7 +7,6 @@ import {
 	yUndoPluginKey,
 	yXmlFragmentToProsemirrorJSON
 } from "@tiptap/y-tiptap"
-import type { Doc } from "yjs"
 
 /**
  * Copied from tiptap's collaboration extension with a few minor changes to make it work with our document api.
@@ -30,7 +29,11 @@ export function createCollaborationPlugins(
 	}
 	const fragment = options.fragment
 		? options.fragment
-		: (options.document as Doc).getXmlFragment(options.field)
+		: options.document?.getXmlFragment(options.field)
+
+	if (!fragment) {
+		throw new Error("No fragment or document provided.")
+	}
 
 	// Quick fix until there is an official implementation (thanks to @hamflx).
 	// See https://github.com/yjs/y-prosemirror/issues/114 and https://github.com/yjs/y-prosemirror/issues/102

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

@@ -50,7 +50,11 @@ export function useEditorContent(
 
 	async function load(changed: boolean): Promise<void> {
 		if (content.value) {
-			editor.value?.commands.setContent(content.value)
+			if (!editor.value) {
+				recreate(options => ({ ...options, content: content.value }))
+			} else {
+				editor.value?.commands.setContent(content.value)
+			}
 		} else if (documentApi) {
 			if (changed && id.value) {
 				await documentApi.load({ docId: id.value })
@@ -93,7 +97,7 @@ export function useEditorContent(
 		if (oldId !== undefined && newId !== oldId && documentApi) {
 			unload(oldId)
 			await load(true)
-		} else if (_newContent) {
+		} else if (_newContent !== _oldContent && _newContent) {
 			await load(false)
 		}
 	}, { deep: false })

package/src/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -4,7 +4,6 @@
 	ref="el"
 >
 	<div class="flex flex-col gap-1">
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="text-input"
 			wrapper-class="flex flex-nowrap gap-1"
@@ -24,7 +23,6 @@
 				</WLabel>
 			</template>
 		</WSimpleInput>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="link-input"
 			wrapper-class="flex flex-nowrap gap-1"

package/src/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -15,7 +15,6 @@
 		>
 			<i-ic-round-link class="w-[1.25em] !h-auto"/>
 		</WLabel>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			id="menu-link-input"
 			class="link-input"

package/src/runtime/pm/utils/generator/createPsuedoSentence.ts

@@ -1,6 +1,6 @@
 import { faker } from "@faker-js/faker"
 
-export function createPsuedoSentence({ min = 0, max = 10}: { min?: number, max?: number } = {}) {
+export function createPsuedoSentence({ min = 0, max = 10 }: { min?: number, max?: number } = {}) {
 	// sentence generated with string.sample (which contains all possible chars) instead of lorem.sentence
 	const sentenceLength = faker.number.int({ min, max })
 	const sentence = Array.from(