EditorDragHandle

Uso

O componente EditorDragHandle oferece funcionalidade de arrastar e soltar para reordenar blocos do editor usando o pacote @tiptap/extension-drag-handle-vue-3.

Ele estende o componente Button, então você pode passar qualquer propriedade como color, variant, size, etc.

Ícone

Use a prop icon para personalizar o ícone da alça de arrastar.

<template>
  <NEditor v-slot="{ editor }">
    <NEditorDragHandle :editor="editor" icon="i-lucide-move" />
  </NEditor>
</template>

Opções

Use a prop options para personalizar o comportamento de posicionamento usando as opções do Floating UI.

<template>
  <NEditor v-slot="{ editor }">
    <NEditorDragHandle
      :editor="editor"
      :options="{
        placement: 'left'
      }"
    />
  </NEditor>
</template>

Exemplos

Com dropdown menu

Use o slot padrão para adicionar um DropdownMenu com ações no nível do bloco, como duplicar, excluir, mover para cima/baixo ou transformar blocos em tipos diferentes.

Escute o evento @node-change para acompanhar o node atualmente sob o cursor e sua posição, e então use editor.chain().setMeta('lockDragHandle', open).run() para travar a posição da alça enquanto o menu está aberto.

Com menu de sugestões

Use o slot padrão para adicionar um Button ao lado da alça de arrastar para abrir o EditorSuggestionMenu.

Chame a função de slot onClick para obter a posição atual do node e então use handlers.suggestion?.execute(editor, { pos: node?.pos }).run() para inserir novos blocos naquela posição.

API

Props

Slots

Emits

Tema

export default defineAppConfig({
  ui: {
    editorDragHandle: {
      slots: {
        root: 'hidden sm:flex items-center justify-center transition-all duration-200 ease-out',
        handle: 'cursor-grab px-1'
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

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

Changelog