fix(chart-playground-web): stop store echo from resetting the editor caret to the end

Author: yordan-st

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

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

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

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,25 +59,32 @@ 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 {}
         },
         [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(),

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

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