[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 <textarea> with react-simple-code-editor + highlight.js; adds JSON lint banner
packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx	New unit tests (8 tests) for the CodeEditor component
packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss	Adds SCSS for the code editor wrapper and error banner
packages/pluggableWidgets/chart-playground-web/package.json	Adds highlight.js and react-simple-code-editor dependencies
packages/pluggableWidgets/chart-playground-web/CHANGELOG.md	Adds [Unreleased] entry for the restored editor
openspec/changes/fix-restore-playground-editor/	OpenSpec artifacts (proposal, design, tasks)

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

CI checks: could not be fetched in this environment — verify green before merging.

---

Findings

⚠️ Low — Hardcoded hex colours in error banner

File: packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss lines 34–36
Note: #c00, #fdecea, and #f5c6cb are hardcoded. They won't respond to Atlas dark-mode themes. Since this is a developer-facing playground the practical impact is low, but Atlas colour variables (or at least CSS custom properties) would be more consistent with the frontend guidelines.

---

⚠️ Low — hljs theme hardcoded to atom-one-light

File: packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx line 5
Note: import "highlight.js/styles/atom-one-light.css" is always a light theme. It won't adapt if the Mendix app uses a dark Atlas theme. Acceptable for a dev tool, but worth a follow-up if dark-mode support is ever needed.

---

⚠️ Low — Height test couples to react-simple-code-editor internal DOM layout

File: packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx lines 53–55
Note: The assertion screen.getByRole("textbox").parentElement.style.height works today because react-simple-code-editor puts the <textarea> as a direct child of its root <div>. If the library changes its internal structure, this test will silently break without any change to CodeEditor. A more resilient approach would be to give the outer wrapper a data-testid:

// In CodeEditor.tsx
<div className="widget-charts-playground-code-editor" data-testid="code-editor">

// In the test
expect(screen.getByTestId("code-editor").querySelector('[style]')?.style.height).toBe("300px");

Not blocking — the current test is correct for the library's current version.

---

⚠️ Low — react-simple-code-editor peer dep upper bound excludes React 19

File: packages/pluggableWidgets/chart-playground-web/package.json
Note: The published react-simple-code-editor@0.14.1 declares peerDependencies: react: ">=18.0.0 <19.0.0". This will produce a peer dependency conflict when the monorepo upgrades to React 19. Low risk now, but worth checking the library's changelog at that time.

---

Positives

• Prop contract (value, onChange, readOnly, height) is preserved exactly — ComposedEditor's two call sites need zero changes.
• Tree-shaken hljs import (highlight.js/lib/core + languages/json only) keeps the bundle lean; follows the same pattern as rich-text-web.
• Module-level hljs.registerLanguage("json", json) avoids repeated re-registration on every render — correct singleton usage.
• role="alert" on the error banner provides immediate screen-reader feedback for invalid JSON; error appears and disappears reactively without blocking the editor.
• The "no CodeMirror" test is a neat guard against the exact regression that caused WC-3348 — tests the package.json directly, which is more reliable than a runtime import check.
• try/catch around hljs.highlight with console.warn fallback matches the established rich-text-web defensive pattern.
• CHANGELOG entry is user-facing and describes behavior, not implementation details.