Rich editor throws js error if using a custom plugin

I followed the documentation to extend the rich editor. I created a LinkRichContentPlugin
public function getTipTapPhpExtensions(): array
{
// This method should return an array of PHP TipTap extension objects.
// See: https://github.com/ueberdosis/tiptap-php

return [
app(Link::class, [
'options' => ['openOnClick' => true],
]),
];
}

/**
* @return array<string>
*/
public function getTipTapJsExtensions(): array
{
// This method should return an array of URLs to JavaScript files containing
// TipTap extensions that should be asynchronously loaded into the editor
// when the plugin is used.

return [
FilamentAsset::getScriptSrc('rich-content-plugins/custom-link'),
];
}
public function getTipTapPhpExtensions(): array
{
// This method should return an array of PHP TipTap extension objects.
// See: https://github.com/ueberdosis/tiptap-php

return [
app(Link::class, [
'options' => ['openOnClick' => true],
]),
];
}

/**
* @return array<string>
*/
public function getTipTapJsExtensions(): array
{
// This method should return an array of URLs to JavaScript files containing
// TipTap extensions that should be asynchronously loaded into the editor
// when the plugin is used.

return [
FilamentAsset::getScriptSrc('rich-content-plugins/custom-link'),
];
}
JS
import { Link } from "@tiptap/extension-link";

export default Link.configure({
openOnClick: true,
});
import { Link } from "@tiptap/extension-link";

export default Link.configure({
openOnClick: true,
});
Appserviceprovider
RichEditor::configureUsing(fn (RichEditor $richEditor): RichEditor => $richEditor
->plugins([
LinkRichContentPlugin::make(),
])
->columnSpanFull());

FilamentAsset::register([
Js::make('rich-content-plugins/custom-link', __DIR__.'/../../resources/js/dist/filament/rich-content-plugins/custom-link.js')->loadedOnRequest(),
]);
RichEditor::configureUsing(fn (RichEditor $richEditor): RichEditor => $richEditor
->plugins([
LinkRichContentPlugin::make(),
])
->columnSpanFull());

FilamentAsset::register([
Js::make('rich-content-plugins/custom-link', __DIR__.'/../../resources/js/dist/filament/rich-content-plugins/custom-link.js')->loadedOnRequest(),
]);
Versions used: Filament: v4.1.0 Laravel: v12.32.5 Error given:
No description
7 Replies
awcodes
awcodes10h ago
This is a known issue. It’s a bug in the merging logic. Just haven’t had time to look into it further yet.
Bruno Pereira
Bruno PereiraOP10h ago
Oh yeah! I remember talking about this in the offtopic channel, so what do you suggest to bypass this? Extend the richeditor class and the js files and modify them directly. Because I just need the Link config to openOnClick xD and in the rich-editor.js or extensions.js you guys have it on false
awcodes
awcodes10h ago
That would probably be the only way at the moment. But I would hate for you to do that. Would probably be better time spent to PR a fix for it in core. The problem is in extension.js. The merging is a shallow compare and the core link and your link don’t have the same object representation so, the custom one doesn’t remove the core one from the array. I was getting around it in tiptap editor plugin by keying the extensions in the array.
Bruno Pereira
Bruno PereiraOP10h ago
I can give it a try
awcodes
awcodes10h ago
Do what works for you though. Not trying to get free work out of you for core. 😂
Bruno Pereira
Bruno PereiraOP10h ago
tomorrow I'll try to understand how that works and try to PR because if it helps me surely helps a lot of people. If my boss starts nagging me, well I'll do it the hard way xD

Did you find this page helpful?