@witchcraft/editor 0.0.1

package/src/runtime/pm/testSchema.ts

@@ -0,0 +1,34 @@
+import { getSchema } from "@tiptap/core"
+import type { Schema } from "@tiptap/pm/model"
+import { VueNodeViewRenderer } from "@tiptap/vue-3"
+
+import { BaseShortcuts } from "./features/BaseShortcuts/BaseShortcuts.js"
+import FileLoaderNodeView from "./features/FileLoader/components/FileLoaderNodeView.vue"
+import { FileLoader, type NodeFileLoaderName } from "./features/FileLoader/FileLoader.js"
+import { TestFileLoaderHandler } from "./features/FileLoader/FileLoaderHandler/TestFileLoaderHandler.js"
+import { extensions, type schema as baseSchema } from "./schema.js"
+
+export const testExtensions = [
+	FileLoader.extend({
+		addOptions() {
+			return {
+				...(this as any).parent?.(),
+				handler: TestFileLoaderHandler
+			}
+		},
+		addNodeView() {
+			// am having lint only issues
+			return VueNodeViewRenderer(FileLoaderNodeView, {
+				stopEvent() {
+					return true
+				},
+				ignoreMutation() {
+					return true
+				}
+			})
+		}
+	}),
+	BaseShortcuts,
+	...extensions
+]
+export const testSchema = getSchema(testExtensions) as typeof baseSchema & Schema<NodeFileLoaderName & "itemNoId">

package/src/runtime/pm/utils/createDropIndicator.ts

@@ -0,0 +1,61 @@
+import { DROP_X, DROP_Y, type DropInfo } from "./dropPointInfo.js"
+
+import type { Point } from "../../types/index.js"
+
+export interface DropIndicator extends Point {
+	width: number
+	type: "child" | "before" | "after"
+}
+
+// todo move to ui lib
+/**
+ * Calculates the position and type of the drop indicator based on the pointer coordinates
+ * and the target element's bounding rectangle.
+ */
+export function createDropIndicator(
+	/** The drop point information object. */
+	dropInfo: DropInfo,
+	/** The bounding rectangle of the element being dragged over. */
+	targetRect: DOMRect,
+	/**
+	 * The indentation of the dragged item.
+	 *
+	 * Can be gotten with {@link getElPropertyAsInt}
+	 */
+	indentX: number,
+	/** Maximum width of the drop indicator. See {@link getElMaxVisualSize}. */
+	maxWidth: number
+): DropIndicator | undefined {
+	const d = dropInfo
+
+	let dropIndicator: DropIndicator | undefined
+
+	const inBottomHalf = d.y === DROP_Y.BOTTOM || d.y === DROP_Y.OUTSIDE_BOTTOM
+	const toRightOfIndent = d.x === DROP_X.INSIDE_INDENT || d.x === DROP_X.OUTSIDE_RIGHT
+
+	if (toRightOfIndent && inBottomHalf) {
+		dropIndicator = {
+			type: "child",
+			x: targetRect.x + indentX,
+			y: targetRect.y + targetRect.height,
+			width: maxWidth
+		}
+	} else {
+		if (inBottomHalf) {
+			dropIndicator = {
+				type: "after",
+				x: targetRect.x,
+				y: targetRect.y + targetRect.height,
+				width: maxWidth
+			}
+		} else {
+			dropIndicator = {
+				type: "before",
+				x: targetRect.x,
+				y: targetRect.y,
+				width: maxWidth
+			}
+		}
+	}
+	return dropIndicator
+}

package/src/runtime/pm/utils/createStateOnlyPluginApply.ts

@@ -0,0 +1,11 @@
+import type { PluginKey, Transaction } from "@tiptap/pm/state"
+
+export function createStateOnlyPluginApply<T extends PluginKey<any>>(key: T) {
+	return function (tr: Transaction, value: ReturnType<T["getState"]>) {
+		const trValue = tr.getMeta(key)
+		if (trValue !== undefined) {
+			return trValue
+		}
+		return value
+	}
+}

package/src/runtime/pm/utils/createStateOnlyPluginObjApply.ts

@@ -0,0 +1,16 @@
+import type { PluginKey, Transaction } from "@tiptap/pm/state"
+
+export function createStateOnlyPluginObjApply<T extends PluginKey<any>>(key: T) {
+	return function (tr: Transaction, value: ReturnType<T["getState"]>) {
+		const trValue = tr.getMeta(key)
+		if (trValue) {
+			const newVal = {
+				...value,
+				...trValue
+			}
+			return newVal
+		} else {
+			return value
+		}
+	}
+}

package/src/runtime/pm/utils/dropPointInfo.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import type { EnumLike } from "@alanscodelog/utils"
+import { enumFromArray } from "@alanscodelog/utils/enumFromArray"
+
+import type { Point } from "../../types/index.js"
+
+/**
+ * Given a point (a mouse position), a box, and a possible indent, returns information regarding it's position.
+ *
+ * For example if we "zoom" in on a list section like this where the mouse is hovering at the level of B1 (not neccesarily inside it):
+ *
+ * ```
+ * ...
+ * 		- C1
+ * 	- B1
+ * - A1
+ * ...
+ * ```
+ * We are interested in the following:
+ * - In what y section we're in (outside-top, top, bottom, outside-bottom)
+ * - In what x section we're in (outside-left, inside, inside-indent, outside-right)
+ * ```
+ *     outside-left \ inside       \ inside-indent \ outside-right
+ *                  \              \               \
+ * outside-top      \              \               \
+ * -----------------┌──────────────┬───────────────┐
+ *                  │B1            │               │
+ *                  │              │               │
+ * top              │              │               │
+ * -----------------├──────────────┼───────────────┤
+ *                  │<---indent--->│               │
+ *                  │              │               │
+ * bottom           │              │               │
+ * -----------------└──────────────┴───────────────┘
+ * outside-bottom
+ * ```
+ * We can use this information to determine where we want to drop something.
+ */
+
+// todo move to ui lib
+
+export function dropPointInfo(
+	point: Point,
+	box: Point & { width: number, height: number },
+	indentX: number
+): DropInfo {
+	const info: DropInfo = {
+		x: "INSIDE",
+		y: "TOP"
+	}
+	if (point.y < box.y) info.y = DROP_Y.OUTSIDE_TOP
+	else if (point.y < (box.y + (box.height / 2))) info.y = DROP_Y.TOP
+	else if (point.y < (box.y + box.height)) info.y = DROP_Y.BOTTOM
+	else info.y = DROP_Y.OUTSIDE_BOTTOM
+
+	if (point.x < box.x) info.x = DROP_X.OUTSIDE_LEFT
+	else if (point.x < box.x + indentX) info.x = DROP_X.INSIDE
+	else if (point.x < box.x + box.width) info.x = DROP_X.INSIDE_INDENT
+	else info.x = DROP_X.OUTSIDE_RIGHT
+
+	return info
+}
+
+export const DROP_Y = enumFromArray([
+	"OUTSIDE_TOP",
+	"TOP",
+	"BOTTOM",
+	"OUTSIDE_BOTTOM"
+])
+
+export type DropY = EnumLike<typeof DROP_Y>
+
+export const DROP_X = enumFromArray([
+	"OUTSIDE_LEFT",
+	"INSIDE",
+	"INSIDE_INDENT",
+	"OUTSIDE_RIGHT"
+])
+
+export type DropX = EnumLike<typeof DROP_X>
+
+export type DropInfo = {
+	x: DropX
+	y: DropY
+}

package/src/runtime/pm/utils/findUpwards.ts

@@ -0,0 +1,43 @@
+import type { Node, ResolvedPos } from "@tiptap/pm/model"
+
+/**
+ * Traverse the tree upwards (along parents, along the left) to find a position.
+ */
+export function findUpwards(
+	/** Needed to resolve positions from. */
+	node: Node,
+	/** Position to start searching from. */
+	from: number,
+	filter: ($pos: ResolvedPos, pos: number, loop: number) => boolean,
+	{
+		start = -1,
+		step = 1,
+		stop
+	}: {
+		/** Where to start searching, -1 would be current node (default), 0 the parent, and so on. */
+		start?: number
+		step?: number
+		/* Max number of parents up to search (i.e. max search loop iterations) */
+		stop?: number
+	} = {}
+
+): { $pos: ResolvedPos, pos: number } | { $pos: undefined, pos: undefined } {
+	const $from = node.resolve(from)
+	let loops = 0
+	for (
+		let depth = start;
+		depth < $from.depth;
+		depth += step
+	) {
+		const currentDepth = $from.depth - depth
+
+		const newPos = $from.before(currentDepth)
+		const $pos = node.resolve(newPos)
+		// console.log("newPos", newPos, $pos)
+		if ((!filter && stop === loops) || filter($pos, newPos, loops)) {
+			return { $pos, pos: newPos }
+		}
+		loops++
+	}
+	return { $pos: undefined, pos: undefined }
+}

package/src/runtime/pm/utils/getChildChunks.ts

@@ -0,0 +1,24 @@
+import type { Node, NodeType } from "@tiptap/pm/model"
+import type { Selection } from "@tiptap/pm/state"
+
+import { nodesBetween } from "./nodesBetween.js"
+
+export const getChildChunks = (
+	doc: Node,
+	itemType: NodeType,
+	selection: Pick<Selection, "$from" | "$to">
+): Pick<Selection, "$from" | "$to">[] => {
+	const children: Pick<Selection, "$from" | "$to">[] = []
+
+	nodesBetween(doc, selection, (node, pos) => {
+		if (node?.type === itemType) {
+			const $pos = doc.resolve(pos + 1)
+			if ($pos.depth > selection.$from.depth) {
+				children.push({ $from: $pos, $to: $pos })
+				return false
+			}
+		}
+		return true
+	})
+	return children
+}

package/src/runtime/pm/utils/getDiffReplacementRange.ts

@@ -0,0 +1,32 @@
+import type { Node } from "@tiptap/pm/model"
+/**
+ * Given two different nodes, calculates the range that needs to be replaced with the latter node, to sync them.
+ *
+ * ```ts
+ * const offset = ... // the shared offset between the two nodes, if needed
+ * const diff = getDiffReplacementRange(existingNode, convertedNewNode)
+ * if (diff) {
+ * 	intTr.replace(offset + diff.start, offset + diff.end, convertedNewNode.slice(diff.start, diff.otherEnd))
+ * }
+ * ```
+ */
+export function getDiffReplacementRange(
+	nodeA: Node,
+	nodeB: Node,
+	offset: number = 0
+): {
+	start: number
+	end: number
+	/** For slicing the latter node. */
+	sliceStart: number
+	/** For slicing the latter node. */
+	sliceEnd: number
+} | null {
+	const diffStart = nodeA.content.findDiffStart(nodeB.content)
+	const diffEnd = nodeA.content.findDiffEnd(nodeB.content)
+	if (diffStart === null || diffEnd === null) return null
+	const nodeStart = Math.min(diffStart, diffEnd.a)
+	const start = nodeStart + offset
+	const end = diffEnd.a + offset
+	return { start, end, sliceStart: nodeStart, sliceEnd: diffEnd.b }
+}

package/src/runtime/pm/utils/getElMaxVisualSize.ts

@@ -0,0 +1,14 @@
+// todo move to ui lib
+
+/**
+ * Gets the visual width and height of an element (el.getBoundingClientRect().width/height - scrollbarWidth/Height).
+ *
+ * Useful for creating drop indicators that don't go outside the element.
+ */
+export function getElMaxVisualSize(el: HTMLElement): { width: number, height: number } {
+	const scrollBarWidth = el.offsetWidth - el.clientWidth
+	const width = el.getBoundingClientRect().width - scrollBarWidth
+	const scrollBarHeight = el.offsetHeight - el.clientHeight
+	const height = el.getBoundingClientRect().height - scrollBarHeight
+	return { width, height }
+}

package/src/runtime/pm/utils/getElPropertyAsInt.ts

@@ -0,0 +1,8 @@
+const pxRegex = /([0-9.]+)px/g
+export function getElPropertyAsInt(el: HTMLElement, prop: string): number {
+	const value = window.getComputedStyle(el).getPropertyValue(prop)
+	if (!pxRegex.test(value)) {
+		throw new Error(`Component must set property ${prop} in pixels for getElPropertyAsInt to be able to extract the value.`)
+	}
+	return Number.parseInt(value.replace(pxRegex, "$1"), 10)
+}

package/src/runtime/pm/utils/getGroupNodeNames.ts

@@ -0,0 +1,9 @@
+import type { Schema } from "@tiptap/pm/model"
+
+export function getGroupNodeNames(schema: Schema, groups: string[]): string[] {
+	const res: string[] = []
+	schema.spec.nodes.forEach((key, val) => {
+		if (val.group && groups.includes(val.group)) res.push(key)
+	})
+	return res
+}

package/src/runtime/pm/utils/getMarkPosition.ts

@@ -0,0 +1,57 @@
+import { getMarkType } from "@tiptap/core"
+import type { MarkType, Node } from "@tiptap/pm/model"
+import type { EditorState } from "@tiptap/pm/state"
+
+/**
+ * Get the position of any mark of the given type touching the given position.
+ *
+ * Basically searches outwards from the position until it finds a text node without the given mark type.
+ */
+// following where helpful but did not work at the end of the selection correctly
+// https://discuss.prosemirror.net/t/find-extents-of-a-mark-given-a-selection/344/8
+// https://discuss.prosemirror.net/t/expanding-the-selection-to-the-active-mark/478/9
+export function getMarkPosition(
+	state: EditorState,
+	markTypeOrName: MarkType | string,
+	pos: number
+): { from: number, to: number } | null {
+	const markType = getMarkType(markTypeOrName, state.schema)
+	const $pos = state.doc.resolve(pos)
+	const isAtEnd = $pos.parentOffset === $pos.parent.nodeSize - 2
+	// get the start of the text node we're touching
+	const startOffset = isAtEnd
+		? $pos.parentOffset - 1
+		: $pos.parentOffset
+	const start = $pos.parent.childAfter(startOffset)
+	if (!start) return null
+	function hasMark(node: Node): boolean {
+		const marks = node.marks
+		for (const mark of marks) {
+			if (mark.type === markType) return true
+		}
+		return false
+	}
+	const parent = $pos.parent
+	// go to the previous node to start searching from
+	let fromIndex = ($pos.index() - (isAtEnd ? 1 : 0)) - 1
+	// leave position at the end of the previous node
+	let fromPos = $pos.start() + (start?.offset ?? 0)
+	// again leave the position
+	let toPos = fromPos
+	// go to the next node to start searching from
+	let toIndex = fromIndex + 1
+	while (fromIndex > 0 && hasMark(parent.child(fromIndex))) {
+		const child = parent.child(fromIndex)
+		const childSize = child.nodeSize
+		fromIndex -= 1
+		fromPos -= childSize
+	}
+
+	while (toIndex < parent.childCount && hasMark(parent.child(toIndex))) {
+		const child = parent.child(toIndex)
+		const childSize = child.nodeSize
+		toIndex += 1
+		toPos += childSize
+	}
+	return { from: fromPos, to: toPos }
+}

package/src/runtime/pm/utils/getMarksInSelection.ts

@@ -0,0 +1,19 @@
+import type { Mark } from "@tiptap/pm/model"
+import type { EditorState } from "@tiptap/pm/state"
+
+export function getMarksInSelection(state: EditorState): Mark[] {
+	const sel = state.selection
+	const marks: Mark[] = []
+	const isAtEnd = sel.$from.parentOffset === sel.$to.parent.nodeSize - 2
+	const start = isAtEnd ? sel.from - 1 : sel.from
+	const end = sel.empty ? sel.from + 1 : sel.to
+	state.doc.nodesBetween(start, end, node => {
+		if (node.marks) {
+			for (const mark of node.marks) {
+				marks.push(mark)
+			}
+		}
+		return true
+	})
+	return marks
+}

package/src/runtime/pm/utils/getTypeByName.ts

@@ -0,0 +1,7 @@
+import type { NodeType, Schema } from "@tiptap/pm/model"
+
+export	const getTypeByName = (schema: Schema, name: string): NodeType => {
+	const nodeType = schema.nodes[name]
+	if (nodeType === undefined || nodeType === null) throw new Error(`Unknown node type:${name}`)
+	return nodeType
+}

package/src/runtime/pm/utils/index.ts

@@ -0,0 +1,17 @@
+/* Autogenerated Index */
+
+export { createStateOnlyPluginApply } from "./createStateOnlyPluginApply.js"
+export { createStateOnlyPluginObjApply } from "./createStateOnlyPluginObjApply.js"
+export { dropPointInfo } from "./dropPointInfo.js"
+export { findUpwards } from "./findUpwards.js"
+export { getChildChunks } from "./getChildChunks.js"
+export { getDiffReplacementRange } from "./getDiffReplacementRange.js"
+export { getElMaxVisualSize } from "./getElMaxVisualSize.js"
+export { getElPropertyAsInt } from "./getElPropertyAsInt.js"
+export { getGroupNodeNames } from "./getGroupNodeNames.js"
+export { getMarkPosition } from "./getMarkPosition.js"
+export { getMarksInSelection } from "./getMarksInSelection.js"
+export { mapSelection } from "./mapSelection.js"
+export { nodesBetween } from "./nodesBetween.js"
+export { pointToPmPoint } from "./pointToPmPoint.js"
+export { splitIntoChunks } from "./splitIntoChunks.js"

package/src/runtime/pm/utils/internal/createNodeTypesList.ts

@@ -0,0 +1,25 @@
+import { pushIfNotIn } from "@alanscodelog/utils"
+import type { Schema } from "@tiptap/pm/model"
+
+import { getGroupNodeNames } from "../getGroupNodeNames.js"
+
+export const createNodeTypesList = (
+	schema: Schema,
+	mutatedNodeTypes: string[],
+	nodeTypeNames?: string[],
+	nodeGroups?: string[]
+): string[] => {
+	if (nodeGroups) {
+		pushIfNotIn(
+			mutatedNodeTypes,
+			getGroupNodeNames(schema, nodeGroups)
+		)
+	}
+	if (nodeTypeNames) {
+		pushIfNotIn(
+			mutatedNodeTypes,
+			nodeTypeNames
+		)
+	}
+	return mutatedNodeTypes
+}

package/src/runtime/pm/utils/internal/debugMap.ts

@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+import type { Transaction } from "@tiptap/pm/state"
+
+export function debugMap(
+	tr: Transaction,
+	{
+		asTable = true,
+		start = 0,
+		end = tr.doc.nodeSize - 1,
+		collapse = true
+	}: {
+		asTable?: boolean
+		start?: number
+		end?: number
+		collapse?: boolean
+
+	} = {}
+): void {
+	console[collapse ? "groupCollapsed" : "group"]("map")
+	if (asTable) {
+		const table: Record<string, number[]> = {
+			before: [],
+			after: []
+		}
+		for (let i = start; i <= end; i++) {
+			table.before.push(i)
+			table.after.push(tr.mapping.map(i))
+		}
+		console.table(table)
+	} else {
+		for (let i = start; i <= end; i++) {
+			console.log(i, tr.mapping.map(i))
+		}
+	}
+	console.groupEnd()
+}

package/src/runtime/pm/utils/internal/debugNode.ts

@@ -0,0 +1,38 @@
+/* eslint-disable no-console */
+import { type Fragment, type Node, ResolvedPos, type Slice } from "@tiptap/pm/model"
+
+import { recurse } from "./recurse.js"
+
+export function debugNode(
+	doc?: Slice | Fragment | ResolvedPos | Node | null | undefined,
+	title?: string | number,
+	collapse: boolean = true,
+	deep: boolean = true,
+	props: ("size" | "is" | "attrs")[] = ["size"]
+): void {
+	if (doc instanceof ResolvedPos) { doc = doc.node() }
+
+	const d = doc as any
+	const isSlice = d?.constructor?.name === "Slice"
+	const isFragment = d?.constructor?.name === "Fragment"
+
+	const message = !doc
+		? "UNDEFINED"
+		: isSlice
+			? (`[[${d.content.content.map((node: Node) => recurse(node, deep, props) ?? "").join("]\n[")}]]`)
+			: isFragment
+				? (`[[${d.content.map((node: Node) => recurse(node, deep, props) ?? "").join("]\n[")}]]`)
+				: recurse(d, deep, props)
+	console[collapse ? "groupCollapsed" : "group"](
+		title !== undefined ? title.toString() : "",
+		message !== "UNDEFINED"
+			? isSlice || isFragment
+				? "Slice"
+				: message.split("\n")[0]
+			: message
+		// new Error().stack?.split("\n")[2],
+	)
+	console.log(message)
+	console.groupEnd()
+	// console.log(JSON.stringify(recurse(doc), null, "\t"))
+}

package/src/runtime/pm/utils/internal/debugSel.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-console */
+import { EditorState } from "@tiptap/pm/state"
+
+export function debugSel(sel: EditorState | { from: number, to: number }, title: string | number = ""): void {
+	if (sel instanceof EditorState) {
+		console.log(title, sel.selection.from, sel.selection.to)
+	} else {
+		console.log(title, sel.from, sel.to)
+	}
+}

package/src/runtime/pm/utils/internal/recurse.ts

@@ -0,0 +1,44 @@
+import type { Node } from "@tiptap/pm/model"
+
+export function recurse(
+	node: Node,
+	deep: boolean = true,
+	props: ("size" | "is" | "attrs")[] = [],
+	depth: number = 0
+): string {
+	const obj: any = {}
+	const text = []
+
+	text.push(`=${node?.type?.name ?? "any"} ${node.firstChild?.textContent ?? ""}`)
+	if (node.textContent !== "" && node.isText) { text.push(`"${node.textContent}"`) }
+	if (props.includes("size")) { text.push(node.nodeSize) }
+	if (props.includes("is")) {
+		obj.isBlock = node.isBlock
+		obj.isInline = node.isInline
+		obj.isLeaf = node.isLeaf
+		obj.isText = node.isText
+		obj.isTextblock = node.isTextblock
+		obj.isAtom = node.isAtom
+	}
+	if (props.includes("attrs")) {
+		obj.attrs = node.attrs
+	}
+	const content = (node.content as any).content as Node[]
+	if (content && content.length > 0) {
+		if (deep) {
+			obj.children = `\n${Object.values(content).map((nodeInner: Node) => recurse(nodeInner, deep, props, depth + 1)).join("\n")}`
+		} else {
+			obj.children = `[${content.length}]`
+		}
+	}
+	const indent = "\t".repeat(depth)
+	const top = text.length > 0 ? indent + text.join(`\n${indent}`) : ""
+	const bottomContent = Object.entries(obj).map(([key, val]) => key === "children"
+		? `${indent}${val as string}`
+		: key === "attrs"
+			? `${val ? indent + (Object.keys(val as any).length > 0 ? JSON.stringify(val) : "")/* attrsToClasses(val as any).trim() */ : ""}`
+			: `${indent}${key}: ${val as string}`)
+	const bottom = bottomContent.length > 0 ? `\n${bottomContent.join("\n")}` : ""
+	const res = top + bottom
+	return res
+}

package/src/runtime/pm/utils/internal/stripBlockId.ts

@@ -0,0 +1,10 @@
+import { Node } from "@tiptap/pm/model"
+/** For testing only, see testSchema.ts. */
+export function stripBlockId(obj: any): string {
+	if (obj instanceof Node && "attrs" in obj) {
+		delete (obj as any).attrs.blockId
+	} else {
+		delete obj.blockId
+	}
+	return obj
+}

package/src/runtime/pm/utils/mapSelection.ts

@@ -0,0 +1,21 @@
+import type { Selection, Transaction } from "@tiptap/pm/state"
+
+/**
+ * Mimicks mapping a selection for the "block selections" returned by {@link splitIntoChunks}.
+ */
+export const mapSelection = (
+	tr: Transaction,
+	selection: Pick<Selection, "$from" | "$to">
+
+): Pick<Selection, "$from" | "$to"> & { from: number, to: number } => {
+	const from = tr.mapping.map(selection.$from.pos)
+	const $from = tr.doc.resolve(from)
+	const to = tr.mapping.map(selection.$to.pos)
+	const $to = tr.doc.resolve(to)
+	return {
+		$from,
+		$to,
+		from,
+		to
+	}
+}