@nuxt/ui 4.2.1 → 4.3.0

package/dist/runtime/components/EditorDragHandle.vue

@@ -0,0 +1,127 @@
+<script>
+import theme from "#build/ui/editor-drag-handle";
+</script>
+
+<script setup>
+import { computed, ref } from "vue";
+import DragHandle from "@tiptap/extension-drag-handle-vue-3";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit, reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+import { buildFloatingUIMiddleware } from "../utils/editor";
+import { transformUI } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  icon: { type: null, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  options: { type: Object, required: false },
+  editor: { type: Object, required: true },
+  ui: { type: void 0, required: false },
+  pluginKey: { type: [Object, String], required: false },
+  onElementDragStart: { type: Function, required: false },
+  onElementDragEnd: { type: Function, required: false },
+  getReferencedVirtualElement: { type: Function, required: false },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false, default: "sm" },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: null, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false }
+});
+defineSlots();
+const emit = defineEmits(["nodeChange"]);
+const dragHandleProps = useForwardProps(reactivePick(props, "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "options", "editor", "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement", "class", "ui"));
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorDragHandle || {} })());
+const floatingUIOptions = computed(() => defu(props.options, {
+  strategy: "absolute",
+  placement: "left-start",
+  offset: ({ rects }) => {
+    const blockHeight = rects.reference.height;
+    const handleHeight = rects.floating.height;
+    if (blockHeight > 40) {
+      return {
+        alignmentAxis: 0,
+        mainAxis: 8
+      };
+    }
+    return {
+      alignmentAxis: (blockHeight - handleHeight) / 2,
+      mainAxis: 8
+    };
+  },
+  flip: {},
+  shift: {},
+  size: false,
+  autoPlacement: false,
+  hide: false,
+  inline: false
+}));
+const middleware = computed(() => buildFloatingUIMiddleware(floatingUIOptions.value));
+const computePositionConfig = computed(() => ({
+  placement: floatingUIOptions.value.placement,
+  strategy: floatingUIOptions.value.strategy,
+  middleware: middleware.value
+}));
+const currentNodePos = ref();
+function onNodeChange({ pos }) {
+  currentNodePos.value = pos;
+}
+function onClick() {
+  if (!props.editor) return;
+  const pos = currentNodePos.value;
+  if (pos == null) return;
+  const node = props.editor.state.doc.nodeAt(pos);
+  if (node) {
+    const selectedNode = { node: node.toJSON(), pos };
+    emit("nodeChange", selectedNode);
+    props.editor.chain().setNodeSelection(pos).run();
+    return selectedNode;
+  }
+}
+</script>
+
+<template>
+  <DragHandle
+    v-bind="dragHandleProps"
+    :compute-position-config="computePositionConfig"
+    :editor="editor"
+    :on-node-change="onNodeChange"
+    data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @click="onClick"
+  >
+    <slot :ui="ui" :on-click="onClick">
+      <UButton
+        v-bind="{
+  ...buttonProps,
+  icon: props.icon || appConfig.ui.icons.drag,
+  ...$attrs
+}"
+        data-slot="handle"
+        :class="ui.handle({ class: [props.ui?.handle, props.class] })"
+        :ui="transformUI(ui, props.ui)"
+      />
+    </slot>
+  </DragHandle>
+</template>

package/dist/runtime/components/EditorDragHandle.vue.d.ts

@@ -0,0 +1,64 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { Editor, JSONContent } from '@tiptap/vue-3';
+import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3';
+import theme from '#build/ui/editor-drag-handle';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { FloatingUIOptions } from '../types/editor';
+import type { ComponentConfig } from '../types/tv';
+type EditorDragHandle = ComponentConfig<typeof theme, AppConfig, 'editorDragHandle'>;
+export interface EditorDragHandleProps extends Omit<DragHandleProps, 'editor' | 'element' | 'onNodeChange' | 'computePositionConfig' | 'class'>, Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
+    /**
+     * @defaultValue appConfig.ui.icons.drag
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The options for positioning the drag handle. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+     * @defaultValue { strategy: 'absolute', placement: 'left-start' }
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: FloatingUIOptions;
+    editor: Editor;
+    ui?: EditorDragHandle['slots'] & ButtonProps['ui'];
+}
+export interface EditorDragHandleSlots {
+    default(props: {
+        ui: EditorDragHandle['ui'];
+        onClick: () => {
+            node: JSONContent;
+            pos: number;
+        } | undefined;
+    }): any;
+}
+export interface EditorDragHandleEmits {
+    nodeChange: [{
+        node: JSONContent;
+        pos: number;
+    }];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EditorDragHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nodeChange: (args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<EditorDragHandleProps> & Readonly<{
+    onNodeChange?: ((args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/EditorEmojiMenu.d.vue.ts

@@ -0,0 +1,35 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/ui/editor-emoji-menu';
+type EditorEmojiMenu = ComponentConfig<typeof theme, AppConfig, 'editorEmojiMenu'>;
+export interface EditorEmojiMenuItem {
+    name: string;
+    emoji?: string;
+    shortcodes: string[];
+    tags: string[];
+    group?: string;
+    fallbackImage?: string;
+    [key: string]: any;
+}
+export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorEmojiMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorEmojiMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -0,0 +1,70 @@
+<script>
+import theme from "#build/ui/editor-emoji-menu";
+</script>
+
+<script setup>
+import { computed, h, onMounted, onBeforeUnmount, nextTick, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useEditorMenu } from "../composables/useEditorMenu";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  editor: { type: Object, required: false },
+  char: { type: String, required: false, default: ":" },
+  pluginKey: { type: String, required: false, default: "emojiMenu" },
+  filterFields: { type: Array, required: false, default: () => ["name", "shortcodes", "tags"] },
+  limit: { type: Number, required: false },
+  options: { type: Object, required: false },
+  appendTo: { type: Function, required: false, skipCheck: true }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorEmojiMenu || {} })());
+let menu = null;
+onMounted(async () => {
+  await nextTick();
+  if (!props.editor || props.editor.isDestroyed) {
+    return;
+  }
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      if (!item.emoji) return;
+      editor.chain().focus().deleteRange(range).insertContent(item.emoji).run();
+    },
+    renderItem: (item, styles) => {
+      const content = item.emoji || item.shortcodes[0] || item.name;
+      return [
+        h("span", { class: styles.value.itemLeadingIcon() }, content),
+        h("span", { class: styles.value.itemWrapper() }, [
+          h("span", { class: styles.value.itemLabel() }, item.name)
+        ])
+      ];
+    }
+  });
+  props.editor.registerPlugin(menu.plugin);
+});
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy();
+    menu = null;
+  }
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey);
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>

package/dist/runtime/components/EditorEmojiMenu.vue.d.ts

@@ -0,0 +1,35 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/ui/editor-emoji-menu';
+type EditorEmojiMenu = ComponentConfig<typeof theme, AppConfig, 'editorEmojiMenu'>;
+export interface EditorEmojiMenuItem {
+    name: string;
+    emoji?: string;
+    shortcodes: string[];
+    tags: string[];
+    group?: string;
+    fallbackImage?: string;
+    [key: string]: any;
+}
+export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorEmojiMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorEmojiMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/EditorMentionMenu.d.vue.ts

@@ -0,0 +1,39 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/editor-mention-menu';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { AvatarProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
+export interface EditorMentionMenuItem {
+    label: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    disabled?: boolean;
+    class?: any;
+    [key: string]: any;
+}
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorMentionMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorMentionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/EditorMentionMenu.vue

@@ -0,0 +1,72 @@
+<script>
+import theme from "#build/ui/editor-mention-menu";
+</script>
+
+<script setup>
+import { computed, h, onMounted, onBeforeUnmount, nextTick, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useEditorMenu } from "../composables/useEditorMenu";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  editor: { type: Object, required: false },
+  char: { type: String, required: false, default: "@" },
+  pluginKey: { type: String, required: false, default: "mentionMenu" },
+  filterFields: { type: Array, required: false },
+  limit: { type: Number, required: false },
+  options: { type: Object, required: false },
+  appendTo: { type: Function, required: false, skipCheck: true }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorMentionMenu || {} })());
+let menu = null;
+onMounted(async () => {
+  await nextTick();
+  if (!props.editor || props.editor.isDestroyed) {
+    return;
+  }
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      editor.chain().focus().deleteRange(range).insertContent({
+        type: "mention",
+        attrs: item
+      }).run();
+    },
+    renderItem: (item, styles) => [
+      item.avatar ? h(UAvatar, { ...item.avatar, size: styles.value.itemLeadingAvatarSize(), class: styles.value.itemLeadingAvatar() }) : item.icon ? h(UIcon, { name: item.icon, class: styles.value.itemLeadingIcon() }) : null,
+      h("span", { class: styles.value.itemWrapper() }, [
+        h("span", { class: styles.value.itemLabel() }, item.label),
+        item.description ? h("span", { class: styles.value.itemDescription() }, item.description) : null
+      ])
+    ]
+  });
+  props.editor.registerPlugin(menu.plugin);
+});
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy();
+    menu = null;
+  }
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey);
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>

package/dist/runtime/components/EditorMentionMenu.vue.d.ts

@@ -0,0 +1,39 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/editor-mention-menu';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { AvatarProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
+export interface EditorMentionMenuItem {
+    label: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    disabled?: boolean;
+    class?: any;
+    [key: string]: any;
+}
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorMentionMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorMentionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/EditorSuggestionMenu.d.vue.ts

@@ -0,0 +1,52 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/editor-suggestion-menu';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { IconProps } from '../types';
+import type { EditorItem, EditorCustomHandlers } from '../types/editor';
+import type { ComponentConfig } from '../types/tv';
+type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
+type EditorSuggestionMenuLabelItem = {
+    type: 'label';
+    label: string;
+    class?: any;
+    [key: string]: any;
+};
+type EditorSuggestionMenuSeparatorItem = {
+    type: 'separator';
+    class?: any;
+    [key: string]: any;
+};
+type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCustomHandlers> = {
+    type?: never;
+    label: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    disabled?: boolean;
+    class?: any;
+    [key: string]: any;
+} & EditorItem<H>;
+export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
+export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorSuggestionMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -0,0 +1,80 @@
+<script>
+import theme from "#build/ui/editor-suggestion-menu";
+</script>
+
+<script setup>
+import { computed, h, inject, onMounted, onBeforeUnmount, nextTick, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useEditorMenu } from "../composables/useEditorMenu";
+import { createHandlers } from "../utils/editor";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  editor: { type: Object, required: false },
+  char: { type: String, required: false, default: "/" },
+  pluginKey: { type: String, required: false, default: "suggestionMenu" },
+  filterFields: { type: Array, required: false },
+  limit: { type: Number, required: false },
+  options: { type: Object, required: false },
+  appendTo: { type: Function, required: false, skipCheck: true }
+});
+const appConfig = useAppConfig();
+const handlers = inject("editorHandlers", computed(() => createHandlers()));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorSuggestionMenu || {} })());
+let menu = null;
+onMounted(async () => {
+  await nextTick();
+  if (!props.editor || props.editor.isDestroyed) {
+    return;
+  }
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      if (item.type === "label" || item.type === "separator") return;
+      editor.chain().focus().deleteRange(range).run();
+      const handler = handlers?.value?.[item.kind];
+      if (handler) {
+        handler.execute(editor, item).run();
+      }
+    },
+    renderItem: (item, styles) => {
+      if (item.type === "label") {
+        return [h("span", {}, item.label)];
+      }
+      return [
+        item.icon ? h(UIcon, { name: item.icon, class: styles.value.itemLeadingIcon() }) : null,
+        h("span", { class: styles.value.itemWrapper() }, [
+          h("span", { class: styles.value.itemLabel() }, item.label),
+          item.description ? h("span", { class: styles.value.itemDescription() }, item.description) : null
+        ])
+      ];
+    }
+  });
+  props.editor.registerPlugin(menu.plugin);
+});
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy();
+    menu = null;
+  }
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey);
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>

package/dist/runtime/components/EditorSuggestionMenu.vue.d.ts

@@ -0,0 +1,52 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/editor-suggestion-menu';
+import type { EditorMenuOptions } from '../composables/useEditorMenu';
+import type { IconProps } from '../types';
+import type { EditorItem, EditorCustomHandlers } from '../types/editor';
+import type { ComponentConfig } from '../types/tv';
+type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
+type EditorSuggestionMenuLabelItem = {
+    type: 'label';
+    label: string;
+    class?: any;
+    [key: string]: any;
+};
+type EditorSuggestionMenuSeparatorItem = {
+    type: 'separator';
+    class?: any;
+    [key: string]: any;
+};
+type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCustomHandlers> = {
+    type?: never;
+    label: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    disabled?: boolean;
+    class?: any;
+    [key: string]: any;
+} & EditorItem<H>;
+export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
+export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    items?: T[] | T[][];
+    class?: any;
+    ui?: EditorSuggestionMenu['slots'];
+}
+declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};