@nuxt/ui 4.2.1 → 4.3.0

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -37,27 +37,8 @@ const props = defineProps({
   as: { type: null, required: false },
   type: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
-  exact: { type: Boolean, required: false },
-  exactQuery: { type: [Boolean, String], required: false },
-  exactHash: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false },
-  to: { type: null, required: false },
-  href: { type: null, required: false },
-  external: { type: Boolean, required: false },
-  target: { type: [String, Object, null], required: false },
-  rel: { type: [String, Object, null], required: false },
-  noRel: { type: Boolean, required: false },
-  prefetchedClass: { type: String, required: false },
-  prefetch: { type: Boolean, required: false },
-  prefetchOn: { type: [String, Object], required: false },
-  noPrefetch: { type: Boolean, required: false },
-  trailingSlash: { type: String, required: false },
-  activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
-  ariaCurrentValue: { type: String, required: false },
-  viewTransition: { type: Boolean, required: false },
-  replace: { type: Boolean, required: false }
+  viewTransition: { type: Boolean, required: false }
 });
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();

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

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../types';
-export interface DashboardSidebarToggleProps extends Omit<ButtonProps, 'color' | 'variant'> {
+import type { ButtonProps, LinkPropsKeys } from '../types';
+export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkPropsKeys | 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -14,10 +14,6 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, 'color' |
      */
     side?: 'left' | 'right';
 }
-declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
-    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    side: "left" | "right";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -71,14 +71,7 @@ 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;
-}>, {
-    overlay: boolean;
-    modal: boolean;
-    portal: boolean | string | HTMLElement;
-    direction: import("vaul-vue").DrawerDirection;
-    handle: boolean;
-    dismissible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -71,14 +71,7 @@ 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;
-}>, {
-    overlay: boolean;
-    modal: boolean;
-    portal: boolean | string | HTMLElement;
-    direction: import("vaul-vue").DrawerDirection;
-    handle: boolean;
-    dismissible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -115,8 +115,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
         index: number;
     }) => any;
     'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    'content-top': (props: {
+        sub: boolean;
+    }) => any;
+    'content-bottom': (props: {
+        sub: boolean;
+    }) => any;
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
@@ -126,9 +130,9 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     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> & {
-        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
-    }> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;

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

@@ -115,8 +115,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
         index: number;
     }) => any;
     'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    'content-top': (props: {
+        sub: boolean;
+    }) => any;
+    'content-bottom': (props: {
+        sub: boolean;
+    }) => any;
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
@@ -126,9 +130,9 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     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> & {
-        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
-    }> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;

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

@@ -39,13 +39,9 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     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> & {
-        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;
-    }> & import("vue").PublicProps;
+    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 {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;

package/dist/runtime/components/DropdownMenuContent.vue

@@ -105,7 +105,7 @@ const groups = computed(
 
   <DropdownMenu.Portal v-bind="portalProps">
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
-      <slot name="content-top" />
+      <slot name="content-top" :sub="sub ?? false" />
 
       <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
         <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
@@ -179,7 +179,7 @@ const groups = computed(
 
       <slot />
 
-      <slot name="content-bottom" />
+      <slot name="content-bottom" :sub="sub ?? false" />
     </component>
   </DropdownMenu.Portal>
 </template>

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

@@ -39,13 +39,9 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     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> & {
-        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;
-    }> & import("vue").PublicProps;
+    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 {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;

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

@@ -0,0 +1,87 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3';
+import type { StarterKitOptions } from '@tiptap/starter-kit';
+import type { PlaceholderOptions } from '@tiptap/extension-placeholder';
+import type { MarkdownExtensionOptions } from '@tiptap/markdown';
+import type { ImageOptions } from '@tiptap/extension-image';
+import type { MentionOptions } from '@tiptap/extension-mention';
+import theme from '#build/ui/editor';
+import type { EditorHandlers, EditorCustomHandlers } from '../types/editor';
+import type { ComponentConfig } from '../types/tv';
+type Editor = ComponentConfig<typeof theme, AppConfig, 'editor'>;
+export type EditorContentType = 'json' | 'html' | 'markdown';
+export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    modelValue?: T;
+    /**
+     * The content type the content is provided as.
+     * When not specified, it's automatically inferred: strings are treated as 'html', objects as 'json'.
+     */
+    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 } }
+     * @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`.
+     * @see https://tiptap.dev/docs/editor/extensions/functionality/placeholder
+     */
+    placeholder?: string | Partial<PlaceholderOptions>;
+    /**
+     * The markdown extension options to configure markdown parsing and serialization.
+     * @see https://tiptap.dev/docs/editor/extensions/functionality/markdown
+     */
+    markdown?: Partial<MarkdownExtensionOptions>;
+    /**
+     * The image extension options to configure image handling.
+     * @see https://tiptap.dev/docs/editor/extensions/nodes/image
+     */
+    image?: Partial<ImageOptions>;
+    /**
+     * The mention extension options to configure mention handling.
+     * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
+     */
+    mention?: Partial<MentionOptions>;
+    /**
+     * Custom item handlers to override or extend the default handlers.
+     * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
+     */
+    handlers?: H;
+    class?: any;
+    ui?: Editor['slots'];
+}
+export interface EditorEmits<T extends Content = Content> {
+    'update:modelValue': [value: T];
+}
+export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
+    default(props: {
+        editor: TiptapEditor;
+        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 {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        editor: import("vue").ShallowRef<TiptapEditor | undefined, TiptapEditor | undefined>;
+    }>) => void;
+    attrs: any;
+    slots: EditorSlots<H>;
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => 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/Editor.vue

@@ -0,0 +1,185 @@
+<script>
+import theme from "#build/ui/editor";
+</script>
+
+<script setup>
+import { computed, provide, useAttrs, watch } from "vue";
+import { defu } from "defu";
+import { Primitive, useForwardProps } from "reka-ui";
+import { mergeAttributes } from "@tiptap/core";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Image from "@tiptap/extension-image";
+import Mention from "@tiptap/extension-mention";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+import { useEditor, EditorContent } from "@tiptap/vue-3";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { createHandlers } from "../utils/editor";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  contentType: { type: String, required: false },
+  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 },
+  handlers: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  extensions: { type: Array, required: false },
+  injectCSS: { type: Boolean, required: false },
+  injectNonce: { type: null, required: false },
+  autofocus: { type: [String, Number, Boolean, null], required: false },
+  editable: { type: Boolean, required: false },
+  textDirection: { type: String, required: false },
+  editorProps: { type: Object, required: false },
+  parseOptions: { type: Object, required: false },
+  coreExtensionOptions: { type: Object, required: false },
+  enableInputRules: { type: [Array, Boolean], required: false },
+  enablePasteRules: { type: [Array, Boolean], required: false },
+  enableCoreExtensions: { type: [Boolean, Object], required: false },
+  enableContentCheck: { type: Boolean, required: false },
+  emitContentError: { type: Boolean, required: false },
+  onBeforeCreate: { type: Function, required: false },
+  onCreate: { type: Function, required: false },
+  onMount: { type: Function, required: false },
+  onUnmount: { type: Function, required: false },
+  onContentError: { type: Function, required: false },
+  onUpdate: { type: Function, required: false },
+  onSelectionUpdate: { type: Function, required: false },
+  onTransaction: { type: Function, required: false },
+  onFocus: { type: Function, required: false },
+  onBlur: { type: Function, required: false },
+  onDestroy: { type: Function, required: false },
+  onPaste: { type: Function, required: false },
+  onDrop: { type: Function, required: false },
+  onDelete: { type: Function, 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 rootProps = useForwardProps(reactiveOmit(props, "starterKit", "extensions", "editorProps", "contentType", "class", "placeholder", "markdown", "image", "mention", "handlers"));
+const editorProps = computed(() => defu(props.editorProps, {
+  attributes: {
+    autocomplete: "off",
+    autocorrect: "off",
+    autocapitalize: "off",
+    ...attrs,
+    class: ui.value.base({ class: props.ui?.base })
+  }
+}));
+const contentType = computed(() => props.contentType || (typeof props.modelValue === "string" ? "html" : "json"));
+const starterKit = computed(() => defu(props.starterKit, {
+  horizontalRule: false,
+  headings: {
+    levels: [1, 2, 3, 4]
+  },
+  dropcursor: {
+    color: "var(--ui-primary)",
+    width: 2
+  },
+  link: {
+    openOnClick: false
+  }
+}));
+const placeholder = computed(() => defu(typeof props.placeholder === "string" ? { placeholder: props.placeholder } : props.placeholder, {
+  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, {
+  HTMLAttributes: {
+    class: "mention"
+  }
+}));
+const extensions = computed(() => [
+  contentType.value === "markdown" && Markdown.configure(markdown.value),
+  StarterKit.configure(starterKit.value),
+  HorizontalRule.extend({
+    renderHTML() {
+      return [
+        "div",
+        mergeAttributes(this.options.HTMLAttributes, { "data-type": this.name }),
+        ["hr"]
+      ];
+    }
+  }),
+  Image.configure(image.value),
+  props.placeholder && Placeholder.configure(placeholder.value),
+  Mention.configure(mention.value),
+  ...props.extensions || []
+].filter((extension) => !!extension));
+const editor = useEditor({
+  ...rootProps.value,
+  content: props.modelValue,
+  contentType: contentType.value,
+  extensions: extensions.value,
+  editorProps: editorProps.value,
+  onUpdate: ({ editor: editor2 }) => {
+    let value;
+    try {
+      if (contentType.value === "html") {
+        value = editor2.getHTML();
+      } else if (contentType.value === "json") {
+        value = editor2.getJSON();
+      } else if (contentType.value === "markdown") {
+        value = editor2.getMarkdown();
+      }
+    } catch (error) {
+      value = editor2.getText();
+    }
+    emits("update:modelValue", value);
+  }
+});
+watch(() => props.modelValue, (newVal) => {
+  if (!editor.value || newVal == null) {
+    return;
+  }
+  const currentContent = contentType.value === "html" ? editor.value.getHTML() : contentType.value === "json" ? JSON.stringify(editor.value.getJSON()) : contentType.value === "markdown" ? editor.value.getMarkdown() : editor.value.getText();
+  const newContent = contentType.value === "json" && typeof newVal === "object" ? JSON.stringify(newVal) : String(newVal);
+  if (currentContent !== newContent) {
+    const currentSelection = editor.value.state.selection;
+    const currentPos = currentSelection.from;
+    editor.value.commands.setContent(newVal);
+    const newDoc = editor.value.state.doc;
+    if (currentPos <= newDoc.content.size) {
+      editor.value.commands.setTextSelection(currentPos);
+    }
+  }
+});
+const handlers = computed(() => ({
+  ...createHandlers(),
+  ...props.handlers
+}));
+provide("editorHandlers", handlers);
+defineExpose({
+  editor
+});
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <template v-if="editor">
+      <slot :editor="editor" :handlers="handlers" />
+
+      <EditorContent
+        role="presentation"
+        :editor="editor"
+        data-slot="content"
+        :class="ui.content({ class: props.ui?.content })"
+      />
+    </template>
+  </Primitive>
+</template>

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

@@ -0,0 +1,87 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3';
+import type { StarterKitOptions } from '@tiptap/starter-kit';
+import type { PlaceholderOptions } from '@tiptap/extension-placeholder';
+import type { MarkdownExtensionOptions } from '@tiptap/markdown';
+import type { ImageOptions } from '@tiptap/extension-image';
+import type { MentionOptions } from '@tiptap/extension-mention';
+import theme from '#build/ui/editor';
+import type { EditorHandlers, EditorCustomHandlers } from '../types/editor';
+import type { ComponentConfig } from '../types/tv';
+type Editor = ComponentConfig<typeof theme, AppConfig, 'editor'>;
+export type EditorContentType = 'json' | 'html' | 'markdown';
+export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    modelValue?: T;
+    /**
+     * The content type the content is provided as.
+     * When not specified, it's automatically inferred: strings are treated as 'html', objects as 'json'.
+     */
+    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 } }
+     * @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`.
+     * @see https://tiptap.dev/docs/editor/extensions/functionality/placeholder
+     */
+    placeholder?: string | Partial<PlaceholderOptions>;
+    /**
+     * The markdown extension options to configure markdown parsing and serialization.
+     * @see https://tiptap.dev/docs/editor/extensions/functionality/markdown
+     */
+    markdown?: Partial<MarkdownExtensionOptions>;
+    /**
+     * The image extension options to configure image handling.
+     * @see https://tiptap.dev/docs/editor/extensions/nodes/image
+     */
+    image?: Partial<ImageOptions>;
+    /**
+     * The mention extension options to configure mention handling.
+     * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
+     */
+    mention?: Partial<MentionOptions>;
+    /**
+     * Custom item handlers to override or extend the default handlers.
+     * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
+     */
+    handlers?: H;
+    class?: any;
+    ui?: Editor['slots'];
+}
+export interface EditorEmits<T extends Content = Content> {
+    'update:modelValue': [value: T];
+}
+export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
+    default(props: {
+        editor: TiptapEditor;
+        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 {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        editor: import("vue").ShallowRef<TiptapEditor | undefined, TiptapEditor | undefined>;
+    }>) => void;
+    attrs: any;
+    slots: EditorSlots<H>;
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => 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/EditorDragHandle.d.vue.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;
+    };
+};