Change visual preview to code view

[jonnywatersbb]

What problem does this address?

Removing visual preview as described in (#61)

What is your proposed solution?

Replace with a live text view of the theme.json file, allowing users to instantly see the change in the code effected by altering a setting in the themer UI

Acceptance criteria

• Output current theme.json file in place of the visual editor
• Output theme.json within pre/code element
• Ensure theme.json has the correct indentation
• Use monospace font for legibility
• Instant sync of the code view when a setting is changed within the UI

[g-elwell]

thanks @chrishall0 and @squarewave17 for picking this up in #68 🙌

just a heads up - whilst we encourage reviews from everyone, code shouldn't be merged until it's been approved by someone from the lead engineering team or a named codeowner on a repo.

on this one, I've just tested the PR and it looks good, but I do have some feedback:

• We should use both <pre> and <code> tags to render code semantically
• I think rendering the entire themeConfig is more expected, as this is what is output when you export the theme.json
• The overflow/preview height seems to tall, is this undoing recent changes from GH Issue #66 - Scrollable Panels with Sticky Navigation Tree Items #67?

[chrishall0]

thanks @chrishall0 and @squarewave17 for picking this up in #68 🙌

just a heads up - whilst we encourage reviews from everyone, code shouldn't be merged until it's been approved by someone from the lead engineering team or a named codeowner on a repo.

on this one, I've just tested the PR and it looks good, but I do have some feedback:

• We should use both <pre> and <code> tags to render code semantically
• I think rendering the entire themeConfig is more expected, as this is what is output when you export the theme.json
• The overflow/preview height seems to tall, is this undoing recent changes from GH Issue #66 - Scrollable Panels with Sticky Navigation Tree Items #67?

thanks @g-elwell, addressed those here

[squarewave17]

thanks @chrishall0 and @squarewave17 for picking this up in #68 🙌

just a heads up - whilst we encourage reviews from everyone, code shouldn't be merged until it's been approved by someone from the lead engineering team or a named codeowner on a repo.

on this one, I've just tested the PR and it looks good, but I do have some feedback:

• We should use both <pre> and <code> tags to render code semantically
• I think rendering the entire themeConfig is more expected, as this is what is output when you export the theme.json
• The overflow/preview height seems to tall, is this undoing recent changes from GH Issue #66 - Scrollable Panels with Sticky Navigation Tree Items #67?

My apologies @g-elwell 🙏🏻

[g-elwell]

Resolved by #68 and #70 - thanks all!