@witchcraft/editor 0.0.1

package/src/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -0,0 +1,125 @@
+<template>
+<div
+	class="flex flex-nowrap flex-row gap-1 items-start"
+	ref="el"
+>
+	<div class="flex flex-col gap-1">
+		<!-- @vue-expect-error -->
+		<WSimpleInput
+			class="text-input"
+			wrapper-class="flex flex-nowrap gap-1"
+			v-model="linkTextValue"
+			@keydown.esc="emit('close', $event)"
+			@submit="saveChanges"
+		>
+			<!-- @vue-expect-error -->
+			<template #label="slotProps">
+				<WLabel
+					v-bind="slotProps"
+					title="Link Text"
+					aria-label="Link Text"
+					class="flex items-center"
+				>
+					<i-ic-round-short-text class="w-[1.25em] !h-auto"/>
+				</WLabel>
+			</template>
+		</WSimpleInput>
+		<!-- @vue-expect-error -->
+		<WSimpleInput
+			class="link-input"
+			wrapper-class="flex flex-nowrap gap-1"
+			:suggestions="linkSuggestions"
+			v-model="linkHref"
+			@keydown.esc="emit('close', $event)"
+			@submit="saveChanges"
+		>
+			<!-- @vue-expect-error -->
+			<template #label="slotProps">
+				<WLabel
+					v-bind="slotProps"
+					aria-label="Location"
+					title="Location"
+					class="flex items-center"
+				>
+					<i-ic-round-link class="w-[1.25em] !h-auto"/>
+				</WLabel>
+			</template>
+		</WSimpleInput>
+	</div>
+	<div class="flex flex-col gap-1">
+		<BubbleMenuLinkActions
+			:link-mark="linkMark"
+			:link-href="linkHref"
+			:is-changed="isChanged"
+			@save="saveChanges"
+			@copy="emit('copy', $event)"
+			@remove="emit('remove')"
+		/>
+		<div class="flex flex-nowrap flex-row gap-1 justify-start border border-transparent">
+			<!-- @vue-expect-error -->
+			<WButton
+				v-if="linkHref"
+				:border="false"
+				class="text-neutral-700 dark:text-neutral-300"
+				aria-label="Go to Link"
+				title="Go to Link"
+				@click="goToLink"
+			>
+				<!-- The heroicons look a bit weird next to font awesome -->
+				<WIcon><i-fa-solid-external-link-alt class="w-[1.25em] !h-auto"/></WIcon>
+			</WButton>
+		</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Mark } from "@tiptap/pm/model"
+import type { Editor } from "@tiptap/vue-3"
+import WIcon from "@witchcraft/ui/components/Icon"
+import WButton from "@witchcraft/ui/components/LibButton"
+import WLabel from "@witchcraft/ui/components/LibLabel"
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput"
+import { ref } from "vue"
+
+import BubbleMenuLinkActions from "./BubbleMenuLinkActions.vue"
+
+// https://github.com/unplugin/unplugin-vue-components/issues/633
+import iFaSolidExternalLinkAlt from "~icons/fa-solid/external-link-alt"
+import iIcRoundLink from "~icons/ic/round-link"
+import iIcRoundShortText from "~icons/ic/round-short-text"
+
+const props = defineProps<{
+	editor: Editor
+	linkSuggestions?: string[]
+	linkMark: Mark | undefined
+	isChanged: boolean
+}>()
+const emit = defineEmits<{
+	close: [e?: Event]
+	copy: [value: string]
+	remove: []
+}>()
+const linkHref = defineModel<string>("linkHref", { required: true })
+const linkTextValue = defineModel<string>("linkTextValue", { required: true })
+const el = ref<HTMLElement | null>(null)
+
+function goToLink() {
+	window.open(linkHref.value, "_blank")
+}
+defineExpose({
+	focus: (type: "text" | "link") => {
+		const inputType = type === "link" ? "link-input" : "text-input"
+		const input = el.value?.querySelector(`.${inputType}`)
+		if (input && input instanceof HTMLInputElement) input.focus()
+	}
+})
+function saveChanges(e: Event | string) {
+	props.editor.commands.changeOrAddLink(
+		linkHref.value,
+		linkTextValue.value,
+		false
+	)
+	emit("close", e instanceof Event ? e : undefined)
+}
+</script>

package/src/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -0,0 +1,130 @@
+<template>
+<div
+	:class="twMerge(
+		`flex flex-col`,
+		isOpen && `gap-1`
+	)"
+	ref="el"
+>
+	<div class="flex flex-nowrap flex-row gap-1 items-center">
+		<!-- @vue-expect-error -->
+		<WLabel
+			id="menu-link-input"
+			title="Internal Link"
+			aria-label="Internal Link"
+			class="flex items-center"
+		>
+			<i-ic-round-link class="w-[1.25em] !h-auto"/>
+		</WLabel>
+		<!-- @vue-expect-error -->
+		<WSimpleInput
+			id="menu-link-input"
+			class="link-input"
+			:suggestions="linkSuggestions"
+			v-model="inputValue"
+			@submit="submitHandler"
+			@keydown="keydownHandler"
+			@blur="blurHandler"
+			@focus="canOpen = true"
+		/>
+		<BubbleMenuLinkActions
+			:link-mark="linkMark"
+			:is-changed="isChanged"
+			@save="saveChanges"
+			@copy="emit('copy', $event)"
+			@remove="emit('remove')"
+		/>
+	</div>
+	<WSuggestions
+		:suggestions="linkSuggestions"
+		:can-open="canOpen"
+		class="flex-1 rounded-sm overflow-hidden"
+		ref="suggestionsComponent"
+		v-model="linkText"
+		v-model:input-value="inputValue"
+		v-model:is-open="isOpen"
+		v-model:active-suggestion="activeSuggestion"
+		@submit="submitHandler"
+	/>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Mark } from "@tiptap/pm/model"
+import type { Editor } from "@tiptap/vue-3"
+import WLabel from "@witchcraft/ui/components/LibLabel"
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput"
+import WSuggestions from "@witchcraft/ui/components/LibSuggestions"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { ref, watch } from "vue"
+// https://github.com/vuejs/language-tools/issues/3206#issuecomment-1563399071
+import type { ComponentExposed } from "vue-component-type-helpers"
+
+import BubbleMenuLinkActions from "./BubbleMenuLinkActions.vue"
+
+// https://github.com/unplugin/unplugin-vue-components/issues/633
+import iIcRoundLink from "~icons/ic/round-link"
+
+const props = defineProps<{
+	editor: Editor
+	linkSuggestions?: string[]
+	linkMark: Mark | undefined
+	isChanged: boolean
+	getInternalLinkHref: (href: string) => string
+}>()
+const emit = defineEmits<{
+	close: [e?: Event]
+	copy: [value: string]
+	remove: []
+}>()
+
+const linkText = defineModel<string>("linkText", { required: true })
+const inputValue = defineModel<string>("tempLinkTextValue", { default: "" })
+const canOpen = ref(false)
+const isOpen = ref(false)
+const activeSuggestion = ref(-1)
+const el = ref<HTMLElement | null>(null)
+const suggestionsComponent = ref<ComponentExposed<typeof WSuggestions>>()
+
+watch(linkText, () => {
+	inputValue.value = linkText.value
+}, { immediate: true })
+
+// function goToLink() {
+// 	window.open(linkText.value, "_blank")
+// }
+
+function keydownHandler(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		emit("close", e)
+	}
+
+	(suggestionsComponent.value as any)?.inputKeydownHandler?.(e)
+}
+function saveChanges(e?: Event) {
+	const href = props.getInternalLinkHref(inputValue.value)
+	props.editor.commands.changeOrAddLink(
+		href,
+		inputValue.value,
+		true
+	)
+	emit("close", e)
+}
+
+function blurHandler(e: FocusEvent) {
+	(suggestionsComponent.value as any)?.inputBlurHandler?.(e)
+}
+// make the user hit enter once to select, then enter again to submit and close
+function submitHandler(): void {
+	if (linkText.value === inputValue.value) {
+		saveChanges()
+	}
+}
+
+defineExpose({
+	focus: () => {
+		const input = el.value?.querySelector(`input`)
+		if (input) input.focus()
+	}
+})
+</script>

package/src/runtime/pm/features/Link/components/BubbleMenuLink.vue

@@ -0,0 +1,149 @@
+<template>
+<!-- Every focusable element needs to checkCloseOnBlur to preserve focus when focusing to another element inside the component -->
+
+<div
+	v-if="showBubbleMenu"
+	tabindex="0"
+	:class="twMerge(`
+		rounded-sm
+		border-neutral-300
+		dark:border-neutral-700
+		border
+		bg-neutral-50
+		dark:bg-neutral-950
+		p-2
+	`)"
+>
+	<bubble-menu-external-link
+		v-if="!isInternalLink"
+		:editor="editor"
+		:link-suggestions="finalLinkSuggestions"
+		:link-mark="linkMark"
+		:is-changed="isChanged"
+		ref="component"
+		v-model:link-href="linkHref"
+		v-model:link-text-value="linkTextValue"
+		@close="close"
+		@copy="copy"
+		@remove="removeLink"
+	/>
+	<bubble-menu-internal-link
+		v-if="isInternalLink"
+		:editor="editor"
+		:link-suggestions="finalInternalLinkSuggestions"
+		:link-mark="linkMark"
+		:is-changed="isChanged"
+		:get-internal-link-href="getInternalLinkHref"
+		ref="component"
+		v-model:link-text="linkTextValue"
+		@close="close"
+		@copy="copy"
+		@remove="removeLink"
+	/>
+</div>
+</template>
+
+<script setup lang="ts">
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { Mark } from "@tiptap/pm/model"
+import type { Editor } from "@tiptap/vue-3"
+import { copy } from "@witchcraft/ui/helpers/copy"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from "vue"
+
+import BubbleMenuExternalLink from "./BubbleMenuExternalLink.vue"
+
+import { getMarkPosition } from "../../../utils/getMarkPosition.js"
+import { getMarksInSelection } from "../../../utils/getMarksInSelection.js"
+import { linkMenuPluginKey } from "../types.js"
+
+const props = defineProps<{
+	editor: Editor
+	linkSuggestions?: string[]
+	internalLinkSuggestions?: string[]
+	getLinkSuggestions?: (href: string, text: string) => string[]
+	getLinkInternalSuggestions?: (href: string) => string[]
+	getInternalLinkHref: (title: string) => string
+}>()
+
+const component = ref<InstanceType<typeof BubbleMenuExternalLink>>()
+// const bubbleEl = ref<HTMLElement | null>(null)
+const showBubbleMenu = ref(false)
+const linkHref = ref("")
+const linkTextValue = ref("")
+const originalLinkTextValue = ref("")
+const isInternalLink = ref(false)
+const linkMark = ref<Mark | undefined>()
+
+function updateFromMark(mark: Mark | undefined) {
+	linkHref.value = mark?.attrs.href ?? ""
+
+	const state = props.editor.state
+	const sel = state.selection
+	if (mark) {
+		// grab text from mark
+		const markPos = getMarkPosition(state, toRaw(mark.type), sel.from)
+		if (!markPos) unreachable()
+		linkTextValue.value = state.doc.cut(markPos.from, markPos.to).textContent
+	} else {
+		if (!sel.empty) {
+			// grab text from selection
+			linkTextValue.value = state.doc.cut(sel.from, sel.to).textContent
+		} else {
+			linkTextValue.value = ""
+		}
+	}
+	originalLinkTextValue.value = linkTextValue.value
+	if (mark?.attrs.internal) {
+		isInternalLink.value = true
+	}
+}
+
+const isChanged = computed(() =>
+	!linkMark.value
+	|| originalLinkTextValue.value !== linkTextValue.value
+	|| linkHref.value !== linkMark.value.attrs.href
+)
+
+function close(e?: Event): void {
+	props.editor.commands.closeLinkMenu()
+	e?.preventDefault()
+}
+function removeLink() {
+	props.editor.commands.unsetLink()
+	close()
+}
+
+function updateState() {
+	const state = linkMenuPluginKey.getState(props.editor.state)
+	if (!state) return
+	const newLinkMark = getMarksInSelection(props.editor.state).find(_ => _.type.name === "link")
+	const isSame = newLinkMark === linkMark.value
+	linkMark.value = newLinkMark
+	isInternalLink.value = state.type === "internal"
+	if (!isSame || !newLinkMark) updateFromMark(state.state ? newLinkMark : undefined)
+
+	showBubbleMenu.value = !!state.state
+	if (state.state === "focus") {
+		nextTick(() => {
+			component.value?.focus(linkMark.value ? "link" : "text")
+		})
+	}
+}
+
+const finalLinkSuggestions = computed(() => props.linkSuggestions ?? props.getLinkSuggestions?.(linkHref.value, linkTextValue.value))
+
+const finalInternalLinkSuggestions = computed(() => props.internalLinkSuggestions ?? props.getLinkInternalSuggestions?.(linkHref.value))
+watch(() => props.editor.state, () => updateState())
+// menu is mounted once then hidden so we have to listen directly
+// also tiptap's shouldShow does not work well
+// hooking into transactions directly to avoid issues
+
+onMounted(() => {
+	updateState()
+	props.editor.on("transaction", updateState)
+})
+onBeforeUnmount(() => {
+	props.editor.off("transaction", updateState)
+})
+</script>

package/src/runtime/pm/features/Link/components/BubbleMenuLinkActions.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="flex flex-nowrap flex-row gap-1 border border-transparent">
+	<!-- @vue-expect-error -->
+	<WButton
+		:border="false"
+		:disabled="!isChanged"
+		class="text-ok-700 dark:text-ok-300"
+		:aria-label="linkMark ? 'Save' : 'Add'"
+		:title="linkMark ? 'Save' : 'Add'"
+		@click="emit('save', $event)"
+	>
+		<WIcon v-if="linkMark">
+			<i-fa-solid-check class="w-[1.25em]"/>
+		</WIcon>
+		<WIcon v-else>
+			<i-fa-solid-plus/>
+		</WIcon>
+	</WButton>
+	<!-- @vue-expect-error -->
+	<WButton
+		v-if="linkHref"
+		:border="false"
+		class="text-neutral-700 dark:text-neutral-300"
+		aria-label="Copy"
+		title="Copy"
+		@click="emit('copy', linkHref)"
+	>
+		<WIcon><i-fa-solid-copy class="w-[1.25em]"/></WIcon>
+	</WButton>
+	<!-- @vue-expect-error -->
+	<WButton
+		v-if="linkMark"
+		:border="false"
+		class="text-neutral-700 dark:text-neutral-300"
+		aria-label="Remove Link"
+		title="Remove Link"
+		@click="emit('remove')"
+	>
+		<WIcon><i-fa-solid-trash class="w-[1.25em]"/></WIcon>
+	</WButton>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Mark } from "@tiptap/pm/model"
+import WIcon from "@witchcraft/ui/components/Icon"
+import WButton from "@witchcraft/ui/components/LibButton"
+
+import IFaSolidCheck from "~icons/fa-solid/check"
+import IFaSolidCopy from "~icons/fa-solid/copy"
+import IFaSolidPlus from "~icons/fa-solid/plus"
+import IFaSolidTrash from "~icons/fa-solid/trash"
+
+defineProps<{
+	linkMark: Mark | undefined
+	linkHref?: string
+	isChanged: boolean
+}>()
+const emit = defineEmits<{
+	close: [e: Event]
+	copy: [value: string]
+	save: [e: Event]
+	remove: []
+}>()
+</script>

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

@@ -0,0 +1,53 @@
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import type { LinkOptions } from "@tiptap/extension-link"
+import { PluginKey } from "@tiptap/pm/state"
+
+export interface AdditionalLinkOptions {
+
+	/**
+	 * Returns true if the given href is an internal link.
+	 *
+	 * Note this should check if the internal link is in a valid format and prevent xss attacks. Usually just making it a simple format is enough.
+	 *
+	 * The default one checks against the regex /internal:\/\/[0-9a-zA-Z_-]+/
+	 */
+	isInternalLink: (href: string) => boolean
+	/**
+	 * How to open internal links.
+	 *
+	 * The default is just to log the link to the console and warn to set the function which should be set with `setLinkOpts`
+	 */
+	openInternal: (href: string) => void
+	/**
+	 * How to open external links.
+	 *
+	 * The default is to open the link in a new tab.
+	 *
+	 * This can be changed using `setLinkOpts` to set a different function.
+	 */
+	openExternal: (href: string) => void
+	openLinkOnClickModifier: "ctrlKey" | "shiftKey" | "altKey" | "metaKey"
+}
+
+export type EditorLinkOptions = MakeRequired<Partial<LinkOptions>, "openInternal">
+
+export type LinkMenuPluginState = {
+	state: "open" | "focus" | false
+	justChangedLink: boolean
+	type: "external" | "internal" | undefined
+	autoOpen: boolean
+	allowAutoOpenOnRecentlyChangedLink: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type DirectLinkClickPluginState = {
+}
+
+export const linkMenuPluginKey = new PluginKey<LinkMenuPluginState>("linkMenuState")
+export const directLinkClickWithModifierPluginKey = new PluginKey<DirectLinkClickPluginState>("directLinkClickWithModifierPluginState")
+
+declare module "../../../types/index.js" {
+	interface MenuCloseCommands {
+		closeLinkMenu: () => any
+	}
+}