Download the PHP package blackbadge-studio/translation-editor without Composer

A Filament plugin that allows editing application translations directly in context via a modal or floating UI.

A Filament plugin that provides an in-context translation editor. Edit your application translations directly from any Filament page without leaving the interface. The editor appears as a floating modal that tracks translation keys used on the current page, allowing you to edit and save translations on the fly.

Installation

You can install the package via composer:

[!IMPORTANT] If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs first.

After setting up a custom theme add the plugin's views to your theme css file or your app's css file if using the standalone packages.

You can publish and run the migrations with:

You can publish the config file with:

[!IMPORTANT] After updating the package, if you have already published the config file, you should republish it to get the latest namespace changes:

Or manually update your published config file to use the new package namespace (Blackbadgestudio\TranslationEditor\) instead of App\.

Register the plugin in your Filament panel configuration (usually in app/Providers/Filament/AdminPanelProvider.php or similar):

Optionally, you can publish the views using

This is the contents of the published config file:

Usage

Adding the Translation Editor Action

You can easily add a toggle action to any Filament resource to enable/disable the translation editor modal for users. Simply use the provided action class:

The action will automatically:

• Show "Enable Translation Editor" or "Disable Translation Editor" based on the current state
• Display the appropriate icon (eye/eye-slash)
• Use success/danger colors accordingly
• Show a notification when toggled
• Use the configured toggle_column from your config file

Enabling the Translation Editor

After installing and configuring the package, you need to enable the translation editor for individual users:

1. Using the Action Button (Recommended):

   • Add the TranslationEditorAction to your user resource (see above)
   • Click the "Enable Translation Editor" button for the user
2. Manually via Database:

How It Works

• The translation editor modal appears as a floating bubble in the bottom-right corner of Filament pages
• It only appears for users who have translation_modal_enabled = true
• The modal automatically tracks translation keys that are used on the current page
• You can edit translations directly in the modal and save them to the database
• Translations are tracked via the TranslationTracker service which wraps Laravel's translator

Troubleshooting

The modal doesn't appear:

• Ensure the plugin is registered in your panel configuration
• Verify the user has translation_modal_enabled = true in the database
• Check that translations are actually being used on the page (the modal only shows tracked translations)
• Clear caches: php artisan optimize:clear
• Check browser console for any JavaScript errors

No translations are tracked:

• Make sure you're using Laravel's translation functions (trans(), __(), etc.)
• Verify the TranslationTrackerDecorator is wrapping the translator (check service provider)
• Ensure translations are using the group.key format (e.g., trans('validation.required'))

Testing

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

• Sofian Mourabit
• All Contributors

License

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