marshmallow/nova-tiptap

A Laravel Nova tiptap editor field.

5.2.0 2025-04-24 10:27 UTC

This package is auto-updated.

Last update: 2025-04-24 10:27:56 UTC


README

Version Issues Licence

Laravel Nova Tiptap Editor Field

A rich text editor for Laravel Nova based on tiptap by @ueberdosis.

Warning

When updating from manogi/nova-tiptap, replace all instances of Manogi\Tiptap\Tiptap with Marshmallow\Tiptap\Tiptap.

Important

This is a maintained fork of the original package with Nova 5 support.

Installation

composer require marshmallow/nova-tiptap

Add the use statement to your Nova resource:

use Marshmallow\Tiptap\Tiptap;

Basic Usage

Tiptap::make('Content')

This provides a simple editor with bold and italic buttons only.

Button Configuration

Create a fully-featured editor by configuring your desired buttons:

Tiptap::make('Content')
  ->buttons([
    'heading', 'bold', 'italic', '|', 'link', 'bulletList', 'orderedList',
    // Add more buttons as needed
  ])

Available Buttons

Button Description
heading Text headings (H1, H2, H3, etc.)
bold Bold text formatting
italic Italic text formatting
strike Strikethrough text
underline Underline text
bulletList Unordered/bullet list
orderedList Ordered/numbered list
link Hyperlinks to URLs or files
code Inline code formatting
codeBlock Block code with optional syntax highlighting
blockquote Block quotes
image Insert and upload images
table Create and edit tables
textAlign Text alignment options
rtl Right-to-left text direction
horizontalRule Horizontal divider line
hardBreak Hard line break
history Undo/redo functionality
editHtml HTML source code editor
| Vertical divider in toolbar (special)
br Line break in toolbar (special)

Feature Configuration

Headings

Tiptap::make('Content')
  ->buttons(['heading'])
  ->headingLevels([2, 3, 4]) // Only allow H2, H3, H4 (default: H1-H3)

Links

Tiptap::make('Content')
  ->buttons(['link'])
  ->linkSettings([
    'withFileUpload' => false, // Disable file upload option (default: true)
  ])
  ->fileSettings([
    'disk' => 'public', // Storage disk to use (default: 'public')
    'path' => 'links',  // Path within disk (default: root folder)
  ])

Images

Tiptap::make('Content')
  ->buttons(['image'])
  ->imageSettings([
    'disk' => 'public',     // Storage disk to use
    'path' => 'uploads/images', // Path within disk
    'withFileUpload' => true,   // Allow file uploads (default: true)
  ])

Text Alignment

Tiptap::make('Content')
  ->buttons(['textAlign'])
  ->alignments(['left', 'center', 'right', 'justify']) // Available alignments
  ->defaultAlignment('left') // Default text alignment

RTL Support

Tiptap::make('Content')
  ->buttons(['rtl']) // Adds button to toggle RTL mode

Code Options

Two code formatting options are available:

  • code - Inline code formatting (<code>text</code>)
  • codeBlock - Block code formatting (<pre><code>text</code></pre>)

Enable syntax highlighting for code blocks:

Tiptap::make('Content')
  ->buttons(['codeBlock'])
  ->syntaxHighlighting()

HTML Editing

Tiptap::make('Content')
  ->buttons(['editHtml'])
  ->htmlTheme('night') // Theme for HTML code editor (default: 'material')

Available themes are listed on CodeMirror's theme demo page.

JSON Storage

Tiptap::make('Content')
  ->saveAsJson() // Store content as JSON instead of HTML

Read-Only Mode

The Tiptap field supports Nova's native readonly functionality. When in readonly mode, the editor will display the content without allowing edits:

Tiptap::make('Content')
  ->readonly() // Make the field readonly based on your logic

You can also conditionally set the readonly state:

Tiptap::make('Content')
  ->readonly(function ($request) {
      return !$request->user()->isAdmin();
  })

Index View Visibility

Like other rich text fields, this field is hidden from index views. You can display it using a computed field.

Screenshots

Editor with all buttons

The editor adapts to Nova's theme:

Editor with Stripe theme

License

The MIT License (MIT). Please see License File for more information.