Fix editor incorrect scroll (#1525)

## Launch Checklist

- Fixes #1524

The problem is that the editor at the end of the layer editor view is
forcing some scrolling due to a different bug that was solved.
- #1492 which was solved in PR: #1501

The previous fix was in oder to solve issues in the code editor which
has all the style in it, and a search-and-replace operation is used to
change the content, so there was a need to introduce the previous fix.
The current solution is to scroll the view only for the code editor
using a react prop, which is `false` by default.

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
 - [ ] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Fix issue with missing bottom error panel
 - Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
 - Fix error when using a source from localhost
+- Fix an issue with scrolling when using the code editor
 - _...Add new stuff here..._
 
 ## 3.0.0

cypress/e2e/modals.cy.ts

@@ -178,11 +178,11 @@ describe("modals", () => {
     });
 
     it("sprite object", () => {
-      when.setTextInJsonEditor(JSON.stringify([{id: "1", url: "2"}]));
+      when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
 
       when.click("modal:settings.name");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sprite: [{ id: "1", url: "2"}],
+        sprite: [{ id: "1", url: "2" }],
       });
     });
 
@@ -342,8 +342,8 @@ describe("modals", () => {
     });
 
     it("add variable", () => {
-      when.click("global-state-add-variable");
       when.wait(100);
+      when.click("global-state-add-variable");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         state: { key1: { default: "value" } },
       });
@@ -373,6 +373,7 @@ describe("modals", () => {
 
     it("edit variable key", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-key:0", "mykey");
       when.typeKeys("{enter}");
       when.wait(100);
@@ -383,6 +384,7 @@ describe("modals", () => {
 
     it("edit variable value", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-value:0", "myvalue");
       when.typeKeys("{enter}");
       when.wait(100);

package-lock.json

@@ -19,7 +19,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
         "@maplibre/maplibre-gl-geocoder": "^1.9.1",
-        "@maplibre/maplibre-gl-inspect": "^1.8.0",
+        "@maplibre/maplibre-gl-inspect": "^1.8.1",
         "@maplibre/maplibre-gl-style-spec": "^24.3.1",
         "array-move": "^4.0.0",
         "buffer": "^6.0.3",
@@ -2156,9 +2156,9 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-inspect": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.8.0.tgz",
-      "integrity": "sha512-uRufOTPg4tXDYc+W8fVHbvSN2m2ThPy1ASmL7wvnQMObOKu738bA7M1fwZeCNsqDERb2nT4tW6bi4EYzUjGv2g==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.8.1.tgz",
+      "integrity": "sha512-Wh+MpaksNNWwA6wyH94D0gNzJdd4fFeImO2nqLDO1AxdF4NAML+HTrLE3XjWmVSPOZ7dDi/0IAZ8dc4IakyT0g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "lodash.isequal": "^4.5.0",

package.json

@@ -36,7 +36,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.3.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.1",
-    "@maplibre/maplibre-gl-inspect": "^1.8.0",
+    "@maplibre/maplibre-gl-inspect": "^1.8.1",
     "@maplibre/maplibre-gl-style-spec": "^24.3.1",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",

src/components/CodeEditor.tsx

@@ -19,6 +19,7 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
       value={props.value}
       onChange={props.onChange}
       className={"maputnik-code-editor"}
+      withScroll={true}
     />;
   </>;
 };

src/components/InputJson.tsx

@@ -7,6 +7,7 @@ import stringifyPretty from "json-stringify-pretty-compact";
 
 import {createEditor} from "../libs/codemirror-editor-factory";
 import type { StylePropertySpecification } from "maplibre-gl";
+import type { TransactionSpec } from "@codemirror/state";
 
 export type InputJsonProps = {
   value: object
@@ -16,6 +17,11 @@ export type InputJsonProps = {
   onBlur?(...args: unknown[]): unknown
   lintType: "layer" | "style" | "expression" | "json"
   spec?: StylePropertySpecification | undefined
+  /**
+   * When setting this and using search and replace, the editor will scroll to the selected text
+   * Use this only when the editor is the only element in the page.
+   */
+  withScroll?: boolean
 };
 type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
@@ -28,6 +34,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   static defaultProps = {
     onFocus: () => {},
     onBlur: () => {},
+    withScroll: false
   };
   _view: EditorView | undefined;
   _el: HTMLDivElement | null = null;
@@ -74,16 +81,18 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   componentDidUpdate(prevProps: InputJsonProps) {
     if (!this.state.isEditing && prevProps.value !== this.props.value) {
       this._cancelNextChange = true;
-      const currentSelection = this._view!.state.selection;
-      this._view!.dispatch({
+      const transactionSpec: TransactionSpec = {
         changes: {
           from: 0,
           to: this._view!.state.doc.length,
           insert: this.getPrettyJson(this.props.value)
-        },
-        selection: currentSelection,
-        scrollIntoView: true
-      });
+        }
+      };
+      if (this.props.withScroll) {
+        transactionSpec.selection = this._view!.state.selection;
+        transactionSpec.scrollIntoView = true;
+      }
+      this._view!.dispatch(transactionSpec);
     }
   }