RichEditor in v4 not working!
Hi, I have a RichEditor inside a modal from that is fired with an action.
Action::make('envia_factura')
->icon('heroicon-m-envelope')
->schema([
Grid::make(3)->schema([
TextInput::make('to')->label('Client')->default($this->correus())->columnSpanFull(),
TextInput::make('cc')->label('CC')->default(''),
TextInput::make('bcc')->label('BCC')->default('eduardp@bredax.com'),
]),
TextInput::make('assumpte')->label('Assumpte')->default($this->assumpte()),
RichEditor::make('contingut')
->toolbarButtons([
/* 'attachFiles', 'blockquote', */ 'bold', 'bulletList',
/* 'codeBlock', */ 'h2', 'h3', 'italic', 'link', 'orderedList',
'redo', 'strike', 'undo',
])
->label('Missatge')
->required()
->default(self::cosMissatge()),
])
For some reason default text is not shown and the text editor is unresponsive. Browser console says:
Uncaught (in promise) SyntaxError: invalid assignment left-hand side in rich-editor.js:9:18723:
So I guess that once the error is fired, the text editor do not work any longer.
Don't know were should I submit this problem.25 Replies
You should use
->fillForm() on the Action to pass data instead of ->default()
PS: Please format your code with markdown to make it more readable.Thank you. Did not help. I commented ->default() but it still throws the same error (did not try fillForm yet. Curiously enough, the error appear both in my local environment and in production, but not in devel (on the same server). It might be something related to caches I guess, but I am not sure what is the exact protocol to make sure everything is up to date.
composer update
npm update
php artisan optimize:clear
Something else?
did not try fillForm yetBut you tried now, right? 😅
php filament:upgradeI tried now. I removed all defaults from other components of the schema and created the array to plug into fillForm. Error remains. It seems to be a js error of some sort...
php artisan filament:upgrade did not help.
Can you share the code
Sure
Action::make('envia_factura') ->icon('heroicon-m-envelope') ->schema([ Grid::make(3)->schema([ TextInput::make('to')->label('Client')->columnSpanFull(), TextInput::make('cc')->label('CC'), TextInput::make('bcc')->label('BCC'), ]), TextInput::make('assumpte')->label('Assumpte'), RichEditor::make('contingut') ->label('Missatge') ->required() , ])->fillForm([ 'to'=> $this->correus(), 'cc' => 'provaedu', 'bcc' => 'eduardp@bredax.com', 'assumpte' => $this->assumpte(), 'contingut' => self::cosMissatge(), ]) ->action( function (?Factura $record, array $data): void { $this->dades = $data; $this->envia_correu(); $this->refreshFormData(['cobrament_estat_id']); } ),If I change RichEditor to Textarea it works (with unformated html...)
This is inside a Panel? Does the RTE work on a normal EditPage?
This is inside
class EditFactura extends EditRecord { protected function getHeaderActions():array { return [ Action...];}}(in a Resource) Chrome gives info about the offending js
we.blur-sm=(t,e)=>{let n=e;t.focused&&(t.domObserver.stop(),t.dom.classLis...
Yes, but does the RTE work on the EditFactura page form directly? Not via an action?
Wait... I might be on something... let me check...
The error remains when I change a Textarea inside the main FactureResource form function.
Now I had a problem jumping from filament v3 to v4 and from tailwind v3 to v4. Someway something is mixed up wit tailwind, vite, npm and all of these ()
Some classes are unexistant (text-xs, h-4,...) and IA created a filament-utilities.css class to extract them from tailwind.css
Not the best solution, but it worked by now.
I suspect we.blur-sm is a class that should be created if tailwind/vite/npm run build were working correctly, but as it is not created, the js fails.
Does it make sense?
() I think understand why are they used for... to choose a subset of tailwind classes to create an optimized css... but I never understood how do they work together.
Ok, that was a long shot. I extracted .blur-sm from tailwind and added it to filament-utilities.css and then php artisan filament:assets and it did not work.
Someway something is mixed up wit tailwind, vite, npm and all of these ()That's another issue, but best to create a new theme and just move your custom stuff over.
The error remains when I change a Textarea inside the main FactureResource form function.Okay, so it's not limited to the action. This is just the regular Edit page right? Did you publish any view files?
The page is a little bit complicated (with relationmanagers and so), so I changed another Textarea from another resource (this one very, very plain) and the error is the same, the RichEditor do not work, same js problem.
Did you publish any view files?
And are you on the latest version?
Not in this last resource. I think I am in the last version of everything.
Not in this last resourceDid you publish Filament views in general? Can you run
php artisan about --section="filament" and paste the output?The --section option does not exist.
--only? 😅Filament ..............................................................................................................................
Blade Icons ................................................................................................................ NOT CACHED
Packages ........................................ filament, forms, notifications, support, tables, actions, infolists, schemas, widgets
Panel Components ........................................................................................................... NOT CACHED
Version ........................................................................................................................ v4.0.3
Views ................................................................................................................... NOT PUBLISHED
Blade Icons ................................................................................................................ NOT CACHED
Packages ........................................ filament, forms, notifications, support, tables, actions, infolists, schemas, widgets
Panel Components ........................................................................................................... NOT CACHED
Version ........................................................................................................................ v4.0.3
Views ................................................................................................................... NOT PUBLISHED
Looks good.
I have some widgets and table columns, and the dashboard page view.
Running out of ideas. Can you replicate this on a fresh install?
Yet, again, the same code works well in devel. It is almost the same code (i merged it to main but I made no major changes from it). I bet it has something to do with vite/npm. If I run npm run build it creates some public/build/assets/app-DNEIlzG7.css and if I grep blur-sm from it I get some results. BUT if I download http://localhost:8000/css/filament/filament/app.css?v=4.0.3.0
and search blur-sm there, I find none. I don't know exactly how it works, but for my understanding the last call should be a route to the former, shouldn't it?
How is your Tailwind stuff related to issues with the Rich Text Editor? Can we please stick to one topic? 😅
Sorry, I was trying to make sense to all together.
Does not make any sense and the only explanation is that something is messed up with caches and tailwind and all of these.
NEVERMIND: I solved it somehow (in fact, not solving it at all.... :-D)
I found my
http://localhost:8000/js/filament/forms/components/rich-editor.js?v=4.0.3.0
did contain blur-sm, but not my
production and development EXACT libraries.
So I commited my changes and pushed to production.... and voilà! Problem solved. NO IDEA WHY!
THANK YOU VERY, VERY, VERY MUCH FOR YOUR TIME!!!
Wait, so it's probably just that you are missing
php artisan filament:upgrade for your dev/prod deployment