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

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

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;
+      const transactionSpec: TransactionSpec = {
-      this._view!.dispatch({
         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);
     }
   }