I try to use sweebee/filament-char-counter in my app and no effect ?

[sergeynilov]

I added sweebee/filament-char-counter ^1.1.1 to my filamenphp 2.17.17 app and adding HasCharacterLimit trait I created custom CustomTextInput class :

    use App\Filament\Custom\CustomTextInput;
    //use Filament\Forms\Components\TextInput;
    use App\Models\BannerCategory;

    use Filament\Tables\Columns\TextColumn;
    ...
    class BannerCategoryResource extends Resource
    {
        ...
        public static function form(Form $form): Form
        {
            return $form
                ->schema([
                    Forms\Components\Group::make()
                        ->schema([
                            Forms\Components\Card::make()
                                ->schema([
                                    CustomTextInput::make('name')
                                        ->reactive()
                                        ->required()
                                        ->minLength(2)
                                        ->maxLength(255)
                                        ->characterLimit(255)
                                        ->unique(table: BannerCategory::class)
                                        ->afterStateUpdated(function (Closure $set, $state) {
                                            $set('slug', Str::slug($state));
                                        })->autofocus()
                                        ->unique(ignoreRecord: true)
                                        ->placeholder('Enter name of banner category'),
                                    CustomTextInput::make('slug')
                                        ->maxLength(255)
                                        ->characterLimit(255),

But no any char counters are visible. I found file vendor/wiebenieuwenhuis/filament-char-counter/src/FilamentCharCounterProvider.php with content :

<?php

    namespace Wiebenieuwenhuis\FilamentCharCounter;

    use Filament\PluginServiceProvider;
    use Spatie\LaravelPackageTools\Package;

    class FilamentCharCounterProvider extends PluginServiceProvider
    {
        protected array $styles = [
            'filament-char-counter' =>
                __DIR__ . '/../resources/dist/css/char-counter.css',
        ];

        public function configurePackage(Package $package): void
        {
            $package
                ->hasAssets()
                ->name('filament-char-counter')
                ->hasViews();
        }
    }

Opening file vendor/wiebenieuwenhuis/filament-char-counter/resources/dist/css/char-counter.css I see a lot of css code - looks like it must implement char counters functionality but how to assign it to the project? In file config/app.php I added :

    'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
         ...
        Wiebenieuwenhuis\FilamentCharCounter\FilamentCharCounterProvider::class,

and cleared cache.

Also I have

npm run dev command running...

But still no char counters functionality visible : https://prnt.sc/WlIvJe17fuGN

What I see in browser : prnt.sc/nrIx9blrWlLy not sure looks like this php code is not loaded and css is not applied. Does filament/laravel packages has some common way of loading package styles ?

[onursahindur]

Same here

[sweebee]

You’re not using the textinput from this package, you should import it from this package not from filament itself.

[sergeynilov]

Could you please detalize your answer ? Which code have I to replace ?

[sweebee]

@sergeynilov

use Wiebenieuwenhuis\FilamentCharCounter\TextInput;
TextInput::make('text');

[sergeynilov]

Thank you ! After I upgrated wiebenieuwenhuis/filament-char-counterm to ^1.1.3 it works. Can you please make similar functionality for Filament\Forms\Components\RichEditor class ?