[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	New component using react-simple-code-editor + highlight.js with JSON lint banner
packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx	New unit tests for CodeEditor
packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss	Added styles for error banner inside code editor
packages/pluggableWidgets/chart-playground-web/CHANGELOG.md	Added unreleased entry for restored editor
packages/pluggableWidgets/chart-playground-web/package.json	Added highlight.js and react-simple-code-editor dependencies
openspec/changes/fix-restore-playground-editor/	OpenSpec design/proposal/tasks artifacts

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

Note: gh pr checks required elevated permissions and could not be run — CI status was not verified automatically.

---

Findings

⚠️ Low — Static style values mixed into dynamic style prop

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

Note: width: "100%" and fontFamily: "monospace" are static values bundled into the inline style prop alongside the dynamic height. The guidelines say to avoid inline styles for static design. The height must stay dynamic (prop-driven), but the static parts belong in SCSS.

/* Playground.scss — inside .widget-charts-playground-code-editor */
.rsce-editor-container { /* class emitted by react-simple-code-editor on its outer div */
    width: 100%;
    font-family: monospace;
}

Or more practically, override the container class that react-simple-code-editor renders and drop width / fontFamily from the style prop, keeping only height.

---

⚠️ Low — Hardcoded colour values in error-banner styles

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

Note: color: #c00, background: #fdecea, and border-bottom: 1px solid #f5c6cb are hardcoded hex values. If a custom Atlas theme swaps the error palette these won't follow. Prefer Atlas design tokens or at minimum named SCSS variables (e.g. $color-error-fg: #c00). Not blocking for a playground-only widget, but worth a follow-up.

---

⚠️ Low — console.warn left in production highlight path

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

Note: The catch block in highlight() calls console.warn(...). highlight.js with ignoreIllegals: true should essentially never throw on JSON, so this path is unreachable in practice — but if it does fire in production it will emit a warning to the browser console. Silent fallback to the raw code (the return code on line 21) is already the right behaviour; the console.warn can be removed.

---

Positives

• Tree-shaken highlight.js import (highlight.js/lib/core + single language) avoids pulling the full 1 MB bundle — same pattern as rich-text-web, consistent with repo conventions.
• role="alert" on the error banner gives screen readers live-region semantics at no extra cost.
• The regression-guard test (no CodeMirror in deps) is a creative, low-maintenance way to protect against the specific v6.3.0 bundling failure that prompted the fix.
• CHANGELOG entry is present, user-facing (behaviour not implementation), and placed under [Unreleased] correctly.
• Prop contract (value / onChange / readOnly / height) is preserved exactly, so existing playground panel consumers need zero changes.