• Installation
  • Light mode
  • Dark mode
• Usage
• Customize Toolbar
• Adding Dividers between Toolbar Actions
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License
• Acknowledgements

This package provides an implementation of Meta's Lexical Editor within the FilamentPHP framework. It offers a modern, extensible text editor that can be easily integrated into your FilamentPHP projects.

#Installation

You can install the package via composer:

composer require malzariey/filament-lexical-editor

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-lexical-editor-views"

#Light mode

#Dark mode

#Usage

Use the FilamentLexicalEditor field in your form schema to add the Lexical Editor to your form.

use Malzariey\FilamentLexicalEditor\FilamentLexicalEditor;
 
public static function form(Form $form): Form
{
    return $form
        ->schema([
            FilamentLexicalEditor::make('content'),
        ]);
}

#Customize Toolbar

You can customize the toolbar by using the enabledToolbars method. The method accepts an array of ToolbarItem constants. The following is a list of available toolbar items:

 
FilamentLexicalEditor::make('content')
    ->enabledToolbars([
        ToolbarItem::UNDO, ToolbarItem::REDO,ToolbarItem::FONT_FAMILY, ToolbarItem::NORMAL, ToolbarItem::H1, ToolbarItem::H2, ToolbarItem::H3,
        ToolbarItem::H4, ToolbarItem::H5, ToolbarItem::H6, ToolbarItem::BULLET, ToolbarItem::NUMBERED, ToolbarItem::QUOTE,
        ToolbarItem::CODE, ToolbarItem::FONT_SIZE, ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE,
        ToolbarItem::ICODE, ToolbarItem::LINK, ToolbarItem::TEXT_COLOR, ToolbarItem::BACKGROUND_COLOR, ToolbarItem::LOWERCASE,
        ToolbarItem::UPPERCASE, ToolbarItem::CAPITALIZE, ToolbarItem::STRIKETHROUGH, ToolbarItem::SUBSCRIPT, ToolbarItem::SUPERSCRIPT,
        ToolbarItem::CLEAR, ToolbarItem::LEFT, ToolbarItem::CENTER, ToolbarItem::RIGHT, ToolbarItem::JUSTIFY, ToolbarItem::START,
        ToolbarItem::END, ToolbarItem::INDENT, ToolbarItem::OUTDENT, ToolbarItem::HR,ToolbarItem::IMAGE
    ]),

#Adding Dividers between Toolbar Actions

To add a divider between toolbar actions, you can use the ToolbarItem::DIVIDER constant.

 
FilamentLexicalEditor::make('content')
    ->enabledToolbars([
        ToolbarItem::UNDO, ToolbarItem::REDO,
        ToolbarItem::DIVIDER,
        ToolbarItem::FONT_FAMILY,
        ToolbarItem::DIVIDER,
        ToolbarItem::NORMAL,
    ]),

If you're building a custom Filament theme, you need one more step to make the editor theme match your custom theme.

Add this line to your resources/css/{panel_name}/theme.css file.

@import '/vendor/malzariey/filament-lexical-editor/resources/css/index.css';

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

• Majid Al Zariey
• All Contributors

#License

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

#Acknowledgements

• This project makes use of Lexical Editor by Meta.
• Special thanks to JetBrains, whose support to open-source projects has been tremendously valuable for our project's progress and improvement. Through their Open Source Support Program, JetBrains has generously provided us with free licenses to their high-quality professional developer tools, including IntelliJ IDEA and PhpStorm. These tools have greatly improved our productivity and made it easier to maintain high quality code. JetBrains has demonstrated a strong commitment to assisting the open source community, making a significant contribution to promoting open-source software and collaboration. We wholeheartedly thank JetBrains for their support and for having us in their open-source project support program.