PHPackages naturalgroove/laravel-filament-rich-editor-source-ai - 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. [Utility & Helpers](/categories/utility) 4. / 5. naturalgroove/laravel-filament-rich-editor-source-ai ActiveLibrary[Utility & Helpers](/categories/utility) naturalgroove/laravel-filament-rich-editor-source-ai ==================================================== Source functionality for Filament 4.x Rich Editor with AI support 1.0.4(3mo ago)32.5kβ€”5%3[1 issues](https://github.com/naturalGroove/laravel-filament-rich-editor-source-ai/issues)MITPHPPHP ^8.2 Since Nov 1Pushed 3mo agoCompare [ Source](https://github.com/naturalGroove/laravel-filament-rich-editor-source-ai)[ Packagist](https://packagist.org/packages/naturalgroove/laravel-filament-rich-editor-source-ai)[ Docs](https://github.com/naturalgroove/filament-rich-editor-source-ai)[ RSS](/packages/naturalgroove-laravel-filament-rich-editor-source-ai/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)Dependencies (14)Versions (6)Used By (0) Laravel Filament Rich Editor HTML Source with AI transformation =============================================================== [](#laravel-filament-rich-editor-html-source-with-ai-transformation) [![Latest Version on Packagist](https://camo.githubusercontent.com/549a8c1b715dbbaeeda7a537f7e2eb4d6a36b61a18d0895c73bf7a6e5e5d5204/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e61747572616c67726f6f76652f6c61726176656c2d66696c616d656e742d726963682d656469746f722d736f757263652d61692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/naturalgroove/laravel-filament-rich-editor-source-ai)[![Total Downloads](https://camo.githubusercontent.com/dc3bed1d330e295a87887329ecc458cad786a354fc71278bcdce0207f6519bd1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6e61747572616c67726f6f76652f6c61726176656c2d66696c616d656e742d726963682d656469746f722d736f757263652d61692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/naturalgroove/laravel-filament-rich-editor-source-ai/downloads)[![License](https://camo.githubusercontent.com/fc5aca72d7f92b91ff9b46bc5f1635a5874e6fd24b4ebff0dd7c89d12755d14f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6e61747572616c67726f6f76652f6c61726176656c2d66696c616d656e742d726963682d656469746f722d736f757263652d61692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/naturalgroove/laravel-filament-rich-editor-source-ai) [![Rich Editor HTML Source with AI](img/cover.jpg)](img/cover.jpg) A powerful **Filament 4.x** plugin that enhances the Rich Editor component with editing HTML source capabilities and **AI-powered HTML transformation**. Edit raw HTML directly and leverage AI to clean, optimize, and transform your content automatically. ✨ Features ---------- [](#-features) - πŸ” **HTML Source Mode** - View and edit raw HTML content directly in the Rich Editor - πŸ€– **AI-Powered HTML Transformation** - Clean, optimize, and transform HTML using AI (OpenAI, Anthropic, etc.) - ⌨️ **Keyboard Shortcuts** - Quick access with `Ctrl/Cmd + Shift + L` - 🎨 **Customizable Prompts** - Define your own AI transformation prompts - 🌍 **Multi-language Support** - Comes with English, Polish, and German translations - πŸ”Œ **Plug & Play** - Automatically integrates with all Rich Editor instances - 🎯 **Tailwind CSS Ready** - Includes prompt preset for Tailwind Typography optimization - β™Ώ **WCAG Compliance** - AI can transform content to meet accessibility standards πŸ“‹ Requirements -------------- [](#-requirements) - PHP 8.2 or higher - Laravel 10.x, 11.x or 12.x - Filament 4.x - [Prism PHP](https://github.com/prism-php/prism) for AI integration πŸ“¦ Installation -------------- [](#-installation) Install the package via Composer: ``` composer require naturalgroove/laravel-filament-rich-editor-source-ai ``` ### Publish Configuration [](#publish-configuration) Optionally publish the configuration file to customize AI providers and prompts: ``` php artisan vendor:publish --tag="filament-rich-editor-source-ai-config" ``` ### Publish Translations [](#publish-translations) To customize translations: ``` php artisan vendor:publish --tag="filament-rich-editor-source-ai-translations" ``` πŸš€ Usage ------- [](#-usage) ### Basic Setup [](#basic-setup) The plugin automatically registers itself globally with all Rich Editor instances. No additional configuration required! ``` use Filament\Forms\Components\RichEditor; RichEditor::make('content') ->label('Content') ->toolbarButtons([ ..., 'source-ai', // HTML Source editor button 'source-ai-transform', // AI Transform button ]); ``` ### Available Toolbar Buttons [](#available-toolbar-buttons) - **`source-ai`** - Toggle HTML source mode to view/edit raw HTML - **`source-ai-transform`** - Opens AI transformation modal with predefined prompts ### Keyboard Shortcuts [](#keyboard-shortcuts) ShortcutAction`Ctrl + Shift + L` (Windows/Linux) `Cmd + Shift + L` (Mac)Toggle HTML source mode`Esc`Exit source modeπŸ€– AI-Powered HTML Transformation -------------------------------- [](#-ai-powered-html-transformation) ### How It Works [](#how-it-works) 1. Click the **Transform HTML** button in the Rich Editor toolbar 2. Select a transformation prompt from the dropdown 3. Preview and edit the HTML content 4. Click **Transform HTML** to apply AI optimization 5. Review the transformed content and insert it back into the editor [![HTML content transformation using AI](img/ai-transform-modal.webp)](img/ai-transform-modal.webp) ### Default Configuration [](#default-configuration) The plugin comes with a preconfigured AI setup: ``` // config/filament-rich-editor-source-ai.php return [ 'default' => [ 'provider' => Provider::OpenAI, 'model' => 'gpt-4o-mini', ], 'config' => [ 'max_tokens' => 32000, 'timeout' => 15, ], 'prompts' => [ 'tailwind-css-typography-optimization' => [ 'label' => 'Tailwind CSS Typography optimization', 'description' => 'Optimize HTML content for Tailwind CSS typography plugin (prose)', 'prompt' => 'cleanup this file - Tailwindcss typography plugin...', ], ], ]; ``` ### Custom AI Prompts [](#custom-ai-prompts) Add your own transformation prompts in the configuration file: ``` // config/filament-rich-editor-source-ai.php 'prompts' => [ 'remove-inline-styles' => [ 'label' => 'Remove Inline Styles', 'description' => 'Strip all inline styles from HTML', 'prompt' => 'Remove all inline style attributes from the HTML while preserving the structure and content.', ], 'improve-accessibility' => [ 'label' => 'Improve Accessibility', 'description' => 'Enhance HTML for WCAG compliance', 'prompt' => 'Transform this HTML to meet WCAG 2.1 AA standards. Add proper ARIA labels, ensure semantic HTML, and improve accessibility.', ], 'convert-to-semantic-html' => [ 'label' => 'Semantic HTML Conversion', 'description' => 'Convert divs to semantic HTML5 elements', 'prompt' => 'Convert this HTML to use semantic HTML5 elements (article, section, aside, nav, etc.) instead of generic divs where appropriate.', ], 'minify-html' => [ 'label' => 'Minify HTML', 'description' => 'Remove unnecessary whitespace and comments', 'prompt' => 'Minify this HTML by removing unnecessary whitespace, comments, and optimizing the structure while keeping it readable.', ], ]; ``` ### Supported AI Providers [](#supported-ai-providers) Configure your preferred AI provider via the [Prism PHP](https://github.com/prism-php/prism) package: - **OpenAI** (GPT-4, GPT-4o, GPT-3.5) - **Anthropic** (Claude) - **Ollama** (Local models) - **Mistral** - **Groq** - And many more... #### Setup AI Provider [](#setup-ai-provider) 1. Install Prism PHP (already included as dependency) 2. Configure your API keys in `.env`: ``` OPENAI_API_KEY=your-openai-api-key ANTHROPIC_API_KEY=your-anthropic-api-key ``` 3. Update the provider in config: ``` // config/filament-rich-editor-source-ai.php 'default' => [ 'provider' => Provider::Anthropic, // or Provider::OpenAI, Provider::Ollama, etc. 'model' => 'claude-3-5-sonnet-20241022', ], ``` βš™οΈ Configuration ---------------- [](#️-configuration) ### Full Configuration Example [](#full-configuration-example) ```