@witchcraft/editor 0.0.1

package/src/runtime/pm/features/DocumentApi/utils/convertTransactionForFullState.ts

@@ -0,0 +1,39 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { EditorState, Transaction } from "@tiptap/pm/state"
+import { Step, StepMap } from "@tiptap/pm/transform"
+
+import { copyMeta } from "./copyMeta.js"
+import { getStateEmbedRange } from "./getStateEmbedRange.js"
+
+export function convertTransactionForFullState(
+	state: EditorState,
+	tr: Transaction
+): Transaction {
+	// this happens when we forward a transaction directly
+	// which uses the real full state as the base (as happens with undo)
+
+	const steps = tr.getMeta("no-schema-convert")
+		? tr.steps
+		: JSON.parse(
+				JSON.stringify(tr.steps)
+			).map((step: any) => Step.fromJSON(state.schema, step))
+
+	const extTr = state.tr as Transaction
+	copyMeta(tr, extTr)
+	const trSubId = tr.doc.nodeAt(1)?.attrs.blockId
+	if (!trSubId && !tr.getMeta("no-step-convert")) {
+		unreachable()
+	}
+	const embedRange = trSubId ? getStateEmbedRange(tr.doc, trSubId) : undefined
+	const offsetMap = embedRange && !tr.getMeta("no-step-convert")
+		? StepMap.offset(embedRange.start !== undefined ? embedRange.start - 1 : 0)
+		: undefined
+	// see https://github.com/ueberdosis/tiptap/issues/1883
+	// and https://github.com/ueberdosis/tiptap/issues/74#issuecomment-460206175
+	for (const step of steps) {
+		const mapped = offsetMap ? step.map(offsetMap)! : step
+		extTr.step(mapped)
+	}
+
+	return extTr
+}

package/src/runtime/pm/features/DocumentApi/utils/copyMeta.ts

@@ -0,0 +1,8 @@
+import { keys } from "@alanscodelog/utils/keys"
+import type { Transaction } from "@tiptap/pm/state"
+
+export function copyMeta(from: Transaction, to: Transaction): void {
+	for (const key of keys<string>((from as any).meta)) {
+		to.setMeta(key, from.getMeta(key))
+	}
+}

package/src/runtime/pm/features/DocumentApi/utils/getEmbedJson.ts

@@ -0,0 +1,16 @@
+export function getEmbedJson(
+	nodeWanted: Record<string, any> | undefined
+): Record<string, any> | undefined {
+	if (nodeWanted) {
+		return {
+			type: "doc",
+			content: [
+				{
+					type: "list",
+					content: [nodeWanted as any]
+				}
+			]
+		}
+	}
+	return undefined
+}

package/src/runtime/pm/features/DocumentApi/utils/getEmbedNodeFromDoc.ts

@@ -0,0 +1,15 @@
+import { walk } from "@alanscodelog/utils/walk"
+
+export function getEmbedNodeFromDoc(json: Record<string, any>, subId: string | undefined): Record<string, any> | undefined {
+	if (!subId) return
+	let nodeWanted: Record<string, any> | undefined
+	walk(json.content, el => {
+		if (!nodeWanted && el && el.type === "item") {
+			if (el.attrs.blockId === subId) {
+				nodeWanted = el
+			}
+		}
+		return el
+	}, { before: true })
+	return nodeWanted
+}

package/src/runtime/pm/features/DocumentApi/utils/getStateEmbedRange.ts

@@ -0,0 +1,26 @@
+import type { Node } from "@tiptap/pm/model"
+
+import type { BlockId } from "../types.js"
+
+export function getStateEmbedRange(
+	doc: Node,
+	blockId: BlockId
+): { start: number, end: number } | { start: undefined, end: undefined } {
+	const id = blockId.blockId
+	let start: number | undefined
+	let end: number | undefined
+	doc.nodesBetween(0, doc.content.size, (node, pos) => {
+		if (start === undefined && node.type.name === "item" && node.attrs.blockId === id) {
+			start = pos
+			end = pos + node.nodeSize
+			return false
+		}
+		if (start !== undefined) return false
+		return true
+	})
+	if (start === undefined || end === undefined) {
+		return { start: undefined, end: undefined }
+	} else {
+		return { start, end }
+	}
+}

package/src/runtime/pm/features/DocumentApi/utils/isEmbedId.ts

@@ -0,0 +1,5 @@
+import type { EmbedId, MaybeEmbedId } from "../types.js"
+
+export function isEmbedId(embedId: MaybeEmbedId): embedId is EmbedId {
+	return embedId.docId !== undefined
+}

package/src/runtime/pm/features/EmbeddedDocument/Embedded.ts

@@ -0,0 +1,110 @@
+import { type Command, Extension } from "@tiptap/core"
+import { TextSelection } from "@tiptap/pm/state"
+
+import type { EmbeddedDocumentNodeOptions } from "./types.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		embeddedCommandRedirect: {
+			embeddedCommandRedirect: (
+				commandName: string,
+				args: any,
+			) => ReturnType
+		}
+	}
+}
+
+/**
+	* This is for "internal" use by the embedded editor only.
+	*
+	* It should not be registered by the root editor or the documentApi.
+	*
+	* It provides some additional communication between the embedded editor and the root editor.
+	*
+	* See {@link EmbeddedDocumentNodeOptions.embeddedBlockCommandRedirect} for more info.
+	*
+	* See also {@link redirectFromEmbedded} for creating redirectable commands.
+	*
+	* This extension should always be configured with the root editor and the getPos function from the embedded node view.
+	*
+	*/
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Embedded = Extension.create<EmbeddedDocumentNodeOptions>({
+	name: "embedded",
+	addOptions() {
+		return {
+			embeddedBlockCommandRedirect: undefined,
+			getPos: undefined as any,
+			rootEditor: undefined as any,
+			getEmbedId: undefined as any
+		}
+	},
+	addCommands() {
+		if (!this.options.rootEditor) {
+			throw new Error("Embedded: Extension must be configured with the root editor.")
+		}
+		if (!this.options.getPos) {
+			throw new Error("Embedded: Extension must be configured with the getPos function.")
+		}
+		if (!this.options.getEmbedId) {
+			throw new Error("Embedded: Extension must be configured with the getEmbedId function.")
+		}
+		const { rootEditor, getPos, getEmbedId } = this.options
+		return {
+			embeddedCommandRedirect: (
+				commandName: string,
+				args: any
+			): Command => ({ editor, dispatch }) => {
+				const embedId = getEmbedId()
+				const nodePos = getPos()
+				if (this.options.embeddedBlockCommandRedirect) {
+					const res = this.options.embeddedBlockCommandRedirect(commandName, args, { editor, rootEditor, nodePos, embedId, dispatch })
+					if (res !== undefined) return res
+				}
+				switch (commandName) {
+					case "insertFile":
+						return rootEditor.commands.insertFile(args[0], nodePos)
+					case "splitItem":
+						if (!nodePos) return false
+						return rootEditor.commands.command(({ tr, commands, state, dispatch }) => {
+							const from = nodePos
+							const schema = state.schema
+							if (schema.nodes.item) {
+								if (!dispatch) return true
+								const node = schema.nodes.item.createAndFill()
+								if (!node) return false
+								tr.insert(from + 1, node)
+								tr.setSelection(TextSelection.create(tr.doc, from + 3))
+								commands.focus()
+								return true
+							}
+							return false
+						})
+					case "indentItem":
+						if (!nodePos) return false
+						return rootEditor.commands.command(() => {
+							rootEditor.commands.indentItem(nodePos)
+							rootEditor.commands.setNodeSelection(nodePos + 2)
+							return true
+						})
+					case "unindentItem":
+						if (!nodePos) return false
+						return rootEditor.commands.command(() => {
+							rootEditor.commands.unindentItem(nodePos)
+							rootEditor.commands.setNodeSelection(nodePos - 2)
+							return true
+						})
+					default:
+
+						// eslint-disable-next-line no-console
+						console.warn(`No redirect handler found for command ${commandName}`)
+						break
+				}
+				return false
+			}
+		}
+	}
+})

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

@@ -0,0 +1,102 @@
+import { isBlank } from "@alanscodelog/utils/isBlank"
+import { mergeAttributes, Node } from "@tiptap/core"
+import { VueNodeViewRenderer } from "@tiptap/vue-3"
+
+import EmbeddedNodeView from "./components/EmbeddedNodeView.vue"
+
+import type { HTMLAttributesOptions } from "../../../types/index.js"
+import { isValidId } from "../Blocks/utils/isValidId.js"
+
+declare module "@tiptap/core" {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+		embeddedDocument: {
+		}
+	}
+}
+
+/**
+ * Extension that adds support for embedded documents.
+ *
+ * Must be used with the provided `History` extension instead of the normal one.
+ *
+ * The node view provides `isEmbedded` and `isDeepEmbedded` for any child component instances.
+ *
+ * If using a custom editor wrapper, you will need to:
+ *
+ * - Provide the custom editor wrapper component with the {@link embeddedEditorComponentInjectionKey} injection key. The component should expose the tiptap editor instance with `defineExpose` as the `editor` property.
+ * - Provide the document api by creating an instance of the {@link DocumentApi} class and providing it with the {@link documentApiInjectionKey}.
+ * - Provide a ref to it's document's id with the {@link parentEditorIdInjectionKey} if it's using ids to load documents so that the EmbeddedNodeview can detect circular embeds and avoid rendering them.
+ * - Add the class `editor-is-embedded-block` to the editor wrapper (it must be the immediate parent of view.dom) so commands such as enter can check if they should act differently. See {@link isEmbeddedBlock}.
+ */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const EmbeddedDocument = Node.create<HTMLAttributesOptions>({
+	name: "embeddedDoc" satisfies NodeEmbeddedDocumentName,
+	group: "block",
+	draggable: false,
+	atom: true,
+	// defining: true,
+	addNodeView() {
+		// am having lint only issues
+		return VueNodeViewRenderer(EmbeddedNodeView, {
+			stopEvent() {
+				return true
+			},
+			ignoreMutation() {
+				return true
+			}
+		})
+	},
+	addOptions() {
+		return {
+			HTMLAttributes: {
+				default: { }
+			}
+		}
+	},
+	addAttributes() {
+		return {
+			embedId: {
+				default: { docId: undefined, blockId: undefined }
+			}
+		}
+	},
+	parseHTML() {
+		return [{
+			tag: `div[type=${this.name}]`,
+			getAttrs: (element: HTMLElement) => {
+				const docId = element.getAttribute("embeddocid")
+				if (docId === undefined || docId === null) { return false }
+				if (isBlank(docId) || !isValidId(docId)) {
+					return { embedId: { docId: undefined, blockId: undefined } }
+				}
+				const blockId = element.getAttribute("embedblockid")
+
+				return {
+					embedId: {
+						docId: isBlank(docId) || !isValidId(docId) ? undefined : docId,
+						blockId
+					}
+				}
+			}
+		}]
+	},
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	renderHTML({ HTMLAttributes }) {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		const mergedHTMLAttributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+			embeddocid: HTMLAttributes.embedId.docId ?? "",
+			embedblockid: HTMLAttributes.embedId.blockId,
+			type: this.name
+		})
+		delete mergedHTMLAttributes.embedId
+		return [
+			"div",
+			mergedHTMLAttributes
+		]
+	}
+})
+export type NodeEmbeddedDocumentName = "embeddedDoc"

package/src/runtime/pm/features/EmbeddedDocument/components/EmbeddedDocumentPicker.vue

@@ -0,0 +1,188 @@
+<template>
+<!-- v-if is to prevent styles from existing/getting applied to other documents when the popup is hidden, and also not having v-if on the editor causes problems with prosemirror -->
+<div
+	v-if="isShown"
+	class="
+		embedded-document-picker
+		w-[calc(100dvw-var(--spacing-20))]
+		max-h-[calc(100dvh-var(--spacing-20))]
+		overflow-auto
+		bg-neutral-100
+		dark:bg-neutral-900
+		p-2
+		rounded-sm
+		flex-1
+		flex
+		flex-col
+		gap-2
+	"
+>
+	<component
+		:is="'style'"
+	>
+		.embedded-document-picker li[blockid="{{ newEmbedId.blockId }}"]:not(:has(li:hover)):after {
+		border-color: rgb(var(--color-accent-500));
+		}
+		.embedded-document-picker li[blockid="{{ newEmbedId.blockId }}"]:has(li:hover):after {
+		border-color: rgb(var(--color-accent-500)/50%);
+		}
+	</component>
+	<!-- @vue-expect-error -->
+	<WSimpleInput
+		placeholder="Change document."
+		suggestions-class="max-h-[200px] overflow-y-auto"
+		:suggestions="searchSuggestions"
+		:suggestion-label="(suggestion:any) => suggestion.title"
+		:restrict-to-suggestions="false"
+		ref="inputComponent"
+		v-model="searchString"
+		@submit="pickDocId"
+	>
+		<!-- @vue-expect-error -->
+		<template
+			v-if="searchLoading"
+			#right
+		>
+			<WIcon><i-line-md-loading-loop/></WIcon>
+		</template>
+		<!-- @vue-expect-error -->
+		<template #suggestion-item="{ item }">
+			{{ item.title }}
+		</template>
+	</WSimpleInput>
+	<WCheckbox v-model="embedFullDocument">
+		Embed Full Document
+	</WCheckbox>
+	<div
+		v-if="!embedFullDocument && newEmbedId.docId"
+		class="border border-neutral-500 rounded-sm"
+	>
+		<div class="bg-neutral-200 dark:bg-neutral-800 rounded-t-sm p-1">
+			Pick a block to embed:
+		</div>
+		<div
+			class="
+			flex-1
+			[&_li]:after:rounded-sm
+			[&_li]:after:border-2
+			[&_li]:after:border-transparent
+			[&_li]:after:content-['']
+			[&_li]:after:absolute
+			[&_li]:after:inset-[-3px]
+			[&_li]:after:transition-all
+			[&_li]:cursor-pointer
+			[&_li]:after:pointer-events-none
+			[&_li:hover:not(:has(li:hover))]:after:content-['']
+			[&_li:hover:not(:has(li:hover))]:after:border-accent-500
+			[&_li:hover:not(:has(li:hover))]:after:bg-accent-500/30
+			[&_li:hover:not(:has(li:hover))]:after:pointer-events-none
+			[&_li:hover:not(:has(li:hover))]:pointer-events-all
+			[&_a]:pointer-events-none
+			overflow-y-auto
+			p-2
+		"
+			@pointerdown.prevent
+			@pointerup.prevent="pickBlockId"
+		>
+			<!-- @vue-expect-error -->
+			<Editor
+				:is-embedded="true"
+				:doc-id="newEmbedId.docId"
+				:editor-options="{ editable: false }"
+			/>
+		</div>
+	</div>
+	<div class="flex flex-row no-wrap gap-2 justify-end">
+		<!-- @vue-expect-error -->
+		<WButton
+			color="danger"
+			@click="emit('cancel')"
+		>
+			Cancel
+		</WButton>
+		<!-- @vue-expect-error -->
+		<WButton
+			color="ok"
+			@click="submit"
+		>
+			Submit
+		</WButton>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import WIcon from "@witchcraft/ui/components/Icon"
+import WButton from "@witchcraft/ui/components/LibButton"
+import WCheckbox from "@witchcraft/ui/components/LibCheckbox"
+import type WInputDeprecated from "@witchcraft/ui/components/LibInputDeprecated"
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput"
+import { inject, nextTick, provide, ref, toRef, watch } from "vue"
+
+import ILineMdLoadingLoop from "~icons/line-md/loading-loop"
+
+import Editor from "../../../../components/Editor.vue"
+import { documentApiInjectionKey, type MaybeEmbedId } from "../../DocumentApi/types.js"
+import { isDeepEmbeddedInjectionKey } from "../types.js"
+
+const props = defineProps<{
+	embedId: MaybeEmbedId
+	/** We need this, otherwise prosemirror? gets in an infinite loop because the component is not actually displayed? I think... Chrome debugger freezes completely. */
+	isShown: boolean
+}>()
+const emit = defineEmits<{
+	(e: "submit", embedId: MaybeEmbedId): void
+	(e: "cancel"): void
+}>()
+
+const embedId = toRef(props, "embedId")
+const newEmbedId = ref<MaybeEmbedId>({ ...props.embedId })
+// const editorComponent = inject(embeddedEditorComponentInjectionKey, Editor)
+const documentApi = inject(documentApiInjectionKey)
+
+// make this work like an un-embedded editor
+provide(isDeepEmbeddedInjectionKey, true)
+
+function pickBlockId(e: MouseEvent) {
+	const el = e.target as HTMLElement
+	const item = el.closest(".item-content")
+	const id = item?.getAttribute("blockid")
+	if (id) {
+		newEmbedId.value.blockId = id
+	}
+}
+
+// bit of an ugly hack but it works
+const justPicked = ref(false)
+const inputComponent = ref<InstanceType<typeof WInputDeprecated> | null>(null)
+const searchString = ref("")
+const searchLoading = ref(false)
+const searchSuggestions = ref<{ title: string, docId: string }[]>([])
+watch(searchString, async newVal => {
+	if (justPicked.value) return
+	searchLoading.value = true
+	inputComponent.value?.suggestionsComponent?.suggestions.close()
+	searchSuggestions.value	= await documentApi!.getSuggestions(newVal)
+	inputComponent.value?.suggestionsComponent?.suggestions.open()
+	searchLoading.value = false
+}, { immediate: true })
+
+function pickDocId(_val: string, suggestion?: { docId: string, title: string }) {
+	if (suggestion?.docId) {
+		newEmbedId.value.docId = suggestion.docId
+		justPicked.value = true
+		nextTick(() => {
+			justPicked.value = false
+		})
+	}
+}
+
+const embedFullDocument = ref(embedId.value.blockId === undefined)
+function submit() {
+	if (embedFullDocument.value) {
+		emit("submit", { ...newEmbedId.value, blockId: undefined })
+	} else {
+		emit("submit", newEmbedId.value)
+	}
+}
+</script>