Rich Editor + Componente Tema

Il mio obiettivo è che quando un utente include un link a un URL specifico (dominio + percorso base), io possa visualizzarlo automaticamente con una formattazione speciale.

Sono in grado di realizzarlo nel post renderizzato con decorateCookedElement(), ma non riesco a capire come agganciarmi alla visualizzazione dell’editor Rich Text per personalizzare l’aspetto del link lì.

Ci sono funzionalità api che potrebbero essere utilizzate all’interno di un apiInitializer di un Theme Component per personalizzare il rendering dell’editor Rich Text?

Stavo cercando di evitare di dover creare un plugin da eseguire sul server stesso… e non ho ancora trovato una soluzione più semplice, ma sono aperto a idee alternative! (Ad esempio, non voglio disattivare il OneBoxing di questo dominio nel suo complesso poiché le pagine di marketing non-SPA hanno piacevoli tag OpenGraph per il OneBoxing)

Approccio Storico: decorateCookedElement()

Storicamente ho fatto qualcosa di simile per i video serviti da Bunny.net (post di riferimento) dove lascio che avvenga il rendering standard (OneBox video) e poi uso decorateCookedElement() per applicare alcune correzioni ai video OneBox dall’URL di streaming di Bunny.net (theme-initializer.gjs#L8-L15) come rapporto d’aspetto, abilitando il fullscreen, ecc.

Per i video Bunny, questo ha funzionato bene poiché nell’editor viene sempre visualizzato il segnaposto grigio del OneBox Video (scatola grigia con l’icona video bianca), quindi quel contenuto non aveva bisogno di essere modificato comunque.

Problema Rich Text

La sfida nell’utilizzare decorateCookedElement() per il mio obiettivo attuale di poter sostituire i link a un URL specifico (dominio + percorso base) è quando un utente include quel link da solo nell’editor Rich Text e poi preme invio, l’editor lo converte in un OneBox e non sono riuscito a capire se esiste un modo per agganciarsi a quel flusso di rendering o altrimenti personalizzarlo.

Questo particolare link è a una funzionalità all’interno di un’applicazione a pagina singola (hosting statico) quindi non fornisce un set particolarmente significativo di tag Open Graph / meta e il che rende il OneBox poco intuitivo e ho notato che i membri della community racchiudono i loro link di importazione tra parentesi graffe e altre soluzioni alternative.

Pertanto, stavo pensando che se potessi personalizzare anche come questo particolare link viene renderizzato nell’editor Rich Text, gli utenti vedrebbero un formato più intuitivo e lo adotterebbero.

5 Mi Piace