While thinking about page caching I was feeling concerned about the complexity of having the sponsor banner adds and footer components being loading asynchronously. It suddenly occurred to me that we could easily be rendering those server side with a simple gsub of custom tags. This also had the added benefit of making the tags much simpler for a content editor to add to the page. Unfortunately though it led me down some rabbit holes but hopefully led to some improvements.
First of all previewing of pages with banners or footers while editing broke because we were just swapping out the html in the iframe. I found an interesting solution of instead making a request from a hidden form with the iframe as the target (I did not know you could do this but seemed pretty cool and it just worked). However, that meant a lot of page requests with every edit change so I added a debounce to the requests. The experience is not as smooth as it was but hopefully it is acceptable. I also considered adding the autosave feature and reloading the iframe with the saved content but that had other problems including how to deal with a new page that is not yet persisted.
I originally hoped that the tags could be simple self-closing tags like <sponsors-footer/> but unfortunately tinyMCE has another nasty habit of changing those to <sponsors-footer></sponsors-footer>. The easiest fix was to just accept it and require the tags to be a matching pair. However, it did make me want to explore what it would take to get rid of tinyMCE.
In that vein I added image uploading to CodeMirror by allowing a file to be dropped into the html. I am not sure that we want to totally get rid of tinyMCE but I at least made it the default that is rendered when you first start editing.
Since autosaving seemed complicated I decided to start with a beforeunload event handler managed in the editor stimulus controller. Another small improvement was adding a max-width on the resizable form and preview windows. I also along the way added a missing scope on the sponsors to the current_website which we would have eventually caught.
Changes
renders sponsors banner and footer server-side by replacing embedded
custom tags
changes preview process in editor by refreshing iframe with the
unpublished body so that tags get embedded
adds ability to drop images into CodeMirror
makes CodeMirror the initial default editor instead of tinyMCE
adds beforeunload warning when there are unsaved editor changes
adds max-width on resize editor form and preview windows
scopes sponsors in banner and footer to current website
Reason for Change
While thinking about page caching I was feeling concerned about the complexity of having the sponsor banner adds and footer components being loading asynchronously. It suddenly occurred to me that we could easily be rendering those server side with a simple
gsubof custom tags. This also had the added benefit of making the tags much simpler for a content editor to add to the page. Unfortunately though it led me down some rabbit holes but hopefully led to some improvements.First of all previewing of pages with banners or footers while editing broke because we were just swapping out the html in the iframe. I found an interesting solution of instead making a request from a hidden form with the iframe as the target (I did not know you could do this but seemed pretty cool and it just worked). However, that meant a lot of page requests with every edit change so I added a debounce to the requests. The experience is not as smooth as it was but hopefully it is acceptable. I also considered adding the autosave feature and reloading the iframe with the saved content but that had other problems including how to deal with a new page that is not yet persisted.
I originally hoped that the tags could be simple self-closing tags like
<sponsors-footer/>but unfortunately tinyMCE has another nasty habit of changing those to<sponsors-footer></sponsors-footer>. The easiest fix was to just accept it and require the tags to be a matching pair. However, it did make me want to explore what it would take to get rid of tinyMCE. In that vein I added image uploading to CodeMirror by allowing a file to be dropped into the html. I am not sure that we want to totally get rid of tinyMCE but I at least made it the default that is rendered when you first start editing.Since autosaving seemed complicated I decided to start with a beforeunload event handler managed in the editor stimulus controller. Another small improvement was adding a max-width on the resizable form and preview windows. I also along the way added a missing scope on the sponsors to the current_website which we would have eventually caught.
Changes
Page and image caching in edge network