EditorDragHandle

GitHub
A draggable handle for reordering and selecting blocks in the editor.

Usage

Examples

API

Props

Prop Default Type
as'button'any

The element or component this component should render as when not a link.

editorEditor
iconappConfig.ui.icons.dragany
color'neutral' "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"
variant'ghost' "ghost" | "solid" | "outline" | "soft" | "subtle" | "link"
options{ strategy: 'absolute', placement: 'left-start' } FloatingUIOptions

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.

pluginKey string | PluginKey<any>
onElementDragStart (e: DragEvent): void
onElementDragEnd (e: DragEvent): void
getReferencedVirtualElement (): VirtualElement | null
to string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

Route Location the link should navigate to when clicked on.

autofocus false | true | "true" | "false"
disabledboolean
name string
type'button' "reset" | "submit" | "button"

The type of the button when not a link.

downloadany
hreflang string
media string
ping string
target null | string & {} | "_blank" | "_parent" | "_self" | "_top"

Where to display the linked URL, as the name for a browsing context.

referrerpolicy "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
activeboolean

Force the link to be active independent of the current route.

trailingSlash "append" | "remove"

An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.

label string
activeColor "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"
activeVariant "ghost" | "solid" | "outline" | "soft" | "subtle" | "link"
size'sm' "sm" | "xs" | "md" | "lg" | "xl"
squareboolean

Render the button with equal padding on all sides.

blockboolean

Render the button full width.

loadingAutoboolean

Set loading state automatically based on the @click promise state

avatar AvatarProps

Display an avatar on the left side.

leadingboolean

When true, the icon will be displayed on the left side.

leadingIconany

Display an icon on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

trailingIconany

Display an icon on the right side.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

ui { root?: ClassNameValue; handle?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

Slots

Slot Type
default{ ui: object; }

Emits

Event Type
nodeChange[{ node: Node<any, any> | null; pos: number; }]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    editorDragHandle: {
      slots: {
        root: 'hidden sm:flex items-center gap-0.5 justify-center transition-all duration-200 ease-out',
        handle: 'cursor-grab px-1'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        editorDragHandle: {
          slots: {
            root: 'hidden sm:flex items-center gap-0.5 justify-center transition-all duration-200 ease-out',
            handle: 'cursor-grab px-1'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Editor

A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.

EditorMentionMenu

A mention menu that displays user suggestions when typing the @ character in the editor.