Skip to content

#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.

  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: JavaScriptCSS, 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.

Edited by Harumi Jang

Merge request reports

Loading