@witchcraft/editor 0.0.1

package/src/runtime/pm/features/FileLoader/utils/readAsDataUrl.ts

@@ -0,0 +1,12 @@
+export async function readAsDataUrl(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const fileReader = new FileReader()
+		fileReader.readAsDataURL(file)
+		fileReader.onload = () => {
+			resolve(fileReader.result as string)
+		}
+		fileReader.onerror = e => {
+			reject(e)
+		}
+	})
+}

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

@@ -0,0 +1,21 @@
+import { HardBreak as TipTapHardBreak } from "@tiptap/extension-hard-break"
+/**
+ * Extends the tiptap hard break extension to set the linebreakReplacement option (which tiptap does not expose).
+ * This option tells prosemirror that when converting between blocks that can/can't show whitespace, it should use this node type to represent line breaks in node types that don't display them.
+ */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const HardBreak = TipTapHardBreak.extend({
+	extendNodeSchema(extension) {
+		// this is called multiple timese, once per node type ???
+		if (extension.name === "hardBreak") {
+			return {
+				linebreakReplacement: true
+			}
+		}
+		return {}
+	},
+	addKeyboardShortcuts() {
+		return {}
+	}
+})

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

@@ -0,0 +1,130 @@
+import { isArray } from "@alanscodelog/utils/isArray"
+import { keys } from "@alanscodelog/utils/keys"
+import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core"
+
+import { changeLevelAttr } from "./commands/changeLevelAttr.js"
+import type { HeadingNodeOptions } from "./types.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		heading: {
+			setHeading: (opts: {
+				level: HeadingNodeOptions["levels"][number]
+				onlyHeading: boolean
+			}, pos?: number) => ReturnType
+			toggleHeading: (opts: {
+				level: HeadingNodeOptions["levels"][number]
+			}) => ReturnType
+		}
+	}
+}
+
+/**
+ * Like tiptap's Heading extension, but makes it easier to configure per-level html attributes.
+ *
+ * Also the setHeading command has an option to only change the heading level if the text is already a heading.
+ *
+ * This is useful for when you want to change the heading level of a heading that is already in the document.
+ */
+
+// am not just extending because that drag's in tiptap's heading commands interface
+// and these commands have different signatures
+// it's less painful to just re-write
+// also might need to add heading ids/slugs in the future to make it possible to embed via headings
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Heading = Node.create<HeadingNodeOptions>({
+	name: "heading" satisfies NodeHeadingName,
+	content: "inline*",
+	group: "block",
+	defining: true,
+	addOptions() {
+		return {
+			levels: [1, 2, 3, 4, 5, 6],
+			HTMLAttributes: {
+				class: [
+					"text-xl",
+					"text-2xl/normal",
+					"text-3xl/normal",
+					"text-4xl/normal",
+					"text-5xl/normal",
+					"text-6xl/normal"
+				]
+			}
+		}
+	},
+
+	addAttributes() {
+		return {
+			level: {
+				default: 1,
+				rendered: false
+			}
+		}
+	},
+	parseHTML() {
+		return this.options.levels
+			.map((level: HeadingNodeOptions["levels"][number]) => ({
+				tag: `h${level}`,
+				attrs: { level }
+			}))
+	},
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	renderHTML({ HTMLAttributes, node }) {
+		const level = this.options.levels.includes(node.attrs.level)
+			? node.attrs.level
+			: this.options.levels[0]
+
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		const thisFinalHTMLAttributes = { ...this.options.HTMLAttributes }
+		for (const key of keys(thisFinalHTMLAttributes)) {
+			if (isArray(thisFinalHTMLAttributes[key])) {
+				thisFinalHTMLAttributes[key] = thisFinalHTMLAttributes[key][level - 1]
+			}
+		}
+		return [
+			`h${level}`,
+			mergeAttributes(
+				thisFinalHTMLAttributes,
+				HTMLAttributes,
+				{
+					level
+				}
+			),
+			0
+		]
+	},
+	addCommands() {
+		return {
+			setHeading: changeLevelAttr({
+				attributeKey: "level",
+				nodeType: this.type.name,
+				allowedValues: this.options.levels,
+				toggleGroups: ["block"]
+			}),
+			toggleHeading: ({ level = 1 }: { level: number }) => ({ commands }) => {
+				if (!this.options.levels.includes(level as any)) {
+					return false
+				}
+
+				return commands.toggleNode(this.name, "paragraph", { level })
+			}
+		}
+	},
+	addInputRules() {
+		// taken from tiptap-extension-heading
+		return this.options.levels.map(level => textblockTypeInputRule({
+			find: new RegExp(`^(#{1,${level}})\\s$`),
+			type: this.type,
+			getAttributes: {
+				level
+			}
+		}))
+	}
+
+})
+
+export type NodeHeadingName = "heading"

package/src/runtime/pm/features/Heading/commands/changeLevelAttr.ts

@@ -0,0 +1,55 @@
+import { type Command, getNodeType } from "@tiptap/core"
+
+import type { CommandAttributeOptions, CommandToggleNodesOptions } from "../../../../types/index.js"
+import { findUpwards } from "../../../utils/findUpwards.js"
+import { createNodeTypesList } from "../../../utils/internal/createNodeTypesList.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		changeLevelAttr: {
+			changeLevelAttr: (opts: {
+				level: number
+				onlyHeading: boolean
+			}, pos?: number) => ReturnType
+		}
+	}
+}
+
+export const changeLevelAttr = ({
+	nodeType,
+	allowedValues,
+	attributeKey,
+	toggleGroups,
+	toggleNodeTypeNames
+}: CommandAttributeOptions<number>
+	& CommandToggleNodesOptions
+) =>
+	({
+		level,
+		onlyHeadings = false
+	}: {
+		level: number
+		onlyHeadings?: boolean
+	}, pos?: number): Command =>
+		({ state, commands, tr, editor }) => {
+			if (!allowedValues.includes(level)) { return false }
+			const nodeTypes = createNodeTypesList(
+				editor.schema,
+				[nodeType],
+				onlyHeadings ? undefined : toggleNodeTypeNames,
+				onlyHeadings ? undefined : toggleGroups
+			)
+			const nodeTypeType = getNodeType(nodeType, editor.schema)
+			const from = pos ?? state.selection.map(tr.doc, tr.mapping).from
+
+			const nodePos = findUpwards(tr.doc, from, $pos => {
+				if (nodeTypes.includes($pos.node().type.name)) {
+					return true
+				}
+				return false
+			})?.$pos?.pos
+			if (!nodePos) return false
+			return commands.setNode(nodeTypeType, { [`${attributeKey}`]: level }, nodePos - 1)
+		}

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

@@ -0,0 +1,17 @@
+export interface HeadingNodeOptions<T extends number[] = [1, 2, 3, 4, 5, 6]> {
+	/**
+	 * The available heading levels.
+	 */
+	levels: T
+
+	/**
+	 * The HTML attributes for the heading node.
+	 *
+	 * Each value can also be an array of values for each heading level.
+	 *
+	 * The default adds tailwind text size classes.
+	 */
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	HTMLAttributes: Record<string, any>
+}

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

@@ -0,0 +1,234 @@
+import { keys } from "@alanscodelog/utils/keys"
+import {
+	Mark,
+	markInputRule,
+	markPasteRule,
+	mergeAttributes
+} from "@tiptap/core"
+import { Plugin } from "@tiptap/pm/state"
+
+import { inputRegex, pasteRegex } from "./retyped/tiptapHighlight.js"
+import { type HighlightMarkOptions, highlightPluginKey } from "./types.js"
+
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		highlight: {
+			/**
+			 * Set a highlight mark.
+			 *
+			 * The color must be one of the keys in the configured `colors` option or it will throw an error.
+			 *
+			 * If no color is provided, the default color will be used.
+			 */
+			setHighlight: (color?: keyof HighlightMarkOptions["colors"]) => ReturnType
+			/**
+			 * Toggle a highlight mark.
+			 *
+			 * The color must be one of the keys in the configured `colors` option or it will throw an error.
+			 *
+			 * If no color is provided, the default color will be used.
+			 */
+			toggleHighlight: (color?: keyof HighlightMarkOptions["colors"]) => ReturnType
+			/**
+			 * Unset a highlight mark.
+			 */
+			unsetHighlight: () => ReturnType
+			/**
+			 * Set the highlight options.
+			 *
+			 * Note that you will need to keep the same keys to avoid having to manually migrate the doc. You can add more keys, but again, not remove any without having to migrate the doc. That's why they are named slot* by default, to avoid tight coupling with colors.
+			 */
+			setHighlightOptions: (options: Partial<HighlightMarkOptions>) => ReturnType
+		}
+	}
+}
+
+export const defaultColors = {
+	slot1: {
+		name: "Yellow",
+		color: "rgba(255, 234, 54, 0.5)",
+		matches: ["#ffff00", "yellow"]
+	},
+	slot2: {
+		name: "Orange",
+		color: "rgba(255, 132, 0, 0.5)",
+		matches: ["#ffa500", "orange"]
+	},
+	slot3: {
+		name: "Red",
+		color: "rgba(255, 0, 0, 0.5)",
+		matches: ["#ff0000", "red"]
+	},
+	slot4: {
+		name: "Green",
+		color: "rgba(70, 177, 0, 0.5)",
+		matches: ["#008000", "green"]
+	},
+	slot5: {
+		name: "Blue",
+		color: "rgba(0, 101, 255, 0.5)",
+		matches: ["#0000ff", "blue"]
+	}
+}
+
+/**
+ * For highlighting text with pre-configured colors.
+ *
+ * Colors can be changed on the fly using setHighlightOptions.
+ *
+ * The Commands feature includes a HighlightIcon component designed to work with this extension. It's included in the CommandBar menu by default.
+ *
+ * See also `createToggleHighlightCommand` in commandBarMenuItems.ts for creating a custom number of commands with custom prefixes if needed.
+ */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Highlight = Mark.create<HighlightMarkOptions>({
+	name: "highlight" satisfies MarkHighlightName,
+	addOptions() {
+		return {
+			defaultColor: "slot1",
+			colors: defaultColors,
+			HTMLAttributes: {}
+		}
+	},
+
+	addAttributes() {
+		return {
+			color: {
+				default: null,
+				parseHTML: element => {
+					const color = element.getAttribute("data-color")
+					// <mark data-color="slot1"></mark>
+					if (color && color in this.options.colors) {
+						return color
+					}
+
+					// <mark style="background-color: yellow"></mark>
+					const bgColor = element.style.backgroundColor
+					// attempt to match against the color (unlikely) or alternative matches
+					const foundSimilar = keys(this.options.colors).find(key => {
+						const c = this.options.colors[key]
+						if (
+							c.color === color
+							|| (color && c.matches?.includes(color))
+							|| c.color === bgColor
+							|| c.matches?.includes(bgColor)
+						) return true
+						return false
+					})
+
+					if (foundSimilar) {
+						return foundSimilar
+					}
+
+					if (color) {
+						return this.options.defaultColor
+					}
+
+					return false
+				},
+				renderHTML: attributes => {
+					const color = attributes.color as keyof HighlightMarkOptions["colors"]
+					// is this even possible? it was in the original tiptap code
+					if (!color) {
+						return {}
+					}
+
+					const finalColor = this.options.colors[color]
+					return {
+						"data-color": finalColor.color,
+						style: `background-color: ${finalColor.color}; color: inherit`
+					}
+				}
+			}
+		}
+	},
+
+	parseHTML() {
+		return [
+			{
+				tag: "mark"
+			}
+		]
+	},
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	renderHTML({ HTMLAttributes }) {
+		return ["mark", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+	},
+
+	addCommands() {
+		return {
+			setHighlightOptions: (options: Partial<HighlightMarkOptions>) => ({ tr, dispatch }) => {
+				if (dispatch) {
+					tr.setMeta(highlightPluginKey, {
+						...options,
+						colors: (options.colors ? { ...options.colors } : undefined)
+					})
+				}
+				return true
+			},
+			setHighlight: color => ({ commands }) => {
+				if (color === undefined) {
+					return commands.setMark(this.name, { color: this.options.defaultColor })
+				}
+				if (color in this.options.colors) {
+					return commands.setMark(this.name, { color })
+				} else {
+					// typescript eslint is drunk, color is not an object
+					throw new Error(`Color ${color as string} not found in the Highlight options.`)
+				}
+			},
+			toggleHighlight: color => ({ commands }) => {
+				if (color === undefined) {
+					return commands.toggleMark(this.name, { color: this.options.defaultColor })
+				}
+				if (color in this.options.colors) {
+					return commands.toggleMark(this.name, { color })
+				} else {
+					throw new Error(`Color ${color as string} not found in the Highlight options.`)
+				}
+			},
+			unsetHighlight: () => ({ commands }) => commands.unsetMark(this.name)
+		}
+	},
+	addProseMirrorPlugins() {
+		const self = this
+		return [
+			new Plugin({
+				key: highlightPluginKey,
+				state: {
+					init() {
+						return {
+							...self.options,
+							colors: { ...self.options.colors }
+						}
+					},
+					apply: createStateOnlyPluginObjApply(highlightPluginKey)
+				}
+			})
+		]
+	},
+	addInputRules() {
+		return [
+			markInputRule({
+				find: inputRegex,
+				type: this.type
+			})
+		]
+	},
+
+	addPasteRules() {
+		return [
+			markPasteRule({
+				find: pasteRegex,
+				type: this.type
+			})
+		]
+	}
+})
+export type MarkHighlightName = "highlight"

package/src/runtime/pm/features/Highlight/retyped/tiptapHighlight.d.ts

@@ -0,0 +1,3 @@
+// see ./tiptapHighlight.js
+export declare const inputRegex: RegExp
+export declare const pasteRegex: RegExp

package/src/runtime/pm/features/Highlight/retyped/tiptapHighlight.js

@@ -0,0 +1,5 @@
+/** Avoid importing the module directly to avoid interface merging. */
+import { inputRegex as _inputRegex, pasteRegex as _pasteRegex } from "@tiptap/extension-highlight"
+
+export const inputRegex = _inputRegex
+export const pasteRegex = _pasteRegex

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

@@ -0,0 +1,25 @@
+import { PluginKey } from "@tiptap/pm/state"
+
+import type { HTMLAttributesOptions } from "../../../types/index.js"
+
+export interface HighlightMarkOptions<T extends string = `slot${[1, 2, 3, 4, 5][number]}`> extends HTMLAttributesOptions {
+	/**
+	 * The colors to use for the highlight in Record<name, {color: string, name: string}> format.
+	 *
+	 * This is to allow the colors/slots to be configurable by the user without needing to change the document when they do so since only the key is stored.
+	 *
+	 * The value is a record to allow additional properties to be stored.
+	 *
+	 * The `matches` property can be used to specify an additional array of strings/colors to match when parsing HTML.
+	 *
+	 * The default is Record<"slotX", {color: "rgbaa(...)", name: "colorName", matches?: [name, "#color"]}>
+	 */
+	colors: Record<T, { color: string, name: string, matches?: string[] }>
+	/**
+	 * For when a non-matching color is found in the HTML. Default is slot1 which is yellow.
+	 */
+	defaultColor: T
+}
+export const highlightPluginKey = new PluginKey<{
+	colors: HighlightMarkOptions["colors"]
+}>("highlightPluginKey")

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

@@ -0,0 +1,112 @@
+import type { Command, Dispatch, Extension } from "@tiptap/core"
+import TipTapHistoryExtension from "@tiptap/extension-history"
+import { history, redo, undo } from "@tiptap/pm/history"
+import { type EditorState, Plugin, PluginKey, type Transaction } from "@tiptap/pm/state"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		historyExtended: {
+
+			/**
+			 * Set the functions needed to forward history commands.
+			 *
+			 * Set to null to disable. Should be set to null before destroying the editor.
+			 */
+			setHistoryRedirect: (
+				redirectState?: () => EditorState | undefined,
+				redirectDispatch?: Dispatch
+			) => ReturnType
+		}
+	}
+}
+
+declare module "@tiptap/extension-history" {
+	interface HistoryOptions {
+		/**
+		 * If set, undo and redo will be forwarded to the editor this function returns instead of the current one. This makes handling embedded editors easier.
+		 *
+		 * This is a function so as to make it easier to always get the latest state.
+		 */
+		redirectState?: () => EditorState | undefined
+		/**
+		 * Required if redirectState is set. Tells the extension how to forward the transactions.
+		 */
+		redirectDispatch?: Dispatch
+	}
+}
+
+export const filterKey = "filterForHistoryForwarding"
+/**
+	* Extends the existing history extension to allow for forwarding of history for embedded editors.
+	*
+	* The embedded editor node view will take care of
+	*/
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const History = (TipTapHistoryExtension as any as Extension /* vue-tsc issue */).extend({
+	name: "history",
+	addOptions() {
+		return {
+			depth: 100,
+			newGroupDelay: 500,
+			redirectState: undefined,
+			redirectDispatch: undefined
+		}
+	},
+
+	addCommands() {
+		return {
+			undo: (): Command => ({ state, dispatch, tr }) => {
+				const redirectState = this.options.redirectState?.()
+				const redirectDispatch = dispatch && this.options.redirectDispatch
+				if (redirectState) {
+					// commands create transactions whether we return true or not
+					// and because we apply our own transaction before the command ends
+					// it thinks there is a state mismatch when it tries to apply the
+					// command transaction
+					// so we use the plugin to filter it out
+					if (dispatch) {
+						tr.setMeta(filterKey, true)
+					}
+					return undo(redirectState, redirectDispatch)
+				} else {
+					return undo(state, dispatch)
+				}
+			},
+			redo: (): Command => ({ state, dispatch, tr }) => {
+				const redirectState = this.options.redirectState?.()
+				const redirectDispatch = this.options.redirectDispatch
+				if (redirectState) {
+					tr.setMeta(filterKey, true)
+					redo(redirectState, redirectDispatch)
+					return true
+				} else {
+					return redo(state, dispatch)
+				}
+			},
+			setHistoryRedirect: (redirectState?: () => EditorState | undefined, redirectDispatch?: Dispatch): Command => ({ dispatch }) => {
+				if (dispatch) {
+					this.options.redirectState = redirectState
+					this.options.redirectDispatch = redirectDispatch
+				}
+				return true
+			}
+		}
+	},
+	addProseMirrorPlugins() {
+		return [
+			history(this.options),
+			new Plugin({
+				key: new PluginKey("history-forwarding"),
+				filterTransaction: (transaction: Transaction) => {
+					if (transaction.getMeta(filterKey)) {
+						return false
+					}
+					return true
+				}
+			})
+		]
+	}
+})