fix(chart-playground-web): keep editor scroll and caret aligned with visible

  text

  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.

Author: yordan-st

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

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)", () => {