From bd4d3176dd17807a57d4c11078eaaf99e73a78da 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                                | 259 +++++++++++++++++-
 2 files changed, 258 insertions(+), 5 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 40105448c2..e10c58dd6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -226,6 +226,30 @@ importers:
         specifier: ^3.25.76
         version: 3.25.76
 
+  packages/customWidgets/calendar-custom-web:
+    dependencies:
+      classnames:
+        specifier: ^2.5.1
+        version: 2.5.1
+      date-arithmetic:
+        specifier: ^3.1.0
+        version: 3.1.0
+      loader-utils:
+        specifier: 1.4.2
+        version: 1.4.2
+      moment:
+        specifier: ^2.30.1
+        version: 2.30.1
+      react-big-calendar:
+        specifier: 0.19.2
+        version: 0.19.2(patch_hash=d8f03ab5a445efa65feb8cf9de6d013131afabc5b7e269c61364b2997ef90f94)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-dnd:
+        specifier: 2.6.0
+        version: 2.6.0(react@18.3.1)
+      react-dnd-html5-backend:
+        specifier: ^5.0.1
+        version: 5.0.1
+
   packages/modules/calendar:
     dependencies:
       '@mendix/calendar-web':
@@ -361,7 +385,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)(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)
+        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)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -747,6 +771,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:*
@@ -756,7 +786,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
@@ -1816,7 +1846,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)(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)
+        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)
       '@mendix/prettier-config-web-widgets':
         specifier: workspace:*
         version: link:../../shared/prettier-config-web-widgets
@@ -2791,7 +2821,7 @@ importers:
     devDependencies:
       '@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)(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)
+        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)
       rollup-plugin-copy:
         specifier: ^3.5.0
         version: 3.5.0
@@ -5861,6 +5891,10 @@ packages:
     resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
     engines: {node: '>=4'}
 
+  autobind-decorator@2.4.0:
+    resolution: {integrity: sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==}
+    engines: {node: '>=8.10', npm: '>=6.4.1'}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -5962,6 +5996,9 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+
   big.js@6.2.2:
     resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
 
@@ -6557,6 +6594,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-arithmetic@3.1.0:
+    resolution: {integrity: sha512-ynlmvduDVuzwDDYW3OF4RHCikdzegg0vWQtzwjiVKPs/RjZ93b/7AxIwhfZKxSQQFA8l9lwhkyeDVQyrzbPUwA==}
+
   date-arithmetic@4.1.0:
     resolution: {integrity: sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==}
 
@@ -6689,6 +6729,15 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
+  disposables@1.0.2:
+    resolution: {integrity: sha512-q1XTvs/XGdfubRSemB2+QRhJjIX4PerKkSom+i8Nkw3hCv6xISNrgaN442n2BunyBI4x77Om4ZAzSlqmhM9pwA==}
+
+  dnd-core@2.6.0:
+    resolution: {integrity: sha512-5BfQHIp0XVd4ioF0q4GyUeHQQNCbqP+0SnUiP9TssoQ50wrP1NgSzDqZkjD5pFngsVz9txGin6rvTQD7w0qC3w==}
+
+  dnd-core@4.0.5:
+    resolution: {integrity: sha512-GSyGmfGom9oyTFJ4Ll/95Dn3ZDvPkrgINwfeOd+gTI0RGIN1TcTGChrHnIHF3A3e1PymyEKZg+3ouN3w2uIJGQ==}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -6702,6 +6751,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-helpers@3.4.0:
+    resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
+
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
@@ -6801,6 +6853,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+
   encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -7619,6 +7675,13 @@ 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==}
+
   hono@4.12.25:
     resolution: {integrity: sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ==}
     engines: {node: '>=16.9.0'}
@@ -8545,6 +8608,10 @@ packages:
     engines: {node: '>=8.0.0'}
     hasBin: true
 
+  loader-utils@1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+
   loader-utils@3.3.1:
     resolution: {integrity: sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==}
     engines: {node: '>= 12.13.0'}
@@ -9690,6 +9757,11 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  prop-types-extra@1.1.1:
+    resolution: {integrity: sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -9782,6 +9854,12 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-big-calendar@0.19.2:
+    resolution: {integrity: sha512-cuGfM211IGM54qaOUod0IaqGQh7iBYvjeNoP2DlfLQy+oLTBtZ8y+AFwBKqGsZT2gEyBOlrgNfIBLGltlrEicA==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
   react-big-calendar@1.20.0:
     resolution: {integrity: sha512-Lp1mvG34l/9xtb/2LsBb4UAF3iPcUkmDqbmpsvDHzp/n8GA5gtn3+nf8BsULWw08opKDgv38nQi75dQlOOqzkg==}
     peerDependencies:
@@ -9808,6 +9886,14 @@ packages:
   react-devtools-core@6.1.5:
     resolution: {integrity: sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==}
 
+  react-dnd-html5-backend@5.0.1:
+    resolution: {integrity: sha512-TLEjqDMUHRJAgRvdX2L0ssnF6bL30cVkxwO6+OkxWCoPJoiyS6Y6pl4LRidOjJ7CpeMTKeawFdIlbuezHL4oeQ==}
+
+  react-dnd@2.6.0:
+    resolution: {integrity: sha512-2KHNpeg2SyaxXYq+xO1TM+tOtN9hViI41otJuiYiu6DRYGw+WMvDFDMP4aw7zIKRRm1xd0gizXuKWhb8iJYHBw==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -9859,6 +9945,12 @@ packages:
       react: '>=18.0.0 <19.0.0'
       react-dom: '>=18.0.0 <19.0.0'
 
+  react-overlays@0.7.4:
+    resolution: {integrity: sha512-7vsooMx3siLAuEfTs8FYeP/lAORWWFXTO8PON3KgX0Htq1Oa+po6ioSjGyO0/GO5CVSMNhpWt6V2opeexHgBuQ==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+      react-dom: '>=18.0.0 <19.0.0'
+
   react-overlays@5.2.1:
     resolution: {integrity: sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==}
     peerDependencies:
@@ -9881,10 +9973,21 @@ packages:
       plotly.js: '>1.34.0'
       react: '>=18.0.0 <19.0.0'
 
+  react-prop-types@0.4.0:
+    resolution: {integrity: sha512-IyjsJhDX9JkoOV9wlmLaS7z+oxYoIWhfzDcFy7inwoAKTu+VcVNrVpPmLeioJ94y6GeDRsnwarG1py5qofFQMg==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+
   react-refresh@0.14.2:
     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:
@@ -9935,6 +10038,12 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  redux@3.7.2:
+    resolution: {integrity: sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==}
+
+  redux@4.2.1:
+    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -10213,6 +10322,9 @@ packages:
   shallow-copy@0.0.1:
     resolution: {integrity: sha512-b6i4ZpVuUxB9h5gfCxPiusKYkqTMOjEbBs4wMaFbkfia4yFv92UKZ6Df8WXcKbn08JNL/abvg3FnMAOfakDvUw==}
 
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
@@ -10542,6 +10654,10 @@ packages:
     resolution: {integrity: sha512-K8uXsBZU6ME97Ia3xbBge8IRCnR1lOmIILzvY/jGVic7dSTQ530s3uO8RvXbPUtkkXLWIwmZLRPbtDxRWVAFdg==}
     engines: {node: '>= 4.7.0'}
 
+  symbol-observable@1.2.0:
+    resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
+    engines: {node: '>=0.10.0'}
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -10810,6 +10926,11 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
+  uncontrollable@4.1.0:
+    resolution: {integrity: sha512-YN1vmvC+UkttgPcFaal2UaNVODu6Rf1FU2x1guyiQRHOzSKkfTJLb0dzhJAEfRsAtjog4PF9UyNWUM2crqDyvg==}
+    peerDependencies:
+      react: '>=18.0.0 <19.0.0'
+
   uncontrollable@7.2.1:
     resolution: {integrity: sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==}
     peerDependencies:
@@ -10932,6 +11053,12 @@ packages:
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
+  warning@2.1.0:
+    resolution: {integrity: sha512-O9pvum8nlCqIT5pRGo2WRQJPRG2bW/ZBeCzl7/8CWREjUW693juZpGup7zbRtuVcSKyGiRAIZLYsh3C0vq7FAg==}
+
+  warning@3.0.0:
+    resolution: {integrity: sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==}
+
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
 
@@ -14706,6 +14833,8 @@ snapshots:
 
   attr-accept@2.2.5: {}
 
+  autobind-decorator@2.4.0: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
@@ -14856,6 +14985,8 @@ snapshots:
 
   baseline-browser-mapping@2.10.37: {}
 
+  big.js@5.2.2: {}
+
   big.js@6.2.2: {}
 
   binary-extensions@2.3.0: {}
@@ -15514,6 +15645,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-arithmetic@3.1.0: {}
+
   date-arithmetic@4.1.0: {}
 
   date-fns@2.30.0:
@@ -15620,6 +15753,22 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
+  disposables@1.0.2: {}
+
+  dnd-core@2.6.0:
+    dependencies:
+      asap: 2.0.6
+      invariant: 2.2.4
+      lodash: 4.18.1
+      redux: 3.7.2
+
+  dnd-core@4.0.5:
+    dependencies:
+      asap: 2.0.6
+      invariant: 2.2.4
+      lodash: 4.18.1
+      redux: 4.2.1
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -15632,6 +15781,10 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-helpers@3.4.0:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
   dom-helpers@5.2.1:
     dependencies:
       '@babel/runtime': 7.29.7
@@ -15745,6 +15898,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  emojis-list@3.0.0: {}
+
   encodeurl@1.0.2: {}
 
   encodeurl@2.0.0: {}
@@ -16834,6 +16989,10 @@ snapshots:
     dependencies:
       hermes-estree: 0.36.0
 
+  highlight.js@11.11.1: {}
+
+  hoist-non-react-statics@2.5.5: {}
+
   hono@4.12.25: {}
 
   hosted-git-info@9.0.3:
@@ -18282,6 +18441,12 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  loader-utils@1.4.2:
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+
   loader-utils@3.3.1: {}
 
   locate-path@3.0.0:
@@ -19555,6 +19720,12 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  prop-types-extra@1.1.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-is: 16.13.1
+      warning: 4.0.3
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -19653,6 +19824,21 @@ snapshots:
       strip-json-comments: 2.0.1
     optional: true
 
+  react-big-calendar@0.19.2(patch_hash=d8f03ab5a445efa65feb8cf9de6d013131afabc5b7e269c61364b2997ef90f94)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      classnames: 2.5.1
+      date-arithmetic: 3.1.0
+      dom-helpers: 3.4.0
+      invariant: 2.2.4
+      lodash: 4.18.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-overlays: 0.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-prop-types: 0.4.0(react@18.3.1)
+      uncontrollable: 4.1.0(react@18.3.1)
+      warning: 2.1.0
+
   react-big-calendar@1.20.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -19711,6 +19897,23 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  react-dnd-html5-backend@5.0.1:
+    dependencies:
+      autobind-decorator: 2.4.0
+      dnd-core: 4.0.5
+      lodash: 4.18.1
+      shallowequal: 1.1.0
+
+  react-dnd@2.6.0(react@18.3.1):
+    dependencies:
+      disposables: 1.0.2
+      dnd-core: 2.6.0
+      hoist-non-react-statics: 2.5.5
+      invariant: 2.2.4
+      lodash: 4.18.1
+      prop-types: 15.8.1
+      react: 18.3.1
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -19788,6 +19991,16 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  react-overlays@0.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      classnames: 2.5.1
+      dom-helpers: 3.4.0
+      prop-types: 15.8.1
+      prop-types-extra: 1.1.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      warning: 3.0.0
+
   react-overlays@5.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -19822,8 +20035,18 @@ snapshots:
       prop-types: 15.8.1
       react: 18.3.1
 
+  react-prop-types@0.4.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      warning: 3.0.0
+
   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
@@ -19901,6 +20124,17 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  redux@3.7.2:
+    dependencies:
+      lodash: 4.18.1
+      lodash-es: 4.18.1
+      loose-envify: 1.4.0
+      symbol-observable: 1.2.0
+
+  redux@4.2.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.9
@@ -20350,6 +20584,8 @@ snapshots:
 
   shallow-copy@0.0.1: {}
 
+  shallowequal@1.1.0: {}
+
   shebang-command@1.2.0:
     dependencies:
       shebang-regex: 1.0.0
@@ -20718,6 +20954,8 @@ snapshots:
 
   swiper@12.2.0: {}
 
+  symbol-observable@1.2.0: {}
+
   symbol-tree@3.2.4: {}
 
   synckit@0.11.13:
@@ -21022,6 +21260,11 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
+  uncontrollable@4.1.0(react@18.3.1):
+    dependencies:
+      invariant: 2.2.4
+      react: 18.3.1
+
   uncontrollable@7.2.1(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -21150,6 +21393,14 @@ snapshots:
     dependencies:
       makeerror: 1.0.12
 
+  warning@2.1.0:
+    dependencies:
+      loose-envify: 1.4.0
+
+  warning@3.0.0:
+    dependencies:
+      loose-envify: 1.4.0
+
   warning@4.0.3:
     dependencies:
       loose-envify: 1.4.0

From b75f7d688becd086a75f35085e30654bce0f38fd 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 1803135203698cf22ec201ebf21e279db329ae96 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 c070730f5a724d95584bbb03b28647911269b6ce 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 653519e11bee40aa7b5ca9710ac5329ad98a49fa 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.