EditorToolbar

Uso

O componente EditorToolbar exibe uma barra de ferramentas com botões de formatação que sincronizam automaticamente seu estado ativo com o conteúdo do editor. Ele suporta três modos de layout usando o pacote @tiptap/vue-3/menus:

• fixed (always visible)
• bubble (appears on text selection)
• floating (appears on empty lines)

Itens

Use a prop items como um array de objetos com as seguintes propriedades:

• label?: string
• icon?: string
• color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
• activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
• variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"
• activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"
• size?: "xs" | "sm" | "md" | "lg" | "xl"
• kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "taskList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"
• disabled?: boolean
• loading?: boolean
• active?: boolean
• tooltip?: TooltipProps
• slot?: string
• onClick?: (e: MouseEvent) => void
• items?: EditorToolbarItem[] | EditorToolbarItem[][]
• class?: any

Você pode passar qualquer propriedade do componente Button, como color, variant, size, etc.

Layout

Use a prop layout para alterar como a barra de ferramentas é exibida. O padrão é fixed.

Opções

Ao usar os layouts bubble ou floating, use a prop options para personalizar o comportamento de posicionamento usando as opções do Floating UI.

<template>
  <NEditor v-slot="{ editor }">
    <NEditorToolbar
      :editor="editor"
      :items="items"
      layout="bubble"
      :options="{
        placement: 'top',
        offset: 8,
        flip: { padding: 8 },
        shift: { padding: 8 }
      }"
    />
  </NEditor>
</template>

Deve exibir

Ao usar os layouts bubble ou floating, use a prop should-show para controlar quando a barra de ferramentas aparece. Essa função recebe o contexto sobre o estado do editor e retorna um booleano.

<template>
  <NEditor v-slot="{ editor }">
    <NEditorToolbar
      :editor="editor"
      :items="items"
      layout="bubble"
      :should-show="({ view, state }) => {
        const { selection } = state
        const { from, to } = selection
        const text = state.doc.textBetween(from, to)
        return view.hasFocus() && !selection.empty && text.length > 10
      }"
    />
  </NEditor>
</template>

Exemplos

Com barra de ferramentas de imagem

Use a prop should-show para criar barras de ferramentas específicas de contexto que aparecem apenas para certos tipos de node. Este exemplo mostra uma barra de ferramentas bubble com ações de download e exclusão que só aparece quando uma imagem é selecionada.

Com popover de link

Este exemplo demonstra como criar um popover de link personalizado usando a propriedade slot nos itens da barra de ferramentas e o componente Popover.

1. Crie um componente Vue que envolve um Popover com funcionalidade de edição de link:

2. Use o componente personalizado na barra de ferramentas com um slot nomeado:

API

Props

Slots

Tema

export default defineAppConfig({
  ui: {
    editorToolbar: {
      slots: {
        root: 'focus:outline-none',
        base: 'flex items-stretch gap-1.5',
        group: 'flex items-center gap-0.5',
        separator: 'w-px self-stretch bg-border'
      },
      variants: {
        layout: {
          bubble: {
            base: 'bg-default border border-default rounded-lg p-1'
          },
          floating: {
            base: 'bg-default border border-default rounded-lg p-1'
          },
          fixed: {
            base: ''
          }
        }
      }
    }
  }
})

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        editorToolbar: {
          slots: {
            root: 'focus:outline-none',
            base: 'flex items-stretch gap-1.5',
            group: 'flex items-center gap-0.5',
            separator: 'w-px self-stretch bg-border'
          },
          variants: {
            layout: {
              bubble: {
                base: 'bg-default border border-default rounded-lg p-1'
              },
              floating: {
                base: 'bg-default border border-default rounded-lg p-1'
              },
              fixed: {
                base: ''
              }
            }
          }
        }
      }
    })
  ]
})

Changelog