@witchcraft/editor 0.0.5 → 0.0.6

package/dist/runtime/pm/features/Link/Link.js

@@ -0,0 +1,241 @@
+import { crop } from "@alanscodelog/utils/crop";
+import { keys } from "@alanscodelog/utils/keys";
+import { getAttributes } from "@tiptap/core";
+import { Link as TipTapLink } from "@tiptap/extension-link";
+import { Plugin, TextSelection } from "@tiptap/pm/state";
+import { directLinkClickWithModifierPluginKey, linkMenuPluginKey } from "./types.js";
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js";
+import { getMarkPosition } from "../../utils/getMarkPosition.js";
+import { getMarksInSelection } from "../../utils/getMarksInSelection.js";
+export const Link = TipTapLink.extend({
+  name: "link",
+  addOptions() {
+    const internalLinkRegex = /internal:\/\/[\w-]+/;
+    return {
+      ...this.parent?.(),
+      openOnClick: false,
+      openLinkOnClickModifier: "ctrlKey",
+      defaultProtocol: "https",
+      protocols: ["https", "internal", "http", "ftp", "ftps", "mailto", "tel", "callto", "sms", "cid", "xmpp", "internal"],
+      HTMLAttributes: {
+        ...this.parent?.().HTMLAttributes,
+        rel: "noopener noreferrer"
+      },
+      isInternalLink(href) {
+        return !!href.match(internalLinkRegex);
+      },
+      openInternal: (href) => {
+        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.`);
+        console.warn(crop`
+					Requesting to open internal link: ${href}.
+					Please specify how to open internal links with editor.commands.setLinkOpts.`);
+      },
+      openExternal: (href) => {
+        window.open(href, "_blank");
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      internal: {
+        default: false,
+        parseHTML: (el) => {
+          const href = el.getAttribute("href");
+          return href && this.options.isInternalLink(href);
+        }
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      openLinkMenu: ({ type = "external" } = {}) => ({ 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: () => ({ tr, state, commands, dispatch }) => {
+        const wasState = linkMenuPluginKey.getState(state)?.state;
+        if (!wasState) return false;
+        if (dispatch) {
+          tr.setMeta(linkMenuPluginKey, { state: false, type: void 0 });
+          commands.focus();
+        }
+        return true;
+      },
+      setLinkMenuOpts: (opts) => ({ tr, dispatch }) => {
+        if (dispatch) {
+          tr.setMeta(linkMenuPluginKey, opts);
+        }
+        return true;
+      },
+      setLinkOpts: (opts) => ({ dispatch }) => {
+        if (!dispatch) return true;
+        for (const key of keys(opts)) {
+          this.options[key] = opts[key];
+        }
+        return true;
+      },
+      expandSelectionToLink: () => ({ 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, text, internal = false) => ({ 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) => ({ dispatch }) => {
+        if (dispatch) {
+          this.options.openInternal(href);
+        }
+        return true;
+      },
+      openExternalLink: (href) => ({ 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 void 0;
+  },
+  addProseMirrorPlugins() {
+    const self = this;
+    const directLinkClickWithModifierPlugin = new Plugin({
+      key: directLinkClickWithModifierPluginKey,
+      props: {
+        handleClick(view, _pos, event) {
+          if (self.options.openOnClick) return false;
+          const attrs = getAttributes(view.state, "link");
+          const link = event.target?.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({
+      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: void 0
+              }
+            );
+            return tr;
+          }
+        }
+        return void 0;
+      },
+      state: {
+        init() {
+          return {
+            state: false,
+            justChangedLink: false,
+            type: void 0,
+            autoOpen: true,
+            allowAutoOpenOnRecentlyChangedLink: true
+          };
+        },
+        apply: createStateOnlyPluginObjApply(linkMenuPluginKey)
+      }
+    });
+    return [
+      ...(this.parent?.() ?? []).filter((plugin) => plugin.spec.key !== linkMenuPluginKey && plugin.spec.key !== directLinkClickWithModifierPluginKey),
+      linkMenuStatePlugin,
+      directLinkClickWithModifierPlugin
+    ];
+  }
+});

package/dist/runtime/pm/features/Link/components/BubbleMenuExternalLink.d.vue.ts

@@ -0,0 +1,28 @@
+import type { Mark } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+    linkSuggestions?: string[];
+    linkMark: Mark | undefined;
+    isChanged: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "linkHref": string;
+    "linkTextValue": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: (type: "text" | "link") => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e?: Event | undefined) => any;
+    copy: (value: string) => any;
+    remove: () => any;
+    "update:linkHref": (value: string) => any;
+    "update:linkTextValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((e?: Event | undefined) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    "onUpdate:linkHref"?: ((value: string) => any) | undefined;
+    "onUpdate:linkTextValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,113 @@
+<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">
+			<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>
+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";
+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: { type: null, required: true },
+  linkSuggestions: { type: Array, required: false },
+  linkMark: { type: null, required: true },
+  isChanged: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "copy", "remove"]);
+const linkHref = defineModel("linkHref", { type: String, ...{ required: true } });
+const linkTextValue = defineModel("linkTextValue", { type: String, ...{ required: true } });
+const el = ref(null);
+function goToLink() {
+  window.open(linkHref.value, "_blank");
+}
+defineExpose({
+  focus: (type) => {
+    const inputType = type === "link" ? "link-input" : "text-input";
+    const input = el.value?.querySelector(`.${inputType}`);
+    if (input && input instanceof HTMLInputElement) input.focus();
+  }
+});
+function saveChanges(e) {
+  props.editor.commands.changeOrAddLink(
+    linkHref.value,
+    linkTextValue.value,
+    false
+  );
+  emit("close", e instanceof Event ? e : void 0);
+}
+</script>

package/dist/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue.d.ts

@@ -0,0 +1,28 @@
+import type { Mark } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+    linkSuggestions?: string[];
+    linkMark: Mark | undefined;
+    isChanged: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "linkHref": string;
+    "linkTextValue": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: (type: "text" | "link") => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e?: Event | undefined) => any;
+    copy: (value: string) => any;
+    remove: () => any;
+    "update:linkHref": (value: string) => any;
+    "update:linkTextValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((e?: Event | undefined) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    "onUpdate:linkHref"?: ((value: string) => any) | undefined;
+    "onUpdate:linkTextValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/pm/features/Link/components/BubbleMenuInternalLink.d.vue.ts

@@ -0,0 +1,29 @@
+import type { Mark } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+    linkSuggestions?: string[];
+    linkMark: Mark | undefined;
+    isChanged: boolean;
+    getInternalLinkHref: (href: string) => string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "linkText": string;
+    "tempLinkTextValue"?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e?: Event | undefined) => any;
+    copy: (value: string) => any;
+    remove: () => any;
+    "update:linkText": (value: string) => any;
+    "update:tempLinkTextValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((e?: Event | undefined) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    "onUpdate:linkText"?: ((value: string) => any) | undefined;
+    "onUpdate:tempLinkTextValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,104 @@
+<template>
+<div
+	:class="twMerge(
+  `flex flex-col`,
+  isOpen && `gap-1`
+)"
+	ref="el"
+>
+	<div class="flex flex-nowrap flex-row gap-1 items-center">
+		<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:open="isOpen"
+		@submit="submitHandler"
+	/>
+</div>
+</template>
+
+<script setup>
+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";
+import BubbleMenuLinkActions from "./BubbleMenuLinkActions.vue";
+import iIcRoundLink from "~icons/ic/round-link";
+const props = defineProps({
+  editor: { type: null, required: true },
+  linkSuggestions: { type: Array, required: false },
+  linkMark: { type: null, required: true },
+  isChanged: { type: Boolean, required: true },
+  getInternalLinkHref: { type: Function, required: true }
+});
+const emit = defineEmits(["close", "copy", "remove"]);
+const linkText = defineModel("linkText", { type: String, ...{ required: true } });
+const inputValue = defineModel("tempLinkTextValue", { type: String, ...{ default: "" } });
+const canOpen = ref(false);
+const isOpen = ref(false);
+const el = ref(null);
+const suggestionsComponent = ref();
+watch(linkText, () => {
+  inputValue.value = linkText.value;
+}, { immediate: true });
+function keydownHandler(e) {
+  if (e.key === "Escape") {
+    emit("close", e);
+  }
+  suggestionsComponent.value?.inputKeydownHandler?.(e);
+}
+function saveChanges(e) {
+  const href = props.getInternalLinkHref(inputValue.value);
+  props.editor.commands.changeOrAddLink(
+    href,
+    inputValue.value,
+    true
+  );
+  emit("close", e);
+}
+function blurHandler(e) {
+  suggestionsComponent.value?.inputBlurHandler?.(e);
+}
+function submitHandler() {
+  if (linkText.value === inputValue.value) {
+    saveChanges();
+  }
+}
+defineExpose({
+  focus: () => {
+    const input = el.value?.querySelector(`input`);
+    if (input) input.focus();
+  }
+});
+</script>

package/dist/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue.d.ts

@@ -0,0 +1,29 @@
+import type { Mark } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+    linkSuggestions?: string[];
+    linkMark: Mark | undefined;
+    isChanged: boolean;
+    getInternalLinkHref: (href: string) => string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "linkText": string;
+    "tempLinkTextValue"?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e?: Event | undefined) => any;
+    copy: (value: string) => any;
+    remove: () => any;
+    "update:linkText": (value: string) => any;
+    "update:tempLinkTextValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((e?: Event | undefined) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    "onUpdate:linkText"?: ((value: string) => any) | undefined;
+    "onUpdate:tempLinkTextValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/pm/features/Link/components/BubbleMenuLink.d.vue.ts

@@ -0,0 +1,11 @@
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+    linkSuggestions?: string[];
+    internalLinkSuggestions?: string[];
+    getLinkSuggestions?: (href: string, text: string) => string[];
+    getLinkInternalSuggestions?: (href: string) => string[];
+    getInternalLinkHref: (title: string) => string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;