PHPackages pjedesigns/filament-meta-lexical-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. pjedesigns/filament-meta-lexical-editor ActiveLibrary[Templating & Views](/categories/templating) pjedesigns/filament-meta-lexical-editor ======================================= Implementation of Meta's Lexical editor in FilamentPHP, a modern, extensible rich text editor framework. v1.2.1(3mo ago)019MITTypeScriptPHP ^8.2CI passing Since Jan 19Pushed 3mo agoCompare [ Source](https://github.com/pjedesigns/filament-meta-lexical-editor)[ Packagist](https://packagist.org/packages/pjedesigns/filament-meta-lexical-editor)[ Docs](https://github.com/pjedesigns/filament-meta-lexical-editor)[ RSS](/packages/pjedesigns-filament-meta-lexical-editor/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (12)Versions (6)Used By (0) Filament Meta Lexical Editor ============================ [](#filament-meta-lexical-editor) A modern, extensible rich-text editor for FilamentPHP built on Meta's Lexical framework. Features -------- [](#features) - **Rich Text Editing**: Full-featured WYSIWYG editor with headings, lists, quotes, and code blocks - **Text Formatting**: Bold, italic, underline, strikethrough, subscript, superscript - **Text Casing**: Lowercase, uppercase, capitalize transformations - **Font Controls**: Configurable font families and sizes - **Color Pickers**: Text color and background color selection - **Link Management**: Insert, edit, and remove hyperlinks with internal link support - **Image Upload**: Upload and manage images with alt text and dimensions - **Tables**: Insert and edit tables with headers, borders, and cell padding options - **Column Layouts**: Multi-column layouts (2, 3, or 4 columns) - **Media Embeds**: YouTube videos and Twitter/X tweets - **Collapsible Sections**: Expandable/collapsible content blocks - **Date Picker**: Insert formatted dates with multiple format options - **Keyboard Shortcuts**: Full keyboard shortcut support - **HTML Sanitization**: Built-in XSS protection for safe content storage - **RTL Support**: Right-to-left text direction support - **Orphaned Image Cleanup**: Automatic cleanup of deleted images on save Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 12+ - Filament v4/v5 Installation ------------ [](#installation) Install the package via Composer: ``` composer require pjedesigns/filament-meta-lexical-editor ``` Publish the configuration file (optional): ``` php artisan vendor:publish --tag="filament-meta-lexical-editor-config" ``` Publish Filament assets (if you haven't already): ``` php artisan filament:assets ``` > **Note:** The package automatically registers its assets with Filament. Running `filament:assets` is sufficient - no separate asset publishing is required. Usage ----- [](#usage) ### Basic Usage [](#basic-usage) Add the editor to your Filament form: ``` use Pjedesigns\FilamentMetaLexicalEditor\MetaLexicalEditor; public static function form(Form $form): Form { return $form ->schema([ MetaLexicalEditor::make('content'), ]); } ``` ### Toolbar Configuration [](#toolbar-configuration) #### Using String Names (Recommended) [](#using-string-names-recommended) The simplest way to configure the toolbar: ``` MetaLexicalEditor::make('content') ->enabledToolbars([ 'bold', 'italic', 'underline', 'divider', 'h1', 'h2', 'h3', 'divider', 'bullet', 'numbered', 'divider', 'link', 'image', ]); ``` #### Using Enum Constants [](#using-enum-constants) For IDE autocompletion support: ``` use Pjedesigns\FilamentMetaLexicalEditor\Enums\ToolbarItem; MetaLexicalEditor::make('content') ->enabledToolbars([ ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE, ToolbarItem::DIVIDER, ToolbarItem::H1, ToolbarItem::H2, ToolbarItem::H3, ToolbarItem::DIVIDER, ToolbarItem::BULLET, ToolbarItem::NUMBERED, ToolbarItem::DIVIDER, ToolbarItem::LINK, ToolbarItem::IMAGE, ]); ``` #### Using Presets [](#using-presets) Quick configurations for common use cases: ``` // Minimal: bold, italic, underline, link MetaLexicalEditor::make('content')->preset('minimal'); // Basic: undo/redo, basic formatting, lists, link MetaLexicalEditor::make('content')->preset('basic'); // Standard: headings, lists, quotes, formatting, alignment MetaLexicalEditor::make('content')->preset('standard'); // Full: all available toolbar items MetaLexicalEditor::make('content')->preset('full'); ``` ### Enabling Features [](#enabling-features) #### Images [](#images) Images are disabled by default for security. Enable them with: ``` MetaLexicalEditor::make('content') ->hasImages(); ``` #### Tables [](#tables) Tables are enabled by default. To disable: ``` MetaLexicalEditor::make('content') ->hasTables(false); ``` #### Column Layouts [](#column-layouts) ``` MetaLexicalEditor::make('content') ->hasColumns(); ``` #### YouTube Embeds [](#youtube-embeds) ``` MetaLexicalEditor::make('content') ->hasYouTube(); ``` #### Twitter/X Embeds [](#twitterx-embeds) ``` MetaLexicalEditor::make('content') ->hasTweets(); ``` #### Collapsible Sections [](#collapsible-sections) ``` MetaLexicalEditor::make('content') ->hasCollapsible(); ``` #### Date Picker [](#date-picker) ``` MetaLexicalEditor::make('content') ->hasDate(); ``` #### All Embeds [](#all-embeds) Enable YouTube, Tweets, and Collapsible sections at once: ``` MetaLexicalEditor::make('content') ->hasEmbeds(); ``` #### Full Featured Example [](#full-featured-example) ``` MetaLexicalEditor::make('content') ->hasImages() ->hasColumns() ->hasYouTube() ->hasTweets() ->hasCollapsible() ->hasDate(); ``` ### Internal Links [](#internal-links) Configure predefined internal pages for the link editor: ``` MetaLexicalEditor::make('content') ->internalLinks([ 'Home' => '/', 'About Us' => 'about-us', 'Contact' => 'contact', 'Privacy Policy' => 'privacy-policy', ]); ``` Or with explicit format: ``` MetaLexicalEditor::make('content') ->internalLinks([ ['title' => 'Home', 'slug' => '/'], ['title' => 'About Us', 'slug' => 'about-us'], ], 'https://example.com'); // Optional site URL ``` ### Image Cleanup [](#image-cleanup) By default, the editor automatically cleans up orphaned images when content is saved (images that were uploaded but later removed from the content). To disable: ``` MetaLexicalEditor::make('content') ->cleanupOrphanedImages(false); ``` ### Custom HTML Sanitization [](#custom-html-sanitization) Override the default sanitizer with your own implementation: ``` MetaLexicalEditor::make('content') ->sanitizeHtmlUsing(function (string $html): string { // Your custom sanitization logic return $html; }); ``` Displaying Content ------------------ [](#displaying-content) ### In Infolists [](#in-infolists) Use the `LexicalContentEntry` component to display editor content with full support for embedded media (YouTube, Tweets): ``` use Pjedesigns\FilamentMetaLexicalEditor\Infolists\Components\LexicalContentEntry; public static function infolist(Infolist $infolist): Infolist { return $infolist ->schema([ LexicalContentEntry::make('content') ->hiddenLabel(), ]); } ``` ### In Tables [](#in-tables) Use the `SanitizedHtmlColumn` component for table views: ``` use Pjedesigns\FilamentMetaLexicalEditor\Tables\Columns\SanitizedHtmlColumn; public static function table(Table $table): Table { return $table ->columns([ SanitizedHtmlColumn::make('content') ->limit(100), ]); } ``` ### In Blade Views [](#in-blade-views) For frontend display, you need to include the frontend CSS and wrap your content: #### Step 1: Publish the Frontend CSS [](#step-1-publish-the-frontend-css) ``` php artisan vendor:publish --tag="filament-meta-lexical-editor-frontend" ``` This publishes `frontend.css` to `public/vendor/filament-meta-lexical-editor/frontend.css`. #### Step 2: Include the CSS in Your Layout [](#step-2-include-the-css-in-your-layout) Add this to your frontend layout's ``: ``` ``` Or import it in your Vite build (e.g., in your `app.css`): ``` @import '../../vendor/pjedesigns/filament-meta-lexical-editor/resources/css/frontend.css'; ``` #### Step 3: Wrap Your Content [](#step-3-wrap-your-content) Output the content wrapped in a `lexical-content` div: ``` {!! $post->content !!} ``` #### Twitter Embeds [](#twitter-embeds) For Twitter embeds to work on the frontend, include the Twitter widget script: ``` ``` #### Dark Mode Support [](#dark-mode-support) The frontend CSS includes dark mode styles. Add the `dark` class to a parent element: ``` {!! $post->content !!} ``` Configuration ------------- [](#configuration) The configuration file (`config/filament-meta-lexical-editor.php`) allows you to customize: ### Storage Settings [](#storage-settings) ``` // Storage disk for uploaded images 'disk' => env('FILAMENT_META_LEXICAL_EDITOR_DISK'), // Directory for uploaded images 'directory' => env('FILAMENT_META_LEXICAL_EDITOR_DIR', 'lexical'), // Maximum file size in KB (default: 5MB) 'max_kb' => env('FILAMENT_META_LEXICAL_EDITOR_MAX_KB', 5120), // Allowed MIME types 'allowed_mimes' => env('FILAMENT_META_LEXICAL_EDITOR_MIMES', 'jpg,jpeg,png,gif,webp,svg'), ``` ### Route Middleware [](#route-middleware) ``` 'middleware' => ['web', 'auth'], ``` ### Upload Route [](#upload-route) ``` 'upload_route' => '/filament-meta-lexical-editor/upload-image', ``` ### Font Settings [](#font-settings) ``` 'fonts' => [ 'families' => [ 'Arial' => 'Arial', 'Courier New' => 'Courier New', 'Georgia' => 'Georgia', 'Times New Roman' => 'Times New Roman', 'Trebuchet MS' => 'Trebuchet MS', 'Verdana' => 'Verdana', ], 'min_size' => 8, 'max_size' => 72, 'default_size' => 15, ], ``` Available Toolbar Items ----------------------- [](#available-toolbar-items) String ValueEnum ConstantDescription`undo``UNDO`Undo last action`redo``REDO`Redo last undone action`fontFamily``FONT_FAMILY`Font family selector`fontSize``FONT_SIZE`Font size controls`normal``NORMAL`Paragraph format`h1` - `h6``H1` - `H6`Heading levels 1-6`bold``BOLD`Bold text`italic``ITALIC`Italic text`underline``UNDERLINE`Underlined text`strikethrough``STRIKETHROUGH`Strikethrough text`subscript``SUBSCRIPT`Subscript text`superscript``SUPERSCRIPT`Superscript text`lowercase``LOWERCASE`Convert to lowercase`uppercase``UPPERCASE`Convert to uppercase`capitalize``CAPITALIZE`Capitalize words`bullet``BULLET`Bullet list`numbered``NUMBERED`Numbered list`quote``QUOTE`Block quote`code``CODE`Code block`icode``ICODE`Inline code`link``LINK`Insert/edit hyperlink`textColor``TEXT_COLOR`Text color picker`backgroundColor``BACKGROUND_COLOR`Background color picker`left``LEFT`Align left`center``CENTER`Align center`right``RIGHT`Align right`justify``JUSTIFY`Justify text`start``START`Align to start (RTL-aware)`end``END`Align to end (RTL-aware)`indent``INDENT`Increase indentation`outdent``OUTDENT`Decrease indentation`hr``HR`Horizontal rule`image``IMAGE`Image upload`table``TABLE`Insert table`columns``COLUMNS`Column layout`youtube``YOUTUBE`YouTube embed`tweet``TWEET`Twitter/X embed`collapsible``COLLAPSIBLE`Collapsible section`date``DATE`Date picker`clear``CLEAR`Clear formatting`divider``DIVIDER`Visual toolbar separatorKeyboard Shortcuts ------------------ [](#keyboard-shortcuts) ActionWindows/LinuxmacOSBold`Ctrl+B``⌘+B`Italic`Ctrl+I``⌘+I`Underline`Ctrl+U``⌘+U`Undo`Ctrl+Z``⌘+Z`Redo`Ctrl+Y``⌘+Shift+Z`Insert Link`Ctrl+K``⌘+K`Heading 1-6`Ctrl+Alt+1-6``⌘+Opt+1-6`Paragraph`Ctrl+Alt+0``⌘+Opt+0`Bullet List`Ctrl+Alt+7``⌘+Opt+7`Numbered List`Ctrl+Alt+8``⌘+Opt+8`Quote`Ctrl+Alt+Q``⌘+Opt+Q`Code Block`Ctrl+Alt+C``⌘+Opt+C`Increase Font`Ctrl+Shift+.``⌘+Shift+.`Decrease Font`Ctrl+Shift+,``⌘+Shift+,`Security -------- [](#security) The package includes robust HTML sanitization to prevent XSS attacks: - **Dangerous Tags Removed**: ``, ``, ``, ``, ``, etc. - **Event Handlers Stripped**: `onclick`, `onerror`, `onload`, etc. - **URL Validation**: Blocks `javascript:`, `data:`, `file:` protocols - **Style Sanitization**: Only allows safe CSS properties - **Image Source Validation**: Only allows `http://`, `https://`, and relative paths - **Iframe Allowlist**: YouTube and Vimeo domains are permitted for video embeds Testing ------- [](#testing) Run the test suite: ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Paul Egan](https://github.com/pjedesigns) - Based on [Meta's Lexical Editor](https://lexical.dev/) - Inspired by [malzariey/filament-lexical-editor](https://github.com/malzariey/filament-lexical-editor) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 39 — LowBetter than 84% of packages Maintenance82 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~18 days Total 5 Last Release 93d ago PHP version history (2 changes)v1.0.0PHP ^8.4 v1.2.1PHP ^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/55060365?v=4)[PJE Designs](/maintainers/pjedesigns)[@pjedesigns](https://github.com/pjedesigns) --- Top Contributors [![pjedesigns](https://avatars.githubusercontent.com/u/55060365?v=4)](https://github.com/pjedesigns "pjedesigns (20 commits)") --- Tags laraveleditorwysiwygfilamentfilamentphptext-editorrich textlexicalpjedesignsfilament-meta-lexical-editor ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/pjedesigns-filament-meta-lexical-editor/health.svg) ``` [![Health](https://phpackages.com/badges/pjedesigns-filament-meta-lexical-editor/health.svg)](https://phpackages.com/packages/pjedesigns-filament-meta-lexical-editor) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.6k](/packages/rawilk-profile-filament-plugin)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6649.5k1](/packages/marcelweidum-filament-passkeys)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 84215.9k9](/packages/stephenjude-filament-two-factor-authentication)[relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16354.2k](/packages/relaticle-custom-fields)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12453.6k](/packages/jibaymcs-filament-tour) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)