@witchcraft/editor 0.1.1 → 0.2.1

package/src/runtime/components/EditorDemoApp.vue

@@ -10,7 +10,9 @@
 	<EditorDemoControls
 		:code-blocks-theme-list="codeBlocksThemeList"
 		v-model:code-blocks-theme="codeBlocksTheme"
+		v-model:use-two-editors="useTwoEditors"
 	/>
+
 	<Editor
 		class="
 			max-w-[700px]
@@ -34,6 +36,30 @@
 			menus
 		}"
 	/>
+	<Editor
+		v-if="useTwoEditors"
+		class="
+			max-w-[700px]
+			flex-1
+			flex
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-sm
+			min-h-0
+		"
+		v-bind="{
+			codeBlocksThemeIsDark,
+			cssVariables: {
+				pmCodeBlockBgColor: codeBlocksThemeBgColor
+			},
+			docId,
+			documentApi,
+			linkOptions,
+			editorOptions,
+			menus
+		}"
+	/>
 </WRoot>
 </template>
 
@@ -41,6 +67,7 @@
 // all imports must be explicit so this also works without nuxt
 import type { EditorOptions } from "@tiptap/core"
 import WRoot from "@witchcraft/ui/components/LibRoot"
+import { useRoute } from "nuxt/app"
 import { reactive, ref, shallowRef } from "vue"
 
 import Editor from "./Editor.vue"
@@ -110,9 +137,13 @@ const menus = shallowRef<Record<string, MenuRenderInfo>>({
 	}
 })
 
+const useYjs = useRoute().query.useYjs as string
+const useTwoEditors = ref(false)
+
 const { documentApi } = useTestDocumentApi(
 	editorOptions as any,
-	testDocuments
+	testDocuments,
+	{ useCollab: useYjs === "true" }
 )
 const docId = ref("root")
 </script>

package/src/runtime/components/EditorDemoControls.vue

@@ -1,33 +1,74 @@
 <template>
 <div
 	class="
+		max-w-[700px]
 		w-full
 		flex
-		items-stretch
+		flex-col
+		items-center
 		justify-center
 		gap-2
-		[&>*]:rounded-sm
+	"
+>
+	<div
+		class="
+			flex
+			gap-4
+			items-center
+			justify-center
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-md
+			p-2
+		"
+	>
+		<!-- external is to force a reload, otherwise the editors won't work because of how they're setup for the demo (document api is created here and would need to be recreated with the route changes) -->
+		<NuxtLink
+			v-if="useYjs !== undefined"
+			:to="{ path: '/', query: { } }"
+			:external="true"
+		>Go to Non-Yjs Example</NuxtLink>
+		<NuxtLink
+			v-else
+			:to="{ path: '/', query: { useYjs: 'true' } }"
+			:external="true"
+		>Go to Yjs Example </NuxtLink>
+		<WCheckbox v-model="useTwoEditors">
+			Use Two Editors (same document)
+		</WCheckbox>
+	</div>
+	<div
+		class="
+		flex
+		justify-center
+		items-center
+		gap-2
+		[&>*]:rounded-md
 		[&>*]:p-2
 		[&>*]:border
 		[&>*]:border-neutral-300
 		[&>*]:dark:border-neutral-700
+
 	"
->
-	<div class="flex items-center gap-2">
-		<span>
-			Global Theme:
-		</span>
-		<WDarkModeSwitcher/>
+	>
+		<div class="flex items-center gap-2">
+			<span>
+				Global Theme:
+			</span>
+			<WDarkModeSwitcher/>
+		</div>
+		<CodeBlockThemePicker
+			:code-blocks-theme-list="codeBlocksThemeList"
+			v-model:code-blocks-theme="codeBlocksTheme"
+		/>
 	</div>
-	<CodeBlockThemePicker
-		:code-blocks-theme-list="codeBlocksThemeList"
-		v-model:code-blocks-theme="codeBlocksTheme"
-	/>
 </div>
 </template>
 
 <script setup lang="ts">
 import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+import { useRoute } from "nuxt/app"
 
 import CodeBlockThemePicker from "./CodeBlockThemePicker.vue"
 
@@ -35,4 +76,8 @@ defineProps<{
 	codeBlocksThemeList: string[]
 }>()
 const codeBlocksTheme = defineModel<string>("codeBlocksTheme", { required: true })
+
+const useTwoEditors = defineModel<boolean>("useTwoEditors", { required: true })
+
+const useYjs = useRoute().query.useYjs as string
 </script>

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/Collaboration.ts

@@ -1,295 +1,28 @@
-import { type Editor, Extension } from "@tiptap/core"
-import { Plugin, PluginKey } from "@tiptap/pm/state"
-import type { EditorView } from "@tiptap/pm/view"
-import {
-	redo,
-	undo,
-	type UndoPluginState,
-	ySyncPlugin,
-	yUndoPlugin,
-	yUndoPluginKey,
-	yXmlFragmentToProseMirrorRootNode } from "y-prosemirror"
-import * as Y from "yjs"
-
-const ySyncFilterPluginKey = new PluginKey("ySyncFilter")
-// eslint-disable-next-line @typescript-eslint/naming-convention
-type YSyncOpts = Parameters<typeof ySyncPlugin>[1]
-// eslint-disable-next-line @typescript-eslint/naming-convention
-type YUndoOpts = Parameters<typeof yUndoPlugin>[0]
-
-declare module "@tiptap/core" {
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	interface Commands<ReturnType> {
-		collaboration: {
-			/** Sets the fragment to use for the collaboration extension. */
-			setFragment: (
-				fragment: Y.XmlFragment | undefined,
-				options?: { register?: boolean, unregister?: boolean }
-			) => ReturnType
-			/** Enables or disables collaboration. */
-			enableCollaboration: (enable: boolean) => ReturnType
-			/**
-			 * Undo recent changes
-			 *
-			 * @example editor.commands.undo()
-			 */
-			undo: () => ReturnType
-			/**
-			 * Reapply reverted changes
-			 *
-			 * @example editor.commands.redo()
-			 */
-			redo: () => ReturnType
-		}
-	}
-}
-
-export interface CollaborationStorage {
-	/**
-	 * Whether collaboration is currently disabled.
-	 * Disabling collaboration will prevent any changes from being synced with other users.
-	 */
-	isDisabled: boolean
-}
-
-export interface CollaborationOptions {
-
-	/**
-	 * A raw Y.js fragment, can be used instead of `document` and `field`.
-	 *
-	 * @example new Y.Doc().getXmlFragment('body')
-	 */
-	fragment?: Y.XmlFragment | null
-
-	/**
-	 * Fired when the content from Yjs is initially rendered to Tiptap.
-	 */
-	onFirstRender?: () => void
-
-	/**
-	 * Options for the Yjs sync plugin.
-	 */
-	ySyncOptions?: YSyncOpts
-
-	/**
-	 * Options for the Yjs undo plugin.
-	 */
-	yUndoOptions?: YUndoOpts
-	/** @internal */
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	_destroySyncPlugin?: () => void
-}
-type CollabInstance = {
-	editor: Editor
-	options: CollaborationOptions
-	storage: CollaborationStorage
-}
-type ExtendedUndoManager = UndoPluginState["undoManager"] & {
-	restore?: () => void
-}
-
-function createUndoPlugin(self: CollabInstance): Plugin { // 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
-	const yUndoPluginInstance = yUndoPlugin(self.options.yUndoOptions)
-	const originalUndoPluginView = yUndoPluginInstance.spec.view
-
-	yUndoPluginInstance.spec.view = (view: EditorView) => {
-		const { undoManager } = yUndoPluginKey.getState(view.state) as UndoPluginState & { undoManager: ExtendedUndoManager }
-
-		if (undoManager.restore) {
-			undoManager.restore()
-			undoManager.restore = () => {
-				// noop
-			}
-		}
-
-		const viewRet = originalUndoPluginView ? originalUndoPluginView(view) : undefined
-
-		return {
-			destroy: () => {
-				const hasUndoManSelf = undoManager.trackedOrigins.has(undoManager)
-
-				const observers = undoManager._observers
-
-				undoManager.restore = () => {
-					if (hasUndoManSelf) {
-						undoManager.trackedOrigins.add(undoManager)
-					}
-
-					undoManager.doc.on("afterTransaction", undoManager.afterTransactionHandler)
-
-					undoManager._observers = observers
-				}
-
-				if (viewRet?.destroy) {
-					viewRet.destroy()
-				}
-			}
-		}
-	}
-	return yUndoPluginInstance
-}
-function createSyncPlugin(
-	self: CollabInstance
-): { plugin: Plugin, destroy: () => void } {
-	const fragment = self.options.fragment
-	if (!fragment) {
-		throw new Error("Collaboration requires a fragment.")
-	}
-	const plugin = ySyncPlugin(fragment, {
-		...self.options.ySyncOptions,
-		onFirstRender: self.options.onFirstRender
-	})
-
-	let off: (() => void) | undefined
-	function destroy(): void {
-		off?.()
-		// delete self.editor.state[ySyncPluginKey.key]
-	}
-	if (self.editor.options.enableContentCheck) {
-		const onBeforeTransaction = (): false | undefined => {
-			try {
-				yXmlFragmentToProseMirrorRootNode(fragment, self.editor.schema).check()
-			} catch (error) {
-				self.editor.emit("contentError", {
-					error: error as Error,
-					editor: self.editor,
-					disableCollaboration: () => {
-						fragment.doc?.destroy()
-						self.storage.isDisabled = true
-					}
-				})
-				// If the content is invalid, return false to prevent the transaction from being applied
-				return false
-			}
-			return undefined
-		}
-		fragment.doc?.on("beforeTransaction", onBeforeTransaction)
-		off = () => {
-			fragment.doc?.off("beforeTransaction", onBeforeTransaction)
-		}
-	}
-	return { plugin, destroy }
-}
-
-function createSyncFilterPlugin(
-	self: CollabInstance
-): Plugin | undefined {
-	if (!self.editor.options.enableContentCheck) return
-	const fragment = self.options.fragment
-	if (!fragment) {
-		throw new Error("Collaboration requires a fragment.")
-	}
-	return new Plugin({
-		key: ySyncFilterPluginKey,
-		filterTransaction: () => {
-			// When collaboration is disabled, prevent any sync transactions from being applied
-			if (self.storage.isDisabled) {
-				// Destroy the Yjs document to prevent any further sync transactions
-				fragment.doc?.destroy()
-
-				return true
-			}
-
-			return true
-		}
-	})
-}
-
-function createPlugins(self: CollabInstance): Plugin[] {
-	const { plugin: syncPlugin, destroy: destroySyncPlugin } = createSyncPlugin(self)
-	self.options._destroySyncPlugin = destroySyncPlugin
-	const filterPlugin = createSyncFilterPlugin(self)
-	const plugins = [
-		syncPlugin,
-		createUndoPlugin(self)
-	]
-	if (filterPlugin) {
-		plugins.push(filterPlugin)
-	}
-	return plugins
-}
+import BaseCollaboration, { type CollaborationOptions } from "@tiptap/extension-collaboration"
 
 /**
- * This extension allows you to collaborate with others in real-time.
+ * Extension of the base collaboration extension without prosemirror plugins or storage.
+ *
+ * We can't use tiptap's collaboration extension (or any extension that creates the sync plugin) because it expects to be configured with the document's ydoc per editor.
+ *
+ * This doesn't mesh well with how the document api works (see {@link DocumentApi}).
+ *
+ * Instead we let the extension register anything it wants (shortcuts, commands, etc) except the plugins and storage. This way it can just be added to the list of editor extensions normally.
+ *
+ * Then there is a seperate function to actually create the plugins:
+ *
+ * {@link createCollaborationPlugins} creates the plugins **per doc** and can be used from your document api without an editor instance. See {@link useTestDocumentApi} for an example.
  *
- * @see https://tiptap.dev/api/extensions/collaboration
+ * It's also where the `enableContentCheck` option should be set if you need it. It's IGNORED if passed to the extension.
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const Collaboration = Extension.create<CollaborationOptions, CollaborationStorage>({
-	name: "collaboration",
-
-	priority: 1000,
-
-	addOptions() {
-		return {
-			document: null,
-			field: "default",
-			fragment: new Y.Doc().getXmlFragment("prosemirror")
-		}
-	},
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Collaboration = BaseCollaboration.extend<Omit<CollaborationOptions, "document" | "field" | "fragment">, Record<string, never>>({
 	addStorage() {
-		return {
-			isDisabled: false
-		}
-	},
-
-	onCreate() {
-		if (this.editor.extensionManager.extensions.find(extension => extension.name === "history")) {
-			// eslint-disable-next-line no-console
-			console.warn(
-				"[tiptap warn]: \"@tiptap/extension-collaboration\" comes with its own history support and is not compatible with \"@tiptap/extension-history\"."
-			)
-		}
+		return {}
 	},
-
-	addCommands() {
-		// const self = this
-		return {
-			enableCollaboration: (enable: boolean) => () => {
-				this.storage.isDisabled = !enable
-				return true
-			},
-			undo: () => ({ tr, state, dispatch }) => {
-				tr.setMeta("preventDispatch", true)
-
-				const undoManager = yUndoPluginKey.getState(state)!.undoManager as ExtendedUndoManager
-
-				if (undoManager.undoStack.length === 0) {
-					return false
-				}
-
-				if (!dispatch) {
-					return true
-				}
-
-				return undo(state)
-			},
-			redo: () => ({ tr, state, dispatch }) => {
-				tr.setMeta("preventDispatch", true)
-
-				const undoManager = yUndoPluginKey.getState(state)!.undoManager as ExtendedUndoManager
-
-				if (undoManager.redoStack.length === 0) {
-					return false
-				}
-
-				if (!dispatch) {
-					return true
-				}
-
-				return redo(state)
-			}
-
-		}
-	},
-	onDestroy() {
-		this.options._destroySyncPlugin?.()
-	},
-
-	addProseMirrorPlugins(): Plugin[] {
-		const self = this
-		return createPlugins(self)
+	addProseMirrorPlugins() {
+		return []
 	}
 })
+