[83] Contextualise code view based on current navigator location

[g-elwell]

Description

This PR updates the code preview to show only the styles currently being edited, rather than the entire theme config.

The router context is used to allow the code preview to change based on the current navigator location. In other words, when you click a block or element, you will only see the styles related to that item in the code preview area.

This makes it clearer which style changes are being applied. This change only impacts the code preview, the theme.json export is left untouched and will contain all data.

Related #83

Change Log

• Contextualises code preview based on navigator location

Steps to test

• Visit the themer settings page
• Notice the code preview should only show existing site styles
• Navigate to different elements - blocks, elements, elements nested inside blocks, pseudo-states, etc.
• Notice the preview should update based on the location you navigate to
• Check the preview reflects any changes in real time as you make them

Screenshots/Videos

Screen.Capture.on.2024-08-08.at.11-58-05.mp4

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[squarewave17]

Works great. Nice solution