Embedding an iframe using Trix
In my previous post about riding to Cle Elum, I ran into issues with Trix removing the iframe I was trying to add to show my cycling route on Ride With GPS. Here is the commit with the fixes.
There were multiple issues that needed to be solved:
There were multiple issues that needed to be solved:
- Add a custom button that would allow me to put arbitrary HTML into a post (supported feature from Trix)
- Modify the DOMPurify config in Trix to allow iframes (also supported feature)
- Modify the actual trix.js code to allow iframes (not supported feature, requires forking).
This issue on GitHub helped me get there, but ultimately I needed to find my own path forward that made sense for this site. Claude code also gave me a great start by writing the majority of the trix-extensions.js file, but I had to do a fair amount of manual clean up to get it to the finish line. But it's so nice to have the AI do the boilerplate to begin with, which gives me a great starting point.
The worst part about this fix was having to patch the trix code directly instead of being able to extend it. But since I vendor the trix code in my repo, it was very easy to do. I actually modified the minified trix.js file directly by ctrl+f "iframe" to remove it from the disallow list. If I need to update trix.js in the future, I'll have to remember to re-apply this fix, so this is definitely a tradeoff, but at least it was an easy way to validate the approach.
The worst part about this fix was having to patch the trix code directly instead of being able to extend it. But since I vendor the trix code in my repo, it was very easy to do. I actually modified the minified trix.js file directly by ctrl+f "iframe" to remove it from the disallow list. If I need to update trix.js in the future, I'll have to remember to re-apply this fix, so this is definitely a tradeoff, but at least it was an easy way to validate the approach.
