TiptapEditor

Full-featured rich text editor built on TipTap / ProseMirror. Configurable toolbar, optional extensions (tables, images, text align, highlight), and HTML or JSON output.

use NyonCode\WireForms\Components\TiptapEditor;
use NyonCode\WireForms\Components\TiptapEditor;

Setup

None. The editor's JavaScript (TipTap + all extensions) ships pre-bundled inside the package and the field's Blade view injects it automatically. There is no npm install, no build step, and no app.js import to add — just use the field and it works out of the box.

The bundle is served by the package at /wire-forms/assets/tiptap.js and the script tag is emitted once per page via @once. It registers the Alpine component tiptapEditor that the view relies on (Alpine ships with Livewire).

Publishing the asset (optional). If you prefer to serve the file through your own asset pipeline/CDN, publish it with:

php artisan vendor:publish --tag=wire-forms::assets
php artisan vendor:publish --tag=wire-forms::assets

This copies the bundle to public/vendor/wire-forms/.

Contributors. The bundle is generated from packages/forms/resources/js/tiptap-editor.js and committed to packages/forms/dist/. Rebuild it after editing the source with:

npm run build:forms-assets
npm run build:forms-assets

Basic Usage

TiptapEditor::make('content')
TiptapEditor::make('content')

Custom Toolbar

TiptapEditor::make('content')
    ->toolbarButtons([
        'bold', 'italic', 'underline',
        '|',
        'h2', 'h3',
        '|',
        'bulletList', 'orderedList',
        '|',
        'link', 'undo', 'redo',
    ])
TiptapEditor::make('content')
    ->toolbarButtons([
        'bold', 'italic', 'underline',
        '|',
        'h2', 'h3',
        '|',
        'bulletList', 'orderedList',
        '|',
        'link', 'undo', 'redo',
    ])

Use '|' as a visual separator between groups.

Disable Specific Buttons

TiptapEditor::make('content')
    ->disableToolbarButtons(['codeBlock', 'code'])
TiptapEditor::make('content')
    ->disableToolbarButtons(['codeBlock', 'code'])

No Toolbar

TiptapEditor::make('content')
    ->disableAllToolbarButtons()
TiptapEditor::make('content')
    ->disableAllToolbarButtons()

Extensions

Enable optional extensions individually:

TiptapEditor::make('content')
    ->withTables()       // table insertion + editing
    ->withImages()       // image insertion (via URL prompt)
    ->withTextAlign()    // left / center / right alignment buttons
    ->withHighlight()    // text highlight button
TiptapEditor::make('content')
    ->withTables()       // table insertion + editing
    ->withImages()       // image insertion (via URL prompt)
    ->withTextAlign()    // left / center / right alignment buttons
    ->withHighlight()    // text highlight button

When an extension is enabled, its toolbar button is appended automatically.

Output Format

// Default: HTML string stored in the model
TiptapEditor::make('body')->outputHtml()
 
// Store as TipTap JSON document (serialised as a JSON string)
TiptapEditor::make('body')->outputJson()
// Default: HTML string stored in the model
TiptapEditor::make('body')->outputHtml()

// Store as TipTap JSON document (serialised as a JSON string)
TiptapEditor::make('body')->outputJson()

Character Limit

TiptapEditor::make('summary')
    ->maxLength(2000)    // shows a live counter, enforced by CharacterCount extension
TiptapEditor::make('summary')
    ->maxLength(2000)    // shows a live counter, enforced by CharacterCount extension

Height

TiptapEditor::make('content')
    ->minHeight(400)     // minimum height in pixels (default 240)
TiptapEditor::make('content')
    ->minHeight(400)     // minimum height in pixels (default 240)

Read-Only / Disabled

TiptapEditor::make('content')
    ->readOnly()
    ->disabled(fn () => ! $this->canEdit)
TiptapEditor::make('content')
    ->readOnly()
    ->disabled(fn () => ! $this->canEdit)

Available Toolbar Buttons

Comparison with RichEditor

Methods

See Common Field API for label, hint, tooltip, and other shared methods.