marshmallow / nova-tiptap
A Laravel Nova tiptap editor field.
Installs: 9 881
Dependents: 1
Suggesters: 0
Security: 0
Stars: 10
Watchers: 2
Forks: 1
Open Issues: 0
Language:CSS
Requires
- php: ^8.1
- laravel/nova: ^4.0|^5.0
This package is auto-updated.
Last update: 2025-04-24 10:27:56 UTC
README
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
The editor adapts to Nova's theme:
License
The MIT License (MIT). Please see License File for more information.