Custom link extension not working

[madferro]

Hello, i need to create an extension to extend the link plugin. I followed your instructions, created all the files and configured vite.config.js, executed npm run dev and php artisan serve but when i open the page with the editor i see this in the browser console:

Uncaught SyntaxError: Cannot use import statement outside a module (at extensions.js:1:1)

This is my "extensions.js":

import BrunoLink from "./brunolink/brunolink.js";

window.TiptapEditorExtensions = {
    brunolink: [BrunoLink]
}

and in the filament-tiptap-editor.php I put this configuration for the extensions section:

'extensions_script' => 'resources/js/tiptap/extensions.js',
    'extensions_styles' => 'resources/css/tiptap/extensions.css',
    'extensions' => [
        [
            'id' => 'brunolink',
            'name' => 'Link',
            'button' => 'tiptapextensions.brunolink',
            'parser' => \App\TiptapExtensions\BrunoLink::class,
        ],
    ],

what I'm doing wrong?

Thank you in advance!

[awcodes]

You're not building your js file and registering it with the config.

[awcodes]

You have extension styles but not extension js.

[madferro]

Sorry i don't understand..is my configuration wrong? Could you please tell me how to set it right? I thought this:

'extensions_script' => 'resources/js/tiptap/extensions.js',
    'extensions_styles' => 'resources/css/tiptap/extensions.css',
    'extensions' => [
        [
            'id' => 'brunolink',
            'name' => 'Link',
            'button' => 'tiptapextensions.brunolink',
            'parser' => \App\TiptapExtensions\BrunoLink::class,
        ],
    ],

was the right configuration

[madferro]

Ok now it seems to work however my link is not rendered. This is my action class:

<?php

namespace App\Actions;

use Filament\Forms\ComponentContainer;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Radio;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Forms\Components\Hidden;
use FilamentTiptapEditor\TiptapEditor;
use Illuminate\Support\HtmlString;
use App\Models\AllPages;
use App\Models\News;
use App\Models\Attachment;
use Filament\Forms\Get;
use App\Livewire\ContentMediaGalleryField;
use App\Forms\Components\ContentMediaManager;
use Illuminate\Support\Facades\Storage;


class ContentLinkAction extends Action
{
    public static function getDefaultName(): ?string
    {
        return 'filament_tiptap_link';
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this
            ->modalWidth('5xl')
            ->arguments([
                'href' => '',
                'id' => '',                 
                'hreflang' => '',           //lo uso per sapere eventualmente qual'è l'id della risorsa selezionata
                'target' => '',
                'rel' => false,             //lo uso per sapere se è link interno o esterno
                'referrerpolicy' => '',     //lo uso per sapere che tipo di link interno è casomai
                'as_button' => false,
                'button_theme' => '',
                'linktype' => '',
                'resource' => '',
                'internal' => false
            ])->mountUsing(function (ComponentContainer $form, array $arguments) {
                $form->fill($arguments);
            })->modalHeading(function (array $arguments) {
                $context = blank($arguments['href']) ? 'insert' : 'update';

                return trans('filament-tiptap-editor::link-modal.heading.' . $context);
            })->form([
                Grid::make(['md' => 2])
                    ->schema([
                        Hidden::make('hreflang'),
                        Hidden::make('referrerpolicy'),
                        Hidden::make('rel'),
                        Toggle::make('internal')->label('Link interno')->reactive()->columnSpan(2),
                        Select::make('linktype')
                            ->live()
                            ->columnSpan('full')
                            ->label("Link a")
                            ->visible(fn ($get) => $get('internal'))
                            ->options([
                                "page"  => "Pagina",
                                "news"  => "News",
                                "file"  => "File"
                            ])->afterStateUpdated(function($set){
                                $set('href','');
                            }),
                        Group::make(function (callable $get) {
                            if($get('linktype') == "file"){
                                return [
                                    ContentMediaManager::make("resource")->reactive()->label('')
                                        ->onlyImages(false)
                                        ->afterStateUpdated(function (callable $set, $state) {
                                            //recupero l'attachment
                                            
                                            $attachment = Attachment::find($state);
                                            $set('href',Storage::url($attachment->file_path));
                                        })
                                ];
                            }else if(in_array($get('linktype'),["page","news"])){
                                return [
                                    Select::make('resource')
                                        ->label("Seleziona")
                                        ->options(fn (Get $get): array => match ($get('linktype')) {
                                            'page' => AllPages::where("platform_id",session('platform_id'))
                                                ->orderBy("title")
                                                ->pluck('title', 'slug')
                                                ->toArray(),
                                            'news' => News::where("platform_id",session('platform_id'))
                                                ->orderBy("title")
                                                ->pluck('title', 'slug')
                                                ->toArray(),
                                            default => [],
                                        })
                                        ->reactive()
                                        ->afterStateUpdated(function(callable $set,$state){
                                            $set('href',$state);
                                        })
                                ];
                            }else{
                                return [];
                            }
                        })
                        ->columnSpan('full')
                        ->reactive()
                        ,
                        TextInput::make('href')
                            ->required()
                            ->label(trans('filament-tiptap-editor::link-modal.labels.url'))
                            ->columnSpan('full')
                            ->readOnly(fn ($get) => $get('internal')),
                        TextInput::make('id'),
                        Select::make('target')
                            ->selectablePlaceholder(false)
                            ->options([
                                '' => trans('filament-tiptap-editor::link-modal.labels.target.default'),
                                '_blank' => trans('filament-tiptap-editor::link-modal.labels.target.new_window'),
                                '_parent' => trans('filament-tiptap-editor::link-modal.labels.target.parent'),
                                '_top' => trans('filament-tiptap-editor::link-modal.labels.target.top'),
                            ]),
                        Toggle::make('as_button')
                            ->label(trans('filament-tiptap-editor::link-modal.labels.as_button'))
                            ->reactive()
                            ->hidden(config('filament-tiptap-editor.disable_link_as_button'))
                            ->dehydratedWhenHidden(),
                        Radio::make('button_theme')
                            ->columnSpan('full')
                            ->columns(2)
                            ->visible(fn ($get) => $get('as_button'))
                            ->options([
                                'primary' => trans('filament-tiptap-editor::link-modal.labels.button_theme.primary'),
                                'secondary' => trans('filament-tiptap-editor::link-modal.labels.button_theme.secondary'),
                                'tertiary' => trans('filament-tiptap-editor::link-modal.labels.button_theme.tertiary'),
                                'accent' => trans('filament-tiptap-editor::link-modal.labels.button_theme.accent'),
                            ]),
                    ]),
            ])->action(function (TiptapEditor $component, $data, $arguments) {
                
                $component->getLivewire()->dispatch(
                    event: 'insertFromAction',
                    type: 'link',
                    statePath: $component->getStatePath(),
                    href: $data['href'],
                    id: $data['id'],
                    hreflang: $data['hreflang'],
                    target: $data['target'],
                    rel: $data['rel'],
                    referrerpolicy: $data['referrerpolicy'],
                    as_button: $data['as_button'],
                    button_theme: $data['as_button'] ? $data['button_theme'] : '',
                    coordinates: $arguments['coordinates'],
                    linktype :  $arguments['linktype'],
                    resource :  $arguments['resource'],
                    internal :  $arguments['internal'],
                );

                $component->state($component->getState());
            })->extraModalFooterActions(function (Action $action): array {
                if ($action->getArguments()['href'] !== '') {
                    return [
                        $action->makeModalSubmitAction('remove_link', [])
                            ->color('danger')
                            ->extraAttributes(function () use ($action) {
                                return [
                                    'x-on:click' => new HtmlString("\$dispatch('unset-link', {'statePath': '{$action->getComponent()->getStatePath()}'}); close()"),
                                    'style' => 'margin-inline-start: auto;',
                                ];
                            }),
                    ];
                }

                return [];
            });
    }
}

As you can see the insertFromAction passes "link" as type value, but when the link is inserted in the content there are no extra attributes like linktype, resource and internal.
In my extension i put them into the addAttributes function like this:

linktype: {
        default: null,
        parseHTML: element => element.getAttribute('data-linktype'),
        renderHTML: attributes => {
          return {
            'data-linktype': attributes.linktype,
          }
        }
      },
      internal: {
        default: false,
        parseHTML: element => element.getAttribute('data-internal'),
        renderHTML: attributes => {
          return {
            'data-internal': attributes.internal,
          }
        }
      },
      resource: {
        default: null,
        parseHTML: element => element.getAttribute('data-resource'),
        renderHTML: attributes => {
          return {
            'data-resource': attributes.resource,
          }
        }
      },

and even in my php class, what i'm doing wrong? Maybe the type passed to insertFromAction should be diferent from "link"? And in that case how con i extend the insertFromAction behaviour?
Thank you in advance