Editing code components

Overview

When a code component is selected in the library (list is added in #3499947: Managing code components in library), we need to display the UI elements that make it possible to author/edit the component.

Proposed resolution

1. Implement the necessary routing logic for selecting and working with a code component — be aware of routing changes in #3497648: Focus mode for global regions to avoid conflicts;
2. Create the intended layout using react-mosaic-component, just like we did in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror;
3. Style the layout based on the design, but allow resizing the panels (the gap between them could be the area we can drag and move to resize);
4. Don't allow splitting and dragging windows in react-mosaic-component, try its controlled mode;
5. Add a button to implement a layout variant that expands the code editor panel to full width — the button is visible in the top-right corner of the panel on the design;
6. Create the code editor panel using CodeMirror, just like we did in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror;
7. Introduce three tabs inside the code editor panel: JavaScript, CSS, and Global CSS.

Be aware of #3500081: Editing components sourced as code components which will need to present almost the same UI and functionality.

Out of scope, add placeholders to the UI:

• #3500034: Preview for code components
• #3500017: Defining props for code components
• #3500071: Adding code components to components
• #3500042: Auto-save code components

User interface changes