fix(chart-playground-web): restore highlighted JSON editor with invalid-JSON feedback

Author: yordan-st

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>
     );
 }

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 {