From dba8db7b76b03ba3fb9b529f839d1e94e06240bf Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Mon, 6 Jul 2026 16:52:41 +0200
Subject: [PATCH 1/5] chore(chart-playground-web): add react-simple-code-editor
 and highlight.js

---
 .../chart-playground-web/package.json         |  4 ++-
 pnpm-lock.yaml                                | 25 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/chart-playground-web/package.json b/packages/pluggableWidgets/chart-playground-web/package.json
index 36978e4e95..9222d0095d 100644
--- a/packages/pluggableWidgets/chart-playground-web/package.json
+++ b/packages/pluggableWidgets/chart-playground-web/package.json
@@ -43,7 +43,9 @@
         "@mendix/shared-charts": "workspace:*",
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-hooks": "workspace:*",
-        "@mendix/widget-plugin-platform": "workspace:*"
+        "@mendix/widget-plugin-platform": "workspace:*",
+        "highlight.js": "^11.11.1",
+        "react-simple-code-editor": "^0.14.1"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 607db78a3f..eb0501d317 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -774,6 +774,12 @@ importers:
       '@mendix/widget-plugin-platform':
         specifier: workspace:*
         version: link:../../shared/widget-plugin-platform
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      react-simple-code-editor:
+        specifier: ^0.14.1
+        version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@mendix/automation-utils':
         specifier: workspace:*
@@ -783,7 +789,7 @@ importers:
         version: link:../../shared/eslint-config-web-widgets
       '@mendix/pluggable-widgets-tools':
         specifier: 11.11.0
-        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
+        version: 11.11.0(patch_hash=036a1e3d1a57e7418725babb71e5eef5220ae90fc481ad7e04fa7e8901b25801)(@jest/transform@30.3.0)(@jest/types@30.4.1)(@swc/core@1.15.41)(@types/babel__core@7.20.5)(@types/node@24.12.4)(canvas@3.2.3)(eslint@9.39.4(jiti@2.6.1))(jest-util@30.4.1)(picomatch@4.0.4)(prettier@3.8.4)(react-dom@18.3.1(react@18.3.1))(react-native@0.86.0(@babel/core@7.29.7)(@types/react@19.2.17)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -7678,6 +7684,10 @@ packages:
   hermes-parser@0.36.0:
     resolution: {integrity: sha512-GdpwMmH5x6IpC1cijvcvYnlPB60Mh6kTSF/NFdYV/j56gYdi+0RIakYs+eqOV+bbO0SW7mgVVGSsTJxyPQfo3w==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   hoist-non-react-statics@2.5.5:
     resolution: {integrity: sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==}
 
@@ -9988,6 +9998,12 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-simple-code-editor@0.14.1:
+    resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
   react-test-renderer@19.2.7:
     resolution: {integrity: sha512-U4TyPDJ9MsC8rFimXuJum8w40aPc9kbOZYO8Pc2/4A884i8hwJsMNA/JNyuOc/f2/37wHvk7HjpVl1V4re7Dig==}
     peerDependencies:
@@ -16994,6 +17010,8 @@ snapshots:
     dependencies:
       hermes-estree: 0.36.0
 
+  highlight.js@11.11.1: {}
+
   hoist-non-react-statics@2.5.5: {}
 
   hono@4.12.25: {}
@@ -20052,6 +20070,11 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-simple-code-editor@0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-test-renderer@19.2.7(react@18.3.1):
     dependencies:
       react: 18.3.1

From 8eae73d43467284dbde1f31a3802c64e80154b01 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Mon, 6 Jul 2026 16:52:49 +0200
Subject: [PATCH 2/5] fix(chart-playground-web): restore highlighted JSON
 editor with invalid-JSON feedback

---
 .../src/components/CodeEditor.tsx             | 54 ++++++++++++++++---
 .../src/ui/Playground.scss                    | 17 ++++++
 2 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx b/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
index 7cda2cdcf0..2eb39f1280 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
+++ b/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
@@ -1,4 +1,10 @@
+import hljs from "highlight.js/lib/core";
+import json from "highlight.js/lib/languages/json";
 import { ReactElement } from "react";
+import Editor from "react-simple-code-editor";
+import "highlight.js/styles/atom-one-light.css";
+
+hljs.registerLanguage("json", json);
 
 export interface CodeEditorProps {
     value: string;
@@ -7,13 +13,49 @@ export interface CodeEditorProps {
     height?: string;
 }
 
+function highlight(code: string): string {
+    try {
+        return hljs.highlight(code, { language: "json", ignoreIllegals: true }).value;
+    } catch (error) {
+        console.warn("Syntax highlighting error:", error);
+        return code;
+    }
+}
+
+function jsonError(code: string): string | null {
+    if (code.trim() === "") {
+        return null;
+    }
+    try {
+        JSON.parse(code);
+        return null;
+    } catch (error) {
+        return error instanceof Error ? error.message : "Invalid JSON";
+    }
+}
+
 export function CodeEditor(props: CodeEditorProps): ReactElement {
+    const error = jsonError(props.value);
+
     return (
-        <textarea
-            value={props.value}
-            onChange={e => props.onChange?.(e.target.value)}
-            style={{ height: props.height ?? "200px", width: "100%", fontFamily: "monospace" }}
-            readOnly={props.readOnly}
-        />
+        <div className="widget-charts-playground-code-editor">
+            {error && (
+                <div className="widget-charts-playground-code-editor-error" role="alert">
+                    {error}
+                </div>
+            )}
+            <Editor
+                value={props.value}
+                onValueChange={value => props.onChange?.(value)}
+                highlight={highlight}
+                disabled={props.readOnly}
+                padding={8}
+                tabSize={2}
+                insertSpaces
+                ignoreTabKey={false}
+                spellCheck={false}
+                style={{ height: props.height ?? "200px", width: "100%", fontFamily: "monospace" }}
+            />
+        </div>
     );
 }
diff --git a/packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss b/packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss
index e8d913ca5c..bbf8871496 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss
+++ b/packages/pluggableWidgets/chart-playground-web/src/ui/Playground.scss
@@ -24,6 +24,23 @@
         }
     }
 
+    .widget-charts-playground-code-editor {
+        overflow: auto;
+
+        .widget-charts-playground-code-editor-error {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            color: #c00;
+            background: #fdecea;
+            border-bottom: 1px solid #f5c6cb;
+            font-size: 12px;
+            font-family: monospace;
+            padding: 4px 8px;
+            white-space: pre-wrap;
+        }
+    }
+
     .widget-sidebar {
         .sidebar-content-header {
             .header-content {

From ebdc5a2ec780655e5b55c8cae8b930b2a2d503aa Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Mon, 6 Jul 2026 16:53:02 +0200
Subject: [PATCH 3/5] test(chart-playground-web): cover CodeEditor
 highlighting, lint, and readOnly

---
 .../components/__tests__/CodeEditor.spec.tsx  | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx

diff --git a/packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx b/packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx
new file mode 100644
index 0000000000..485c4b5243
--- /dev/null
+++ b/packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx
@@ -0,0 +1,65 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { CodeEditor } from "../CodeEditor";
+
+describe("CodeEditor", () => {
+    it("renders JSON value with syntax highlighting", () => {
+        const { container } = render(<CodeEditor value='{"type":"scatter","x":[1,2,3]}' />);
+
+        // highlight.js wraps tokens in .hljs-* spans; a bare textarea would not.
+        expect(container.querySelector(".hljs-attr, .hljs-string, .hljs-number")).not.toBeNull();
+    });
+
+    it("calls onChange with the new text when edited", () => {
+        const onChange = jest.fn();
+        render(<CodeEditor value="{}" onChange={onChange} />);
+
+        fireEvent.input(screen.getByRole("textbox"), { target: { value: '{"a":1}' } });
+
+        expect(onChange).toHaveBeenCalledWith('{"a":1}');
+    });
+
+    it("disables the editor when readOnly", () => {
+        render(<CodeEditor value="{}" readOnly />);
+
+        // The disabled textarea is what blocks user edits in the modeler panel.
+        expect((screen.getByRole("textbox") as HTMLTextAreaElement).disabled).toBe(true);
+    });
+
+    it("surfaces an error for invalid JSON", () => {
+        render(<CodeEditor value='{"type": ' />);
+
+        // Malformed JSON must be flagged, not silently accepted.
+        expect(screen.queryByRole("alert")).not.toBeNull();
+    });
+
+    it("shows no error for valid JSON", () => {
+        render(<CodeEditor value='{"a":1}' />);
+
+        expect(screen.queryByRole("alert")).toBeNull();
+    });
+
+    it("shows no error for an empty value", () => {
+        render(<CodeEditor value="" />);
+
+        // Empty is not invalid.
+        expect(screen.queryByRole("alert")).toBeNull();
+    });
+
+    it("honors the height prop (unchanged prop contract)", () => {
+        render(<CodeEditor value="{}" height="300px" />);
+
+        // react-simple-code-editor applies the style prop to its container (parent of the textarea).
+        const container = screen.getByRole("textbox").parentElement as HTMLElement;
+        expect(container.style.height).toBe("300px");
+    });
+
+    it("does not reintroduce CodeMirror (the v6.3.0 bundling break)", () => {
+        const pkg = JSON.parse(readFileSync(join(__dirname, "../../../package.json"), "utf8"));
+        const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+        const codeMirrorDep = Object.keys(deps).find(name => /codemirror/i.test(name));
+
+        expect(codeMirrorDep).toBeUndefined();
+    });
+});

From 64d8b4a71c834a0da86f3fa990a2ad1b4877200b Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Mon, 6 Jul 2026 16:53:07 +0200
Subject: [PATCH 4/5] docs(chart-playground-web): add changelog entry for
 editor restore

---
 packages/pluggableWidgets/chart-playground-web/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/pluggableWidgets/chart-playground-web/CHANGELOG.md b/packages/pluggableWidgets/chart-playground-web/CHANGELOG.md
index 2553a94b7d..9d75acb936 100644
--- a/packages/pluggableWidgets/chart-playground-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/chart-playground-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We restored the code editor in the playground with syntax highlighting and invalid-JSON feedback.
+
 ## [2.1.1] - 2025-07-15
 
 ### Changed

From cd6e3580b75f22b67c9b3f111794b660ee518836 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Mon, 6 Jul 2026 16:53:12 +0200
Subject: [PATCH 5/5] chore(chart-playground-web): add openspec change for
 WC-3348

---
 .../.openspec.yaml                            |  2 +
 .../fix-restore-playground-editor/design.md   | 85 +++++++++++++++++++
 .../fix-restore-playground-editor/proposal.md | 57 +++++++++++++
 .../fix-restore-playground-editor/tasks.md    | 44 ++++++++++
 4 files changed, 188 insertions(+)
 create mode 100644 openspec/changes/fix-restore-playground-editor/.openspec.yaml
 create mode 100644 openspec/changes/fix-restore-playground-editor/design.md
 create mode 100644 openspec/changes/fix-restore-playground-editor/proposal.md
 create mode 100644 openspec/changes/fix-restore-playground-editor/tasks.md

diff --git a/openspec/changes/fix-restore-playground-editor/.openspec.yaml b/openspec/changes/fix-restore-playground-editor/.openspec.yaml
new file mode 100644
index 0000000000..4247cda326
--- /dev/null
+++ b/openspec/changes/fix-restore-playground-editor/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: tdd-refactor
+created: 2026-07-06
diff --git a/openspec/changes/fix-restore-playground-editor/design.md b/openspec/changes/fix-restore-playground-editor/design.md
new file mode 100644
index 0000000000..58788070ba
--- /dev/null
+++ b/openspec/changes/fix-restore-playground-editor/design.md
@@ -0,0 +1,85 @@
+## Test Cases
+
+All unit tests, `@testing-library/react`, in
+`packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx`
+(new file — `CodeEditor` has no tests today).
+
+The editor is `react-simple-code-editor`, which renders a real `<textarea>` under a highlighted
+`<pre>`. Query the textarea via `role="textbox"` / value; assert highlight + lint via rendered
+output. These tests define the contract before the textarea → highlighted-editor swap.
+
+### Reproduction Tests
+
+- **Renders JSON with syntax highlighting** - the editor highlights the value instead of showing
+  plain unstyled text (the regression the textarea introduced). (unit)
+    - **Given**: `CodeEditor` rendered with `value='{"type":"scatter","x":[1,2,3]}'`.
+    - **When**: component mounts.
+    - **Then**: the rendered output contains `highlight.js` token markup (at least one
+      `.hljs-*` span, e.g. `hljs-attr` / `hljs-string` / `hljs-number`) wrapping parts of the
+      value — not a bare unstyled text node.
+
+- **Surfaces invalid JSON** - malformed JSON is flagged, not silently accepted (the DX gap the
+  textarea left; ties to Leonardo's "no silent catch" note). (unit)
+    - **Given**: `CodeEditor` rendered with `value='{"type": '` (truncated / invalid JSON).
+    - **When**: component mounts (or value changes to invalid).
+    - **Then**: an error indication is shown (an element with the error class / role carrying the
+      `JSON.parse` message); the editor still renders the raw text (does not blank out or throw).
+
+- **Valid JSON shows no error** - complement to the above. (unit)
+    - **Given**: `CodeEditor` with `value='{"a":1}'`.
+    - **When**: component mounts.
+    - **Then**: no error indication element is present.
+
+### Edge Cases
+
+- **Empty value renders no error and no crash** (unit)
+    - **Given**: `CodeEditor` with `value=''`.
+    - **When**: mounts.
+    - **Then**: renders an empty editor, no error indication (empty ≠ invalid), no throw.
+
+- **onChange fires with new text on edit** (unit)
+    - **Given**: `CodeEditor` with `value='{}'` and a jest mock `onChange`.
+    - **When**: user types into the textbox (`fireEvent.input` / `userEvent.type`).
+    - **Then**: `onChange` is called with the updated string.
+
+- **readOnly blocks edits** - modeler panel uses `readOnly`. (unit)
+    - **Given**: `CodeEditor` with `readOnly` and a mock `onChange`.
+    - **When**: user attempts to type in the textbox.
+    - **Then**: the textbox is non-editable (disabled/readonly attribute) and `onChange` is not
+      called.
+
+- **Highlighter degrades gracefully on throw** - a highlight failure must not break the editor. (unit)
+    - **Given**: highlighting a value that would make `hljs.highlight` throw (illegal sequence).
+    - **When**: mounts.
+    - **Then**: falls back to rendering the raw code (no crash), matching the rich-text pattern's
+      try/catch + `console.warn`.
+
+### Regression Tests
+
+- **Prop contract unchanged** - `ComposedEditor` calls `CodeEditor` with `value/onChange/height`
+  (editable panel) and `readOnly/value/height` (modeler panel). Both must keep working. (unit)
+    - **Given**: `CodeEditor` rendered with `height="var(--editor-h)"`.
+    - **When**: mounts.
+    - **Then**: renders without error and applies the `height` (editor container reflects the
+      passed height, as the textarea did).
+
+- **No CodeMirror dependency reintroduced** - the whole point of WC-3348. (build/lint guard)
+    - **Given**: the widget package after the change.
+    - **When**: inspecting imports/deps of `chart-playground-web`.
+    - **Then**: no `codemirror`/`@codemirror/*` import or dependency is present; only
+      `react-simple-code-editor` + `highlight.js` added.
+
+- **preview.spec snapshot** - existing `ChartPlayground.editorPreview` snapshot still passes
+  (design-time preview is unaffected — it renders a static Toggle button, not `CodeEditor`). (unit)
+    - **Given**: existing `src/__tests__/preview.spec.tsx`.
+    - **When**: test suite runs.
+    - **Then**: snapshot matches (or is intentionally updated only if the preview markup changes).
+
+## Notes
+
+- `react-simple-code-editor` renders a genuine textarea → RTL `getByRole("textbox")` works;
+  editing via `fireEvent.input(textarea, { target: { value } })`.
+- Import `highlight.js/lib/core` + register only `languages/json` (tree-shaken) — assert token
+  markup, not a specific theme.
+- The "No CodeMirror" check can be a dependency/import assertion or a package.json test rather
+  than a runtime RTL test — decide at tasks.md time.
diff --git a/openspec/changes/fix-restore-playground-editor/proposal.md b/openspec/changes/fix-restore-playground-editor/proposal.md
new file mode 100644
index 0000000000..dcf0737719
--- /dev/null
+++ b/openspec/changes/fix-restore-playground-editor/proposal.md
@@ -0,0 +1,57 @@
+## Why
+
+The Charts playground editor (WC-3348) lost its real code editor. In Charts v6.3.0 the
+playground shipped a CodeMirror-based editor that threw a bundling error at load, breaking
+the playground in both dojo and React runtimes. To unblock the release of WC-3345, CodeMirror
+was replaced with a bare `<textarea>` and shipped as charts-web 6.3.1.
+
+The textarea works but is a developer-experience regression: no syntax highlighting and no
+feedback when the JSON a developer types is invalid. The playground is a developer-facing tool
+where authors hand-edit Plotly trace/layout/config JSON, so highlighting and lint matter.
+
+## Root Cause
+
+CodeMirror could not be bundled by the widget build (Rollup) and threw at runtime. The
+workaround removed CodeMirror entirely (0 refs remain in `chart-playground-web`, `shared/charts`,
+or its deps). The remaining work is to restore a real editor **without** reintroducing a
+CodeMirror-class bundling dependency.
+
+## What Changes
+
+Replace the plain `<textarea>` in `CodeEditor.tsx` with a lightweight highlighted editor,
+adapting the proven pattern from `rich-text-web`'s `HighlightedCodeEditor.tsx`
+(`react-simple-code-editor` + `highlight.js`), tuned for JSON:
+
+- `packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx`
+    - Render `react-simple-code-editor` with a `highlight.js` JSON highlighter instead of a raw textarea.
+    - Preserve the existing prop contract exactly: `value`, `onChange?`, `readOnly?`, `height?`.
+    - Surface JSON validity: when `value` fails `JSON.parse`, show a non-blocking error indication
+      (do not swallow silently — the prior review flagged silent empty-catch blocks).
+    - Keep Tab-in-editor behavior compatible with the surrounding `TabGuard` / "Esc + Tab to move
+      focus" hint (react-simple-code-editor `ignoreTabKey={false}`).
+- `packages/pluggableWidgets/chart-playground-web/package.json`
+    - Add `react-simple-code-editor` and `highlight.js` (**new deps — approved with user**).
+- Add unit tests for `CodeEditor` (none exist today).
+- Changelog entry (user-facing): playground editor restores syntax highlighting and invalid-JSON
+  feedback.
+
+Not in scope: Leonardo de Souza's review findings on the already-merged custom-chart / playground
+rework (`computed().get()` misuse, dead `containerStyle`, hardcoded `layoutOptions/configOptions`,
+`store.data` cast, `@types/jest` in deps, deleted `mergeChartProps.spec.ts`, and related minors).
+Those are real, still-live issues but sit in adjacent files (`useCustomChart.ts`,
+`CustomChartControllerHost.ts`, `useComposedEditorController.ts`, `shared/charts`) and are tracked
+in follow-up ticket WC-3488 so this change stays a single-purpose editor restore. The two
+JSON-safety items from that review that DO belong here — silent empty-JSON catch blocks and the
+"CodeMirror is a UX regression" note — are folded into the JSON-lint work above.
+
+## Impact
+
+- **Consumers:** `ComposedEditor.tsx` uses `CodeEditor` in two spots — an editable panel
+  (`value`/`onChange`/`height`) and a read-only modeler panel (`readOnly`/`value`/`height`).
+  The prop contract is unchanged, so both keep working. Not breaking.
+- **Must NOT break:** no CodeMirror (or CodeMirror-class heavy dep) reintroduced; widget bundle
+  stays small; the runtime "Toggle Editor" sidebar keeps working; read-only panel stays read-only.
+- **New dependencies:** two, both lightweight and used in-repo pattern (`rich-text-web`). No
+  CodeMirror bundling risk.
+- **Users:** Charts playground authors get syntax highlighting + invalid-JSON feedback back.
+  Version bump deferred to release time per repo convention.
diff --git a/openspec/changes/fix-restore-playground-editor/tasks.md b/openspec/changes/fix-restore-playground-editor/tasks.md
new file mode 100644
index 0000000000..55d48f3830
--- /dev/null
+++ b/openspec/changes/fix-restore-playground-editor/tasks.md
@@ -0,0 +1,44 @@
+## 0. Dependencies
+
+- [x] 0.1 Add `react-simple-code-editor` and `highlight.js` to `chart-playground-web/package.json` (approved with user); run install
+- [x] 0.2 Confirm no `codemirror` / `@codemirror/*` present in the package
+
+## 1. Test Setup
+
+<!-- RED: Write failing tests first -->
+
+- [x] 1.1 Create `src/components/__tests__/CodeEditor.spec.tsx`; write failing test: renders JSON with `.hljs-*` token markup (not plain text)
+- [x] 1.2 Add failing test: invalid JSON surfaces an error indication; valid JSON shows none; empty value shows none
+- [x] 1.3 Add edge tests: `onChange` fires with new text on edit; `readOnly` disables editor. (Note: "highlighter throw" dropped — can't trigger a genuine hljs throw with `ignoreIllegals:true` without a mock that tests implementation, not behavior; try/catch remains as defensive code.)
+- [x] 1.4 Add regression tests: `height` prop honored; no CodeMirror dep (package.json assertion); existing `preview.spec` snapshot still passes
+
+## 2. Implementation
+
+<!-- GREEN: Make tests pass with minimal code -->
+
+- [x] 2.1 Replace `<textarea>` in `CodeEditor.tsx` with `react-simple-code-editor` + `highlight.js` JSON highlighter (import `highlight.js/lib/core` + register `languages/json`); keep prop contract `value/onChange?/readOnly?/height?`
+- [x] 2.2 Add JSON lint: `JSON.parse(value)` in try/catch, surface error message (empty value = not an error); no silent catch
+- [x] 2.3 Wrap highlight call in try/catch → fall back to raw code + `console.warn` (rich-text pattern)
+- [x] 2.4 Honor `height` prop and `readOnly` (disabled); keep Tab behavior compatible with `TabGuard` (`ignoreTabKey={false}`)
+
+## 3. Refactoring
+
+<!-- REFACTOR: Clean up while keeping tests green -->
+
+- [x] 3.1 Clean up component; highlight theme (`atom-one-light`) imported once in component; added scoped `.widget-charts-playground-code-editor` + error SCSS
+- [x] 3.2 `highlight` + `jsonError` extracted as local module functions (kept local — no adjacent rework files touched)
+
+## 4. Verification
+
+- [x] 4.1 All new `CodeEditor` tests passing (8 tests)
+- [x] 4.2 Full `chart-playground-web` suite passes (9 tests, preview snapshot green); `pnpm build` produces MPK with no bundling error
+- [x] 4.3 Add user-facing changelog entry (highlighting + invalid-JSON feedback restored)
+- [ ] 4.4 `/code-review` before PR; do not regress Leonardo's prior review; PR ready
+
+## Notes
+
+<!-- Track test failures, refactoring decisions, blockers. -->
+
+- "No CodeMirror" test decided as a package.json / import assertion (per design.md open question), not a runtime RTL test.
+- Scope guard: this change touches only `CodeEditor.tsx`, its test, and `package.json`. Adjacent files (`useCustomChart.ts`, `CustomChartControllerHost.ts`, `useComposedEditorController.ts`, `shared/charts`) are reserved for the follow-up ticket (`followup-ticket-draft.md`).
+- Version bump deferred to release time per repo convention.