F
Filament4w ago
Finn

Something changed between 4.1.1 and 4.1.2 which means that my custom rich editor plugins broke

I implemented some custom rich editor plugins as per the documentation at the time in v4.0.x. Everything was working fine in 4.1.0 and 4.1.1, however since updating to 4.1.2 I've found these custom plugins have stopped working. I think an accidental breaking change / bug was introduced? I'm happy to open a github issue with this problem if it makes sense to - I think the commit that has broken things is to do with the custom plugins merge: https://github.com/filamentphp/filament/pull/18049.
3 Replies
Finn
FinnOP4w ago
GitHub
Custom TipTap extensions for RichEditor break on versions >= v4.1.2...
Package filament/filament Package Version v4.1.2 Laravel Version v12.35.0 Livewire Version No response PHP Version PHP 8.4.13 Problem description I noticed that my rich editor content was no longer...
toeknee
toeknee4w ago
GitHub
Fix/rich editor plugins merge (#18049) · filamentphp/filament@51d6ab7
* Update extensions.js * Update 10-rich-editor.md * Update 10-rich-editor.md * Update extensions.js * Update 10-rich-editor.md * clean up --------- Co-authored-by: Dan Harrin <git@dan...
Bruno Pereira
Bruno Pereira4w ago
Hey all! So this pr what it does basically compares the custom extensions with the default ones from tiptap editor php extensions from here. https://github.com/ueberdosis/tiptap-php In your case checking your repro repo I saw somethings that are not quite aligned with the documentation. In the Underline case you have to add the Underline mark to the
public function getTipTapPhpExtensions(): array
{
return [];
}

like so

// Use use Tiptap\Marks\Underline;

public function getTipTapPhpExtensions(): array
{
return [
app(Underline::class, []),
];
}
public function getTipTapPhpExtensions(): array
{
return [];
}

like so

// Use use Tiptap\Marks\Underline;

public function getTipTapPhpExtensions(): array
{
return [
app(Underline::class, []),
];
}
Because the extension.js will check the name property of the extension in this case it will be 'underline'. If theres a custom underline and a default underline, it will remove the default one and keep the custom, if theres no default one it will add it, all based of the getTipTapPhpExtensions() function. And the js should follow the structure from the documentation like:
import Underline from '@tiptap/extension-underline'

export default Underline.configure({
addKeyboardShortcuts() {
return {
'Mod-u': () => false,
'Mod-U': () => false,
}
},
})
import Underline from '@tiptap/extension-underline'

export default Underline.configure({
addKeyboardShortcuts() {
return {
'Mod-u': () => false,
'Mod-U': () => false,
}
},
})
Dont know if the placement of addKeyboardShortcuts() is correct but this way is the correct way following the documentation. Now the unique IDs are more difficult because the php extensions repo doesnt have a php class for it So you have to create a php class that extends a Mark or Node from tiptap and follow the documentation.
GitHub
GitHub - ueberdosis/tiptap-php: A PHP package to work with Tiptap c...
A PHP package to work with Tiptap content. Contribute to ueberdosis/tiptap-php development by creating an account on GitHub.

Did you find this page helpful?