RichTextEditor

A theme-aware WYSIWYG editor built on Tiptap for rich text editing with customizable toolbar.

Installation

This component requires @tiptap packages and @aster-ui/icons as peer dependencies:

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

Import

import { RichTextEditor } from 'asterui/editor'

Examples

Basic Editor

Simple rich text editor with default toolbar.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Controlled Editor

Editor with controlled value showing HTML output.

</>

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

Minimal Toolbar

Editor with only basic formatting options.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Full Toolbar

Editor with all available toolbar options.

</>

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

No Toolbar

Distraction-free writing without toolbar.

</>

import { RichTextEditor } from 'asterui/editor'

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

export default App

Sizes

Different text size variants.

</>

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

Max Height with Scrolling

Editor with fixed max height that scrolls.

</>

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

Read-Only Mode

Display formatted content without editing.

</>

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

Borderless

Editor without border, useful inside 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

Editor Instance Access

Access the Tiptap editor instance for advanced features.

</>

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

Property	Description	Type	Default
value	HTML content (controlled)	string	''
onChange	Callback when content changes	(html: string) => void	-
placeholder	Placeholder text	string	'Start typing...'
toolbar	Toolbar items to display	ToolbarItem[]	[default set]
hideToolbar	Hide the toolbar	boolean	false
readOnly	Make editor read-only	boolean	false
autoFocus	Auto focus on mount	boolean	false
minHeight	Minimum height of editor	string | number	200
maxHeight	Maximum height (enables scrolling)	string | number	-
size	Text size variant	'sm' | 'md' | 'lg'	'md'
bordered	Show border around editor	boolean	true
onEditorReady	Callback with Tiptap editor instance	(editor: Editor) => void	-

ToolbarItem

Property	Description
bold	Bold text
italic	Italic text
underline	Underlined text
strikethrough	Strikethrough text
code	Inline code
heading1	Heading level 1
heading2	Heading level 2
heading3	Heading level 3
bulletList	Unordered list
orderedList	Ordered list
blockquote	Blockquote
codeBlock	Code block
horizontalRule	Horizontal line
link	Insert/edit link
undo	Undo last change
redo	Redo last change
|	Toolbar divider