Extend the Link Modal

[edstevo]

Hi - I would like extend the link modal. My idea is to understand if the link is for a blog article model, or product or an external link.

Then I would like to format the links differently in each case when rendering the "blog post" created inside this tip tap editor. I.e. a blog link would default to "dofollow" and would render automatically with the latest handle (in the instance the link changed). The same for the product.

External links would default to "nofollow" to the inputted href.

I have tried to pass custom data to try and pick this up but I can't seem to make it work.

Do you have any suggestions?

[lotarbo]

Hi, in v2 i achieved this like that

<?php

namespace App\Filament\Actions;

use App\Models\Page;
use Closure;
use Filament\Forms\ComponentContainer;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use FilamentTiptapEditor\TiptapEditor;
use Str;

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

    protected function buildUriForPage(?string $id): ?string
    {
        if ($id === null) {
            return null;
        }
        $page = Page::find($id);
        if ($page === null) {
            return null;
        }

        return 'page://'.$page->id;
    }

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

        $this->mountUsing(function (TiptapEditor $component, ComponentContainer $form) {
            $href = $component->getLivewire()->linkProps['href'];
            $form->fill([
                'href' => $href,
                'type' => Str::startsWith($href, 'page://') ? 'page-link' : 'external-link',
                'id' => Str::startsWith($href, 'page://') ? Str::after($href, 'page://') : null,
            ]);
        });

        $this->modalWidth('md');

        $this->modalHeading(function (TiptapEditor $component) {
            $context = blank($component->getLivewire()->linkProps['href']) ? 'insert' : 'update';

            return __('filament-tiptap-editor::link-modal.heading.'.$context);
        });

        $this->form([
            Grid::make(1)
                ->schema([
                    Select::make('type')
                        ->reactive()
                        ->options([
                            'external-link' => 'External Link',
                            'page-link' => 'Page Link',
                        ])->afterStateUpdated(function ($state, Select $component): void {
                            if (! $state) {
                                return;
                            }

                            // NOTE: This chunk of code is a workaround for Livewire not letting
                            //       you entangle to non-existent array keys, which wire:model
                            //       would normally let you do.
                            $component
                                ->getContainer()
                                ->getComponent(fn (Component $component) => $component instanceof Group)
                                ->getChildComponentContainer()
                                ->fill();
                        }),
                    Group::make()
                        ->reactive()
                        ->schema(function (Closure $get) {
                            $type = $get('type');

                            if ($type === 'page-link') {
                                return [
                                    Select::make('id')
                                        ->label('Page')
                                        ->searchable()
                                        ->options(fn () => Page::pluck('title', 'id')),
                                ];
                            } else {
                                return [
                                    TextInput::make('href')
                                        ->label(__('filament-tiptap-editor::link-modal.labels.url'))
                                        ->columnSpan('full')
                                        ->required(),
                                ];
                            }
                        }),
                ]),
        ]);

        $this->action(function (TiptapEditor $component, $data) {
            $component->getLivewire()->dispatchBrowserEvent('insert-link', [
                'statePath' => $component->getStatePath(),
                'href' => $data['type'] === 'page-link' ? $this->buildUriForPage($data['id']) : $data['href'],
                'hreflang' => '',
                'target' => '',
                'rel' => '',
            ]);

            $component->state($component->getState());
        });

        $this->modalActions(
            array_merge(
                $this->getModalActions(),
                [
                    \Filament\Forms\Components\Actions\Modal\Actions\Action::make('remove_link')
                        ->color('danger')
                        ->extraAttributes([
                            'x-on:click' => '$dispatch(\'unset-link\'); close()',
                            'style' => 'margin-left: auto;',
                        ]),
                ],
            )
        );
    }
}

[edstevo]

Legend - thank you so much. I got it working in v3 like this:

<?php

namespace App\TiptapExtensions;

use Filament\Forms\ComponentContainer;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Get;
use FilamentTiptapEditor\TiptapEditor;
use Illuminate\Support\Str;
use App\Models\BlogArticle;

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

    protected function buildUriForArticle(?string $id): ?string
    {
        if ($id === null) {
            return null;
        }
        
        $article = BlogArticle::find($id);
        if ($article === null) {
            return null;
        }

        return 'article://'.$article->id;
    }

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

        $this->mountUsing(function (ComponentContainer $form, array $arguments) {
            $href = $arguments['href'];

            $form->fill([
                'href' => $href,
                'type' => Str::startsWith($href, 'page://') ? 'article_link' : 'external_link',
                'id' => Str::startsWith($href, 'page://') ? Str::after($href, 'page://') : null,
            ]);
        });

        $this->slideOver(true);
        $this->modalWidth('md');

        $this->modalHeading(function (array $arguments) {
            return "Edit Link";
        });

        $this->form([
            Grid::make(1)
                ->schema([
                    Select::make('type')
                          ->live()
                          ->options([
                              'external_link' => 'External Link',
                              'article_link' => 'Article Link',
                          ])->afterStateUpdated(function ($state, Select $component): void {
                            if (!$state) {
                                return;
                            }

                            // NOTE: This chunk of code is a workaround for Livewire not letting
                            //       you entangle to non-existent array keys, which wire:model
                            //       would normally let you do.
                            $component
                                ->getContainer()
                                ->getComponent(fn(Component $component) => $component instanceof Group)
                                ->getChildComponentContainer()
                                ->fill()
                            ;
                        }),
                    Group::make()
                         ->reactive()
                         ->schema(function (Get $get) {
                             $type = $get('type');

                             if ($type === 'article_link') {
                                 return [
                                     Select::make('id')
                                           ->label('Article')
                                           ->options(BlogArticle::all()->pluck('title', 'id'))
                                           ->searchable()
                                           ->optionsLimit(20)
                                 ];
                             } else {
                                 return [
                                     TextInput::make('href')
                                              ->label(__('filament-tiptap-editor::link-modal.labels.url'))
                                              ->columnSpan('full')
                                              ->required(),
                                 ];
                             }
                         }),
                ]),
        ]);

        $this->action(function (TiptapEditor $component, $data) {
            $component->getLivewire()->dispatch(
                'insert-content',
                type     : 'link',
                statePath: $component->getStatePath(),
                href     : $data['type'] === 'article_link' ? $this->buildUriForArticle($data['id']) : $data['href'],
            );

            $component->state($component->getState());
        });
    }
}

and then I overrode the Link Mark using this:

<?php

namespace App\TiptapExtensions;

use Illuminate\Support\Str;
use App\Models\BlogArticle;
use Tiptap\Marks\Link as BaseLink;

class Link extends BaseLink
{

    public function addAttributes(): array
    {
        return [
            'href' => [
                'default' => null,
                'renderHTML' => function ($attributes) {

                    if (Str::contains($attributes->href, "article://")) {
                        $id = Str::after($attributes->href, "article://");
                        /** @var BlogArticle $article */
                        $article = BlogArticle::find($id);

                        return [
                            'target' => "_self",
                            'rel' => 'dofollow',
                            'href' => $article?->getPublicUrl(),
                            'title' => $article?->title,
                        ];
                    }

                    return ['href' => $attributes->href];
                },
            ]
        ];
    }
}

[edstevo]

I then had to remove the "\FilamentTiptapEditor\Extensions\Marks\Link" from the render method in order to not duplicate links.

    public function getHtml()
    {
        /** @var \FilamentTiptapEditor\TiptapConverter $converter */
        $converter = app(TiptapConverter::class);
        $extensions = collect($converter->getExtensions())->reject(function ($extension) {
            return $extension instanceof Link;
        })->toArray();

        $html = (new Editor([
            'extensions' => $extensions
        ]))
            ->setContent($this->body)
            ->getHTML()
        ;

        return Blade::render($html);
    }