Filament Plugin Translatable Inline

https://github.com/mvenghaus/filament-plugin-translatable-inline
Admin
A Filament addon that enables inline editing of translations directly below form fields, making it...
Tokens:7,452
Snippets:28
Trust Score:6.2
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Translatable Inline Plugin via Composer

Source: https://github.com/mvenghaus/filament-plugin-translatable-inline/blob/main/README.md

This command installs the latest version of the filament-plugin-translatable-inline package using Composer. Ensure you have Composer installed and configured for your project.

```bash
composer require mvenghaus/filament-plugin-translatable-inline:"^3.0"
```

--------------------------------

### Install Filament Translatable Inline Plugin (Bash)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Installs the filament-plugin-translatable-inline package using Composer. It automatically installs dependencies like spatie/laravel-translatable and filament/spatie-laravel-translatable-plugin. An optional step is to publish the Spatie Translatable configuration file.

```bash
# Install the package via Composer
composer require mvenghaus/filament-plugin-translatable-inline:"^3.0"

# Dependencies are automatically installed:
# - spatie/laravel-translatable
# - filament/spatie-laravel-translatable-plugin

# Publish Spatie Translatable config (optional)
php artisan vendor:publish --provider="Spatie\Translatable\TranslatableServiceProvider"
```

--------------------------------

### Spatie Translatable Configuration (PHP)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Example configuration for the Spatie Laravel Translatable package. This file defines the default locales and fallback locale to be used for translations. It is typically published using the `vendor:publish` Artisan command.

```php
<?php

// config/translatable.php (published from Spatie package)
return [
    'locales' => [
        'en',
        'de',
        'fr',
        'es',
    ],

    'fallback_locale' => 'en',
];
```

--------------------------------

### Correct Filament Resource Setup for Inline Translation (PHP)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Illustrates the correct way to set up a Filament resource for inline translation using `TranslatableContainer`. It explicitly shows that traits like `EditRecord\Concerns\Translatable` and components like `Actions\LocaleSwitcher` should NOT be used when implementing inline translation with `TranslatableContainer`. The focus is on schema definition within the `form()` method.

```php
<?php

// IMPORTANT: DO NOT add these traits to resource pages when using inline translation
// ❌ WRONG - Don't do this with TranslatableContainer:
class EditPost extends EditRecord
{
    use EditRecord\Concerns\Translatable; // ❌ Remove this

    protected function getHeaderActions(): array
    {
        return [
            Actions\LocaleSwitcher::make(), // ❌ Remove this
        ];
    }
}

// ✅ CORRECT - Just use TranslatableContainer in form:
class EditPost extends EditRecord
{
    // No translatable traits needed

    public static function form(Form $form): Form
    {
        return $form->schema([
            TranslatableContainer::make(
                Forms\Components\TextInput::make('title')
            ),
        ]);
    }
}
```

--------------------------------

### TranslatableContainer Component for Inline Translation Editing

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Demonstrates the usage of the `TranslatableContainer` component to wrap Filament form fields, enabling inline translation editing. It shows examples for basic text inputs, textareas, rich editors, and how to specify required locales or only require the main locale. This component integrates with Filament v3 forms and requires PHP 8.2+.

```php
<?php

namespace App\Filament\Resources\PostResource\Pages;

use App\Models\Post;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class EditPost extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Basic translatable text input
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('title')
                        ->maxLength(255)
                        ->required()
                ),

                // Translatable textarea with only main locale required
                TranslatableContainer::make(
                    Forms\Components\Textarea::make('description')
                        ->maxLength(1000)
                        ->rows(5)
                        ->required()
                )
                    ->onlyMainLocaleRequired(),

                // Translatable field with specific required locales
                TranslatableContainer::make(
                    Forms\Components\RichEditor::make('content')
                        ->required()
                )
                    ->requiredLocales(['en', 'es', 'fr']),

                // Non-translatable field
                Forms\Components\TextInput::make('slug')
                    ->required()
                    ->unique(Post::class, ignoreRecord: true),
            ]);
    }
}
```

--------------------------------

### onlyMainLocaleRequired Method for Optional Translations

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Illustrates the `onlyMainLocaleRequired` method within `TranslatableContainer` to make only the primary locale's content mandatory, while translations in other locales are optional. This is useful for gradual translation updates. The example shows how it affects validation for product names and descriptions.

```php
<?php

use Filament\Forms;
use Filament\Forms\Form;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class ProductResource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Product name required only in main locale (e.g., 'en')
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('name')
                        ->maxLength(255)
                        ->required() // This would normally apply to all locales
                )
                    ->onlyMainLocaleRequired(), // Override: only 'en' is required

                // Product description with same behavior
                TranslatableContainer::make(
                    Forms\Components\Textarea::make('short_description')
                        ->maxLength(500)
                        ->required()
                )
                    ->onlyMainLocaleRequired();
            ]);
    }
}

// Expected behavior:
// - Main locale (en): validation fails if empty
// - Other locales (de, fr, es): validation passes even if empty
// - User can save record with only English translation initially

```

--------------------------------

### Handle Callbacks with Locale Context in Translatable Fields (PHP)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

When using callbacks like `afterStateUpdated` on translatable fields, the state path is nested. Access the current locale via `$component->getMeta('locale')` to correctly target and update related translatable fields within the same locale. This example shows auto-generating a slug from a title and updating a word count.

```php
<?php

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Forms\Set;
use Filament\Forms\Components\Component;
use Illuminate\Support\Str;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class ArticleResource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Auto-generate slug from title in the same locale
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('title')
                        ->maxLength(255)
                        ->required()
                        ->live(onBlur: true)
                        ->afterStateUpdated(function (Set $set, Component $component, ?string $state) {
                            // Get the current locale from component meta
                            $locale = $component->getMeta('locale');

                            // State path goes up one level (..) then into slug.{locale}
                            $set('../slug.' . $locale, Str::slug($state));
                        })
                ),

                TranslatableContainer::make(
                    Forms\Components\TextInput::make('slug')
                        ->maxLength(255)
                        ->required()
                )
                    ->onlyMainLocaleRequired(),

                // More complex example: update word count field
                TranslatableContainer::make(
                    Forms\Components\RichEditor::make('content')
                        ->required()
                        ->live(onBlur: true)
                        ->afterStateUpdated(function (Set $set, Component $component, ?string $state) {
                            $locale = $component->getMeta('locale');
                            $wordCount = str_word_count(strip_tags($state ?? ''));

                            // Update non-translatable field based on main locale only
                            if ($locale === 'en') {
                                $set('../../word_count', $wordCount);
                            }
                        })
                ),

                Forms\Components\TextInput::make('word_count')
                    ->numeric()
                    ->disabled()
                    ->dehydrated(true),
            ]);
    }
}

// State structure in database:
// {
//   "title": {"en": "Hello World", "de": "Hallo Welt", "fr": "Bonjour le monde"},
//   "slug": {"en": "hello-world", "de": "hallo-welt", "fr": "bonjour-le-monde"},
//   "content": {"en": "...", "de": "...", "fr": "..."},
//   "word_count": 150
// }

```

--------------------------------

### Configure Filament Resource for Inline Translation (PHP)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Demonstrates how to configure a Filament resource to use the TranslatableContainer for inline translation. It requires implementing the Translatable interface and defining available locales, specifying which language tabs appear in the editor. Dependencies include Filament and the Spatie Laravel Translatable plugin.

```php
<?php

namespace App\Filament\Resources;

use App\Models\Post;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Resources\Concerns\Translatable;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class PostResource extends Resource implements \Filament\Resources\Contracts\Translatable
{
    use Translatable;

    protected static ?string $model = Post::class;

    // Define locales available for this specific resource
    public static function getTranslatableLocales(): array
    {
        return ['en', 'de', 'fr', 'es'];
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make('Content')
                    ->schema([
                        TranslatableContainer::make(
                            Forms\Components\TextInput::make('title')
                                ->required()
                        ),

                        TranslatableContainer::make(
                            Forms\Components\RichEditor::make('body')
                                ->required()
                        )
                            ->onlyMainLocaleRequired(),
                    ]),

                Forms\Components\Section::make('SEO')
                    ->schema([
                        TranslatableContainer::make(
                            Forms\Components\TextInput::make('meta_title')
                                ->maxLength(60)
                        )
                            ->requiredLocales(['en', 'de']),

                        TranslatableContainer::make(
                            Forms\Components\Textarea::make('meta_description')
                                ->maxLength(160)
                        ),
                    ])
                    ->collapsible(),
            ]);
    }
}

// Alternative: Use global locales from config
// If getTranslatableLocales() is not defined, it falls back to:
// config('filament-spatie-laravel-translatable-plugin.default_locales')
```

--------------------------------

### Configure Filament Admin Panel for Translation (PHP)

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Sets up the Filament Admin Panel to use the Spatie Laravel Translatable plugin. This involves registering the plugin in the `AdminPanelProvider` and specifying the default locales that the plugin will use. This configuration is crucial for enabling translation features within Filament.

```php
<?php

// app/Providers/Filament/AdminPanelProvider.php
use Filament\Panel;
use Filament\PanelProvider;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->plugin(
                \Filament\SpatieLaravelTranslatablePlugin::make()
                    ->defaultLocales(['en', 'de', 'fr', 'es'])
            );
    }
}
```

--------------------------------

### Filament List and Edit Pages with Mixed Translation

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

This PHP code demonstrates a Filament resource where the list page utilizes a traditional dropdown locale switcher for quick navigation and table viewing, while the edit page implements inline translation using TranslatableContainer for detailed content editing.

```php
<?php

namespace App\Filament\Resources\PostResource\Pages;

use App\Filament\Resources\PostResource;
use Filament\Actions;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Pages\EditRecord;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;
use Filament\Tables; // Assuming Table and TextColumn are from Filament
use Filament\Forms; // Assuming Form is from Filament

// List page uses traditional dropdown locale switcher
class ListPosts extends ListRecords
{
    use ListRecords\Concerns\Translatable;

    protected static string $resource = PostResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
            Actions\LocaleSwitcher::make(), // Dropdown for quick switching in table
        ];
    }

    // Table shows current locale data
    public static function table(Tables\Table $table): Tables\Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title'),
                Tables\Columns\TextColumn::make('status'),
                Tables\Columns\TextColumn::make('created_at'),
            ]);
    }
}

// Edit page uses inline translation for detailed editing
class EditPost extends EditRecord
{
    // No Translatable trait - using inline instead

    protected static string $resource = PostResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
            // No LocaleSwitcher - using inline editing
        ];
    }

    public static function form(Forms\Form $form): Forms\Form
    {
        return $form
            ->schema([
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('title')
                        ->required()
                ),

                TranslatableContainer::make(
                    Forms\Components\RichEditor::make('content')
                        ->required()
                )
                    ->onlyMainLocaleRequired(),
            ]);
    }
}

// Result: List view has compact dropdown, edit view has expanded inline editing
// This provides best UX for each context

```

--------------------------------

### Configure Form with TranslatableContainer in Filament

Source: https://github.com/mvenghaus/filament-plugin-translatable-inline/blob/main/README.md

Demonstrates how to replace standard form components with TranslatableContainer to enable inline translation editing. It shows the 'Before' and 'After' code structure for integrating the plugin into a Filament form resource.

```php
<?php

...

use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

...

    public static function form(Form $form): Form
        {
            return $form
                ->schema([
                    TranslatableContainer::make(
                        Forms\Components\TextInput::make('title')
                            ->maxLength(255)
                            ->required()
                    )
                       ->onlyMainLocaleRequired() // optional
                       ->requiredLocales(['en', 'es']) // optional
                    ,

...
```

--------------------------------

### Eloquent Model Configuration for Translatable Fields

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Configures an Eloquent model to support translatable attributes using the Spatie Translatable trait. This involves adding the `HasTranslations` trait and defining the `$translatable` property with an array of attribute names that should be translatable. The database schema and casting for these attributes are also shown.

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Spatie\Translatable\HasTranslations;

class Product extends Model
{
    use HasTranslations;

    protected $fillable = [
        'name',
        'description',
        'features',
        'sku',
        'price',
        'stock',
    ];

    // Specify which attributes can be translated
    public $translatable = [
        'name',
        'description',
        'features',
    ];

    protected $casts = [
        'features' => 'array',
        'price' => 'decimal:2',
        'stock' => 'integer',
    ];
}

// Database migration:
// Schema::create('products', function (Blueprint $table) {
//     $table->id();
//     $table->json('name');              // {"en": "Product", "de": "Produkt"}
//     $table->json('description');       // {"en": "Description", "de": "Beschreibung"}
//     $table->json('features');          // {"en": [...], "de": [...]} 
//     $table->string('sku')->unique();   // Regular column
//     $table->decimal('price', 10, 2);   // Regular column
//     $table->integer('stock');          // Regular column
//     $table->timestamps();
// });

// Accessing translations in your application:
// $product->name;                // Returns translation for current locale
// $product->getTranslation('name', 'de');  // Get specific locale
// $product->setTranslation('name', 'fr', 'Produit');  // Set translation

```

--------------------------------

### TranslatableContainer with Repeater Fields in Filament

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

Demonstrates how to integrate TranslatableContainer within a Filament Repeater component to manage translatable content for each item in a list. This allows for complex, nested translatable data structures. It supports defining translatable text inputs and textareas, alongside non-translatable fields like file uploads and toggles within each repeater item.

```php
<?php

use Filament\Forms;
use Filament\Forms\Form;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class FeatureResource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Repeater::make('features')
                    ->schema([
                        // Each repeater item has translatable fields
                        TranslatableContainer::make(
                            Forms\Components\TextInput::make('feature_title')
                                ->required()
                        )
                            ->onlyMainLocaleRequired(),

                        TranslatableContainer::make(
                            Forms\Components\Textarea::make('feature_description')
                                ->rows(3)
                        ),

                        // Non-translatable fields in the same repeater
                        Forms\Components\FileUpload::make('icon')
                            ->image()
                            ->maxSize(1024),

                        Forms\Components\Toggle::make('is_highlighted')
                            ->default(false),
                    ])
                    ->collapsible()
                    ->itemLabel(fn (array $state): ?string => $state['feature_title']['en'] ?? null)
                    ->minItems(1)
                    ->maxItems(10)
                    ->defaultItems(1)
                    ->addActionLabel('Add Feature'),
            ]);
    }
}

// Resulting data structure:
// {
//   "features": [
//     {
//       "feature_title": {"en": "Fast Performance", "de": "Schnelle Leistung"},
//       "feature_description": {"en": "Lightning fast...", "de": "Blitzschnell..."},
//       "icon": "performance.svg",
//       "is_highlighted": true
//     },
//     {
//       "feature_title": {"en": "Secure", "de": "Sicher"},
//       "feature_description": {"en": "Bank-level security", "de": "Sicherheit auf Bankniveau"},
//       "icon": "security.svg",
//       "is_highlighted": false
//     }
//   ]
// }
```

--------------------------------

### Update afterStateUpdated for Inline Translations

Source: https://github.com/mvenghaus/filament-plugin-translatable-inline/blob/main/README.md

Illustrates how to correctly implement the 'afterStateUpdated' callback when using inline translations. It shows the necessary modification to the state path and how to access the current locale from the component's meta data.

```php
// Before
->afterStateUpdated(fn (Set $set, ?string $state) => $set('slug', Str::slug($state))),

// After
->afterStateUpdated(fn (Set $set, Component $component, ?string $state) => $set('../slug.' . $component->getMeta('locale'), Str::slug($state))),

```

--------------------------------

### TranslatableContainer Component

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

The TranslatableContainer component wraps Filament form fields to enable inline translation editing. It creates separate input instances for each configured locale, displaying the primary locale by default and allowing access to additional locales via an expandable section. It handles locale-specific validation, state management, and provides visual feedback on translation completeness.

```APIDOC
## TranslatableContainer Component

### Description
Wraps any Filament form field to enable inline translation editing. It creates separate input instances for each configured locale, with the primary locale displayed by default and additional locales accessible via an expandable section. The component intelligently handles validation, state management, and visual feedback for translation completeness.

### Method
This is a form component, typically used within a Filament Resource's `form()` method.

### Endpoint
N/A (This is a client-side component, not a REST endpoint)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A (This is a component configuration)

### Request Example
```php
<?php

use AppModelsPost;
use FilamentForms;
use FilamentFormsForm;
use FilamentResourcesResource;
use MvenghausFilamentPluginTranslatableInlineFormsComponentsTranslatableContainer;

class EditPost extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Basic translatable text input
                TranslatableContainer::make(
                    FormsComponentsTextInput::make('title')
                        ->maxLength(255)
                        ->required()
                ),

                // Translatable textarea with only main locale required
                TranslatableContainer::make(
                    FormsComponentsTextarea::make('description')
                        ->maxLength(1000)
                        ->rows(5)
                        ->required()
                )
                    ->onlyMainLocaleRequired(),

                // Translatable field with specific required locales
                TranslatableContainer::make(
                    FormsComponentsRichEditor::make('content')
                        ->required()
                )
                    ->requiredLocales(['en', 'es', 'fr']),

                // Non-translatable field
                FormsComponentsTextInput::make('slug')
                    ->required()
                    ->unique(Post::class, ignoreRecord: true),
            ]);
    }
}
```

### Response
N/A (This is a client-side component configuration, not an API response)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### onlyMainLocaleRequired Method

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

The `onlyMainLocaleRequired()` method on the `TranslatableContainer` component restricts the required validation to only the primary/main locale. All other locale translations become optional. This is useful for ensuring content is always present in the default language while allowing translations to be added gradually.

```APIDOC
## onlyMainLocaleRequired Method

### Description
Restricts the required validation to only the primary/main locale while making all other locale translations optional. This is useful when you want users to always provide content in the default language but allow translations to be added gradually over time.

### Method
`onlyMainLocaleRequired()` - A method called on the `TranslatableContainer` instance.

### Endpoint
N/A (This is a method of a client-side component)

### Parameters
N/A

#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
<?php

use FilamentForms;
use FilamentFormsForm;
use MvenghausFilamentPluginTranslatableInlineFormsComponentsTranslatableContainer;

class ProductResource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Product name required only in main locale (e.g., 'en')
                TranslatableContainer::make(
                    FormsComponentsTextInput::make('name')
                        ->maxLength(255)
                        ->required()
                )
                    ->onlyMainLocaleRequired(), // Override: only 'en' is required

                // Product description with same behavior
                TranslatableContainer::make(
                    FormsComponentsTextarea::make('short_description')
                        ->maxLength(500)
                        ->required()
                )
                    ->onlyMainLocaleRequired(),
            ]);
    }
}

// Expected behavior:
// - Main locale (en): validation fails if empty
// - Other locales (de, fr, es): validation passes even if empty
// - User can save record with only English translation initially
```

### Response
N/A (This is a client-side component configuration, not an API response)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Set Required Locales for Translatable Fields in Filament

Source: https://context7.com/mvenghaus/filament-plugin-translatable-inline/llms.txt

The `requiredLocales` method allows you to specify an exact list of locales for which translations must be provided for a given translatable field. This overrides the default behavior where all configured locales might be required if the field itself is marked as required. This is useful for enforcing translations in key markets.

```php
<?php

use Filament\Forms;
use Filament\Forms\Form;
use Mvenghaus\FilamentPluginTranslatableInline\Forms\Components\TranslatableContainer;

class PageResource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Require translations only for specific markets
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('meta_title')
                        ->maxLength(60)
                        ->required()
                )
                    ->requiredLocales(['en', 'de', 'fr']),

                // Different requirements for different fields
                TranslatableContainer::make(
                    Forms\Components\Textarea::make('meta_description')
                        ->maxLength(160)
                        ->required()
                )
                    ->requiredLocales(['en', 'de']),

                // All locales required (default behavior when field marked required)
                TranslatableContainer::make(
                    Forms\Components\TextInput::make('page_title')
                        ->required()
                )
            ]);
    }
}

// Configuration in config/translatable.php or resource:
// 'locales' => ['en', 'de', 'fr', 'es', 'it', 'nl']

// Expected validation behavior:
// meta_title: must have values for en, de, fr only
// meta_description: must have values for en, de only
// page_title: must have values for all configured locales

```
Tokens:
Raw