RichTextEditor

Um editor WYSIWYG adaptável ao tema baseado em Tiptap para edição de texto rico com barra de ferramentas customizável.

Instalação

Este componente requer pacotes @tiptap e @aster-ui/icons como dependências peer:

npm install @aster-ui/icons @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder @tiptap/extension-underline

Importação

import { RichTextEditor } from 'asterui/editor'

Exemplos

Editor Básico

Editor de texto rico simples com barra de ferramentas padrão.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor placeholder="Start writing..." />
    )
}

export default App

Editor Controlado

Editor com valor controlado mostrando saída HTML.

</>

import { RichTextEditor } from 'asterui/editor'
import { useState } from 'react'

function App() {
  const [content, setContent] = useState('<p>Edit this text...</p>')
  
  return (
      <Space direction="vertical" size="md" block>
        <RichTextEditor value={content} onChange={setContent} />
        <Card size="sm" className="bg-base-200">
          <p className="text-sm font-medium mb-2">HTML Output:</p>
          <code className="text-xs break-all">{content}</code>
        </Card>
      </Space>
    )
}

export default App

Barra de Ferramentas Mínima

Editor com apenas opções básicas de formatação.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="Simple formatting only..."
        toolbar={['bold', 'italic', 'underline', '|', 'link']}
      />
    )
}

export default App

Barra de Ferramentas Completa

Editor com todas as opções de barra de ferramentas disponíveis.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="All formatting options..."
        toolbar={[
          'bold',
          'italic',
          'underline',
          'strikethrough',
          '|',
          'heading1',
          'heading2',
          'heading3',
          '|',
          'bulletList',
          'orderedList',
          'blockquote',
          '|',
          'code',
          'codeBlock',
          'horizontalRule',
          '|',
          'link',
          '|',
          'undo',
          'redo',
        ]}
      />
    )
}

export default App

Sem Barra de Ferramentas

Escrita sem distrações sem barra de ferramentas.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        hideToolbar
        placeholder="Write without distractions..."
        minHeight={150}
      />
    )
}

export default App

Tamanhos

Diferentes variantes de tamanho de texto.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <Space direction="vertical" size="md" block>
        <div>
          <p className="text-sm mb-1">Small</p>
          <RichTextEditor
            size="sm"
            placeholder="Small editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Medium (default)</p>
          <RichTextEditor
            size="md"
            placeholder="Medium editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Large</p>
          <RichTextEditor
            size="lg"
            placeholder="Large editor..."
            toolbar={['bold', 'italic', 'link']}
            minHeight={100}
          />
        </div>
      </Space>
    )
}

export default App

Altura Máxima com Rolagem

Editor com altura máxima fixa que rola.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        placeholder="This editor scrolls when content exceeds max height..."
        minHeight={100}
        maxHeight={200}
        value="<p>Try adding more content to see the scrolling behavior.</p><p>Keep typing...</p><p>More text here...</p><p>And more...</p><p>Even more content...</p><p>The editor will scroll!</p>"
      />
    )
}

export default App

Modo Somente Leitura

Exibe conteúdo formatado sem edição.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <RichTextEditor
        readOnly
        hideToolbar
        value="<h2>Read-Only Content</h2><p>This content <strong>cannot be edited</strong>. It's useful for displaying formatted content without allowing modifications.</p><ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>"
      />
    )
}

export default App

Sem Borda

Editor sem borda, útil dentro de cards.

</>

import { RichTextEditor } from 'asterui/editor'

function App() {
  return (
      <Card>
        <RichTextEditor
          bordered={false}
          placeholder="Borderless editor inside a card..."
          minHeight={150}
        />
      </Card>
    )
}

export default App

Acesso à Instância do Editor

Acessa a instância do editor Tiptap para recursos avançados.

</>

import { RichTextEditor } from 'asterui/editor'
import { useState } from 'react'

function App() {
  const [wordCount, setWordCount] = useState(0)
  
  return (
      <Space direction="vertical" size="sm" block>
        <RichTextEditor
          placeholder="Start typing to see word count..."
          onEditorReady={(editor) => {
            editor.on('update', () => {
              const text = editor.getText()
              const words = text.trim().split(/\s+/).filter(Boolean).length
              setWordCount(words)
            })
          }}
        />
        <p className="text-sm text-base-content/60">Word count: {wordCount}</p>
      </Space>
    )
}

export default App

API

RichTextEditor

Propriedade	Descrição	Tipo	Padrão
value	Conteúdo HTML (controlado)	string	''
onChange	Callback quando conteúdo muda	(html: string) => void	-
placeholder	Texto placeholder	string	'Start typing...'
toolbar	Itens de barra de ferramentas para exibir	ToolbarItem[]	[conjunto padrão]
hideToolbar	Ocultar a barra de ferramentas	boolean	false
readOnly	Tornar editor somente leitura	boolean	false
autoFocus	Foco automático ao montar	boolean	false
minHeight	Altura mínima do editor	string | number	200
maxHeight	Altura máxima (habilita rolagem)	string | number	-
size	Variante de tamanho de texto	'sm' | 'md' | 'lg'	'md'
bordered	Mostrar borda ao redor do editor	boolean	true
onEditorReady	Callback com instância do editor Tiptap	(editor: Editor) => void	-

ToolbarItem

Propriedade	Descrição
bold	Texto negrito
italic	Texto itálico
underline	Texto sublinhado
strikethrough	Texto tachado
code	Código inline
heading1	Cabeçalho nível 1
heading2	Cabeçalho nível 2
heading3	Cabeçalho nível 3
bulletList	Lista não ordenada
orderedList	Lista ordenada
blockquote	Citação em bloco
codeBlock	Bloco de código
horizontalRule	Linha horizontal
link	Inserir/editar link
undo	Desfazer última alteração
redo	Refazer última alteração
|	Divisor de barra de ferramentas