@witchcraft/editor 0.0.1

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

@@ -0,0 +1,295 @@
+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
+}
+
+/**
+ * This extension allows you to collaborate with others in real-time.
+ *
+ * @see https://tiptap.dev/api/extensions/collaboration
+ */
+// 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")
+		}
+	},
+
+	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\"."
+			)
+		}
+	},
+
+	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)
+	}
+})

package/src/runtime/pm/features/CommandsMenus/CommandBar.ts

@@ -0,0 +1,130 @@
+import { type Command, Extension } from "@tiptap/core"
+import { NodeSelection, Plugin } from "@tiptap/pm/state"
+
+import { defaultCommandBarMenuItems } from "./commandBarMenuItems.js"
+import { type CommandBarExtensionOptions, commandBarMenuPluginKey, type CommandBarMenuState } from "./types.js"
+import { findCommand } from "./utils/findCommand.js"
+
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		commandBar: {
+			/**
+			 * Enables the commandBar.
+			 */
+			enableCommandBar: () => ReturnType
+			/**
+			 * Closes the commandBar.
+			 *
+			 * The commandBar has no close command, it can only be enabled or disabled.
+			 */
+			disableCommandBar: () => ReturnType
+		}
+	}
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const CommandBar = Extension.create<CommandBarExtensionOptions>({
+	name: "commandBar",
+	addOptions() {
+		return {
+			commandBar: defaultCommandBarMenuItems
+		}
+	},
+	addCommands() {
+		return {
+			enableCommandBar: (): Command => ({ tr, dispatch }) => {
+				if (dispatch) {
+					this.options.commandBar.enabled = true
+					tr.setMeta(commandBarMenuPluginKey, { canOpen: true })
+					tr.setMeta("addToHistory", false)
+				}
+				return true
+			},
+			disableCommandBar: (): Command => ({ tr, dispatch }) => {
+				if (dispatch) {
+					this.options.commandBar.enabled = false
+					tr.setMeta(commandBarMenuPluginKey, { canOpen: false })
+					tr.setMeta("addToHistory", false)
+				}
+				return true
+			}
+		}
+	},
+	onCreate() {
+		if ("registerMenu" in this.editor.commands) {
+			this.editor.commands.registerMenu({
+				type: "mark",
+				closeCommand: undefined,
+				name: "commandBar",
+				pluginKey: commandBarMenuPluginKey,
+				canShow: (_state, pluginState) => !!pluginState?.state && !!pluginState?.canOpen
+			})
+		}
+	},
+	addProseMirrorPlugins() {
+		const self = this
+		return [
+			new Plugin<CommandBarMenuState>({
+				key: commandBarMenuPluginKey,
+				state: {
+					init() {
+						return {
+							state: true,
+							canOpen:
+								self.options.commandBar.enabled
+								&& (
+									document.activeElement === self.editor.view.dom
+									|| self.editor.view.dom.contains(document.activeElement)
+								)
+						}
+					},
+					apply: createStateOnlyPluginObjApply(commandBarMenuPluginKey)
+				},
+				props: {
+					handleDOMEvents: {
+						blur() {
+							self.editor.commands.command(({ tr }) => {
+								tr.setMeta("addToHistory", false)
+								tr.setMeta(commandBarMenuPluginKey, { canOpen: false })
+								return true
+							})
+						},
+						focus() {
+							self.editor.commands.command(({ tr }) => {
+								tr.setMeta("addToHistory", false)
+								tr.setMeta(commandBarMenuPluginKey, { canOpen: true })
+								return true
+							})
+						}
+					}
+				},
+				appendTransaction(_trs, oldState, newState) {
+					const wasOpened = commandBarMenuPluginKey.getState(oldState)?.state ?? false
+					const selection = newState.selection
+					const isNodeSelection = selection instanceof NodeSelection
+					if ((!wasOpened && isNodeSelection)) return undefined
+
+					const tr = newState.tr
+
+					const commandBarCanShow = self.options.commandBar.options?.onlyOpenOnSelection === true
+						? !selection.empty
+						: true
+
+					const canShow = findCommand(self.options.commandBar.commands, command => {
+						const res = command.canShow?.(newState)
+						if (res === true || res === undefined) return true
+						return false
+					})
+					tr.setMeta(commandBarMenuPluginKey, {
+						state: !isNodeSelection && commandBarCanShow && canShow
+					})
+					return tr
+				}
+			})
+		]
+	}
+})

package/src/runtime/pm/features/CommandsMenus/commandBarMenuItems.ts

@@ -0,0 +1,209 @@
+import type { EditorState } from "@tiptap/pm/state"
+
+import TextIcon from "./components/TextIcon.vue"
+import HighlightIcon from "./icons/HighlightIcon.vue"
+import SubscriptIcon from "./icons/SubscriptIcon.vue"
+import SuperscriptIcon from "./icons/SuperscriptIcon.vue"
+import type { CommandBarCommand, CommandBarMenu } from "./types.js"
+
+import DashIconsTableColAfter from "~icons/dashicons/table-col-after"
+import DashIconsTableColBefore from "~icons/dashicons/table-col-before"
+import DashIconsTableColDelete from "~icons/dashicons/table-col-delete"
+import DashIconsTableRowAfter from "~icons/dashicons/table-row-after"
+import DashIconsTableRowBefore from "~icons/dashicons/table-row-before"
+import DashIconsTableRowDelete from "~icons/dashicons/table-row-delete"
+
+// import FaSolidBold from "~icons/fa-solid/bold"
+// import FaSolidItalic from "~icons/fa-solid/italic"
+
+export const toggleBoldCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["bold"],
+	title: "Bold",
+	description: "Make the selected text bold.",
+	icon: { props: { class: "font-bold", text: "B" }, component: TextIcon }
+}
+
+export const toggleItalicCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["italic"],
+	title: "Italic",
+	description: "Make the selected text italic.",
+	icon: { props: { class: "italic", text: "I" }, component: TextIcon }
+}
+export const toggleStrikeCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["strike"],
+	title: "Strike",
+	description: "Strike through the selected text.",
+	icon: { props: { style: "text-decoration:line-through;", text: "S" }, component: TextIcon }
+}
+export const toggleUnderlineCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["underline"],
+	title: "Underline",
+	description: "Underline the selected text.",
+	icon: { props: { class: "underline", text: "U" }, component: TextIcon }
+}
+export const toggleCodeCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["code"],
+	title: "Code",
+	description: "Make the selected text code.",
+	icon: { props: { class: "font-bold", text: "</>" }, component: TextIcon }
+}
+
+export const toggleSubscriptCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["subscript"],
+	title: "Subscript",
+	description: "Subscript the selected text.",
+	icon: { component: SubscriptIcon }
+}
+
+export const toggleSuperscriptCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "toggleMark" as const,
+	args: ["superscript"],
+	title: "Superscript",
+	description: "Superscript the selected text.",
+	icon: { component: SuperscriptIcon }
+}
+
+export const tableCanShow = (state: EditorState): boolean => state.selection.$from.node(-1).type.name === "tableCell"
+	&& state.selection.$to.node(-1).type.name === "tableCell"
+
+export const tableAddColBeforeCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "addColumnBefore" as const,
+	title: "Add column before.",
+	description: "Add a column before the selected column.",
+	icon: { component: DashIconsTableColBefore },
+	canShow: tableCanShow
+}
+
+export const tableAddColAfterCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "addColumnAfter" as const,
+	title: "Add column after.",
+	description: "Add a column after the selected column.",
+	icon: { component: DashIconsTableColAfter },
+	canShow: tableCanShow
+}
+
+export const tableAddRowBeforeCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "addRowBefore" as const,
+	title: "Add row before.",
+	description: "Add a row before the selected row.",
+	icon: { component: DashIconsTableRowBefore },
+	canShow: tableCanShow
+}
+
+export const tableAddRowAfterCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "addRowAfter" as const,
+	title: "Add row after.",
+	description: "Add a row after the selected row.",
+	icon: { component: DashIconsTableRowAfter },
+	canShow: tableCanShow
+}
+export const tableDeleteRowCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "deleteRow" as const,
+	title: "Delete row.",
+	description: "Delete the selected row.",
+	icon: { component: DashIconsTableRowDelete },
+	canShow: tableCanShow
+}
+
+export const tableDeleteColCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "deleteColumn" as const,
+	title: "Delete column.",
+	description: "Delete the selected column.",
+	icon: { component: DashIconsTableColDelete },
+	canShow: tableCanShow
+}
+
+export function createToggleHighlightCommand(slotCount: number, prefix = "slot"): CommandBarCommand[] {
+	return [...Array(slotCount).keys()].map(i => {
+		const command: CommandBarCommand = {
+			type: "command" as const,
+			command: "toggleHighlight" as const,
+			title: `Highlight Slot ${i + 1}`,
+			description: `Highlight the selected text with color slot ${i + 1}.`,
+			icon: { component: HighlightIcon, props: { colorSlot: prefix + (i + 1) } },
+			args: [prefix + (i + 1)]
+		}
+		return command
+	})
+}
+export const toggleHighlightsCommands = createToggleHighlightCommand(5)
+
+export const unsetHighlightCommand: CommandBarCommand = {
+	type: "command" as const,
+	command: "unsetHighlight" as const,
+	title: "Unset Highlight",
+	description: "Unset the highlight mark.",
+	icon: { component: HighlightIcon, props: { colorSlot: undefined } },
+	args: []
+}
+
+export const defaultCommandBarMenuItems: CommandBarMenu = {
+	enabled: true,
+	options: {
+		onlyOpenOnSelection: true
+	},
+	commands: [
+		{
+			type: "group" as const,
+			groupType: "inline" as const,
+			title: "Basic",
+			variations: [
+				toggleBoldCommand,
+				toggleItalicCommand,
+				toggleStrikeCommand,
+				toggleUnderlineCommand,
+				toggleCodeCommand
+			]
+		},
+		{
+			type: "group" as const,
+			groupType: "inline" as const,
+			title: "Highlight",
+			variations: [
+				...toggleHighlightsCommands,
+				unsetHighlightCommand
+			]
+		},
+		{
+			type: "group" as const,
+			groupType: "inline" as const,
+			title: "Sub/Sup",
+			variations: [
+				toggleSubscriptCommand,
+				toggleSuperscriptCommand
+			]
+		},
+		{
+			type: "group" as const,
+			groupType: "inline" as const,
+			title: "Table",
+			variations: [
+				tableAddColBeforeCommand,
+				tableAddColAfterCommand,
+				tableAddRowBeforeCommand,
+				tableAddRowAfterCommand,
+				tableDeleteRowCommand,
+				tableDeleteColCommand
+			]
+		}
+	]
+}

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

@@ -0,0 +1,63 @@
+<template>
+<div
+	class="
+	rounded-sm
+	border-neutral-300
+	dark:border-neutral-700
+	border
+	bg-neutral-50
+	dark:bg-neutral-950
+	p-1
+	flex
+	[&>div]:px-1
+	[&>div:last-of-type]:pr-0
+	[&>div]:border-neutral-300
+	[&>div]:dark:border-neutral-700
+	[&>div]:border-r
+	[&>div:last-of-type]:border-r-0
+"
+>
+	<template
+		v-for="item in commands"
+		:key="item.title"
+	>
+		<div
+			v-if="item.type === 'command'"
+		>
+			<CommandBarItem
+				v-if="item.canShow === undefined || item.canShow(editor.state)"
+				:editor="editor"
+				:item="item"
+			/>
+			<!-- @close="emit('close')" -->
+		</div>
+		<div
+			v-else-if="item.type === 'group' && item.variations.some(subItem => subItem.canShow === undefined || subItem.canShow(editor.state))"
+			class="
+				flex
+				gap-1
+			"
+		>
+			<CommandBarItem
+				:item="subItem"
+				:editor="editor"
+				v-for="subItem in item.variations"
+				:key="subItem.title"
+			/>
+		</div>
+	</template>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from "@tiptap/core"
+
+import CommandBarItem from "./CommandBarItem.vue"
+
+import type { CommandBarCommand, CommandBarGroup } from "../types"
+
+/* const props =  */defineProps<{
+	editor: Editor
+	commands: (CommandBarCommand | CommandBarGroup)[]
+}>()
+</script>