Usare l'editor Markdown di Mailcoach in Filament

Abbiamo rilasciato un nuovo pacchetto chiamato spatie/filament-markdown-editor. Questo pacchetto contiene l'editor Markdown di Mailcoach e lo rende facilmente installabile in Filament, un potente admin panel per le applicazioni Laravel.

In questo articolo voglio raccontarvi tutto al riguardo.

L'editor Markdown di Mailcoach

Per scrivere contenuti in Mailcoach mettiamo a disposizione diversi editor. C'è un editor WYSIWYG per gli utenti senza alcuna conoscenza tecnica. Se volete un controllo granulare, offriamo un editor HTML.

Se avete un background da sviluppatori, probabilmente conoscete Markdown, una versione semplificata di HTML. Mailcoach offre un potente editor Markdown che include l'upload delle immagini e l'evidenziazione automatica del codice. In questo articolo vedrete un esempio di come potete usare e generare facilmente markdown per la vostra newsletter basata su Mailcoach.

Sotto il cofano, l'editor Markdown di Mailcoach è basato su SimpleMDE con alcune modifiche per far funzionare l'evidenziazione del codice.

Usare l'editor Markdown di Mailcoach in Filament

In Mailcoach usiamo Filament come admin panel. L'articolo che state leggendo è stato scritto in Filament. Dato che pubblichiamo spesso articoli tecnici con frammenti di codice e immagini, volevamo usare il nostro editor Markdown all'interno di Filament.

Per questo motivo abbiamo estratto il nostro editor in un nuovo pacchetto chiamato spatie/filament-markdown-editor.

Una volta installato, potete usare Spatie\FilamentMarkdownEditor\MarkdownEditor proprio come qualsiasi altro elemento di form.

Ecco come potete usarlo nella funzione form di una resource di Filament.

use Spatie\FilamentMarkdownEditor\MarkdownEditor;
public static function form(Form $form): Form
{
    return $form
        ->schema([
            // other fields ...
            MarkdownEditor::make('text')
                ->fileAttachmentsDisk('admin-uploads')
                ->fileAttachmentsVisibility('public')
                ->required(),
        ]);
}

Facoltativamente, potete aggiungere i metodi standard di Filament fileAttachmentsDisk, fileAttachmentsVisibility, … per configurare l'upload delle immagini.

Ecco come appare quel campo nel browser:

Per aggiungere un'immagine, basta trascinarla e rilasciarla nell'editor. L'immagine verrà caricata e verrà inserito un tag immagine che fa riferimento al vostro upload.

In conclusione

Se usate già Filament, sono sicuro che apprezzerete la gestione dei vostri contenuti con il nostro editor. Se usate Laravel Nova, sentitevi liberi di usare il nostro pacchetto come ispirazione per creare un editor simile.

Voglio ringraziare il mio collega Rias per aver creato questo editor e Dan Harrin per il suo aiuto nell'integrazione delle funzionalità di upload delle immagini di Filament.