@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/DropdownMenuContent.vue

@@ -15,6 +15,7 @@ import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { omit, get, isArrayOfArray } from "../utils";
 import { pickLinkProps } from "../utils/link";
+import { useComponentUI } from "../composables/useComponentUI";
 import icons from "../dictionary/icons";
 import B24LinkBase from "./LinkBase.vue";
 import B24Link from "./Link.vue";
@@ -45,6 +46,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 },
@@ -56,6 +58,7 @@ const props = defineProps({
 const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
 const slots = defineSlots();
 const { dir } = useLocale();
+const uiProp = useComponentUI("dropdownMenu", props);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -103,7 +106,7 @@ const groups = computed(
         </span>
 
         <span
-          v-if="get(item, props.descriptionKey)"
+          v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description']"
           data-slot="itemDescription"
           :class="b24ui.itemDescription({ class: [b24uiOverride?.itemDescription, item.b24ui?.itemDescription] })"
         >
@@ -224,7 +227,7 @@ const groups = computed(
                 <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
                   <slot :name="name" v-bind="slotData" />
                 </template>
-                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
               </B24DropdownMenuContent>
             </DropdownMenu.Sub>
             <DropdownMenu.CheckboxItem
@@ -239,14 +242,13 @@ 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"
-            >
-              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <B24Link 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"
+              >
                 <B24LinkBase
                   v-bind="slotProps"
                   data-slot="item"
@@ -254,8 +256,8 @@ const groups = computed(
                 >
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </B24LinkBase>
-              </B24Link>
-            </DropdownMenu.Item>
+              </DropdownMenu.Item>
+            </B24Link>
           </template>
         </DropdownMenu.Group>
       </div>

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

@@ -39,8 +39,16 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;
-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;
@@ -50,8 +58,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-color-accent-main-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 },
-  b24ui: { type: null, required: false },
+  b24ui: { 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 b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editor || {} })());
+const uiProp = useComponentUI("editor", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.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: b24ui.value.base({ class: props.b24ui?.base })
+    class: b24ui.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-color-accent-main-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="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.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="b24ui.content({ class: props.b24ui?.content })"
+        :class="b24ui.content({ class: uiProp?.content })"
       />
     </template>
   </Primitive>

package/dist/runtime/components/Editor.vue.d.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-color-accent-main-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/EditorDragHandle.d.vue.ts

@@ -39,20 +39,35 @@ export interface EditorDragHandleEmits {
         node: JSONContent;
         pos: number;
     }];
+    hover: [{
+        node: JSONContent;
+        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;
         pos: number;
     }) => any;
+    hover: (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;
+    onHover?: ((args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any) | undefined;
+}>, {
+    size: "lg" | "sm" | "md" | "xl" | "xs" | "xss";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/EditorDragHandle.vue

@@ -9,6 +9,7 @@ import { useForwardProps } from "reka-ui";
 import { reactiveOmit, reactivePick } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { buildFloatingUIMiddleware } from "../utils/editor";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,11 +21,13 @@ const props = defineProps({
   color: { type: null, required: false, default: "air-tertiary-no-accent" },
   options: { type: Object, required: false },
   editor: { type: Object, required: true },
-  b24ui: { type: void 0, required: false },
+  b24ui: { type: Object, required: false },
   pluginKey: { type: [Object, String], required: false },
+  nestedOptions: { type: Object, required: false },
   onElementDragStart: { type: Function, required: false },
   onElementDragEnd: { type: Function, required: false },
   getReferencedVirtualElement: { type: Function, required: false },
+  nested: { type: [Boolean, Object], required: false },
   label: { type: String, required: false },
   activeColor: { type: null, required: false },
   depth: { type: null, required: false },
@@ -49,10 +52,11 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false }
 });
 defineSlots();
-const emit = defineEmits(["nodeChange"]);
-const dragHandleProps = useForwardProps(reactivePick(props, "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement"));
-const buttonProps = useForwardProps(reactiveOmit(props, "icon", "options", "editor", "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement", "class", "b24ui"));
+const emit = defineEmits(["nodeChange", "hover"]);
+const dragHandleProps = useForwardProps(reactivePick(props, "pluginKey", "nested", "nestedOptions", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "options", "editor", "pluginKey", "nested", "nestedOptions", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement", "class", "b24ui"));
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editorDragHandle", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorDragHandle || {} })());
 const floatingUIOptions = computed(() => defu(props.options, {
   strategy: "absolute",
@@ -87,11 +91,16 @@ const computePositionConfig = computed(() => ({
 const currentNodePos = ref();
 function onNodeChange({ pos }) {
   currentNodePos.value = pos;
+  if (pos == null || pos < 0) return;
+  const node = props.editor.state.doc.nodeAt(pos);
+  if (node) {
+    emit("hover", { node: node.toJSON(), pos });
+  }
 }
 function onClick() {
   if (!props.editor) return;
   const pos = currentNodePos.value;
-  if (pos == null) return;
+  if (pos == null || pos < 0) return;
   const node = props.editor.state.doc.nodeAt(pos);
   if (node) {
     const selectedNode = { node: node.toJSON(), pos };
@@ -109,7 +118,7 @@ function onClick() {
     :editor="editor"
     :on-node-change="onNodeChange"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @click="onClick"
   >
     <slot :b24ui="b24ui" :on-click="onClick">
@@ -120,8 +129,8 @@ function onClick() {
   ...$attrs
 }"
         data-slot="handle"
-        :class="b24ui.handle({ class: [props.b24ui?.handle, props.class] })"
-        :b24ui="transformUI(b24ui, props.b24ui)"
+        :class="b24ui.handle({ class: [uiProp?.handle, props.class] })"
+        :b24ui="transformUI(b24ui, uiProp)"
       />
     </slot>
   </DragHandle>

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

@@ -39,20 +39,35 @@ export interface EditorDragHandleEmits {
         node: JSONContent;
         pos: number;
     }];
+    hover: [{
+        node: JSONContent;
+        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;
         pos: number;
     }) => any;
+    hover: (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;
+    onHover?: ((args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any) | undefined;
+}>, {
+    size: "lg" | "sm" | "md" | "xl" | "xs" | "xss";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+}, {}, {}, {}, 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;
     b24ui?: 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];
-} & {};
+}) & {};