@witchcraft/editor 0.0.1

package/src/runtime/pm/features/Blocks/commands/splitItem.ts

@@ -0,0 +1,116 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import { type Command, getNodeType } from "@tiptap/core"
+import { GapCursor } from "@tiptap/pm/gapcursor"
+import type { NodeType } from "@tiptap/pm/model"
+import { TextSelection } from "@tiptap/pm/state"
+import { canSplit } from "@tiptap/pm/transform"
+import { nanoid } from "nanoid"
+
+import { redirectFromEmbedded } from "../../EmbeddedDocument/utils/redirectFromEmbedded.js"
+
+declare module "@tiptap/core" {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		splitItem: {
+			/**
+			 * Splits one list item into two list items. Does not lift like the default `splitListItem` command. Also takes care of generating a new uuid.
+			 *
+			 * @redirectable
+			 */
+			splitItem: (pos?: number) => ReturnType
+		}
+	}
+}
+
+export const splitItem = (
+	itemType: string,
+	/** When at the end of a list item, the new list item will contain a node of this type. */
+	fallbackNodeTypeOrName: string | NodeType = "paragraph",
+	idLength: number = 10
+) => (pos?: number): Command => ({ state, tr, editor, view, commands, dispatch }): boolean => {
+	const redirect = redirectFromEmbedded(view, "splitItem", { args: [pos], view, commands })
+	if (redirect.redirected) { return redirect.result as any }
+
+	const { $from, $to, to, empty } = pos
+		? TextSelection.create(tr.doc, pos)
+		: state.selection.map(tr.doc, tr.mapping)
+
+	const parentItem = $from.node(-1)
+	const parentEndItem = $to.node(-1)
+	// we can attempt to keep the end item's blockId if it's different
+	// this happens when the user selects from one block to another
+	const blockId = parentItem.attrs.blockId === parentEndItem.attrs.blockId ? nanoid(idLength) : parentEndItem.attrs.blockId
+	const isAtGapCursor = state.selection instanceof GapCursor
+	const parentsAreItems = parentItem.type.name === itemType && parentEndItem.type.name === itemType
+
+	if (isAtGapCursor || parentsAreItems) {
+		const fallbackNodeType = getNodeType(fallbackNodeTypeOrName, editor.schema)
+		const isAtEnd = empty && to === $from.end()
+		const nodeType = getNodeType(itemType, editor.schema)
+		// can't seem to get split to work with a gap cursor
+		if (isAtGapCursor) {
+			if (dispatch) {
+				const $realFrom = tr.doc.resolve($from.pos - 1)
+				const $realTo = tr.doc.resolve($to.pos - 1)
+				const realParentEndItem = $realFrom.node()
+				const realParentItem = $realTo.node()
+				if (realParentItem !== realParentEndItem || realParentItem.type.name !== itemType || realParentEndItem.type.name !== itemType) {
+					unreachable()
+				}
+				tr.insert(
+					$from.pos,
+					nodeType.create({
+						...realParentEndItem.attrs,
+						blockId: undefined
+					}, [
+						fallbackNodeType.create()
+					])
+				)
+			}
+		} else if (isAtEnd) {
+			const args: Parameters<typeof tr.split> = [
+				$from.pos,
+				2,
+				[{
+					type: nodeType,
+					attrs: { ...parentEndItem.attrs, blockId }
+				}, {
+					type: fallbackNodeType
+				}]
+			]
+			const canSplitNode = canSplit(tr.doc, ...args)
+
+			if (dispatch) {
+				tr.split(...args)
+			}
+			return canSplitNode
+		} else {
+			const nodeTo = $to.node()
+			const args: Parameters<typeof tr.split> = [$from.pos, 2, [
+				{
+					type: nodeType,
+					attrs: {
+						...parentEndItem.attrs,
+						blockId
+					}
+				},
+				{
+					type: nodeTo.type,
+					attrs: nodeTo.attrs
+				}
+			]]
+			// i don't think this is really accurate since we didn't delete first
+			const canSplitNode = !dispatch && canSplit(tr.doc, ...args)
+
+			if (dispatch) {
+				tr.delete($from.pos, $to.pos)
+				const accurateCanSplitNode = canSplit(tr.doc, ...args)
+				if (!accurateCanSplitNode) { return false }
+				tr.split(...args)
+				return true
+			}
+			return canSplitNode
+		}
+	}
+	return false
+}

package/src/runtime/pm/features/Blocks/commands/unindentItem.ts

@@ -0,0 +1,82 @@
+import type { Command } from "@tiptap/core"
+import type { Node } from "@tiptap/pm/model"
+import { TextSelection } from "@tiptap/pm/state"
+import { canJoin, liftTarget } from "@tiptap/pm/transform"
+
+import { getTypeByName } from "../../../utils/getTypeByName.js"
+import { mapSelection } from "../../../utils/mapSelection.js"
+import { splitIntoChunks } from "../../../utils/splitIntoChunks.js"
+import { redirectFromEmbedded } from "../../EmbeddedDocument/utils/redirectFromEmbedded.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		unindentItem: {
+			/**
+			 * @redirectable
+			 */
+			unindentItem: (from?: number, to?: number) => ReturnType
+		}
+
+	}
+}
+
+export const unindentItem = (
+	itemTypeName: string
+) =>
+	(from?: number, to?: number): Command =>
+		({ state, dispatch, tr, editor, view, commands }): boolean => {
+			const redirect = redirectFromEmbedded(view, "unindentItem", { args: [from, to], view, commands })
+			if (redirect.redirected) { return redirect.result as any }
+
+			const itemType = getTypeByName(editor.schema, itemTypeName)
+			const sel = from !== undefined
+				? TextSelection.create(tr.doc, from, to)
+				: state.selection.map(tr.doc, tr.mapping)
+
+			const chunks = splitIntoChunks(tr.doc, itemType, sel, { splitChildren: true })
+			const blockRangeFilter = (node: Node): boolean => node.childCount > 0 && node.firstChild!.type === itemType
+			let canChange = false
+			for (const chunk of chunks) {
+				const { $from, $to } = mapSelection(tr, chunk)
+				const range = $from.blockRange($to, blockRangeFilter)
+				if (!range) return false
+				/**
+				 * The following logic is adapted from prosemirror-schema-list's liftItem.
+				 * See https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.ts#L173
+				 *
+				 * Because we are always working with "lists", there's no need for some of the logic there.
+				 *
+				 * Also we need to apply the changes per chunk.
+				 *
+				 * This allows unindenting an entire selection until all items reach the root,
+				 * even if the selection had several nested lists. This only affects the selected items,
+				 * not any children that are not part of the selection.
+				 */
+
+				// A <- isTopLevel
+				//		B <- isNotTopLevel
+				const isTopLevel = range.depth <= 1
+
+				if (!isTopLevel) {
+					const end = range.end
+					const target = liftTarget(range)
+					if (target === null) continue
+					if (dispatch) {
+						tr.lift(range, target)
+					}
+					const after = tr.mapping.map(end, -1) - 1
+					if (canJoin(tr.doc, after)) {
+						if (dispatch) {
+							tr.join(after)
+						}
+					}
+					if (dispatch) {
+						tr.scrollIntoView()
+					}
+					canChange = true
+				}
+			}
+			return canChange
+		}

package/src/runtime/pm/features/Blocks/components/DragTreeHandle.vue

@@ -0,0 +1,142 @@
+<template>
+<!-- todo move to ui library -->
+
+<div
+	contenteditable="false"
+	:class="twMerge(`group/handles
+		absolute
+		left-0
+		w-[calc(var(--dragHandleSize)+var(--dragHandleMargin))]
+		h-full
+	`,
+		passedDragThreshold &&`
+		hidden
+	`
+	)"
+>
+	<div
+		:class="twMerge(`grab-handle
+			absolute
+			left-0
+			w-[calc(var(--dragHandleSize)+var(--dragHandleMargin))]
+			flex justify-center
+			bg-gradient-to-br
+			from-neutral-50
+			to-neutral-100
+			dark:from-neutral-800
+			dark:to-neutral-900
+			rounded-sm
+			py-1
+			h-full
+			transition-opacity
+			duration-[450ms]
+
+			before:w-[var(--dragHandleSize)]
+			before:bg-neutral-300
+			dark:before:bg-neutral-700
+			before:[mask-image:var(--dragHandleImage)]
+			before:[mask-repeat:space]
+			before:[mask-size:calc(var(--dragHandleSize)/2.1)]
+			before:[mask-position:center]
+			opacity-0
+			group-hover/handles:cursor-pointer
+			group-hover/handles:opacity-100
+			group-[.using-touch]:hidden
+		`,
+			($attrs as any)?.class
+		)"
+		ref="grabHandle"
+		@pointerdown="emit('grabHandlePointerDown', $event)"
+		@contextmenu.prevent="emit('grabHandleContextMenu', $event)"
+	/>
+	<div
+		:class="twMerge(`collapse-indicator
+			hover:cursor-pointer
+			absolute
+			flex items-center justify-center
+			h-full
+			w-[calc(var(--dragHandleSize)+var(--dragHandleMargin))]
+			group-[.using-touch]:hidden
+		`,
+			hasChildren && `
+			after:transition-all
+			after:opacity-0
+			group-hover/handles:after:opacity-100
+			group-hover/handles:after:bg-neutral-500
+			group/handles:after:hover:opacity-100
+			group-hover/handles:hover:after:bg-accent-500
+
+			after:h-[var(--dragHandleSize)]
+			after:w-[var(--dragHandleSize)]
+			after:bg-neutral-300
+			dark:after:bg-neutral-700
+
+			after:absolute
+			after:[mask-image:var(--dragHandleCollapseIndicatorImage)]
+			after:[mask-size:contain]
+			after:[mask-position:left]
+			after:[mask-repeat:no-repeat]
+		`,
+			hasChildren && !hideChildren && `
+			after:rotate-90
+			after:translate-y-[50%]
+		`,
+			hasChildren && hideChildren && `
+			after:left-0
+			group-[.using-touch]:block
+		`,
+
+			!hasChildren && `
+			hidden
+			group-[.using-touch]:hidden
+		`
+		)"
+		@click="emit('collapseIndicatorClick', $event)"
+		@contextmenu.prevent="emit('grabHandleContextMenu', $event)"
+	/>
+</div>
+</template>
+
+<!--
+	Multipurpose drag handle + collapse indicator.
+
+	This is incredibly useful for making a compact draggable tree view.
+
+	The collapse indicator has a default height, but it should be set manually. For example `[&>.collapse-indicator]:h-[...]`
+
+	The component only emits a few events, it does not handle the dragging itself or what actually happens on any clicks/input.
+-->
+<script lang="ts">
+</script>
+
+<script setup lang="ts">
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { onMounted, onUnmounted, ref, useAttrs } from "vue"
+
+interface Props {
+	hasChildren: boolean
+	passedDragThreshold: boolean
+	hideChildren: boolean
+}
+
+const $attrs = useAttrs()
+defineProps<Props>()
+const emit = defineEmits<{
+	(e: "collapseIndicatorClick", event: MouseEvent): void
+	(e: "grabHandlePassiveTouchStart", event: TouchEvent): void
+	(e: "grabHandlePointerDown", event: PointerEvent): void
+	(e: "grabHandleContextMenu", event: PointerEvent): void
+}>()
+const grabHandle = ref<HTMLElement | null>(null)
+
+function touchStart(e: TouchEvent): void {
+	emit("grabHandlePassiveTouchStart", e)
+}
+
+onMounted(() => {
+	grabHandle.value!.addEventListener("touchstart", touchStart, { passive: false })
+})
+onUnmounted(() => {
+	grabHandle.value?.removeEventListener("touchstart", touchStart)
+})
+</script>

package/src/runtime/pm/features/Blocks/components/ItemMenu.vue

@@ -0,0 +1,88 @@
+<template>
+<!-- @vue-expect-error -->
+<WPopup
+	:model-value="menu.opened"
+	:preferred-horizontal="['left-most']"
+	:preferred-vertical="popupVerticalPositioner"
+	:position-modifier="popupPositionModifier"
+	ref="popup"
+	@update:model-value="!$event && props.editor.commands.closeItemMenu()"
+>
+	<template #popup="{ extractEl }">
+		<div
+			:ref="extractEl"
+		>
+			<CommandsMenuList
+				:entries="commandsMenu"
+				@close="(props.editor.commands as any).closeItemMenu()"
+			/>
+		</div>
+	</template>
+</WPopup>
+</template>
+
+<script setup lang="ts">
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { Editor } from "@tiptap/core"
+import type { Transaction } from "@tiptap/pm/state"
+import WPopup from "@witchcraft/ui/components/LibPopup"
+import { computed, provide, ref, toRef, watch } from "vue"
+
+import { defaultItemMenu as commandsMenu } from "./defaultItemMenu.js"
+
+import CommandsMenuList from "../../CommandsMenus/components/CommandMenuList.vue"
+import { commandExecuterInjectionKey, menuBlockIdInjectionKey, menuEditorInjectionKey } from "../../CommandsMenus/types.js"
+import { popupPositionModifier } from "../../CommandsMenus/utils/popupPositionModifier.js"
+import { popupVerticalPositioner } from "../../CommandsMenus/utils/popupVerticalPositioner.js"
+import { itemMenuPluginKey, type ItemMenuPluginState } from "../types.js"
+import { createItemMenuCommandExecuter } from "../utils/createItemMenuCommandExecuter.js"
+
+const props = defineProps<{
+	editor: Editor
+}>()
+
+const menu = ref<ItemMenuPluginState>({ opened: false, id: undefined })
+const popup = ref<InstanceType<typeof WPopup>>()
+
+const virtualMenuEl = ref<{ getBoundingClientRect(): DOMRect } | null>(null)
+function virtualGetBoundingClientRect(): DOMRect {
+	// note this will not work if we allow recursive embedding
+	const el = props.editor.view.dom.querySelector(`li[blockid='${menu.value.id}']`)
+	const handle = el?.parentElement?.querySelector(".grab-handle")
+
+	if (handle instanceof HTMLElement) {
+		const rect = handle.getBoundingClientRect()
+		return {
+			// rect cannot be spread normally, it's properties are not enumerable
+			...rect.toJSON(),
+			width: 0 // override the width of the item, we want it to be ignored
+			// we want to keep the height though, since we want the menu centered to it if possible
+		}
+	}
+	unreachable()
+}
+
+function updateState({ editor }: { transaction: Transaction, editor: Editor }): void {
+	const was = menu.value
+	const willBe = itemMenuPluginKey.getState(editor.state as any) ?? menu.value
+	if (willBe.opened && (was.opened !== willBe.opened || was.id !== willBe.id)) {
+		virtualMenuEl.value = { getBoundingClientRect: virtualGetBoundingClientRect }
+		popup.value!.setReference(virtualMenuEl.value)
+	} else if (virtualMenuEl.value && !willBe.opened) {
+		virtualMenuEl.value = null
+		popup.value!.setReference(virtualMenuEl.value!)
+	}
+	// we can't open the popup before the virtualMenuEl is set
+	menu.value = willBe
+}
+const editorRef = toRef(props, "editor")
+provide(menuEditorInjectionKey, editorRef as any)
+const blockId = computed(() => menu.value.id)
+provide(menuBlockIdInjectionKey, blockId)
+provide(commandExecuterInjectionKey, createItemMenuCommandExecuter(() => blockId.value))
+watch(() => props.editor, (newVal, oldVal) => {
+	oldVal.off("transaction", updateState)
+	newVal.on("transaction", updateState)
+})
+props.editor.on("transaction", updateState)
+</script>