@witchcraft/editor 0.0.5 → 0.0.6

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

@@ -0,0 +1,126 @@
+<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>
+import { unreachable } from "@alanscodelog/utils/unreachable";
+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: { type: null, required: true },
+  linkSuggestions: { type: Array, required: false },
+  internalLinkSuggestions: { type: Array, required: false },
+  getLinkSuggestions: { type: Function, required: false },
+  getLinkInternalSuggestions: { type: Function, required: false },
+  getInternalLinkHref: { type: Function, required: true }
+});
+const component = ref();
+const showBubbleMenu = ref(false);
+const linkHref = ref("");
+const linkTextValue = ref("");
+const originalLinkTextValue = ref("");
+const isInternalLink = ref(false);
+const linkMark = ref();
+function updateFromMark(mark) {
+  linkHref.value = mark?.attrs.href ?? "";
+  const state = props.editor.state;
+  const sel = state.selection;
+  if (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) {
+      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) {
+  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 : void 0);
+  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());
+onMounted(() => {
+  updateState();
+  props.editor.on("transaction", updateState);
+});
+onBeforeUnmount(() => {
+  props.editor.off("transaction", updateState);
+});
+</script>

package/dist/runtime/pm/features/Link/components/BubbleMenuLink.vue.d.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;

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

@@ -0,0 +1,18 @@
+import type { Mark } from "@tiptap/pm/model";
+type __VLS_Props = {
+    linkMark: Mark | undefined;
+    linkHref?: string;
+    isChanged: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: Event) => any;
+    copy: (value: string) => any;
+    save: (e: Event) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((e: Event) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onSave?: ((e: Event) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,54 @@
+<template>
+<div class="flex flex-nowrap flex-row gap-1 border border-transparent">
+	<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>
+	<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>
+	<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>
+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: { type: null, required: true },
+  linkHref: { type: String, required: false },
+  isChanged: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "copy", "save", "remove"]);
+</script>

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

@@ -0,0 +1,18 @@
+import type { Mark } from "@tiptap/pm/model";
+type __VLS_Props = {
+    linkMark: Mark | undefined;
+    linkHref?: string;
+    isChanged: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: Event) => any;
+    copy: (value: string) => any;
+    save: (e: Event) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((e: Event) => any) | undefined;
+    onCopy?: ((value: string) => any) | undefined;
+    onSave?: ((e: Event) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/pm/features/Link/types.d.ts

@@ -0,0 +1,44 @@
+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;
+};
+export type DirectLinkClickPluginState = {};
+export declare const linkMenuPluginKey: PluginKey<LinkMenuPluginState>;
+export declare const directLinkClickWithModifierPluginKey: PluginKey<DirectLinkClickPluginState>;
+declare module "../../../types/index.js" {
+    interface MenuCloseCommands {
+        closeLinkMenu: () => any;
+    }
+}

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

@@ -0,0 +1,3 @@
+import { PluginKey } from "@tiptap/pm/state";
+export const linkMenuPluginKey = new PluginKey("linkMenuState");
+export const directLinkClickWithModifierPluginKey = new PluginKey("directLinkClickWithModifierPluginState");

package/dist/runtime/pm/features/Menus/Menus.d.ts

@@ -0,0 +1,45 @@
+import { Extension } from "@tiptap/core";
+import { type PluginKey } from "@tiptap/pm/state";
+import { type Menu, type OpenMenuInfo } from "./types.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        menus: {
+            /** Can be used to close the open menu. Use force to close pinned menus. */
+            closeOtherMenus: (forceUnpin?: boolean) => ReturnType;
+            /** This will temporarily open and "pin" the menu, disabling the auto-prioritizing, until it's closed with `force: true`. */
+            pinOpenMenu: (options: Pick<OpenMenuInfo, "name">) => ReturnType;
+            /**
+             * Register a menu to be hnadled by the Menus extension.
+             *
+             * The ideal place to register them is usually in the onCreate hook of the extension. Do not do it from addProseMirrorPlugins as this will cause the menus to be registered more times than they should be.
+             *
+             * To be technical, this happens because the DocumentApi creates a state using a copy of the editor's plugins from the extension manager. The problem is not the copy but that the plugin property is actually a getter that calls `addProseMirrorPlugins` so the functon must not have side-effects.
+             */
+            registerMenu: <TPluginKey extends PluginKey<any>>(menu: Menu<TPluginKey>) => ReturnType;
+            /**
+             * Since most mark menus don't have a close command, this is can be used to temporarily disable them.
+             *
+             * This should not be used to more permanantly turn off mark menus, as internally this is used to temporarily disable AND enable them. All optional mark menus have options to disable them.
+             */
+            disableMarkMenus: () => ReturnType;
+            /**
+             * Enables showing of mark menus again.
+             */
+            enableMarkMenus: () => ReturnType;
+        };
+    }
+}
+/**
+ * Helps coordinate the display of different menus, never allowing more than one to be opened, sorting by priority, and autoclosing others. \*.
+ *
+ * If this extension is available, extensions with menus will register themselves, some with a higher priority than others.
+ *
+ * On each transaction, the extension will check in order of priority if any of the registered menus should be opened and save which menu that is to it's `menusPluginKey`, closing other open menus.
+ *
+ * The MarkMenuManager component is used in the editor wrapper to easily display "mark" menus  with the help of this extension. If it is not used, they won't show since they must be added manually. The commponent reads the saved state and if the menu is a mark menu and a renderer has been provided for it using the `menusInjectionKey`, it renders the menu. The editor wrapper provides the `menus` option which takes care of providing the menus.
+ *
+ * \* Note that menus may choose to not implement or not provide a close command. In cases like "mark" menus this is fine if using the MarkMenuManager since it will only ever display one menu, but can otherwise break the intended purpose of the extension.
+ */
+export declare const Menus: Extension<{}, {
+    menus: Menu[];
+}>;

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

@@ -0,0 +1,142 @@
+import { Extension } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { menusPluginKey } from "./types.js";
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js";
+export const Menus = Extension.create({
+  name: "menus",
+  addStorage() {
+    return {
+      menus: []
+    };
+  },
+  addCommands() {
+    return {
+      enableMarkMenus: () => ({ tr, dispatch }) => {
+        if (dispatch) {
+          tr.setMeta(menusPluginKey, {
+            canShow: true
+          });
+        }
+        return true;
+      },
+      disableMarkMenus: () => ({ tr, dispatch }) => {
+        if (dispatch) {
+          tr.setMeta(menusPluginKey, {
+            canShow: false
+          });
+        }
+        return true;
+      },
+      registerMenu: (menu) => () => {
+        const menus = this.storage.menus;
+        const existingIndex = menus.findIndex((m) => m.name === menu.name);
+        if (existingIndex >= 0) {
+          console.warn("Menu already registered, replacing.", {
+            existing: menus[existingIndex],
+            new: menu
+          });
+          menus.splice(existingIndex, 1, menu);
+        }
+        menus.push(menu);
+        menus.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+        return true;
+      },
+      unregisterMenu: (menu) => ({ tr }) => {
+        const menus = this.storage.menus;
+        const index = menus.indexOf(menu);
+        if (index !== -1) {
+          menus.splice(index, 1);
+          tr.setMeta(menusPluginKey, { menus });
+          return true;
+        }
+        return false;
+      },
+      pinOpenMenu: (options) => ({ dispatch, tr, commands }) => {
+        const menus = this.storage.menus;
+        const menu = menus.find((m) => m.name === options.name);
+        if (!menu) {
+          console.warn("Menu to open not found.", options);
+          return false;
+        }
+        commands.closeOtherMenus(true);
+        if (dispatch) {
+          tr.setMeta(menusPluginKey, {
+            state: true,
+            pin: true,
+            menu
+          });
+        }
+        return true;
+      },
+      closeOtherMenus: (forceUnpin = false) => ({ dispatch, tr, state, commands }) => {
+        const other = menusPluginKey.getState(state);
+        if (other?.pin && !forceUnpin) return false;
+        const otherMenu = other?.menu;
+        if (otherMenu?.closeCommand) {
+          commands[otherMenu.closeCommand]();
+          if (dispatch) {
+            tr.setMeta(menusPluginKey, {
+              state: false,
+              menu: void 0
+            });
+          }
+          return true;
+        }
+        return false;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const self = this;
+    return [
+      new Plugin({
+        key: menusPluginKey,
+        state: {
+          init() {
+            return {
+              state: false,
+              pin: false,
+              canShow: true
+            };
+          },
+          apply: createStateOnlyPluginObjApply(menusPluginKey)
+        },
+        appendTransaction(trs, oldState, newState) {
+          const menuWasSetByTrs = trs.some((tr) => tr.getMeta(menusPluginKey));
+          if (menuWasSetByTrs) return void 0;
+          const menus = self.storage.menus;
+          const activeMenu = getActiveMenu(menus, newState);
+          const value = menusPluginKey.getState(newState);
+          const valueWas = menusPluginKey.getState(oldState);
+          if (valueWas?.pin) {
+            return void 0;
+          }
+          if (value?.state !== !!activeMenu || value?.menu?.name !== activeMenu?.name) {
+            return newState.tr.setMeta(menusPluginKey, {
+              state: !!activeMenu,
+              menu: activeMenu ? {
+                name: activeMenu.name,
+                type: activeMenu.type,
+                closeCommand: activeMenu.closeCommand
+              } : void 0
+            });
+          }
+          return void 0;
+        }
+      })
+    ];
+  }
+});
+function getActiveMenu(menus, state) {
+  if (!menus) return void 0;
+  for (const menu of menus) {
+    const menuState = menu.pluginKey.getState(state);
+    if (menuState === void 0) {
+      console.warn("Menu plugin state is undefined. Did you register a plugin with this key?", menu.pluginKey, menu.name);
+    }
+    if (menu.canShow(state, menuState)) {
+      return menu;
+    }
+  }
+  return void 0;
+}

package/dist/runtime/pm/features/Menus/components/MarkMenuManager.d.vue.ts

@@ -0,0 +1,6 @@
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+};
+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;

package/dist/runtime/pm/features/Menus/components/MarkMenuManager.vue

@@ -0,0 +1,165 @@
+<template>
+<WPopup
+	:model-value="!!activeMarkMenu"
+	:preferred-horizontal="['center-most']"
+	:preferred-vertical="['top-most']"
+	:modify-position="modifyPopupToMenuBounds"
+	:use-backdrop="false"
+	class="[&>div]:transition-[left,top] duration-30"
+	ref="popupComponent"
+>
+	<template #popup="{ extractEl }">
+		<div
+			tabindex="0"
+			class="p-2"
+			:ref="(_) => {
+  extractEl(_);
+  menuEl = _;
+}"
+			@keydown.esc="close"
+		>
+			<component
+				v-if="menuRenderer?.component"
+				:editor="editor"
+				:is="menuRenderer.component"
+				ref="component"
+				v-bind="menuRenderer?.props?.(editor) ?? { editor }"
+				@close="close"
+				@copy="copy"
+			/>
+		</div>
+	</template>
+</WPopup>
+</template>
+
+<script setup>
+import WPopup from "@witchcraft/ui/components/LibPopup";
+import { copy } from "@witchcraft/ui/helpers/copy";
+import {
+  computed,
+  inject,
+  nextTick,
+  ref,
+  useTemplateRef,
+  watch,
+  watchEffect
+} from "vue";
+import { findUpwards } from "../../../utils/findUpwards.js";
+import { menusInjectionKey, menusPluginKey } from "../types.js";
+const props = defineProps({
+  editor: { type: null, required: true }
+});
+const menus = inject(menusInjectionKey, ref({}));
+const activeMarkMenu = ref();
+const menuRenderer = computed(() => {
+  if (!activeMarkMenu.value) return void 0;
+  const menuCompInfo = menus?.value?.[activeMarkMenu.value];
+  return menuCompInfo;
+});
+const popupComponent = useTemplateRef("popupComponent");
+const menuEl = ref(null);
+const virtualEditorEl = ref(null);
+const virtualCursorEl = ref(null);
+function virtualCursorGetBoundingClientRect() {
+  const opts = menuRenderer.value?.popupOptions;
+  const selection = props.editor.state.selection;
+  const doc = props.editor.state.doc;
+  const $fromItem = findUpwards(doc, selection.from, ($pos) => $pos.node().type.name === "item")?.$pos;
+  const end = props.editor.view.coordsAtPos(selection.to);
+  const start = props.editor.view.coordsAtPos(selection.from);
+  const itemStart = props.editor.view.coordsAtPos($fromItem?.pos ?? selection.from);
+  const pinToItemDistance = typeof opts?.pinToItemDistance === "function" ? opts?.pinToItemDistance(props.editor.state) : opts?.pinToItemDistance ?? 0;
+  const itemStartIsShortDistance = Math.abs(start.top - itemStart.top) < pinToItemDistance;
+  const leftMost = Math.min(start.left, end.left);
+  const rightMost = Math.max(start.right, end.right);
+  const topMost = Math.min(start.top, end.top, itemStartIsShortDistance ? itemStart.top : Infinity);
+  const bottomMost = Math.max(start.bottom, end.bottom);
+  return {
+    x: leftMost,
+    y: topMost,
+    top: topMost,
+    bottom: bottomMost,
+    left: leftMost,
+    right: rightMost,
+    width: rightMost - leftMost,
+    height: bottomMost - topMost
+  };
+}
+function virtualEditorGetBoundingClientRect() {
+  const editorRect = props.editor.view.dom.getBoundingClientRect();
+  const bodyRect = document.body.getBoundingClientRect();
+  return {
+    x: editorRect.x,
+    left: editorRect.left,
+    right: editorRect.right,
+    width: editorRect.width,
+    y: 0,
+    top: 0,
+    bottom: bodyRect.bottom,
+    height: bodyRect.height
+  };
+}
+const modifyPopupToMenuBounds = (pos, reference, popup, _bg, space) => {
+  const editorRect = props.editor.view.dom.closest(".editor-wrapper")?.getBoundingClientRect();
+  if (!editorRect) {
+    throw new Error("MarkMenuManager: The wrapping scrollable editor component must have the `editor-wrapper` class for mark menus to work as they need to know the position of the scrollable wrapper.");
+  }
+  const yMin = Math.max(editorRect.top - popup.height, 0);
+  if (pos.y < yMin) pos.y = yMin;
+  if (reference && pos.y + popup.height > reference.top) {
+    pos.y = space.bottom > space.top ? reference.bottom : reference.top - popup.height;
+  }
+  return pos;
+};
+function close(e) {
+  e?.preventDefault();
+  props.editor.commands.closeOtherMenus();
+}
+function documentRefocusBlur(e) {
+  document.removeEventListener("focus", documentRefocusBlur);
+  checkMenuBlur(e);
+}
+function checkMenuBlur(e) {
+  if ("relatedTarget" in e) {
+    if (e.relatedTarget === null) {
+      document.addEventListener("focus", documentRefocusBlur);
+    } else if (!menuEl.value?.contains(e.relatedTarget)) {
+      close(e);
+    }
+  }
+}
+watchEffect(() => {
+  if (activeMarkMenu.value) {
+    document.addEventListener("click", checkMenuBlur);
+    virtualCursorEl.value = { getBoundingClientRect: virtualCursorGetBoundingClientRect };
+    popupComponent.value?.setReference(virtualCursorEl.value);
+    virtualEditorEl.value = { getBoundingClientRect: virtualEditorGetBoundingClientRect };
+    popupComponent.value?.setBackground(virtualEditorEl.value);
+  } else {
+    document.removeEventListener("click", checkMenuBlur);
+    virtualCursorEl.value = null;
+    popupComponent.value?.setReference(virtualCursorEl.value);
+    virtualEditorEl.value = null;
+    popupComponent.value?.setBackground(virtualEditorEl.value);
+  }
+});
+const recompute = () => {
+  nextTick(() => {
+    popupComponent.value?.recompute();
+  });
+};
+function updateState() {
+  const state = menusPluginKey.getState(props.editor.state);
+  if (state?.menu?.type === "mark" && state.canShow) {
+    activeMarkMenu.value = state?.menu?.name;
+    recompute();
+  } else {
+    activeMarkMenu.value = void 0;
+  }
+}
+watch(() => props.editor, (newVal, oldVal) => {
+  oldVal.off("transaction", updateState);
+  newVal.on("transaction", updateState);
+});
+props.editor.on("transaction", updateState);
+</script>

package/dist/runtime/pm/features/Menus/components/MarkMenuManager.vue.d.ts

@@ -0,0 +1,6 @@
+import type { Editor } from "@tiptap/vue-3";
+type __VLS_Props = {
+    editor: Editor;
+};
+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;