Rich Editor + Theme Component

My goal is that when a user includes a link to a particular URL (domain + base path), I can automatically display that with special formatting.

I’m able to accomplish this in the rendered post with decorateCookedElement() but I can’t seem to figure out how I can hook into the Rich Text Editor display to customize the look of the link there.

Are there any api features that could be used within an apiInitializer of a Theme Component to customize the Rich Text Editor rendering?

I was trying to avoid having to build a plugin to run on the server itself… and I haven’t come up with a simpler solution yet, but I am open to alternative ideas! (For example, I don’t want to kill the OneBoxing of this domain as a whole as the non-SPA marketing pages have nice OpenGraph tags for OneBoxing)

Historical Approach: decorateCookedElement()

I’ve historically done something similar for videos served from Bunny.net (reference post) where I let the standard rendering happen (OneBox video) and then used decorateCookedElement() to apply some fixes to OneBox’ed videos from the Bunny.net streaming URL (theme-initializer.gjs#L8-L15) like aspect ratio, allowing fullscreen, etc.

For the Bunny videos, this worked fine as in the editor, it always displays the grayed out OneBox Video Placeholder (gray box with the white video icon) so that content didn’t need to get tweaked anyway

Rich Text Issue

The challenge with using decorateCookedElement() for my current goal of being able to swap out links to a particular URL (domain + base path) is when a user includes that link on its own line in the Rich Text Editor and then presses enter, the editor converts it to a OneBox and I haven’t been able to figure out if there’s a way to hook into that rendering flow or otherwise customize it.

This particular link is to a feature within a Single Page App (static hosting) so it doesn’t provide a particularly meaningful set of Open Graph / meta tags and which makes the OneBox unintuitive and I’ve noticed community members wrapping their import links in code braces and other workarounds.

As such, I was thinking that if I could customize how this particular link rendered in the Rich Text Editor too, users would see a more intuitive format and go with it.

4 Likes