@witchcraft/editor 0.0.1

package/src/runtime/demo/App.vue

@@ -0,0 +1,114 @@
+<template>
+<WRoot class="items-center py-4">
+	<!-- @vue-expect-error use unhead in a real app -->
+	<style>
+		{{ codeBlocksThemeCss.join("\n") }}
+	</style>
+	<DemoControls
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+		@blur="blur"
+	/>
+	<Editor
+		class="max-w-[700px] flex-1 max-h-[700px] flex"
+		v-bind="{
+			codeBlocksThemeIsDark,
+			cssVariables: {
+				pmCodeBlockBgColor: codeBlocksThemeBgColor
+			},
+			docId,
+			documentApi,
+			linkOptions,
+			editorOptions,
+			menus
+		}"
+	/>
+	<div class="py-[50px]"/>
+</WRoot>
+</template>
+
+<script setup lang="ts">
+import type { EditorOptions } from "@tiptap/core"
+import WRoot from "@witchcraft/ui/components/LibRoot"
+import { nextTick, reactive, ref, shallowRef } from "vue"
+
+import Editor from "../components/Editor.vue"
+import DemoControls from "../components/EditorDemoControls.vue"
+import { useHighlightJsTheme } from "../pm/features/CodeBlock/composables/useHighlightJsTheme.js"
+import { defaultCommandBarMenuItems } from "../pm/features/CommandsMenus/commandBarMenuItems"
+import CommandBar from "../pm/features/CommandsMenus/components/CommandBar.vue"
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js"
+import BubbleMenuLink from "../pm/features/Link/components/BubbleMenuLink.vue"
+import type { EditorLinkOptions } from "../pm/features/Link/types.js"
+import type { MenuRenderInfo } from "../pm/features/Menus/types"
+import { testExtensions } from "../pm/testSchema.js"
+import { testDocuments } from "../testDocuments"
+
+const {
+	theme: codeBlocksTheme,
+	knownThemes: codeBlocksThemeList,
+	themeCss: codeBlocksThemeCss,
+	isDark: codeBlocksThemeIsDark,
+	backgroundColor: codeBlocksThemeBgColor
+} = useHighlightJsTheme()
+
+function blur(): void {
+	const was = codeBlocksTheme.value
+	codeBlocksTheme.value = ""
+	nextTick(() => {
+		codeBlocksTheme.value = was
+	})
+}
+
+const editorOptions: Partial<EditorOptions> = {
+	extensions: testExtensions as any
+}
+
+const linkOptions: EditorLinkOptions = {
+	openInternal: href => {
+		window.alert(`This would open an internal link to ${href}.`)
+
+		// eslint-disable-next-line no-console
+		console.log(`Would open internal link to ${href}.`)
+	}
+}
+const fakeSuggestions = reactive<string[]>(["some", "suggestions"])
+
+const menus = shallowRef<Record<string, MenuRenderInfo>>({
+	linkMenu: {
+		component: BubbleMenuLink,
+		props: editor => ({
+			editor,
+			linkSuggestions: fakeSuggestions,
+			getInternalLinkHref(href: string) {
+				return `internal://${href.replace(/[^\w-]/g, "")}`
+			}
+		})
+	},
+	commandBar: {
+		component: CommandBar,
+		props: editor => ({
+			editor,
+			commands: defaultCommandBarMenuItems.commands
+		}),
+		popupOptions: {
+			pinToItemDistance: state => {
+				const { $from, $to } = state.selection
+				const fromNode = $from.node(-1)
+				const toNode = $to.node(-1)
+				// tables don't support selections outside of each cell, so no need to check we're in the same table or anything
+				if (fromNode.type !== toNode.type) {
+					return 0
+				}
+				return (fromNode.type.name.startsWith("table")) ? 120 : 0
+			}
+		}
+	}
+})
+
+const { documentApi } = useTestDocumentApi(
+	editorOptions as any,
+	testDocuments
+)
+const docId = ref("root")
+</script>

package/src/runtime/demo/README.md

@@ -0,0 +1 @@
+This is structured like this so we can check the demo is both buildable from nuxt and vite.

package/src/runtime/demo/main.ts

@@ -0,0 +1,8 @@
+import "./tailwind.css"
+
+import { createApp } from "vue"
+
+import App from "../components/EditorDemoApp.vue"
+
+createApp(App)
+	.mount("#app")

package/src/runtime/demo/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss" source("../");
+
+@import "../../../playground/.nuxt/witchcraft-ui.css";
+@import "../../../playground/.nuxt/witchcraft-editor.css";

package/src/runtime/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="@witchcraft/ui" />

package/src/runtime/injectionKeys.ts

@@ -0,0 +1,10 @@
+import type { useScrollNearContainerEdges } from "@witchcraft/ui/composables/useScrollNearContainerEdges"
+import type { ComputedRef, InjectionKey } from "vue"
+
+import type { CssVariables } from "./types/index.js"
+
+export const editorCssVariablesInjectionKey = Symbol("editorCssVariablesInjectionKey") as InjectionKey<ComputedRef<CssVariables>>
+
+export const editorScrollInjectionKey = Symbol("editorScrollInjectionKey") as InjectionKey<ReturnType<typeof useScrollNearContainerEdges>>
+
+export const editorTeleportToInjectionKey = Symbol("editorTeleportToInjectionKey") as InjectionKey<string>

package/src/runtime/main.lib.ts

@@ -0,0 +1,2 @@
+export * from "./types/index.js"
+export { default as Editor } from "./components/Editor.vue"

package/src/runtime/pm/commands/backspace.ts

@@ -0,0 +1,44 @@
+import type { Command } from "@tiptap/core"
+import { Selection, TextSelection } from "@tiptap/pm/state"
+
+import { redirectFromEmbedded } from "../features/EmbeddedDocument/utils/redirectFromEmbedded.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		backspace: {
+			/**
+			 * @redirectable
+			 */
+			backspace: () => ReturnType
+		}
+	}
+}
+
+export const backspace = () =>
+	(): Command =>
+		({ state, tr, commands, dispatch, view }): any => {
+			const { from, to, $from } = state.selection.map(tr.doc, tr.mapping)
+
+			if (from === to) {
+				const redirect = redirectFromEmbedded(view, "backspace", { args: [], view, commands })
+				if (redirect.redirected) { return redirect.result }
+				// we're at the start of a block and must "joinBackwards"
+				if ($from.start() === from) {
+					const endsEqual = $from.end() === $from.start()
+					const newFrom = Selection.findFrom(state.doc.resolve(from - 1), -1, true)
+					if (!newFrom) return false
+					if (dispatch) {
+						tr.delete(newFrom.from, to + (endsEqual ? 2 : 0))
+						tr.setSelection(new TextSelection(tr.doc.resolve(newFrom.from)))
+					}
+					return true
+				} else {
+					if (dispatch) tr.delete(from - 1, to)
+					return true
+				}
+			} else {
+				return commands.deleteSelection()
+			}
+		}

package/src/runtime/pm/commands/changeAttrs.ts

@@ -0,0 +1,37 @@
+import type { Command } from "@tiptap/core"
+
+import { nodesBetween } from "../utils/nodesBetween.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		changeAttrs: {
+			changeAttrs: (
+				nodeType: string | undefined,
+				attrs: Record<string, unknown>,
+			) => ReturnType
+		}
+	}
+}
+
+export const changeAttrs
+	= () =>
+		(
+			nodeType: string | undefined,
+			attrs: Record<string, unknown>
+		): Command =>
+			({ state, tr, dispatch }) => {
+				let changed = false
+				nodesBetween(tr.doc, state.selection.map(tr.doc, tr.mapping), (node, pos) => {
+					if (node?.type?.name === nodeType) {
+						changed = true
+						if (dispatch) {
+							tr.setNodeMarkup(pos, undefined, attrs)
+						}
+					}
+					return true
+				})
+				if (!changed) return false
+				return true
+			}

package/src/runtime/pm/commands/deleteSelection.ts

@@ -0,0 +1,22 @@
+import type { Command } from "@tiptap/core"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		deleteSelection: {
+			deleteSelection: () => ReturnType
+		}
+	}
+}
+
+export const deleteSelection = () =>
+	(): Command =>
+		({ state, tr, dispatch }) => {
+			const { from, to } = state.selection.map(tr.doc, tr.mapping)
+			if (from !== to) {
+				if (dispatch) tr.delete(from, to)
+				return true
+			}
+			return false
+		}

package/src/runtime/pm/commands/enter.ts

@@ -0,0 +1,27 @@
+import type { Command } from "@tiptap/core"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		customEnter: {
+			/**
+			 * Overrides tiptap's enter command.
+			 *
+			 * @redirectable
+			 */
+			enter: (pos?: number) => ReturnType
+		}
+	}
+}
+
+export const enter = () => (pos?: number): Command =>
+	({ commands }) => commands.first(({ commands }) => [
+		// incase the command isn't registered
+		() => commands?.blockquoteEnter(pos),
+		// incase the command isn't registered
+		() => commands?.codeBlockEnterOrSplit(pos),
+		() => commands?.tableEnter(pos),
+		() => commands.splitItem(pos),
+		() => commands.insertBreak(pos)
+	])

package/src/runtime/pm/commands/insertBreak.ts

@@ -0,0 +1,40 @@
+import { type Command, getNodeType } from "@tiptap/core"
+import { TextSelection } from "@tiptap/pm/state"
+
+declare module "@tiptap/core" {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		insertBreak: {
+			insertBreak: (pos?: number) => ReturnType
+		}
+	}
+}
+
+export const insertBreak = (
+	codeBlockType: string = "codeBlock",
+	disallowedTypesOrNames: string[] = ["blockquote"]
+) => (pos?: number): Command =>
+	({ state, commands, tr, dispatch }) => {
+		const { $from, $to } = state.selection.map(tr.doc, tr.mapping)
+
+		if ($from.parent.type.name === codeBlockType || $to.parent.type.name === codeBlockType) {
+			// enter functions normally
+			return commands.codeBlockEnterOrSplit(pos)
+		}
+		const disallowedTypes = disallowedTypesOrNames.map(type => getNodeType(type, state.schema))
+
+		if (disallowedTypes.some(type => $from.node(-1)?.type === type || $to.node(-1)?.type === type)) {
+			return false
+		}
+
+		if (dispatch) {
+			if (pos !== undefined) {
+				tr.setSelection(TextSelection.create(tr.doc, pos))
+			}
+			commands.setHardBreak()
+			if (pos !== undefined) {
+				tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(pos)))
+			}
+		}
+		return true
+	}

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

@@ -0,0 +1,39 @@
+import { Extension } from "@tiptap/core"
+
+import { deleteNodes } from "./commands/deleteNodes.js"
+import { setCursorVisible } from "./commands/setCursorVisible.js"
+import { debugSelectionPlugin } from "./plugins/debugSelectionPlugin.js"
+import { isCursorVisiblePlugin } from "./plugins/isCursorVisiblePlugin.js"
+import { isUsingTouchPlugin } from "./plugins/isUsingTouchPlugin.js"
+import { unfocusedSelectionIndicatorPlugin } from "./plugins/unfocusedSelectionIndicatorPlugin.js"
+import type { BaseExtensionOptions } from "./types.js"
+
+import { backspace } from "../../commands/backspace.js"
+import { changeAttrs } from "../../commands/changeAttrs.js"
+import { enter } from "../../commands/enter.js"
+import { insertBreak } from "../../commands/insertBreak.js"
+
+/** Adds some basic commands and plugins to the editor. */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Base = Extension.create<BaseExtensionOptions>({
+	name: "Base",
+	addProseMirrorPlugins() {
+		return [
+			debugSelectionPlugin(this.editor),
+			unfocusedSelectionIndicatorPlugin(),
+			isUsingTouchPlugin(),
+			isCursorVisiblePlugin()
+		]
+	},
+	addCommands() {
+		return {
+			enter: enter(),
+			deleteNodes: deleteNodes(),
+			insertBreak: insertBreak("codeBlock"),
+			backspace: backspace(),
+			changeAttrs: changeAttrs(),
+			setCursorVisible: setCursorVisible()
+		}
+	}
+})

package/src/runtime/pm/features/Base/commands/deleteNodes.ts

@@ -0,0 +1,54 @@
+import { type Command, getNodeType } from "@tiptap/core"
+import type { NodeType } from "@tiptap/pm/model"
+import { TextSelection } from "@tiptap/pm/state"
+
+import { findUpwards } from "../../../utils/findUpwards.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		deleteNodes: {
+			deleteNodes: (
+				type: NodeType | string,
+				pos?: number | undefined
+
+			) => ReturnType
+		}
+	}
+}
+
+export const deleteNodes = () =>
+	(
+		type: NodeType | string,
+		pos?: number | undefined
+	): Command =>
+		({ state, tr, dispatch }) => {
+			const nodeType = getNodeType(type, state.schema)
+			if (pos !== undefined) {
+				const $pos = tr.doc.resolve(pos)
+
+				const $wantedPos = findUpwards(tr.doc, pos, $pos => $pos.node().type === nodeType).$pos
+
+				if (!$wantedPos) return false
+				const depth = $wantedPos.depth - ($wantedPos.node(-1).childCount === 1 ? 1 : 0)
+				if (dispatch) {
+					const beforePos = $pos.before(depth)
+					tr.delete(beforePos, $pos.after(depth))
+				}
+			} else {
+				const { $from, $to, from } = state.selection.map(tr.doc, tr.mapping)
+				const $wantedFrom = findUpwards(tr.doc, from, $pos => $pos.node().type === nodeType).$pos
+				const $wantedTo = findUpwards(tr.doc, from, $pos => $pos.node().type === nodeType).$pos
+				if (!$wantedFrom || !$wantedTo) return false
+				const startDepth = $wantedFrom.depth - ($wantedFrom?.node(-1).childCount === 1 ? 1 : 0)
+				const endDepth = $wantedTo.depth - ($wantedTo?.node(-1).childCount === 1 ? 1 : 0)
+				if (dispatch) {
+					tr.delete($from.before(startDepth), $to.after(endDepth))
+					// move cursor to previous node
+					const newCursor = tr.mapping.map(from) - 1
+					tr.setSelection(TextSelection.near(tr.doc.resolve(newCursor), -1))
+				}
+			}
+			return true
+		}

package/src/runtime/pm/features/Base/commands/setCursorVisible.ts

@@ -0,0 +1,24 @@
+import type { Command } from "@tiptap/core"
+
+import { isCursorVisiblePluginKey } from "../plugins/isCursorVisiblePlugin.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		setCursorVisible: {
+			/**
+			 * Set the state of the cursor visibility plugin.
+			 */
+			setCursorVisible: (val: boolean) => ReturnType
+		}
+	}
+}
+
+export const setCursorVisible = () =>
+	(val: boolean): Command => ({ tr, dispatch }) => {
+		if (dispatch) {
+			tr.setMeta(isCursorVisiblePluginKey, val)
+		}
+		return true
+	}

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

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+import type { Editor } from "@tiptap/core"
+import { Plugin, PluginKey, type Transaction } from "@tiptap/pm/state"
+
+import { isEmbeddedBlock } from "../../EmbeddedDocument/utils/isEmbeddedBlock.js"
+
+const ROOT_SELECTION_REGEX = /([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 process.env.NODE_ENV).
+ *
+ * For embedded editors, adds the selection as `[from - to]`.
+ */
+export const debugSelectionPlugin = (editor: Editor, log: boolean = false): Plugin => {
+	let initialized = false
+	return new Plugin({
+		key: debugSelectionPluginKey,
+		state: {
+			init(): void { /**/ },
+			apply(tr: Transaction): void {
+				if (process.env.NODE_ENV === "production") { return }
+				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 (hasEmbeddedSelection) {
+						document.title = document.title
+							.replace(
+								SUB_SELECTION_REGEX,
+								`[${sel}]`
+							)
+					} else {
+						document.title = `${document.title} [${sel}]`
+					}
+				} else {
+					if (log) {
+						console.log(`root selection: ${tr.selection.from} - ${tr.selection.to}`)
+					}
+
+					if (!initialized) {
+						initialized = true
+						document.title = sel
+					} else {
+						document.title = document.title.replace(
+							ROOT_SELECTION_REGEX,
+							`${sel} $2`
+						)
+					}
+				}
+			}
+		}
+	})
+}

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

@@ -0,0 +1,28 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+import { createStateOnlyPluginApply } from "../../../utils/createStateOnlyPluginApply.js"
+
+export const isCursorVisiblePluginKey = new PluginKey<boolean>("isCursorVisiblePlugin")
+export function isCursorVisiblePlugin(): Plugin<boolean> {
+	const noClasses = {}
+	const attributes = {
+		class: "[caret-color:transparent]"
+	}
+	return new Plugin<boolean>({
+		key: isCursorVisiblePluginKey,
+		state: {
+			init() {
+				return true
+			},
+			apply: createStateOnlyPluginApply(isCursorVisiblePluginKey)
+		},
+		props: {
+			attributes(state) {
+				if (!isCursorVisiblePluginKey.getState(state)) {
+					return attributes
+				}
+				return noClasses
+			}
+		}
+	})
+}

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

@@ -0,0 +1,40 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+import { createStateOnlyPluginApply } from "../../../utils/createStateOnlyPluginApply.js"
+
+export const isUsingTouchPluginKey = new PluginKey<boolean>("isUsingTouchPlugin")
+export function isUsingTouchPlugin(): Plugin<boolean> {
+	const noClasses = {}
+	const attributes = {
+		class: "group using-touch"
+	}
+	return new Plugin({
+		key: isUsingTouchPluginKey,
+		props: {
+			handleDOMEvents: {
+				pointerdown: (view, event) => {
+					const pluginState = isUsingTouchPluginKey.getState(view.state)
+					const isUsingTouch = event.pointerType === "touch"
+					if (pluginState !== isUsingTouch) {
+						const tr = view.state.tr
+						tr.setMeta(isUsingTouchPluginKey, true)
+						tr.setMeta("addToHistory", false)
+						view.dispatch(tr)
+					}
+				}
+			},
+			attributes: state => {
+				if (isUsingTouchPluginKey.getState(state)) {
+					return attributes
+				}
+				return noClasses
+			}
+		},
+		state: {
+			init() {
+				return false
+			},
+			apply: createStateOnlyPluginApply(isUsingTouchPluginKey)
+		}
+	})
+}

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

@@ -0,0 +1,38 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import type { EditorView } from "@tiptap/pm/view"
+
+export const selectingIndicatorPluginKey = new PluginKey(`selecting-indicator`)
+
+export function selectingIndicatorPlugin({ className = "selecting" }: { className?: string } = {}): Plugin {
+	let mightBeDragging = false
+	let dragging = false
+	return new Plugin({
+		key: selectingIndicatorPluginKey,
+		props: {
+			handleDOMEvents: {
+				pointerdown() {
+					mightBeDragging = true
+					return false
+				},
+				pointerover(view: EditorView) {
+					if (mightBeDragging) {
+						if (dragging) return false
+						dragging = true
+						view.dom.classList.add(className)
+					} else {
+						if (!dragging) return false
+						dragging = false
+						view.dom.classList.remove(className)
+					}
+					return false
+				},
+				pointerup(view: EditorView) {
+					mightBeDragging = false
+					dragging = false
+					view.dom.classList.remove(className)
+					return false
+				}
+			}
+		}
+	})
+}