@nuxt/ui 4.3.0 → 4.4.0

package/dist/runtime/components/Editor.vue

@@ -7,6 +7,7 @@ import { computed, provide, useAttrs, watch } from "vue";
 import { defu } from "defu";
 import { Primitive, useForwardProps } from "reka-ui";
 import { mergeAttributes } from "@tiptap/core";
+import Code from "@tiptap/extension-code";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Image from "@tiptap/extension-image";
 import Mention from "@tiptap/extension-mention";
@@ -26,8 +27,8 @@ const props = defineProps({
   starterKit: { type: Object, required: false },
   placeholder: { type: [String, Object], required: false },
   markdown: { type: Object, required: false },
-  image: { type: Object, required: false },
-  mention: { type: Object, required: false },
+  image: { type: [Boolean, Object], required: false, default: true },
+  mention: { type: [Boolean, Object], required: false, default: true },
   handlers: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -58,13 +59,16 @@ const props = defineProps({
   onDestroy: { type: Function, required: false },
   onPaste: { type: Function, required: false },
   onDrop: { type: Function, required: false },
-  onDelete: { type: Function, required: false }
+  onDelete: { type: Function, required: false },
+  enableExtensionDispatchTransaction: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
 defineSlots();
 const attrs = useAttrs();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editor || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editor || {} })({
+  placeholderMode: typeof props.placeholder === "object" ? props.placeholder.mode : void 0
+}));
 const rootProps = useForwardProps(reactiveOmit(props, "starterKit", "extensions", "editorProps", "contentType", "class", "placeholder", "markdown", "image", "mention", "handlers"));
 const editorProps = computed(() => defu(props.editorProps, {
   attributes: {
@@ -77,10 +81,8 @@ const editorProps = computed(() => defu(props.editorProps, {
 }));
 const contentType = computed(() => props.contentType || (typeof props.modelValue === "string" ? "html" : "json"));
 const starterKit = computed(() => defu(props.starterKit, {
+  code: false,
   horizontalRule: false,
-  headings: {
-    levels: [1, 2, 3, 4]
-  },
   dropcursor: {
     color: "var(--ui-primary)",
     width: 2
@@ -89,17 +91,21 @@ const starterKit = computed(() => defu(props.starterKit, {
     openOnClick: false
   }
 }));
-const placeholder = computed(() => defu(typeof props.placeholder === "string" ? { placeholder: props.placeholder } : props.placeholder, {
-  showOnlyWhenEditable: false,
-  showOnlyCurrent: true
-}));
+const placeholder = computed(() => {
+  const options = typeof props.placeholder === "string" ? { placeholder: props.placeholder } : props.placeholder;
+  const { mode, ...rest } = options || {};
+  return defu(rest, {
+    showOnlyWhenEditable: false,
+    showOnlyCurrent: true
+  });
+});
 const markdown = computed(() => defu(props.markdown, {
   markedOptions: {
     gfm: true
   }
 }));
-const image = computed(() => defu(props.image, {}));
-const mention = computed(() => defu(props.mention, {
+const image = computed(() => typeof props.image === "boolean" ? {} : props.image);
+const mention = computed(() => defu(typeof props.mention === "boolean" ? {} : props.mention, {
   HTMLAttributes: {
     class: "mention"
   }
@@ -107,6 +113,9 @@ const mention = computed(() => defu(props.mention, {
 const extensions = computed(() => [
   contentType.value === "markdown" && Markdown.configure(markdown.value),
   StarterKit.configure(starterKit.value),
+  Code.extend({
+    excludes: "code"
+  }),
   HorizontalRule.extend({
     renderHTML() {
       return [
@@ -116,9 +125,9 @@ const extensions = computed(() => [
       ];
     }
   }),
-  Image.configure(image.value),
+  props.image !== false && Image.configure(image.value),
+  props.mention !== false && Mention.configure(mention.value),
   props.placeholder && Placeholder.configure(placeholder.value),
-  Mention.configure(mention.value),
   ...props.extensions || []
 ].filter((extension) => !!extension));
 const editor = useEditor({
@@ -127,6 +136,11 @@ const editor = useEditor({
   contentType: contentType.value,
   extensions: extensions.value,
   editorProps: editorProps.value,
+  onCreate: ({ editor: editor2 }) => {
+    if (props.placeholder) {
+      editor2.view.dispatch(editor2.state.tr);
+    }
+  },
   onUpdate: ({ editor: editor2 }) => {
     let value;
     try {
@@ -152,7 +166,7 @@ watch(() => props.modelValue, (newVal) => {
   if (currentContent !== newContent) {
     const currentSelection = editor.value.state.selection;
     const currentPos = currentSelection.from;
-    editor.value.commands.setContent(newVal);
+    editor.value.commands.setContent(newVal, { contentType: contentType.value });
     const newDoc = editor.value.state.doc;
     if (currentPos <= newDoc.content.size) {
       editor.value.commands.setTextSelection(currentPos);

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

@@ -24,32 +24,42 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
     contentType?: EditorContentType;
     /**
      * The starter kit options to configure the editor.
-     * @defaultValue { headings: { levels: [1, 2, 3, 4] }, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }
+     * @defaultValue { horizontalRule: false, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }
      * @see https://tiptap.dev/docs/editor/extensions/functionality/starterkit
      */
     starterKit?: Partial<StarterKitOptions>;
     /**
-     * The placeholder text to show in empty paragraphs.
-     * `{ showOnlyWhenEditable: false, showOnlyCurrent: true }`{lang="ts-type"}
-     * Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`.
+     * The placeholder text to show in empty paragraphs. Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`.
+     * @defaultValue { showOnlyWhenEditable: false, showOnlyCurrent: true, mode: 'everyLine' }
      * @see https://tiptap.dev/docs/editor/extensions/functionality/placeholder
      */
-    placeholder?: string | Partial<PlaceholderOptions>;
+    placeholder?: string | (Partial<PlaceholderOptions> & {
+        /**
+         * Control how placeholders are displayed in the editor.
+         * - `firstLine`: Display placeholder only on the first line when the editor is empty.
+         * - `everyLine`: Display placeholder on every empty line when focused.
+         * @defaultValue 'everyLine'
+         */
+        mode?: 'firstLine' | 'everyLine';
+    });
     /**
      * The markdown extension options to configure markdown parsing and serialization.
+     * @defaultValue { markedOptions: { gfm: true } }
      * @see https://tiptap.dev/docs/editor/extensions/functionality/markdown
      */
     markdown?: Partial<MarkdownExtensionOptions>;
     /**
-     * The image extension options to configure image handling.
+     * The image extension options to configure image handling. Set to `false` to disable the extension.
+     * @defaultValue {}
      * @see https://tiptap.dev/docs/editor/extensions/nodes/image
      */
-    image?: Partial<ImageOptions>;
+    image?: boolean | Partial<ImageOptions>;
     /**
-     * The mention extension options to configure mention handling.
+     * The mention extension options to configure mention handling. Set to `false` to disable the extension.
+     * @defaultValue { HTMLAttributes: { class: 'mention' } }
      * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
      */
-    mention?: Partial<MentionOptions>;
+    mention?: boolean | Partial<MentionOptions>;
     /**
      * Custom item handlers to override or extend the default handlers.
      * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
@@ -67,8 +77,12 @@ export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandle
         handlers: EditorHandlers<H>;
     }): any;
 }
-declare const __VLS_export: <T extends Content, H extends EditorCustomHandlers>(__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<EditorProps<T, H> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: T) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Content, H extends EditorCustomHandlers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorProps<T, H> & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -80,8 +94,8 @@ declare const __VLS_export: <T extends Content, H extends EditorCustomHandlers>(
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -44,6 +44,8 @@ export interface EditorDragHandleEmits {
         pos: number;
     }];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EditorDragHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     nodeChange: (args_0: {
         node: JSONContent;
@@ -54,9 +56,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         node: JSONContent;
         pos: number;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -44,6 +44,8 @@ export interface EditorDragHandleEmits {
         pos: number;
     }];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EditorDragHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     nodeChange: (args_0: {
         node: JSONContent;
@@ -54,9 +56,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         node: JSONContent;
         pos: number;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -13,12 +13,18 @@ export interface EditorEmojiMenuItem {
     [key: string]: any;
 }
 export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorEmojiMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorEmojiMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -28,8 +34,8 @@ declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -9,6 +9,7 @@ import { useEditorMenu } from "../composables/useEditorMenu";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -21,7 +22,9 @@ const props = defineProps({
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorEmojiMenu || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorEmojiMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();

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

@@ -13,12 +13,18 @@ export interface EditorEmojiMenuItem {
     [key: string]: any;
 }
 export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorEmojiMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorEmojiMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -28,8 +34,8 @@ declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -16,24 +16,34 @@ export interface EditorMentionMenuItem {
     class?: any;
     [key: string]: any;
 }
-export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo' | 'ignoreFilter'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorMentionMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(EditorMentionMenuProps<T> & {
+        searchTerm?: string;
+    }) & {
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: (evt: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorMentionMenu.vue

@@ -11,6 +11,7 @@ import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -20,10 +21,14 @@ const props = defineProps({
   filterFields: { type: Array, required: false },
   limit: { type: Number, required: false },
   options: { type: Object, required: false },
-  appendTo: { type: Function, required: false, skipCheck: true }
+  appendTo: { type: Function, required: false, skipCheck: true },
+  ignoreFilter: { type: Boolean, required: false }
 });
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorMentionMenu || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorMentionMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();
@@ -36,9 +41,11 @@ onMounted(async () => {
     pluginKey: props.pluginKey,
     items: toRef(() => props.items),
     filterFields: props.filterFields,
+    ignoreFilter: props.ignoreFilter,
     limit: props.limit,
     options: props.options,
     appendTo: props.appendTo,
+    searchTerm,
     ui,
     onSelect: (editor, range, item) => {
       editor.chain().focus().deleteRange(range).insertContent({

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

@@ -16,24 +16,34 @@ export interface EditorMentionMenuItem {
     class?: any;
     [key: string]: any;
 }
-export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo' | 'ignoreFilter'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorMentionMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(EditorMentionMenuProps<T> & {
+        searchTerm?: string;
+    }) & {
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: (evt: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -30,12 +30,18 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
 } & 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'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorSuggestionMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -45,8 +51,8 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -11,6 +11,7 @@ import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -24,7 +25,9 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorSuggestionMenu || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorSuggestionMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();

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

@@ -30,12 +30,18 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
 } & 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'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorSuggestionMenu['variants']['size'];
     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 {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -45,8 +51,8 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -72,8 +72,10 @@ type SlotProps<T extends EditorToolbarItem> = (props: {
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
     item: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
-declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__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<EditorToolbarProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EditorToolbarProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -83,8 +85,8 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorToolbar.vue

@@ -76,11 +76,11 @@ function isDisabled(item) {
   }
   if ("items" in item && item.items?.length) {
     const items = isArrayOfArray(item.items) ? item.items.flat() : item.items;
-    const itemItems = items.filter((item2) => "kind" in item2);
-    if (itemItems.length === 0) {
+    const actionableItems = items.filter((item2) => item2.type !== "separator" && item2.type !== "label");
+    if (actionableItems.length === 0) {
       return true;
     }
-    return itemItems.every((item2) => isDisabled(item2));
+    return actionableItems.every((item2) => isDisabled(item2));
   }
   if (!("kind" in item)) {
     return item.disabled ?? false;
@@ -124,7 +124,7 @@ function getActiveChildItem(item) {
   });
 }
 function getButtonProps(item) {
-  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip"]);
+  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip", "onClick"]);
   if ("items" in item && item.items?.length) {
     const activeChild = getActiveChildItem(item);
     if (activeChild?.icon) {
@@ -202,10 +202,10 @@ function getDropdownItems(item) {
                 :items="getDropdownItems(item)"
               >
                 <UTooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
-                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
                 </UTooltip>
 
-                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
               </UDropdownMenu>
 
               <UTooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">