Download the PHP package nitsnets/filament-wysiwyg-json-formatter without Composer
On this page you can find all versions of the php package nitsnets/filament-wysiwyg-json-formatter. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download nitsnets/filament-wysiwyg-json-formatter
More information about nitsnets/filament-wysiwyg-json-formatter
Files in nitsnets/filament-wysiwyg-json-formatter
Package filament-wysiwyg-json-formatter
Short Description A Filament 4 form component for WYSIWYG editing with JSON output and user mentions support
License MIT
Homepage https://github.com/nitsnets/filament-wysiwyg-json-formatter
Informations about the package filament-wysiwyg-json-formatter
Filament WYSIWYG JSON Formatter
A Filament 4 form component that provides a WYSIWYG editor with structured JSON output and user mentions support.
Features
- ✅ Full WYSIWYG editor with contenteditable
- ✅ Bidirectional HTML ↔ structured JSON conversion
- ✅ User mentions with search panel
- ✅ Customizable toolbar with buttons: bold, italic, underline, strike, code, codeBlock, link, lists, checklist, headers, blockquote, textColor
- ✅ Dark mode support
- ✅ Optimized styles with PostCSS
- ✅ Compatible with Livewire/Alpine.js
- ✅ Structured and easy-to-process data format
Installation
Install the package via Composer:
Package Development
If you're contributing to the package development, you need to install npm dependencies and compile assets:
Basic Usage
Customize Toolbar Buttons
You can customize the buttons that appear in the toolbar:
Available Buttons
- Text formatting:
bold,italic,underline,strike,code - Blocks:
codeBlock,h1,h2,h3,blockquote - Lists:
unorderedList,orderedList,checklist - Others:
link,divider,textColor
User Mentions
Enable user mentions by passing an array of users:
Users can mention others by typing @ followed by the user's name. Mentions are saved in structured JSON format:
Data Format
The component saves and reads data in structured JSON format:
Supported Element Types
- Formatted text: bold, italic, underline, strike, code
- Links: with
linkattribute - Text colors: with
color-classattribute - Lists: bullet, ordered, checklist (checked/unchecked)
- Blocks: headers (h1-h3), blockquote, code-block
- Mentions:
tagtype with user information - Separators:
dividertype
Complete Example
Validation
The component is compatible with all Filament validation rules:
Translations
The plugin includes translations in multiple European languages by default.
Available Languages
- 🇪🇸 Spanish (
es) - 🇬🇧 English (
en) - 🇩🇪 German (
de) - 🇫🇷 French (
fr) - 🇮🇹 Italian (
it) - 🇵🇹 Portuguese (
pt) - 🇵🇱 Polish (
pl) - 🇳🇱 Dutch (
nl) - 🇷🇺 Russian (
ru) - 🇪🇸 Catalan (
ca)
Publishing Translations
If you want to customize translations, you can publish the language files:
This will copy the translation files to lang/vendor/filament-wysiwyg-json-formatter/ where you can modify them.
Adding New Languages
To add support for a new language:
- Create a new directory in
lang/vendor/filament-wysiwyg-json-formatter/with the language code (e.g.,fr,de,pt) - Copy the content from
es/wysiwyg.phporen/wysiwyg.php - Translate the texts to the new language
Translation Structure
Styles
Styles are loaded asynchronously only when the component is used (loadedOnRequest), which optimizes performance:
- Full dark mode support
- Optimized CSS with PostCSS and cssnano
- Responsive design
- Smooth animations and transitions
Compatibility
- PHP: ^8.2
- Filament: ^4.0
- Laravel: ^11.0
Dependencies
The package requires the following dependencies which are automatically installed:
mallardduck/blade-lucide-icons- For Lucide icons used in the toolbar
License
MIT
Credits
Developed by Nitsnets
All versions of filament-wysiwyg-json-formatter with dependencies
filament/filament Version ^4.0
mallardduck/blade-lucide-icons Version ^1.0
spatie/laravel-package-tools Version ^1.15.0