[WC-3348] Charts: restore highlighted JSON editor in playground

[yordan-st]

Pull request type

Bug fix (non-breaking change which fixes an issue)

---

Description

Charts v6.3.0 shipped the playground editor on CodeMirror, which threw a bundling error and broke the playground. As a stopgap (to unblock WC-3345), CodeMirror was replaced with a plain <textarea> in 6.3.1 — losing syntax highlighting and any feedback on invalid JSON.

This restores a real editor without reintroducing a CodeMirror-class bundling dependency. CodeEditor now uses react-simple-code-editor + highlight.js (JSON), adapting the lightweight pattern already used in rich-text-web. It adds inline invalid-JSON feedback (a sticky error banner above the editor) and keeps the existing prop contract (value / onChange / readOnly / height) so both playground panels work unchanged.

Scope is intentionally limited to the editor component. Leo's earlier review findings on the already-merged custom-chart / playground rework are tracked separately in WC-3488.

• Added deps: react-simple-code-editor, highlight.js (tree-shaken core + JSON language only)
• New unit tests for CodeEditor (highlighting, JSON lint, readOnly, height, no-CodeMirror guard)

What should be covered while testing?

Put a chart (e.g. Line chart) on a page, set Show playground slot = Yes, drop the Chart playground widget into the slot, configure a Series, and run the app (F5). Click Toggle Editor to open the sidebar.

1. Syntax highlighting — the JSON in the editable "Custom settings" panel is colored (keys/strings/numbers), not plain text.
2. Invalid JSON feedback — break the JSON (e.g. delete a }); a red error banner appears at the top of the editor. Fix it → the banner disappears.
3. Live chart update — with the dropdown on Layout, set { "title": { "text": "TEST" } }; the chart title updates live.
4. Read-only panel — the lower "Settings from the Studio Pro" panel is not editable.
5. Keyboard — Tab inserts spaces inside the editor; Esc then Tab moves focus out.
6. No regression — no CodeMirror bundling error in the browser console; the playground loads.

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx	Replaces plain <textarea> with react-simple-code-editor + highlight.js; adds JSON lint banner
packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx	New test file — 8 tests covering highlighting, lint, readOnly, height, no-CodeMirror guard
packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss	New .widget-charts-playground-code-editor + error styles
packages/pluggableWidgets/chart-playground-web/CHANGELOG.md	Unreleased entry for restored editor
packages/pluggableWidgets/chart-playground-web/package.json	Adds highlight.js ^11.11.1 and react-simple-code-editor ^0.14.1
packages/pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx	dynamic() → dynamic.available() migration
packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx	Same dynamic.available() migration
openspec/changes/fix-restore-playground-editor/	OpenSpec artifacts (design, proposal, tasks)

Skipped (out of scope): pnpm-lock.yaml, dist/

---

Findings

⚠️ Low — jsonError runs on every render with no memoization

File: packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx line 38

Note: jsonError(props.value) calls JSON.parse synchronously on every render. For a playground where the user is typing live JSON (potentially hundreds of characters), this runs on every keystroke render cycle. Since the component is not wrapped in React.memo and value changes with every keystroke, this is fine for correctness — but wrapping the parse in useMemo would make the intent explicit and avoid a re-parse if a parent re-renders with the same value.

const error = useMemo(() => jsonError(props.value), [props.value]);

---

⚠️ Low — Hardcoded colour values in SCSS instead of Atlas UI tokens

File: packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss lines 34–36

Note: The error banner uses raw hex values (#c00, #fdecea, #f5c6cb). This is consistent with the pre-existing style in this file (#66afe9, #172c89), so it is not a regression, but Atlas UI variables (e.g. $brand-danger, $color-feedback-error-subtle) would make the banner theme-compatible if the atlas version supports them.

---

⚠️ Low — height prop test asserts on parentElement of textarea

File: packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx lines 50–55

Note: The test walks up to parentElement to find the element with the height style. react-simple-code-editor renders a two-level wrapper (<div style> → <div> → <textarea>), so the assertion currently relies on the internal DOM structure of the library. If the library changes its wrapping, the test would fail or silently pass on the wrong element. A more robust assertion would be to check the wrapper div by class:

const editorRoot = container.querySelector(".widget-charts-playground-code-editor > div") as HTMLElement;
expect(editorRoot.style.height).toBe("300px");

---

Positives

• Tree-shaken highlight.js import (highlight.js/lib/core + single language) keeps the bundle impact minimal — follows the same pattern as rich-text-web.
• All CSS classes are scoped under the .widget-charts-playground-* prefix — no Atlas core class overrides.
• The role="alert" on the error banner gives screen readers immediate feedback on JSON validity — good accessibility touch.
• maps-web test migration to dynamic.available() is a clean correctness fix — explicitly sets status: "available" rather than relying on whatever the unqualified dynamic() default was.
• CHANGELOG entry is user-facing language only (no implementation details) and correctly placed under [Unreleased].
• The "no CodeMirror" guard is a creative and durable regression test — asserting on package.json deps directly is far more reliable than a runtime check.