php artisan aura:add rich-text

composer require bluestarsystem/aura-ui
php artisan aura:install

• Overview
• Basic Usage
• Markdown Mode
• Restricted Toolbar
• Custom Minimum Height
• Props
• Toolbar Command Keys
• HTML Output & Sanitization
• Markdown Underline Behaviour
• Livewire Integration

Pro Component — This component requires an Aura UI Pro license.

Just need the basics? The free Editor covers simple HTML formatting (bold, italic, lists, links). The Rich Text Editor adds Markdown output, an inline link picker, active toolbar states, a hardened load-time sanitizer, and extra commands (blockquote, inline code, clear formatting).

Overview#

The Rich Text Editor component provides a WYSIWYG editing surface with a configurable toolbar, suitable for body copy, blog posts, comments, or any long-form field. It binds via wire:model (including .live) and outputs either sanitized HTML or Markdown depending on the format prop. For a lightweight free alternative, see the Editor.

The editor scrubs content to its supported tag set when loading a value and validates link URL schemes (only http, https, mailto, and tel are allowed). Downstream rendering is the consumer's responsibility — see HTML Output & Sanitization below.

Basic Usage#

<x-aura::rich-text label="Description" hint="Supports basic formatting" />

<x-aura::rich-text
    wire:model="body"
    label="Description"
    hint="Supports basic formatting"
/>

Markdown Mode#

Set format="markdown" to receive Markdown-formatted text instead of HTML. The editor's toolbar and interaction remain the same; only the serialized output format changes.

<x-aura::rich-text label="Post Body" format="markdown" hint="Output will be Markdown" />

<x-aura::rich-text
    wire:model="content"
    label="Post Body"
    format="markdown"
/>

Note: Markdown has no underline syntax. When format="markdown" is used, underlined text is serialized as inline <u>...</u> HTML embedded in the Markdown string. This is expected behaviour, not a bug.

Restricted Toolbar#

Pass a :toolbar array to limit or reorder the toolbar buttons. Any subset of the command keys is valid.

<x-aura::rich-text label="Comment" :toolbar="['bold', 'italic', 'link']" hint="Bold, italic, and links only" />

<x-aura::rich-text
    wire:model="comment"
    label="Comment"
    :toolbar="['bold', 'italic', 'link']"
/>

Custom Minimum Height#

Use the min-height attribute to control the editing area's minimum height.

<x-aura::rich-text
    wire:model="bio"
    label="Biography"
    min-height="320px"
/>

Props#

Toolbar Command Keys#

The following keys form the default essential set and are valid values in the :toolbar array:

HTML Output & Sanitization#

When format="html" (the default), the value bound via wire:model is the raw HTML produced by the editor. The editor itself scrubs content to its supported tag set when loading a value and validates link URL schemes — only http, https, mailto, and tel are accepted. However, when you render the stored content elsewhere in your application you are responsible for sanitizing it to prevent XSS. Use a server-side sanitizer (e.g. HTMLPurifier or an equivalent) before outputting the value in a Blade template.

{{-- Do not render raw editor HTML without sanitization --}}
{!! $sanitizer->sanitize($post->body) !!}

Markdown Underline Behaviour#

Markdown has no native underline syntax. When format="markdown" is active, any underlined text is serialized as inline HTML (<u>text</u>) embedded in the Markdown string. This is intentional — the underline formatting is preserved without inventing non-standard Markdown syntax. Parsers that allow inline HTML will render it correctly.

Livewire Integration#

The component binds via wire:model and supports the .live modifier for real-time updates:

<x-aura::rich-text
    wire:model.live="body"
    label="Live Preview Body"
/>

// Livewire component
class PostEditor extends Component
{
    public string $body = '';

    protected function rules(): array
    {
        return [
            'body' => 'required|string|max:65535',
        ];
    }

    public function save(): void
    {
        $this->validate();

        Post::create(['body' => $this->body]);

        $this->dispatch('toast', type: 'success', message: 'Post saved.');
    }
}