@witchcraft/editor 0.0.1

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

@@ -0,0 +1,163 @@
+import { mergeAttributes, Node, nodePasteRule, type PasteRuleMatch } from "@tiptap/core"
+import { VueNodeViewRenderer } from "@tiptap/vue-3"
+
+import IframeNodeView from "./components/IframeNodeView.vue"
+import { defaultAllow, InstagramSourceParser, VimeoSourceParser, YoutubeSourceParser } from "./IframeParsers.js"
+import type { IframeNodeOptions } from "./types.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		iframe: {
+			/**
+			 * Add an iframe
+			 */
+			setIframe: (options: { src: string }) => ReturnType
+			/**
+			 * Set the options for the iframe plugin, such as the default HTMLAttributes and the url handlers.
+			 */
+			setIframeOptions: (options: IframeNodeOptions) => ReturnType
+			openExternalLink: (url: string) => ReturnType
+		}
+	}
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Iframe = Node.create<IframeNodeOptions>({
+	name: "iframe" satisfies NodeIframeName,
+
+	group: "block",
+
+	atom: true,
+
+	addOptions() {
+		return {
+			HTMLAttributes: {
+			},
+			handlers: {
+				youtube: new YoutubeSourceParser(),
+				instagram: new InstagramSourceParser(),
+				vimeo: new VimeoSourceParser()
+			}
+		}
+	},
+
+	addAttributes() {
+		return {
+			src: {
+				default: null
+			},
+			frameborder: {
+				default: 0
+			},
+			allow: defaultAllow,
+			aspectRatio: {
+				default: 16 / 9
+			}
+		}
+	},
+
+	parseHTML() {
+		return [{
+			tag: "iframe",
+			getAttrs: (element: HTMLElement) => {
+				const src = element.getAttribute("src")
+				if (!src) {
+					return false
+				}
+				for (const value of Object.values(this.options.handlers)) {
+					if (value.matchUrl?.test(src)) {
+						const attrs = value.parseAttributes(element)
+						if (attrs) {
+							return {
+								...attrs,
+								src: value.cleanUrl(src)
+							}
+						}
+					}
+				}
+				return { src }
+			}
+		}]
+	},
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+				class: `
+					iframe-wrapper
+					group/embed
+					relative
+					w-[99%]
+					max-w-[var(--pm-max-embed-width)]
+					${HTMLAttributes?.class ?? this.options.HTMLAttributes?.class ?? ""}
+				`
+			}),
+			[
+				"iframe",
+				{ class: "w-full aspect-video" }
+			]
+		]
+	},
+	addPasteRules() {
+		return [
+			nodePasteRule({
+				find: text => {
+					for (const [key, value] of Object.entries(this.options.handlers)) {
+						if (!value.matchUrl) continue
+						const res = text.match(value.matchUrl)
+
+						if (res) {
+							return [
+								{
+									...res,
+									text,
+									index: 0,
+									type: key
+								} satisfies PasteRuleMatch & { type: string }
+							]
+						}
+					}
+					return null
+				},
+				type: this.type,
+				getAttributes: match => {
+					for (const value of Object.values(this.options.handlers)) {
+						if (value.matchUrl && match[0].match(value.matchUrl)) {
+							return {
+								...value.defaultAttributes,
+								src: value.cleanUrl(match[0])
+
+							}
+						}
+					}
+					return false
+				}
+			})
+		]
+	},
+	addNodeView() {
+		// am having lint only issues
+		return VueNodeViewRenderer(IframeNodeView)
+	},
+	addCommands() {
+		return {
+			setIframe: (options: { src: string }) => ({ tr, dispatch }) => {
+				const { selection } = tr
+				const node = this.type.create(options)
+
+				if (dispatch) {
+					tr.replaceRangeWith(selection.from, selection.to, node)
+				}
+
+				return true
+			},
+			setIframeOptions: (options: IframeNodeOptions) => ({ commands }) => commands.updateAttributes(this.name, options)
+		}
+	}
+})
+
+export type NodeIframeName = "iframe"

package/src/runtime/pm/features/Iframe/IframeParsers.ts

@@ -0,0 +1,116 @@
+// todo async oembed paste, much pain
+
+export const defaultAllow = ["fullscreen", "accelerometer", "autoplay", "clipboard-write", "encrypted-media", "gyroscope", "picture-in-picture", "web-share"].join(";")
+
+export function addDefaultQueryParams(parsedUrl: URL, defaultQueryParams: Record<string, any>): string {
+	for (const [key, value] of Object.entries(defaultQueryParams)) {
+		if (!parsedUrl.searchParams.has(key)) {
+			parsedUrl.searchParams.set(key, value)
+		}
+	}
+	return parsedUrl.toString()
+}
+export function getAspectRatio(element: HTMLElement, defaultRatio = 16 / 9): number | undefined {
+	const width = element.getAttribute("width")
+	const height = element.getAttribute("height")
+	const w = width ? Number.parseInt(width, 10) : null
+	const h = height ? Number.parseInt(height, 10) : null
+	if (typeof w === "number" && typeof h === "number") {
+		return w / h
+	}
+	return defaultRatio
+}
+type DefaultAttributes = Record<string, any> & {
+	aspectRatio: number
+}
+
+export interface IframeSourceParser {
+	defaultAttributes: DefaultAttributes
+	defaultQueryParams: Record<string, any>
+	// should also sanitize
+	parseAttributes: (element: HTMLElement) => Record<string, any> | false
+	cleanUrl: (url: string) => string
+	matchUrl?: RegExp
+}
+
+export class DefaultSourceParser implements IframeSourceParser {
+	cache: Map<string, any> = new Map()
+
+	defaultAttributes: DefaultAttributes = {
+		aspectRatio: 16 / 9
+	}
+
+	defaultQueryParams: Record<string, any> = {}
+
+	parseAttributes(element: HTMLElement): Record<string, any> | false {
+		const src = element.getAttribute("src")
+		const allow = element.getAttribute("allow")
+		const aspectRatio = getAspectRatio(element, this.defaultAttributes.aspectRatio)
+		if (!src) return false
+		return {
+			src,
+			allow,
+			aspectRatio
+		}
+	}
+
+	cleanUrl(url: string): string {
+		const parsedUrl = new URL(url)
+		addDefaultQueryParams(parsedUrl, this.defaultQueryParams)
+		return parsedUrl.toString()
+	}
+}
+export class YoutubeSourceParser extends DefaultSourceParser implements IframeSourceParser {
+	override defaultAttributes: DefaultAttributes = {
+		allow: defaultAllow,
+		referrerpolicy: "strict-origin-when-cross-origin",
+		allowfullscreen: "true",
+		aspectRatio: 16 / 9
+	}
+
+	override defaultQueryParams: Record<string, any> = {
+		controls: 1
+	}
+
+	matchUrl: RegExp = /^((?:https?:\/\/)?(?:www.)?(?:youtube.com|youtu.be.com)[^ ]*)$/g
+}
+export class InstagramSourceParser extends DefaultSourceParser implements IframeSourceParser {
+	override defaultAttributes: DefaultAttributes = {
+		aspectRatio: 9 / 12
+	}
+
+	override defaultQueryParams: Record<string, any> = {}
+
+	override cleanUrl(url: string): string {
+		const parsedUrl = new URL(url)
+		addDefaultQueryParams(parsedUrl, this.defaultQueryParams)
+		if (parsedUrl.pathname.includes("/embed")) {
+			return parsedUrl.toString()
+		} else {
+			parsedUrl.pathname += parsedUrl.pathname.endsWith("/") ? "embed" : "/embed"
+			return parsedUrl.toString()
+		}
+	}
+
+	matchUrl: RegExp = /^((?:https?:\/\/)?(?:www.)?instagram.com\/p[^ ]*)$/g
+}
+
+export class VimeoSourceParser extends DefaultSourceParser implements IframeSourceParser {
+	override defaultAttributes: DefaultAttributes = {
+		aspectRatio: 16 / 9,
+		allow: ["autoplay", "fullscreen", "picture-in-picture"].join(";")
+	}
+
+	matchUrl: RegExp = /^((?:https?:\/\/)?(?:www.)?(?:player.)?vimeo.com\/[^ ]*)$/g
+
+	override cleanUrl(url: string): string {
+		const parsedUrl = new URL(url)
+		addDefaultQueryParams(parsedUrl, this.defaultQueryParams)
+		if (parsedUrl.pathname.includes("/video") && parsedUrl.hostname.includes("player.vimeo.com")) {
+			return parsedUrl.toString()
+		} else {
+			parsedUrl.pathname = `/video${parsedUrl.pathname}`
+			return new URL(parsedUrl.pathname, "https://player.vimeo.com/video").toString()
+		}
+	}
+}

package/src/runtime/pm/features/Iframe/components/IframeNodeView.vue

@@ -0,0 +1,83 @@
+<template>
+<node-view-wrapper
+	:class="twMerge(`
+		frame-wrapper
+		group/embed
+		relative
+		max-w-[var(--pmMaxEmbedWidth)]
+		max-h-[var(--pmMaxEmbedHeight,_var(--pmMaxEmbedWidth))]
+	`)"
+	:style="`aspect-ratio: ${node.attrs.aspectRatio}`"
+>
+	<div
+		contenteditable="false"
+		class="
+			absolute
+			top-1
+			right-1
+			rounded-sm
+			bg-neutral-400/70
+			border-neutral-200
+			dark:bg-neutral-700/70
+			dark:border-neutral-700
+			p-1
+			flex
+			gap-1
+			opacity-0
+			group-hover/embed:opacity-100
+			transition-opacity
+		"
+	>
+		<!-- @vue-expect-error -->
+		<WButton
+			:border="false"
+			@click="deleteNode();editor.commands.focus()"
+		>
+			<WIcon><i-fa-solid-trash/></WIcon>
+		</WButton>
+		<!-- @vue-expect-error -->
+		<WButton
+			:border="false"
+			@click="copy(node.attrs.src)"
+		>
+			<WIcon><i-fa-solid-copy/></WIcon>
+		</WButton>
+		<!-- @vue-expect-error -->
+		<WButton
+			:border="false"
+			@click="openLink"
+		>
+			<WIcon><i-fa-solid-external-link-alt class="w-[1.25em]"/></WIcon>
+		</WButton>
+	</div>
+	<node-view-content
+		as="iframe"
+		:class="twMerge(`
+		w-full
+		`,
+			node.attrs.class
+		)"
+		:style="`aspect-ratio: ${node.attrs.aspectRatio}`"
+		v-bind="node.attrs"
+	/>
+	{{ Object.keys(node.attrs) }}
+</node-view-wrapper>
+</template>
+
+<script setup lang="ts">
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3"
+import WIcon from "@witchcraft/ui/components/Icon"
+import WButton from "@witchcraft/ui/components/LibButton"
+import { copy } from "@witchcraft/ui/helpers/copy"
+import { twMerge } from "tailwind-merge"
+
+import IFaSolidCopy from "~icons/fa-solid/copy"
+import IFaSolidExternalLinkAlt from "~icons/fa-solid/external-link-alt"
+import IFaSolidTrash from "~icons/fa-solid/trash"
+
+const props = defineProps(nodeViewProps)
+
+function openLink() {
+	props.editor.commands.openExternalLink(props.node.attrs.src)
+}
+</script>

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

@@ -0,0 +1,7 @@
+import type { IframeSourceParser } from "./IframeParsers.js"
+
+import type { HTMLAttributesOptions } from "../../../types/index.js"
+
+export interface IframeNodeOptions extends HTMLAttributesOptions {
+	handlers: Record<string, IframeSourceParser>
+}

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

@@ -0,0 +1,16 @@
+import type { Extension } from "@tiptap/core"
+import TipTapImage from "@tiptap/extension-image"
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Image = (TipTapImage as any as Extension /* vue-tsc issue */).configure({
+	HTMLAttributes: {
+		class: `
+			rounded-xs
+			block h-auto max-w-full 
+			[&.ProseMirror-selectednode]:outline
+			[&.ProseMirror-selectednode]:outline-offset-0
+			[&.ProseMirror-selectednode]:outline-accent-500
+		`
+	},
+	allowBase64: true
+})

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

@@ -0,0 +1,313 @@
+import { crop } from "@alanscodelog/utils/crop"
+import { keys } from "@alanscodelog/utils/keys"
+import { type Command, getAttributes } from "@tiptap/core"
+import { Link as TipTapLink, type LinkOptions } from "@tiptap/extension-link"
+import { Plugin, type PluginSpec, TextSelection } from "@tiptap/pm/state"
+
+import { type AdditionalLinkOptions as AdditionalLinkNodeOptions, type DirectLinkClickPluginState, directLinkClickWithModifierPluginKey, linkMenuPluginKey, type LinkMenuPluginState } from "./types.js"
+
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js"
+import { getMarkPosition } from "../../utils/getMarkPosition.js"
+import { getMarksInSelection } from "../../utils/getMarksInSelection.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		links: {
+			/**
+			 * Opens the link bubble menu when it's over a link and auto open is true.
+			 * If the menu is already open, it focuses it.
+			 */
+			openLinkMenu: (opts?: { type?: "external" | "internal" }) => ReturnType
+			/** Closes the menu and focuses back to the editor. */
+			closeLinkMenu: () => ReturnType
+			setLinkOpts: (opts: Partial<LinkOptions>) => ReturnType
+			setLinkMenuOpts: (
+				opts: Partial<Pick<
+					LinkMenuPluginState,
+					"autoOpen" | "allowAutoOpenOnRecentlyChangedLink"
+				>>
+			) => ReturnType
+			changeOrAddLink: (href: string, title: string, internal: boolean) => ReturnType
+			expandSelectionToLink: () => ReturnType
+			openInternalLink: (href: string) => ReturnType
+			openExternalLink: (href: string) => ReturnType
+		}
+	}
+}
+declare module "@tiptap/extension-link" {
+
+	interface LinkOptions extends AdditionalLinkNodeOptions {}
+}
+
+/**
+ * Extension of tiptap's link extension that can handle "internal" and "external" links.
+ *
+ * Adds an additional configurable `openLinkOnClickModifier` option.
+ *
+ * Requires the setting of the `openInternal` option if using internal links.
+ *
+ * If using a custom editor wrapper, you will need to add the `BubbleMenuLink` component somewhere in the wrapper or implement your own.
+ */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Link = TipTapLink.extend({
+	name: "link" satisfies MarkLinkName,
+	addOptions() {
+		const internalLinkRegex = /internal:\/\/[\w-]+/
+
+		return {
+			...(this as any).parent?.(),
+			openOnClick: false,
+			openLinkOnClickModifier: "ctrlKey" as const,
+			defaultProtocol: "https",
+			protocols: ["https", "internal", "http", "ftp", "ftps", "mailto", "tel", "callto", "sms", "cid", "xmpp", "internal"],
+			HTMLAttributes: {
+				...(this as any).parent?.().HTMLAttributes,
+				rel: "noopener noreferrer"
+			},
+			isInternalLink(href: string): boolean {
+				return !!href.match(internalLinkRegex)
+			},
+			openInternal: (href: string) => {
+				window.alert(crop`
+					Editor requesting to open internal link "${href}", but opening of internal links is not implemented.
+					Please specify how to open internal links with editor.commands.setLinkOpts.`)
+
+				// eslint-disable-next-line no-console
+				console.warn(crop`
+					Requesting to open internal link: ${href}.
+					Please specify how to open internal links with editor.commands.setLinkOpts.`)
+			},
+			openExternal: (href: string) => {
+				window.open(href, "_blank")
+			}
+		}
+	},
+	addAttributes() {
+		return {
+			...(this as any).parent?.(),
+			internal: {
+				default: false,
+				parseHTML: (el: HTMLElement) => {
+					const href = el.getAttribute("href")
+					return href && this.options.isInternalLink(href)
+				}
+			}
+		}
+	},
+	addKeyboardShortcuts() {
+		return {}
+	},
+	addCommands() {
+		return {
+			...(this as any).parent?.(),
+			openLinkMenu: (
+				{ type = "external" }: { type?: "external" | "internal" } = {}
+			): Command => ({ tr, state, dispatch }) => {
+				const wasState = linkMenuPluginKey.getState(state)?.state
+				const mark = getMarksInSelection(state).find(_ => _.type.name === this.name)
+				if (!dispatch) return true
+
+				tr.setMeta("addToHistory", false)
+
+				tr.setMeta(linkMenuPluginKey, {
+					type,
+					state:
+						wasState
+							? "focus"
+							: mark ? "open" : "focus"
+				})
+
+				return true
+			},
+			closeLinkMenu: (): Command => ({ tr, state, commands, dispatch }) => {
+				const wasState = linkMenuPluginKey.getState(state)?.state
+				if (!wasState) return false
+				if (dispatch) {
+					tr.setMeta(linkMenuPluginKey, { state: false, type: undefined })
+					commands.focus()
+				}
+				return true
+			},
+			setLinkMenuOpts: (
+				opts: Partial<Pick<LinkMenuPluginState, "autoOpen" | "allowAutoOpenOnRecentlyChangedLink">>
+			): Command => ({ tr, dispatch }) => {
+				if (dispatch) {
+					tr.setMeta(linkMenuPluginKey, opts)
+				}
+				return true
+			},
+			setLinkOpts: (opts: Partial<LinkOptions>): Command => ({ dispatch }) => {
+				if (!dispatch) return true
+				for (const key of keys(opts)) {
+					(this.options as any)[key] = opts[key]
+				}
+				return true
+			},
+			expandSelectionToLink: (): Command => ({ tr, state, dispatch }) => {
+				const markPos = getMarkPosition(state, this.type, state.selection.from)
+				if (!markPos) return false
+				if (dispatch) {
+					tr.setSelection(TextSelection.create(state.doc, markPos.from, markPos.to))
+				}
+				return true
+			},
+			changeOrAddLink: (
+				href: string,
+				text: string,
+				internal: boolean = false
+			): Command => ({ tr, state, commands, dispatch }) => {
+				const mark = getMarksInSelection(state).find(_ => _.type.name === this.name)
+				const newMark = this.type.create({ href, internal })
+				const markPos = mark && (getMarkPosition(state, this.type, state.selection.from) ?? getMarkPosition(state, this.type, state.selection.to))
+				const { from, to, empty } = state.selection
+				if (mark && markPos && (empty || (markPos.from <= from && markPos.to >= to))) {
+					if (!markPos) return false
+					if (dispatch) {
+						const content = tr.doc.cut(markPos.from, markPos.to).textContent
+						if (content !== text) {
+							tr.delete(markPos.from, markPos.to)
+							tr.insertText(text, markPos.from)
+							tr.addMark(markPos.from, markPos.from + text.length, newMark)
+						} else {
+							tr.removeMark(markPos.from, markPos.to, this.type)
+							tr.addMark(markPos.from, markPos.to, newMark)
+						}
+					}
+				} else {
+					if (dispatch) {
+						const newTo = to + text.length
+						tr.delete(from, to)
+						tr.insertText(text, from)
+						tr.addMark(from, newTo, newMark)
+						tr.setSelection(TextSelection.create(tr.doc, newTo, newTo))
+					}
+				}
+				if (dispatch) {
+					tr.setMeta(linkMenuPluginKey, { justChangedLink: true })
+				}
+				return commands.focus()
+			},
+			openInternalLink: (href: string): Command => ({ dispatch }) => {
+				if (dispatch) {
+					this.options.openInternal(href)
+				}
+				return true
+			},
+			openExternalLink: (href: string): Command => ({ dispatch }) => {
+				if (dispatch) {
+					this.options.openExternal(href)
+				}
+				return true
+			}
+		}
+	},
+	onCreate() {
+		if ("registerMenu" in this.editor.commands) {
+			this.editor.commands.registerMenu({
+				name: "linkMenu",
+				pluginKey: linkMenuPluginKey,
+				type: "mark",
+				closeCommand: "closeLinkMenu",
+				canShow: (_state, pluginState) => !!pluginState?.state
+			})
+		}
+		return undefined
+	},
+	addProseMirrorPlugins() {
+		const self = this
+		// see https://github.com/ueberdosis/tiptap/issues/3389
+		const directLinkClickWithModifierPlugin = new Plugin<DirectLinkClickPluginState>({
+			key: directLinkClickWithModifierPluginKey,
+			props: {
+				handleClick(view, _pos, event) {
+					if (self.options.openOnClick) return false
+					const attrs = getAttributes(view.state, "link")
+					const link = (event.target as HTMLElement)?.closest("a")
+					const modifier = self.options.openLinkOnClickModifier
+					if (!modifier || !link || !attrs.href) return false
+
+					if (event[modifier] && event.button === 0) {
+						if (attrs.internal) {
+							self.editor.commands.openInternalLink(attrs.href)
+						} else {
+							self.editor.commands.openExternalLink(attrs.href)
+						}
+
+						return true
+					}
+
+					return false
+				}
+			}
+		})
+
+		const linkMenuStatePlugin = new Plugin<LinkMenuPluginState>({
+			key: linkMenuPluginKey,
+			appendTransaction(_trs, oldState, newState) {
+				const value = linkMenuPluginKey.getState(newState)
+				const wasJustCreatedNewLink = value?.justChangedLink ?? false
+				const newMark = getMarksInSelection(newState).find(_ => _.type.name === self.name)
+				const prevMark = getMarksInSelection(oldState).find(_ => _.type.name === self.name)
+
+				const selectionSame = oldState.selection.eq(newState.selection)
+				if (!selectionSame) {
+					const wasOpen = value?.state ?? false
+					const allowAutoOpenOnRecentlyChangedLink = value?.allowAutoOpenOnRecentlyChangedLink ?? false
+					const considerUnchanged = allowAutoOpenOnRecentlyChangedLink && wasJustCreatedNewLink
+					const changedMark = prevMark !== newMark && !considerUnchanged
+					if ((value?.autoOpen ?? false) && newMark) {
+						const newStateValue = changedMark
+							? "open"
+							: wasOpen
+						const tr = newState.tr
+						tr.setMeta(
+							linkMenuPluginKey,
+							{
+								...value,
+								state: newStateValue,
+								justChangedLink: false,
+								type: newMark.attrs.internal ? "internal" : "external"
+							}
+						)
+						return tr
+					} else {
+						const tr = newState.tr
+						tr.setMeta(
+							linkMenuPluginKey,
+							{
+								...value,
+								state: false,
+								justChangedLink: false,
+								type: undefined
+							}
+						)
+						return tr
+					}
+				}
+				return undefined
+			},
+			state: {
+				init() {
+					return {
+						state: false,
+						justChangedLink: false,
+						type: undefined,
+						autoOpen: true,
+						allowAutoOpenOnRecentlyChangedLink: true
+					}
+				},
+				apply: createStateOnlyPluginObjApply(linkMenuPluginKey)
+			}
+		})
+		return [
+			...((this as any).parent?.() ?? []).filter((plugin: PluginSpec<any>) => (plugin.spec.key !== linkMenuPluginKey && plugin.spec.key !== directLinkClickWithModifierPluginKey)),
+			linkMenuStatePlugin,
+			directLinkClickWithModifierPlugin
+		]
+	}
+})
+
+export type MarkLinkName = "link"