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;

Setup

None. The editor's JavaScript 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 editor is code-split: the core bundle (TipTap core + the always-on extensions) is served at /wire-forms/tiptap/tiptap-editor.js, and the opt-in extensions (withTables() / withImages() / withHighlight() / withTextAlign()) ship in a separate addon bundle that is only loaded when a field on the page enables one of them. Both share one core chunk, so a page without those extensions downloads less, and enabling tables never ships a second copy of the editor core. The <script type="module"> tags are injected once per page via Livewire's @assets directive; they register the Alpine component tiptapEditor that the view relies on (Alpine ships with Livewire).

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

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

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

Contributors. The bundles are generated from packages/forms/resources/js/tiptap-editor.js and tiptap-editor-addons.js, and committed (with the shared chunk) to packages/forms/dist/tiptap/. Rebuild them after editing the source with:

npm run build:forms-assets

Basic Usage

TiptapEditor::make('content')

Custom Toolbar

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'])

No Toolbar

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

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()

Character Limit

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)

Read-Only / Disabled

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.