RichTextEditor
Editor de texto rico (WYSIWYG) baseado em TipTap com toolbar de formatação e inserção de variáveis de template.
Carregando...
Instalação
npx @kobana/ui add rich-text-editorDependências instaladas automaticamente: button, dropdown-menu (shadcn/ui), lucide-react, @tiptap/react, @tiptap/starter-kit, @tiptap/extension-underline, @tiptap/extension-link, @tiptap/extension-text-align, @tiptap/extension-placeholder
Importação
import { RichTextEditor } from "@/components/kobana/rich-text-editor"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
value | string | — | Conteúdo HTML do editor (controlado) |
onChange | (html: string) => void | — | Callback disparado a cada alteração, recebe o HTML atualizado |
placeholder | string | — | Texto exibido quando o editor está vazio |
variables | RichTextVariable[] | — | Lista de variáveis de template inseríveis via menu da toolbar |
className | string | — | Classes adicionais aplicadas ao contêiner do editor |
disabled | boolean | false | Desabilita a edição do conteúdo |
RichTextVariable
| Campo | Tipo | Descrição |
|---|---|---|
label | string | Texto exibido para o usuário no menu de variáveis |
value | string | Valor/token inserido no conteúdo (ex: nome_cliente → {{ nome_cliente }}) |
Uso
"use client"
import { useState } from "react"
import { RichTextEditor } from "@/components/kobana/rich-text-editor"
export function Example() {
const [html, setHtml] = useState("<p>Olá!</p>")
return (
<RichTextEditor
value={html}
onChange={setHtml}
placeholder="Escreva sua mensagem..."
variables={[
{ label: "Nome do cliente", value: "nome_cliente" },
{ label: "Valor da cobrança", value: "valor" },
{ label: "Data de vencimento", value: "vencimento" },
]}
/>
)
}Ideal para editar templates de e-mail, notificações e mensagens onde o usuário precisa de formatação rica e inserção de variáveis dinâmicas. As variáveis são totalmente desacopladas do domínio: passe qualquer lista via prop variables, e cada item é inserido no conteúdo no formato {{ value }}.