@witchcraft/editor 0.0.1

package/src/runtime/pm/features/Blocks/plugins/ensureLastItemIsContentPlugin.ts

@@ -0,0 +1,52 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import { getNodeType } from "@tiptap/core"
+import type { NodeType } from "@tiptap/pm/model"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+import { createStateOnlyPluginApply } from "../../../utils/createStateOnlyPluginApply.js"
+
+export const ensureLastBlockIsParagraphPluginKey = new PluginKey("ensureLastBlockIsParagraphPluginKey")
+
+/**
+ * Ensures that the last block is a paragraph for better cursor movement.
+ *
+ * Can be disabled for testing by initializing the plugin with `initialState: false`.
+ */
+export function ensureLastItemIsContentPlugin(
+	contentTypeOrName: string | NodeType,
+	itemTypeOrName: string | NodeType,
+	{ initialState = true }: { initialState?: boolean } = {}
+): Plugin {
+	return new Plugin({
+		key: ensureLastBlockIsParagraphPluginKey,
+		state: {
+			init() {
+				return initialState
+			},
+			apply: createStateOnlyPluginApply(ensureLastBlockIsParagraphPluginKey)
+		},
+		appendTransaction: (_trs, _oldState, newState) => {
+			const ignore = !ensureLastBlockIsParagraphPluginKey.getState(newState)
+			if (ignore) return undefined
+			const itemType = getNodeType(itemTypeOrName, newState.schema)
+			const contentType = getNodeType(contentTypeOrName, newState.schema)
+			const pos = newState.doc.content.size - 2
+			const $last = newState.doc.resolve(pos)
+			if ($last.node().type !== itemType) {
+				unreachable()
+			}
+			const $content = newState.doc.resolve(newState.doc.content.size - 3)
+			const tr = newState.tr
+			// note that sometimes $last.node() === $content.node()
+			// in the case of contentless blocks
+			// it should be fine though because their types shouldn't be the same
+			if ($content.node().type !== contentType) {
+				tr.insert($last.end() + 1, itemType.create({}, [
+					contentType.create()
+				]))
+				return tr
+			}
+			return undefined
+		}
+	})
+}

package/src/runtime/pm/features/Blocks/plugins/itemBlockIdPlugin.ts

@@ -0,0 +1,40 @@
+import type { NodeType } from "@tiptap/pm/model"
+import { Plugin, PluginKey, type Transaction } from "@tiptap/pm/state"
+
+import type { ItemNodeOptions } from "../types.js"
+import { fixBlockIds } from "../utils/fixBlockIds.js"
+
+export const itemBlockIdPluginKey = new PluginKey("itemBlockIdPlugin")
+
+export function itemBlockIdPlugin(
+	self: {
+		type: NodeType
+		options: ItemNodeOptions
+	}
+): Plugin {
+	let fixed = false
+	return new Plugin({
+		key: itemBlockIdPluginKey,
+		/** See {@link DocumentApi} */
+		stateInit: (tr: Transaction) => {
+			fixed = true
+			return fixBlockIds(
+				tr,
+				self.type,
+				self.options.idLength,
+				self.options.allowAnyIdLength
+			)
+		},
+		// in case the documentApi isn't being used to load documents
+		appendTransaction: (_, _oldState, newState) => {
+			if (fixed) return
+			fixed = true
+			return fixBlockIds(
+				newState.tr,
+				self.type,
+				self.options.idLength,
+				self.options.allowAnyIdLength
+			)
+		}
+	})
+}

package/src/runtime/pm/features/Blocks/plugins/itemHasSingularSelectionPlugin.ts

@@ -0,0 +1,32 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import { Decoration, DecorationSet } from "@tiptap/pm/view"
+
+export const itemHasSingularSelectionPluginKey = new PluginKey("itemHasSingularSelectionPluginKey")
+
+export function itemHasSingularSelectionPlugin(): Plugin {
+	return new Plugin({
+		// used to detect whether to show the handle
+		// if the user is using touch
+		key: itemHasSingularSelectionPluginKey,
+		props: {
+			decorations(state) {
+				const selection = state.selection
+				if (selection.from === selection.to) {
+					if (selection.from === 0) return undefined
+					const resolved = state.doc.resolve(selection.from)
+					if (resolved.depth <= 1) return undefined
+					const decoration = Decoration.node(
+						resolved.before(-1),
+						resolved.after(-1),
+						// values are passed correctly to the node view
+						// they can be booleans instead of strings at least
+						// not sure objects
+						{ hasSingularSelection: true } as any
+					)
+					return DecorationSet.create(state.doc, [decoration])
+				}
+				return undefined
+			}
+		}
+	})
+}

package/src/runtime/pm/features/Blocks/plugins/itemMenuPlugin.ts

@@ -0,0 +1,21 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+import { createStateOnlyPluginObjApply } from "../../../utils/createStateOnlyPluginObjApply.js"
+import type { ItemMenuPluginState } from "../types.js"
+
+export const itemMenuPluginKey = new PluginKey<ItemMenuPluginState>("item-menu")
+
+export function itemMenuPlugin(): Plugin<ItemMenuPluginState> {
+	return new Plugin<ItemMenuPluginState>({
+		key: itemMenuPluginKey,
+		state: {
+			init() {
+				return {
+					opened: false,
+					id: undefined
+				}
+			},
+			apply: createStateOnlyPluginObjApply(itemMenuPluginKey)
+		}
+	})
+}

package/src/runtime/pm/features/Blocks/states/stateful.ts

@@ -0,0 +1,41 @@
+import cancelledSvg from "./task/cancelled.svg?url"
+import checkedSvg from "./task/checked2.svg?url"
+import partialSvg from "./task/partial2.svg?url"
+import uncheckedSvg from "./task/unchecked.svg?url"
+
+import type { StatefulNodeStateEntry, StatefulNodeStates, StatefulNodeType } from "../types.js"
+
+function createStatefulNodeType<T extends StatefulNodeStateEntry[]>(entries: T, defaultValue: T[number]["value"]): StatefulNodeType<T> {
+	return { entries, default: defaultValue }
+}
+
+export const statefulStates: StatefulNodeStates = {
+	task: createStatefulNodeType(
+		[
+			{
+				icon: `url(${uncheckedSvg})`,
+				value: "unchecked" as const
+			},
+			{
+				icon: `url(${partialSvg})`,
+				value: "partial" as const
+			},
+			{
+				icon: `url(${checkedSvg})`,
+				// icon: "☑",
+				value: "checked" as const,
+				isChecked: true
+			},
+			{
+				icon: `url(${cancelledSvg})`,
+				value: "cancelled" as const,
+				isChecked: true
+			}
+		].map(_ => ({
+			isEnabled: true,
+			isChecked: _.isChecked ?? false,
+			..._
+		})),
+		"unchecked"
+	)
+}

package/src/runtime/pm/features/Blocks/states/task/cancelled.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16px"
+   height="16px"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+  <g
+     id="g4"
+     transform="matrix(0.64463749,0,0,0.64463749,-14.168367,6.9425683)">
+    <path
+       style="fill:none;stroke:#303030;stroke-width:3.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 26.388889,-6.3596491 16,16"
+       id="path3" />
+    <path
+       style="fill:none;stroke:#303030;stroke-width:3.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.388889,-6.3596491 -16,16"
+       id="path4" />
+  </g>
+</svg>

package/src/runtime/pm/features/Blocks/states/task/checked.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+	height="1em"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+  <rect
+     style="fill:#303030;fill-opacity:1;stroke:none;stroke-width:1.06318;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     id="rect2"
+     width="12"
+     height="12"
+     x="2"
+     y="2"
+     ry="1.2452831" />
+</svg>

package/src/runtime/pm/features/Blocks/states/task/checked2.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16px"
+   height="16px"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+  <path
+     style="fill:none;stroke:#303030;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 2.8965023,7.8937535 6.5971043,11.41698 13.103498,4.5830203"
+     id="path2" />
+</svg>

package/src/runtime/pm/features/Blocks/states/task/partial.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16px"
+   height="16px"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+  <path
+     id="rect2"
+     style="fill:#303030;fill-opacity:1;stroke:none;stroke-width:1.06318;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="M 13.636719 2.3632812 L 2.3632812 13.636719 C 2.588366 13.861803 2.9011507 14 3.2460938 14 L 12.753906 14 C 13.443792 14 14 13.443792 14 12.753906 L 14 3.2460938 C 14 2.9011507 13.861803 2.588366 13.636719 2.3632812 z " />
+</svg>

package/src/runtime/pm/features/Blocks/states/task/partial2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16px"
+   height="16px"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:28.653px;line-height:1.25;font-family:sans-serif;fill:#303030;fill-opacity:1;stroke:none;stroke-width:0.716324"
+     x="2.1114926"
+     y="16.318651"
+     id="text4"
+     transform="scale(0.77730849,1.2864905)"><tspan
+       id="tspan4"
+       x="2.1114926"
+       y="16.318651"
+       style="stroke-width:0.716324">~</tspan></text>
+</svg>

package/src/runtime/pm/features/Blocks/states/task/unchecked.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16px"
+   height="16px"
+   viewbox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;paint-order:normal;stroke-opacity:1"
+     id="rect1"
+     width="15"
+     height="15"
+     x="0.5"
+     y="0.5"
+     ry="2.5" />
+</svg>

package/src/runtime/pm/features/Blocks/types.ts

@@ -0,0 +1,51 @@
+import type { Editor } from "@tiptap/core"
+import type { InjectionKey, Ref } from "vue"
+
+import type { HTMLAttributesOptions } from "../../../types/index.js"
+import type { Command, CommandGroup } from "../CommandsMenus/types.js"
+
+export interface ItemNodeOptions extends HTMLAttributesOptions {
+	types: string[]
+	states: StatefulNodeStates
+	idLength: number
+	/** Allows other id lengths so long as they are valid ids. Defaults to true. */
+	allowAnyIdLength: boolean
+	/**
+	 * If true, the `ensureLastItemIsContentPlugin` is added.
+	 *
+	 * Defaults to true. The option is available mostly for testing purposes.
+	 */
+	ensureLastItemIsParagraph: boolean
+}
+export interface ListNodeOptions extends HTMLAttributesOptions {}
+
+export const statesInjectionKey = Symbol("statesInjectionKey") as InjectionKey<Ref<StatefulNodeStates>>
+
+export type StatefulNodeStateEntry<T extends string = string> = {
+	icon: string
+	value: T
+	/** Whether ariaChecked should be true */
+	// todo rename
+	isChecked: boolean
+	isEnabled: boolean
+}
+export type StatefulNodeType<
+	T extends StatefulNodeStateEntry[] = StatefulNodeStateEntry[],
+	TDefault extends T[number]["value"] = T[number]["value"]
+> = {
+	entries: T
+	default: TDefault
+}
+export type StatefulNodeStates = Record<string, StatefulNodeType>
+
+export type ItemMenuPluginState = {
+	opened: boolean
+	id?: string
+}
+export { itemMenuPluginKey } from "./plugins/itemMenuPlugin.js"
+
+export type ItemMenuCommand = Command<
+	("$blockId" | "$blockPos" | "$contentPos" | any)[],
+	((editor: Editor, context: { blockId?: string, blockPos: number, contentPos: number }) => any[])
+>
+export type ItemMenuGroup = CommandGroup<never, ItemMenuCommand, true>

package/src/runtime/pm/features/Blocks/utils/createItemMenuCommandExecuter.ts

@@ -0,0 +1,47 @@
+import { castType } from "@alanscodelog/utils/castType"
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { Editor } from "@tiptap/core"
+
+import type { ItemMenuCommand } from "../types.js"
+
+export function createItemMenuCommandExecuter(
+	getBlockId: () => string | undefined
+
+) {
+	return function itemMenuCommandExecuter(
+		item: ItemMenuCommand,
+		editor: Editor
+	): void {
+		const blockId = getBlockId()
+
+		if (blockId === undefined) {
+			// eslint-disable-next-line no-console
+			console.warn("No blockId found, this is probably a bug.")
+			return
+		}
+		if (item.type === "command") {
+			const blockEl = editor!.view.dom.querySelector(`li[blockid='${blockId}']`)
+
+			const blockPos = editor!.view.posAtDOM(blockEl!, 0)
+			if (blockId !== undefined && blockPos <= -1) unreachable()
+
+			const args = typeof item.args === "function"
+				? item.args(editor, { blockId, blockPos, contentPos: blockPos + 1 })
+				: item.args?.map((arg: any) =>
+					arg === "$blockId"
+						? blockId
+						: arg === "$blockPos"
+							? blockPos
+							: arg === "$contentPos"
+								? blockPos + 1
+								: arg
+				) ?? []
+			editor!.commands
+				.command(({ commands }) => {
+					castType<ItemMenuCommand>(item)
+					;(commands as any)[(item).command!](...args)
+					return true
+				})
+		}
+	}
+}

package/src/runtime/pm/features/Blocks/utils/fixBlockIds.ts

@@ -0,0 +1,28 @@
+import type { NodeType } from "@tiptap/pm/model"
+import type { Transaction } from "@tiptap/pm/state"
+import { nanoid } from "nanoid"
+
+import { isValidId } from "./isValidId.js"
+
+/** Ensures no block ids are missing, duplicated, or invalid. If no id length is given, any id length is valid. */
+export function fixBlockIds(tr: Transaction, type: NodeType, idLength: number, allowOtherIdLengths: boolean = false): Transaction {
+	const seen = new Set<string>()
+	tr.doc.descendants((node, pos) => {
+		if (node.type === type) {
+			const isValid = isValidId(
+				node.attrs.blockId,
+				allowOtherIdLengths ? undefined : idLength
+			)
+			if (!isValid || seen.has(node.attrs.blockId)) {
+				const blockId = nanoid(idLength)
+				tr.setNodeAttribute(pos, "blockId", blockId)
+				seen.add(blockId)
+			} else {
+				seen.add(node.attrs.blockId)
+			}
+		}
+	})
+	tr.setMeta("preventClearDocument", true)
+	tr.setMeta("addToHistory", false)
+	return tr
+}

package/src/runtime/pm/features/Blocks/utils/isValidId.ts

@@ -0,0 +1,8 @@
+export const idRegex = /^[\w-]+$/
+export function isValidId(id: string | undefined | null, length?: number): boolean {
+	// technically it's not possible to have an undefined id anymore, but leaving just in case
+	if (id === undefined || id === null || (length !== undefined && id.length !== length) || !idRegex.test(id)) {
+		return false
+	}
+	return true
+}

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

@@ -0,0 +1,104 @@
+import { CodeBlockLowlight as TipTapCodeBlockLowlight } from "@tiptap/extension-code-block-lowlight"
+import type { Node as ProsemirrorNode } from "@tiptap/pm/model"
+import { mergeAttributes, VueNodeViewRenderer } from "@tiptap/vue-3"
+import { createLowlight } from "lowlight"
+
+import { codeBlockEnterOrSplit } from "./commands/codeBlockEnterOrSplit.js"
+import { codeBlockIndent } from "./commands/codeBlockIndent.js"
+import { codeBlockUnindent } from "./commands/codeBlockUnindent.js"
+import { focusCodeBlockLanguage } from "./commands/focusCodeBlockLanguage.js"
+import CodeBlockView from "./components/CodeBlockView.vue"
+
+// languages are registered asynchronously by useAsyncCodeBlockHighlighting
+export const lowlightInstance = createLowlight()
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const CodeBlock = TipTapCodeBlockLowlight.extend({
+	name: "codeBlock" satisfies NodeCodeBlockName,
+	group: "block",
+	marks: "",
+	addOptions() {
+		return {
+			...(this as any).parent?.(),
+			defaultLanguage: null,
+			lowlight: lowlightInstance
+		}
+	},
+
+	addAttributes() {
+		return {
+			...(this as any).parent?.(),
+			language: {
+				default: ""
+			},
+			loading: {
+				default: true
+			}
+		}
+	},
+	parseHTML() {
+		return [
+			{
+				// pre > code not working?
+				tag: "pre",
+				preserveWhitespace: "full",
+				getAttrs: (node: HTMLElement) => {
+					const child = node.children[0]
+					if (!child) return false
+					const language = child.getAttribute("language")
+					if (language) {
+						return { language }
+					}
+					const match = Array.from(node.classList).find(_ => _.startsWith("language-"))
+					if (match) {
+						return {
+							language: match.slice("language-".length)
+						}
+					}
+					return false
+				}
+			}
+		]
+	},
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	renderHTML({ node, HTMLAttributes }: { node: ProsemirrorNode, HTMLAttributes: any }) {
+		const classes = node.attrs.language
+			? this.options.languageClassPrefix + node.attrs.language
+			: ""
+		return [
+			"pre",
+			[
+				"code",
+				mergeAttributes(
+					this.options.HTMLAttributes,
+					{ language: node.attrs.language },
+					HTMLAttributes,
+					{
+						class: `${classes} ${HTMLAttributes?.class ?? this.options.HTMLAttributes?.class ?? ""}`
+					}
+				),
+				0
+			]
+		]
+	},
+	addNodeView() {
+		// am having lint only issues
+		return VueNodeViewRenderer(CodeBlockView)
+	},
+	addCommands() {
+		const self = this as any
+		return {
+			...self?.parent?.(),
+			codeBlockEnterOrSplit: codeBlockEnterOrSplit(this.name),
+			focusCodeBlockLanguage: focusCodeBlockLanguage(this.name),
+			codeBlockIndent: codeBlockIndent(this.name),
+			codeBlockUnindent: codeBlockUnindent(this.name)
+		}
+	},
+	addKeyboardShortcuts() {
+		return {}
+	}
+})
+
+export type NodeCodeBlockName = "codeBlock"

package/src/runtime/pm/features/CodeBlock/build/generateHighlightJsInfo.js

@@ -0,0 +1,63 @@
+import { crop } from "@alanscodelog/utils"
+// this import registers all languages
+import hljs from "highlight.js"
+import fs from "node:fs"
+import path from "node:path"
+
+const list = Object.fromEntries(hljs.listLanguages()
+	.map(lang => [
+		lang,
+		{
+			aliases: hljs.getLanguage(lang).aliases
+		}
+	]))
+
+if (list.length === 0) {
+	throw new Error("No languages found, something is wrong with the import.")
+}
+
+const fileContents = crop`
+/* eslint-disable */
+import { keys } from "@alanscodelog/utils/keys"
+
+/**
+ * This is an auto-generated file.
+ *
+ * Do not edit manually.
+ *
+ * See build/utils/generateHighlightJsInfo.js
+ */
+
+type LanguageState = Record<string, { loaded: boolean, aliases: string[] }>
+
+export type HighlightJsLanguageInfo = {
+	languages: LanguageState
+	aliases: Record<string, string>
+}
+
+const rawLanguages: Record<string, Partial<LanguageState[string]>> = ${JSON.stringify(list, null, "\t")}
+
+for (const lang of (keys(rawLanguages as any))) {
+	(rawLanguages as any)[lang].loaded = false
+}
+
+
+export const highlightJsLanaguages: HighlightJsLanguageInfo = {
+	languages: rawLanguages as any,
+	aliases: Object.fromEntries(
+		(keys(rawLanguages)
+			.map(lang =>
+				[
+					...(rawLanguages[lang].aliases?.map(alias => [alias,lang]) ?? []),
+					[lang, lang]
+				]
+			))
+			.flat()
+	)
+}
+`
+const dirPath = path.resolve(import.meta.dirname)
+fs.writeFileSync(
+	path.resolve(dirPath, "../highlightJsInfo.ts"),
+	fileContents
+)