Mention plugin

[sinnbeck]

Just suggesting to add the mention plugin

https://tiptap.dev/api/nodes/mention

[pboivin]

Hi @sinnbeck. I'm curious to know what would be a good default from your perspective. Should the mention plugin pull from all Filament users automatically, or should it be manually configured like User::canAccessPanel()? (e.g. User::canBeMentionedInTiptap()).

[sinnbeck]

I was thinking that there would be a setting like ->withMentions(fn ($record) => $record->friends->toArray()), which could accept and array or closure to get the mention list. This would enable mentions for the editor, and otherwise leave it disabled.

I havent yet dug into the code enough to know if this is viable, so for now its mosly an idea :) If I find a way to do it myself, I might submit a PR

[mathieutu]

Hey @sinnbeck I'm also trying to integrate the Mentions extension to the plugin. Did you succeed?

Thanks!

[sinnbeck]

I managed to get it working based on some guide I found online. Dont remember where I found it. Its not pretty, but it should work. I might do some more work with it at a later date. This is my code

<?php

namespace App\Filament\Components\Forms\Components;

use Filament\Forms\Components\RichEditor;

class MentionsRichEditor extends RichEditor
{
    protected string $view = 'forms.components.mentions-rich-editor';

    protected array $mentionsItems = [];

    public function mentionsItems(array $mentionsItems): static
    {
        $this->mentionsItems = $mentionsItems;

        return $this;
    }

    public function getMentionsItems(): array
    {
        return $this->mentionsItems;
    }
}

@include('filament-forms::components.rich-editor')
@once
    @push('scripts')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/3.3.2/tribute.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/3.3.2/tribute.min.js"></script>
    @endpush
@endonce

@push('scripts')

    <script>
        // Wait for the page to load before executing our code
        window.addEventListener('trix-initialize', () => {
            // Get the component id, using the $getId() function of our RichEditor
            const id = '{{ $getId() }}';
            let element = document.getElementById(id);
            const editor = element.editor;
            if (!editor || element.dataset.tribute) {
                return;
            }
            console.log(editor)
            // Create the Tribute instance
            const tribute = new Tribute({
                // The values are the users that can be mentioned, so we will get this list from the mentionsItems variable that we created before in our custom component
                values: @json($getMentionsItems(), JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES),

                // Here we will customize the way that the mention must be shown,
                // so when the user will mention another a link will be injected
                // into the RichEditor with a link to the mentioned user's profile
                selectTemplate: function (item) {
                    if (typeof item === "undefined") return null;
                    if (this.range.isContentEditable(this.current.element)) {
                        return '<span contenteditable="false">@' + item.original.key + '<span/>';
                    }
                    // }
                    console.log('NO')
                    return "@" + item.original.key;
                },
            });

            function _pasteHtml(html, startPos, endPos) {
                let range = editor.getSelectedRange()
                let position = range[0]
                let length = endPos - startPos

                editor.setSelectedRange([position - length, position])
                editor.deleteInDirection("backward")
                //editor.insertPlaceholder()
                //editor.free
            }

            function replaced(event) {
                return;
                let mention = event.detail.item.original
                editor.insertHTML(`<button class="mention">@${mention.key}</button>`)
           
                //var attachment = new Trix.Attachment({ content: `<span class="mention">@${mention.key}</span>` })
                //editor.insertAttachment(attachment)

            }

            // Attach the tribute instance to the RichEditor using the id retrieved above
            tribute.attach(element);

            element.addEventListener("tribute-replaced", replaced);


        });
    </script>
@endpush

[mathieutu]

Oh, even with the default RichEditor. Thanks!

[sinnbeck]

Yeah its just an extension :)

[awcodes]

Don't forget about having to support tenancy too.