This PR fixes an issue where fit-text is not working when navigating using the Interactivity API and in any case where fit-text blocks may be added dynamically with JavaScript. Props to @luisherranz for reporting this.

Solution

Instead of running once and assuming all fit-text blocks are static, we add a mutation observer. It just listens to node additions and removals after the load and checks if the node has or contains fit-text blocks. If it does and the node is removed, it cleans up the fit-text observer; if the node was added and has fit-text, it performs its initialization.

Other alternatives:

• Overwrite the push/pop methods of the navigation so we could catch and try to get an onNavigate event and then do the fit-text init. This is not very reliable, as when the navigation happens, requests to the server may still be in progress and the DOM may not be ready.

• Try to use the Interactivity API directly. I guess we would need to add some invisible element which uses the Interactivity API as a way to try to subscribe to the navigation events on the Interactivity API. I tried that locally but my solution was going in a very hacky way.

cc: @luisherranz for thoughts on the current solution and in case you know a simpler alternative.

Testing Instructions

1. Enable the "Interactivity API: Full-page client-side navigation" experiment.
2. Add a new post with fit-text, load the blog page, and see that the post with fit-text works well.
3. Navigate to that post (e.g., click the post title) and verify fit-text still looks as expected (on trunk, it does not work).