From 08d47c20cd2a783dbeb3d145242de3698cae40e5 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/9] chore(chart-playground-web): add react-simple-code-editor
 and highlight.js

---
 .../chart-playground-web/package.json         |  4 +++-
 pnpm-lock.yaml                                | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

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 fd029ea4a0..19a0283227 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -762,6 +762,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:*
@@ -7504,6 +7510,10 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   hono@4.12.27:
     resolution: {integrity: sha512-1yrb/+w6HWQJrUCLkJ2IF5jNIPvvFkblV5RNOYl6bV+OA6p9GLcMpHFFGTosSvHvcAUibuUukRqhlYI4z32C7Q==}
     engines: {node: '>=16.9.0'}
@@ -9590,6 +9600,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:
@@ -16295,6 +16311,8 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  highlight.js@11.11.1: {}
+
   hono@4.12.27: {}
 
   hosted-git-info@9.0.3:
@@ -18963,6 +18981,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 543449c08269f2354bf74f46d6d2076e81be434e 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/9] 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 1fdc0ba4c21d6466f67382f25e623d50d2821fbd 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/9] 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 04895935e953be4d964187203afb231722d905ba 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/9] 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 034eb00babda4f095f29f3101c857026fefc2df7 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/9] 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.

From b4934c39b03439dcf1e6c9cb9b51533375813735 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Tue, 14 Jul 2026 10:53:53 +0200
Subject: [PATCH 6/9] chore(chart-playground-web): move openspec change to
 package dir; revert maps-web test fix

---
 .../changes/fix-restore-playground-editor/.openspec.yaml  | 0
 .../changes/fix-restore-playground-editor/design.md       | 0
 .../changes/fix-restore-playground-editor/proposal.md     | 0
 .../changes/fix-restore-playground-editor/tasks.md        | 0
 .../chart-playground-web/openspec/config.yaml             | 1 +
 .../pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx | 8 ++++----
 .../maps-web/src/components/__tests__/LeafletMap.spec.tsx | 8 ++++----
 7 files changed, 9 insertions(+), 8 deletions(-)
 rename {openspec => packages/pluggableWidgets/chart-playground-web/openspec}/changes/fix-restore-playground-editor/.openspec.yaml (100%)
 rename {openspec => packages/pluggableWidgets/chart-playground-web/openspec}/changes/fix-restore-playground-editor/design.md (100%)
 rename {openspec => packages/pluggableWidgets/chart-playground-web/openspec}/changes/fix-restore-playground-editor/proposal.md (100%)
 rename {openspec => packages/pluggableWidgets/chart-playground-web/openspec}/changes/fix-restore-playground-editor/tasks.md (100%)
 create mode 100644 packages/pluggableWidgets/chart-playground-web/openspec/config.yaml

diff --git a/openspec/changes/fix-restore-playground-editor/.openspec.yaml b/packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/.openspec.yaml
similarity index 100%
rename from openspec/changes/fix-restore-playground-editor/.openspec.yaml
rename to packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/.openspec.yaml
diff --git a/openspec/changes/fix-restore-playground-editor/design.md b/packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/design.md
similarity index 100%
rename from openspec/changes/fix-restore-playground-editor/design.md
rename to packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/design.md
diff --git a/openspec/changes/fix-restore-playground-editor/proposal.md b/packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/proposal.md
similarity index 100%
rename from openspec/changes/fix-restore-playground-editor/proposal.md
rename to packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/proposal.md
diff --git a/openspec/changes/fix-restore-playground-editor/tasks.md b/packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/tasks.md
similarity index 100%
rename from openspec/changes/fix-restore-playground-editor/tasks.md
rename to packages/pluggableWidgets/chart-playground-web/openspec/changes/fix-restore-playground-editor/tasks.md
diff --git a/packages/pluggableWidgets/chart-playground-web/openspec/config.yaml b/packages/pluggableWidgets/chart-playground-web/openspec/config.yaml
new file mode 100644
index 0000000000..bd4abbf66f
--- /dev/null
+++ b/packages/pluggableWidgets/chart-playground-web/openspec/config.yaml
@@ -0,0 +1 @@
+schema: tdd-refactor
diff --git a/packages/pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx b/packages/pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx
index 4b6a5c1556..2562926f27 100644
--- a/packages/pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx
+++ b/packages/pluggableWidgets/maps-web/src/__tests__/Maps.spec.tsx
@@ -9,10 +9,10 @@ describe("Maps", () => {
     function staticMarker(latitude: string, longitude: string): MarkersType {
         return {
             locationType: "latlng",
-            latitude: dynamic.available(latitude),
-            longitude: dynamic.available(longitude),
-            address: dynamic.available(""),
-            title: dynamic.available("Static marker"),
+            latitude: dynamic(latitude),
+            longitude: dynamic(longitude),
+            address: dynamic(""),
+            title: dynamic("Static marker"),
             markerStyle: "default",
             customMarker: undefined,
             onClick: undefined
diff --git a/packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx b/packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx
index 9a3eb1e3b1..88499070bd 100644
--- a/packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx
+++ b/packages/pluggableWidgets/maps-web/src/components/__tests__/LeafletMap.spec.tsx
@@ -13,10 +13,10 @@ function staticMarker(
 ): MarkersType {
     return {
         locationType: "latlng",
-        latitude: dynamic.available(latitude),
-        longitude: dynamic.available(longitude),
-        address: dynamic.available(""),
-        title: dynamic.available(opts?.title ?? ""),
+        latitude: dynamic(latitude),
+        longitude: dynamic(longitude),
+        address: dynamic(""),
+        title: dynamic(opts?.title ?? ""),
         markerStyle: opts?.customMarker ? "image" : "default",
         customMarker: opts?.customMarker ? ({ value: { uri: opts.customMarker } } as any) : undefined,
         onClick: opts?.onClick ? ({ canExecute: true, execute: opts.onClick } as any) : undefined

From ec3d516702cd08ff4c5523d9a7c93e25a431c940 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Tue, 21 Jul 2026 18:05:18 +0200
Subject: [PATCH 7/9] fix(chart-playground-web): keep editor scroll and caret
 aligned with visible   text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  The Editor's own root had a fixed height + overflow, which let the
  invisible textarea and the highlighted <pre> it overlays drift out of
  sync once content overflowed — causing unreachable scroll, misplaced
  caret, and wrong text selection. Move the fixed height/scroll to the
  outer wrapper and let the Editor's root grow with its content instead.
---
 .../src/components/CodeEditor.tsx             | 38 +++++++++++-
 .../components/__tests__/CodeEditor.spec.tsx  | 58 +++++++++++++++++--
 2 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx b/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
index 2eb39f1280..ae372404ac 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
+++ b/packages/pluggableWidgets/chart-playground-web/src/components/CodeEditor.tsx
@@ -1,6 +1,6 @@
 import hljs from "highlight.js/lib/core";
 import json from "highlight.js/lib/languages/json";
-import { ReactElement } from "react";
+import { ClipboardEvent, ReactElement, useRef } from "react";
 import Editor from "react-simple-code-editor";
 import "highlight.js/styles/atom-one-light.css";
 
@@ -36,9 +36,37 @@ function jsonError(code: string): string | null {
 
 export function CodeEditor(props: CodeEditorProps): ReactElement {
     const error = jsonError(props.value);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const onPaste = (event: ClipboardEvent<HTMLDivElement>): void => {
+        const textarea = event.target;
+        if (!(textarea instanceof HTMLTextAreaElement)) {
+            return;
+        }
+        const replacesWholeValue = textarea.selectionStart === 0 && textarea.selectionEnd === textarea.value.length;
+        if (!replacesWholeValue) {
+            return;
+        }
+        // Pasting over the entire value lands the caret (and scroll position) at the end of
+        // the pasted text, same as any textarea. For a config the user is about to read
+        // top-to-bottom, jump back to the start instead.
+        requestAnimationFrame(() => {
+            textarea.setSelectionRange(0, 0);
+            textarea.scrollTop = 0;
+            const wrapper = containerRef.current;
+            if (wrapper) {
+                wrapper.scrollTop = 0;
+            }
+        });
+    };
 
     return (
-        <div className="widget-charts-playground-code-editor">
+        <div
+            ref={containerRef}
+            className="widget-charts-playground-code-editor"
+            style={{ height: props.height ?? "200px" }}
+            onPaste={onPaste}
+        >
             {error && (
                 <div className="widget-charts-playground-code-editor-error" role="alert">
                     {error}
@@ -54,7 +82,11 @@ export function CodeEditor(props: CodeEditorProps): ReactElement {
                 insertSpaces
                 ignoreTabKey={false}
                 spellCheck={false}
-                style={{ height: props.height ?? "200px", width: "100%", fontFamily: "monospace" }}
+                style={{
+                    width: "100%",
+                    minHeight: "100%",
+                    fontFamily: "monospace"
+                }}
             />
         </div>
     );
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
index 485c4b5243..401a8afece 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx
+++ b/packages/pluggableWidgets/chart-playground-web/src/components/__tests__/CodeEditor.spec.tsx
@@ -48,11 +48,61 @@ describe("CodeEditor", () => {
     });
 
     it("honors the height prop (unchanged prop contract)", () => {
-        render(<CodeEditor value="{}" height="300px" />);
+        const { container } = render(<CodeEditor value="{}" height="300px" />);
+
+        // Height is applied to the scrollable wrapper, not react-simple-code-editor's own
+        // root — that root must grow with content so its overlaid textarea and highlighted
+        // <pre> stay pixel-aligned (a fixed height there desyncs cursor/selection from the
+        // visible text once content overflows).
+        const wrapper = container.querySelector(".widget-charts-playground-code-editor") as HTMLElement;
+        expect(wrapper.style.height).toBe("300px");
+    });
+
+    it("moves the caret and scroll position to the start after a paste that replaces the whole value", () => {
+        render(<CodeEditor value='{"a":1}' onChange={jest.fn()} />);
+        const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+        // Selecting everything before pasting is what native textareas treat as
+        // "replace the whole value".
+        textarea.setSelectionRange(0, textarea.value.length);
+        let rafCallback: (() => void) | undefined;
+        const rafSpy = jest.spyOn(window, "requestAnimationFrame").mockImplementation(cb => {
+            rafCallback = cb as () => void;
+            return 0;
+        });
+
+        fireEvent.paste(textarea);
+
+        // The paste handler reads the pre-paste selection and schedules a correction for
+        // after the browser applies the actual insertion — simulate that insertion now,
+        // before flushing the scheduled callback.
+        textarea.value = '{\n  "a": 1,\n  "b": 2\n}';
+        textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+        textarea.scrollTop = 40;
+
+        rafCallback?.();
+
+        expect(textarea.selectionStart).toBe(0);
+        expect(textarea.selectionEnd).toBe(0);
+        expect(textarea.scrollTop).toBe(0);
+
+        rafSpy.mockRestore();
+    });
+
+    it("leaves the caret where the user pasted for a partial (non-whole-value) paste", () => {
+        render(<CodeEditor value='{"a":1}' onChange={jest.fn()} />);
+        const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+        // Caret sits mid-document, no selection — a partial paste, not a whole-value replace.
+        textarea.setSelectionRange(3, 3);
+        const rafSpy = jest.spyOn(window, "requestAnimationFrame");
+
+        fireEvent.paste(textarea);
+
+        expect(rafSpy).not.toHaveBeenCalled();
+        expect(textarea.selectionStart).toBe(3);
 
-        // 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");
+        rafSpy.mockRestore();
     });
 
     it("does not reintroduce CodeMirror (the v6.3.0 bundling break)", () => {

From 90143e98f12d4b0470e8052cf4a1f87bf2d04900 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Tue, 21 Jul 2026 18:05:53 +0200
Subject: [PATCH 8/9] fix(chart-playground-web): stop editor panel content
 overflowing into the panel   below

---
 .../chart-playground-web/src/ui/Sidebar.scss               | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/pluggableWidgets/chart-playground-web/src/ui/Sidebar.scss b/packages/pluggableWidgets/chart-playground-web/src/ui/Sidebar.scss
index cd59ed63c5..1e17194fab 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/ui/Sidebar.scss
+++ b/packages/pluggableWidgets/chart-playground-web/src/ui/Sidebar.scss
@@ -87,8 +87,15 @@
 
 .widget-custom-config {
     height: var(--top-panel-h);
+    // --panel-header-1 and --editor-h are sized to sum exactly to --top-panel-h; flex +
+    // overflow: hidden is a safety clamp if that arithmetic ever drifts (zoom rounding, a
+    // header wrapping to two lines), not load-bearing for the normal case.
+    display: flex;
+    flex-flow: column nowrap;
+    overflow: hidden;
 
     .widget-panel-header {
+        flex: 0 0 auto;
         justify-content: space-between;
     }
 }

From 711200d6db2501ebe944a89f9d6a67859a501968 Mon Sep 17 00:00:00 2001
From: Yordan Stoyanov <yordan.stoyanov@mendix.com>
Date: Tue, 21 Jul 2026 18:15:54 +0200
Subject: [PATCH 9/9] fix(chart-playground-web): stop store echo from resetting
 the editor caret to the end

---
 .../useComposedEditorController.spec.ts       | 36 ++++++++++++++++++
 .../__tests__/useV2EditorController.spec.ts   | 38 +++++++++++++++++++
 .../src/helpers/editorJson.ts                 | 15 ++++++++
 .../helpers/useComposedEditorController.ts    | 29 +++++++-------
 .../src/helpers/useV2EditorController.ts      | 25 +++++++-----
 packages/shared/charts/src/main.ts            |  1 +
 6 files changed, 120 insertions(+), 24 deletions(-)
 create mode 100644 packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts
 create mode 100644 packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts
 create mode 100644 packages/pluggableWidgets/chart-playground-web/src/helpers/editorJson.ts

diff --git a/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts b/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts
new file mode 100644
index 0000000000..1348d06fc4
--- /dev/null
+++ b/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts
@@ -0,0 +1,36 @@
+jest.mock("plotly.js-dist-min", () => ({}));
+jest.mock("react-plotly.js", () => jest.fn(() => null));
+jest.mock("react-plotly.js/factory", () => jest.fn(() => jest.fn(() => null)));
+
+import { act, renderHook } from "@testing-library/react";
+import { EditorStore, PlaygroundDataV1 } from "@mendix/shared-charts/main";
+import { useComposedEditorController } from "../useComposedEditorController";
+
+function setupData(): PlaygroundDataV1 {
+    const store = new EditorStore();
+    store.reset({ layout: '{"a":1}', config: "{}", data: [] });
+    return {
+        plotData: [],
+        store,
+        configOptions: {},
+        layoutOptions: {}
+    };
+}
+
+describe("useComposedEditorController", () => {
+    it("does not clobber the user's in-progress edit with the store's reformatted echo", () => {
+        const data = setupData();
+        const { result } = renderHook(() => useComposedEditorController(data));
+
+        act(() => {
+            // Compact, single-line input — the store round-trips this through
+            // JSON.parse/JSON.stringify and the hook re-derives `code` via
+            // prettifyJson, which would reformat it to multiple lines.
+            result.current.onEditorChange('{"a":1,"b":2}');
+        });
+
+        // The value shown to the user must remain exactly what they typed,
+        // not get replaced by the store's reformatted echo of that same edit.
+        expect(result.current.value).toBe('{"a":1,"b":2}');
+    });
+});
diff --git a/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts b/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts
new file mode 100644
index 0000000000..7f87c234dc
--- /dev/null
+++ b/packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts
@@ -0,0 +1,38 @@
+jest.mock("plotly.js-dist-min", () => ({}));
+jest.mock("react-plotly.js", () => jest.fn(() => null));
+jest.mock("react-plotly.js/factory", () => jest.fn(() => jest.fn(() => null)));
+
+import { act, renderHook } from "@testing-library/react";
+import { EditableChartStore, PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { useV2EditorController } from "../useV2EditorController";
+
+function setupData(): PlaygroundDataV2 {
+    const host = { add: () => {} };
+    const props = { get: () => ({ layout: {}, config: {}, data: [] }) };
+    const store = new EditableChartStore(host as any, props as any);
+    return {
+        type: "editor.data.v2",
+        store,
+        plotData: [],
+        configOptions: {},
+        layoutOptions: {}
+    };
+}
+
+describe("useV2EditorController", () => {
+    it("does not clobber the user's in-progress edit with the store's reformatted echo", () => {
+        const data = setupData();
+        const { result } = renderHook(() => useV2EditorController(data));
+
+        act(() => {
+            // Compact, single-line input — the store round-trips this through
+            // JSON.parse/JSON.stringify and the reaction re-derives `code` via
+            // prettifyJson, which would reformat it to multiple lines.
+            result.current.onEditorChange('{"a":1,"b":2}');
+        });
+
+        // The value shown to the user must remain exactly what they typed,
+        // not get replaced by the store's reformatted echo of that same edit.
+        expect(result.current.value).toBe('{"a":1,"b":2}');
+    });
+});
diff --git a/packages/pluggableWidgets/chart-playground-web/src/helpers/editorJson.ts b/packages/pluggableWidgets/chart-playground-web/src/helpers/editorJson.ts
new file mode 100644
index 0000000000..6e41931a71
--- /dev/null
+++ b/packages/pluggableWidgets/chart-playground-web/src/helpers/editorJson.ts
@@ -0,0 +1,15 @@
+export function prettifyJson(json: string): string {
+    try {
+        return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+        return '{ "error": "invalid JSON" }';
+    }
+}
+
+export function isEquivalentJson(a: string, b: string): boolean {
+    try {
+        return JSON.stringify(JSON.parse(a)) === JSON.stringify(JSON.parse(b));
+    } catch {
+        return a === b;
+    }
+}
diff --git a/packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts b/packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts
index 02367d1cc4..a22f5cedc6 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts
+++ b/packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { fallback, PlaygroundDataV1 } from "@mendix/shared-charts/main";
+import { isEquivalentJson, prettifyJson } from "./editorJson";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
 
@@ -30,13 +31,6 @@ function getModelerCode(data: PlaygroundDataV1, key: ConfigKey): Partial<Data> |
     const entries = Object.entries(data.plotData.at(key) ?? {}).filter(([key]) => !irrelevantSeriesKeys.includes(key));
     return Object.fromEntries(entries) as Partial<Data>;
 }
-function prettifyJson(json: string): string {
-    try {
-        return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-        return '{ "error": "invalid JSON" }';
-    }
-}
 
 export function useComposedEditorController(data: PlaygroundDataV1): ComposedEditorProps {
     const [key, setKey] = useState<ConfigKey>("layout");
@@ -65,12 +59,14 @@ export function useComposedEditorController(data: PlaygroundDataV1): ComposedEdi
     const store = data.store;
     const code = prettifyJson(getEditorCode(data, key));
     const [input, setInput] = useState(() => code);
+    const lastOwnEditRef = useRef<string | null>(null);
     const onEditorChange = useCallback(
         (value: string): void => {
             setInput(value);
             try {
                 const json = fallback(value);
                 JSON.parse(value);
+                lastOwnEditRef.current = json;
                 store.set(key, json);
                 // eslint-disable-next-line no-empty
             } catch {}
@@ -78,12 +74,17 @@ export function useComposedEditorController(data: PlaygroundDataV1): ComposedEdi
         [store, key]
     );
 
-    useEffect(
-        () =>
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setInput(code),
-        [code]
-    );
+    useEffect(() => {
+        // Skip resync when `code` is just the store echoing back the user's own last edit —
+        // otherwise every keystroke replaces the controlled value and resets the cursor to the end.
+        if (lastOwnEditRef.current !== null && isEquivalentJson(code, lastOwnEditRef.current)) {
+            lastOwnEditRef.current = null;
+            return;
+        }
+        lastOwnEditRef.current = null;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setInput(code);
+    }, [code]);
 
     return {
         viewSelectValue: key.toString(),
diff --git a/packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts b/packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts
index c208f5fa4b..509ffda80b 100644
--- a/packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts
+++ b/packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts
@@ -1,6 +1,7 @@
 import { observable, reaction, runInAction } from "mobx";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { isEquivalentJson, prettifyJson } from "./editorJson";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
 
@@ -29,14 +30,6 @@ function getModelerCode(data: PlaygroundDataV2, key: ConfigKey): object {
     return Object.fromEntries(entries);
 }
 
-function prettifyJson(json: string): string {
-    try {
-        return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-        return '{ "error": "invalid JSON" }';
-    }
-}
-
 export function useV2EditorController(context: PlaygroundDataV2): ComposedEditorProps {
     const [key, setKey] = useState<ConfigKey>("layout");
     const keyBox = useState(() => observable.box<ConfigKey>(key))[0];
@@ -69,12 +62,14 @@ export function useV2EditorController(context: PlaygroundDataV2): ComposedEditor
 
     const code = prettifyJson(getEditorCode(store, key));
     const [input, setInput] = useState(() => code);
+    const lastOwnEditRef = useRef<string | null>(null);
     const onEditorChange = useCallback(
         (value: string): void => {
             setInput(value);
             try {
                 // Parse string before sending to store
                 const obj = JSON.parse(value);
+                lastOwnEditRef.current = value;
                 if (key === "layout") {
                     store.setLayout(obj);
                 } else if (key === "config") {
@@ -92,7 +87,17 @@ export function useV2EditorController(context: PlaygroundDataV2): ComposedEditor
         () =>
             reaction(
                 () => getEditorCode(store, keyBox.get()),
-                code => setInput(prettifyJson(code))
+                rawCode => {
+                    // Skip resync when this is just the store echoing back the user's own last
+                    // edit — otherwise every keystroke replaces the controlled value and resets
+                    // the cursor to the end.
+                    if (lastOwnEditRef.current !== null && isEquivalentJson(rawCode, lastOwnEditRef.current)) {
+                        lastOwnEditRef.current = null;
+                        return;
+                    }
+                    lastOwnEditRef.current = null;
+                    setInput(prettifyJson(rawCode));
+                }
             ),
         [store, keyBox]
     );
diff --git a/packages/shared/charts/src/main.ts b/packages/shared/charts/src/main.ts
index d87f179eb6..80896f1b08 100644
--- a/packages/shared/charts/src/main.ts
+++ b/packages/shared/charts/src/main.ts
@@ -1,4 +1,5 @@
 export * from "./components/ChartWidget";
+export { EditorStore } from "./helpers/EditorStore";
 export type * from "./helpers/EditorStore";
 export type * from "./helpers/playground-context";
 export type * from "./helpers/useEditorStore";