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

[iobuhov]

• Let's move the opensepc to "charts" package
• Make sure we don't touch maps

[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	Replaced <textarea> with react-simple-code-editor + highlight.js; added JSON lint banner
packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx	New unit test file — 8 cases covering highlighting, error/no-error states, readOnly, height, no-CodeMirror guard
packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss	Added .widget-charts-playground-code-editor and sticky error banner styles
packages/pluggableWidgets/chart-playground-web/package.json	Added highlight.js ^11.11.1 and react-simple-code-editor ^0.14.1 deps
packages/pluggableWidgets/chart-playground-web/CHANGELOG.md	Added Unreleased entry for restored editor
packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/*	OpenSpec design/proposal/tasks artifacts

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

⚠️ Note: gh pr checks was unavailable in this environment — CI status could not be verified. Confirm checks are green before merging.

---

Findings

⚠️ Low — Static CSS values baked into inline style

File: packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx line 316
Problem: The style prop on <Editor> bundles a dynamic height (which must stay inline) with two static values — width: "100%" and fontFamily: "monospace". Static values in inline styles violate the "no inline styles for static design" guideline.
Fix: Move the static values to SCSS; keep only the dynamic height inline:

// CodeEditor.tsx
style={{ height: props.height ?? "200px" }}

// Playground.scss — inside .widget-charts-playground-code-editor
.npm__react-simple-code-editor__root {
    width: 100%;
    font-family: monospace;
}

(or target .widget-charts-playground-code-editor and rely on inheritance — react-simple-code-editor inherits font-family from its container)

---

⚠️ Low — Hardcoded hex colors in error banner SCSS

File: packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss lines 33–40
Problem: #c00, #fdecea, #f5c6cb, and the hardcoded font-size: 12px are magic values. This developer-facing tool still benefits from CSS custom properties so themes (or dark-mode Mendix themes) can override them, and so future authors know why these values were chosen.
Fix: Prefer Atlas design tokens or CSS custom properties:

.widget-charts-playground-code-editor-error {
    position: sticky;
    top: 0;
    z-index: 1;
    // Atlas alert-danger tokens, or explicit custom properties:
    color: var(--color-danger-text, #c00);
    background: var(--color-danger-background, #fdecea);
    border-bottom: 1px solid var(--color-danger-border, #f5c6cb);
    font-size: 0.75rem;  // relative unit preferred over px
    font-family: monospace;
    padding: 4px 8px;
    white-space: pre-wrap;
}

If Atlas does not provide matching tokens here (this is a dev tool, not a user widget), at minimum add a comment explaining the values.

---

Positives

• Precisely scoped — only CodeEditor.tsx, its tests, package.json, and SCSS are touched; all adjacent files flagged in Leonardo's prior review are explicitly deferred to WC-3488
• highlight.js is imported tree-shaken (highlight.js/lib/core + languages/json only), matching the rich-text-web precedent and keeping bundle size small
• Both highlight() and jsonError() are wrapped in try/catch and degrade gracefully — the editor never crashes on bad input, matching the repo's defensive pattern
• role="alert" on the error banner gives screen readers a live-region announcement without extra aria-live boilerplate
• jsonError correctly treats empty string as non-error, avoiding false positives in an empty editor
• Test suite is comprehensive: highlighting token markup, valid/invalid/empty JSON, readOnly, height prop contract, and a package.json guard against CodeMirror re-introduction — all without any manual mock objects

[iobuhov]

LGTM