@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/Drawer.vue

@@ -8,7 +8,9 @@ import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -21,7 +23,7 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   nested: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   activeSnapPoint: { type: [Number, String, null], required: false },
   closeThreshold: { type: Number, required: false },
   shouldScaleBackground: { type: Boolean, required: false },
@@ -41,6 +43,7 @@ const props = defineProps({
 const emits = defineEmits(["close:prevent", "drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("drawer", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -55,7 +58,9 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
-  return {};
+  return {
+    pointerDownOutside
+  };
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} })({
   direction: props.direction,
@@ -71,10 +76,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
-      <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: props.ui?.handle })" />
+      <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
 
         <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DrawerTitle v-if="title || !!slots.title">
@@ -91,16 +96,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
         </VisuallyHidden>
 
         <slot name="content">
-          <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+          <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
               <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DrawerTitle>
 
-                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -108,11 +113,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
               </slot>
             </div>
 
-            <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+            <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
               <slot name="body" />
             </div>
 
-            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
               <slot name="footer" />
             </div>
           </div>

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

@@ -55,6 +55,8 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
@@ -71,9 +73,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     onRelease?: ((open: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    direction: import("vaul-vue").DrawerDirection;
+    handle: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -129,8 +129,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     ui: DropdownMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -140,8 +144,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => 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/DropdownMenu.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UDropdownMenuContent from "./DropdownMenuContent.vue";
@@ -24,7 +25,7 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -32,6 +33,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dropdownMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => props.arrow);
@@ -48,9 +50,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :ui="ui"
-      :ui-override="props.ui"
+      :ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"
@@ -64,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>

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

@@ -129,8 +129,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     ui: DropdownMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -140,8 +144,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => 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/DropdownMenuContent.d.vue.ts

@@ -38,8 +38,16 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     ui: DropdownMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & {
+        onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -49,8 +57,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => 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/DropdownMenuContent.vue

@@ -41,6 +41,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },
@@ -81,7 +82,7 @@ const groups = computed(
           <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'item-description'" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
@@ -160,19 +161,18 @@ const groups = computed(
             >
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.CheckboxItem>
-            <DropdownMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <DropdownMenu.Item
+                as-child
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                @select="item.onSelect"
+              >
                 <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
-              </ULink>
-            </DropdownMenu.Item>
+              </DropdownMenu.Item>
+            </ULink>
           </template>
         </DropdownMenu.Group>
       </div>

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

@@ -38,8 +38,16 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     ui: DropdownMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & {
+        onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -49,8 +57,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => 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/Editor.d.vue.ts

@@ -24,32 +24,43 @@ 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.
+     * The `suggestion` and `suggestions` options are omitted as they are managed by the `EditorMentionMenu` component.
+     * @defaultValue { HTMLAttributes: { class: 'mention' } }
      * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
      */
-    mention?: Partial<MentionOptions>;
+    mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>;
     /**
      * Custom item handlers to override or extend the default handlers.
      * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
@@ -67,8 +78,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 +95,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/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";
@@ -16,6 +17,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -26,11 +28,11 @@ 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 },
+  ui: { type: Object, required: false },
   extensions: { type: Array, required: false },
   injectCSS: { type: Boolean, required: false },
   injectNonce: { type: null, required: false },
@@ -58,13 +60,17 @@ 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 uiProp = useComponentUI("editor", props);
+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: {
@@ -72,15 +78,13 @@ const editorProps = computed(() => defu(props.editorProps, {
     autocorrect: "off",
     autocapitalize: "off",
     ...attrs,
-    class: ui.value.base({ class: props.ui?.base })
+    class: ui.value.base({ class: uiProp.value?.base })
   }
 }));
 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,24 +93,41 @@ 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"
+  },
+  renderText({ node }) {
+    return `${node.attrs.mentionSuggestionChar ?? "@"}${node.attrs.label ?? node.attrs.id}`;
+  },
+  renderHTML({ options, node }) {
+    return [
+      "span",
+      mergeAttributes({ "data-type": "mention" }, options.HTMLAttributes),
+      `${node.attrs.mentionSuggestionChar ?? "@"}${node.attrs.label ?? node.attrs.id}`
+    ];
   }
 }));
 const extensions = computed(() => [
   contentType.value === "markdown" && Markdown.configure(markdown.value),
   StarterKit.configure(starterKit.value),
+  Code.extend({
+    excludes: "code"
+  }),
   HorizontalRule.extend({
     renderHTML() {
       return [
@@ -116,9 +137,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 +148,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 +178,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);
@@ -170,7 +196,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <template v-if="editor">
       <slot :editor="editor" :handlers="handlers" />
 
@@ -178,7 +204,7 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="ui.content({ class: props.ui?.content })"
+        :class="ui.content({ class: uiProp?.content })"
       />
     </template>
   </Primitive>