EditorDragHandle

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.
`editor`		`Editor`
`icon`	`appConfig.ui.icons.drag`	`string \| object`
`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. https://floating-ui.com/docs/computePosition#options
`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"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`download`		`any`
`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"`
`active`		`boolean` 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"`
`square`		`boolean` Render the button with equal padding on all sides.
`block`		`boolean` Render the button full width.
`loadingAuto`		`boolean` Set loading state automatically based on the `@click` promise state
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`string \| object` Display an icon on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`string \| object` 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.