#3499988: Code editor
The scope of this issue is listed under Proposed Resolution in the d.o. issue summary. Placeholders are used in place of features that have not been implemented yet.
- 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;
- Create the intended layout using
react-mosaic-component
, just like we did in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror;- 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);
- Don't allow splitting and dragging windows in
react-mosaic-component
, try its controlled mode;- 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;
- Create the code editor panel using CodeMirror, just like we did in #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror;
- Introduce three tabs inside the code editor panel: JavaScript, CSS, and Global CSS.
Leaving out an e2e test for this since there is little value to adding a test that just checks that the editor opens since this issue focuses primarily on the layout and styling of react-mosaic-component and also uses placeholders. We are also trying to stray away from writing tests for things that we know will change when we add more features. Checked with @balintbrews about this and he agreed.
Routing proposal
Clicking the placeholder item under 'Code' will navigate to this route: /xb_page/1/code-editor/code/{componentId}
and this route only renders the PrimaryPanel and MosaicContainer.
Not implemented yet but added /xb_page/1/code-editor/component/{componentId}
to AppRoutes.tsx for clicking an item that would be under 'Components' in the library panel.
Out of scope
A breadcrumb menu in the navigation bar will be added in: https://www.drupal.org/project/experience_builder/issues/3502893 for the user to return to their preview canvas.