Fixed query editor horizontal scroll (#2378)

* much better solution to backspace problem

* fixed query horiztonal scrolling

* changes file

changes/issue-2267-editor-horizontal-scroll

@@ -0,0 +1 @@
+- Fixed query editor horizontal scrolling issue on page reload

frontend/components/FleetAce/FleetAce.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import ReactAce from "react-ace/lib/ace";
-import { Ace } from "ace-builds";
 import { IAceEditor } from "react-ace/lib/types";
 import classnames from "classnames";
 import "ace-builds/src-noconflict/mode-sql";
@@ -9,6 +8,8 @@ import "ace-builds/src-noconflict/ext-linking";
 import "ace-builds/src-noconflict/ext-language_tools";
 import { noop } from "lodash";
 
+import Spinner from "components/loaders/Spinner";
+
 import "./mode";
 import "./theme";
 
@@ -48,19 +49,19 @@ const FleetAce = ({
   handleSubmit = noop,
 }: IFleetAceProps) => {
   const editorRef = useRef<ReactAce>(null);
-  const wrapperClass = classnames(wrapperClassName, {
+  const wrapperClass = classnames(wrapperClassName, baseClass, {
     [`${baseClass}__wrapper--error`]: !!error,
   });
 
-  const fixCursorPosition = (
-    startPosition: Ace.Point | undefined,
-    offset: number
-  ) => {
-    if (startPosition) {
-      const newColumn = startPosition.column + offset;
-      editorRef.current?.editor.moveCursorTo(startPosition.row, newColumn);
-    }
-  };
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsReady(true);
+    }, 0);
+
+    return () => editorRef?.current?.editor.destroy();
+  }, []);
 
   const fixHotkeys = (editor: IAceEditor) => {
     editor.commands.removeCommand("gotoline");
@@ -69,25 +70,19 @@ const FleetAce = ({
   };
 
   const handleDelete = (deleteCommand: string) => {
-    let cursorOffset = 0;
     const currentText = editorRef.current?.editor.getValue();
     const selectedText = editorRef.current?.editor.getSelectedText();
-    const selectedStartPosition = editorRef.current?.editor
-      .getSelection()
-      .getCursor();
 
     if (selectedText) {
       const remainingText = currentText?.replace(selectedText, "");
       if (typeof remainingText !== "undefined") {
         onChange && onChange(remainingText);
+        editorRef.current?.editor.navigateLeft();
         editorRef.current?.editor.clearSelection();
       }
     } else {
-      cursorOffset = -1;
       editorRef.current?.editor.execCommand(deleteCommand);
     }
-
-    fixCursorPosition(selectedStartPosition, cursorOffset);
   };
 
   const renderLabel = useCallback(() => {
@@ -116,44 +111,48 @@ const FleetAce = ({
   return (
     <div className={wrapperClass}>
       {renderLabel()}
-      <AceEditor
-        ref={editorRef}
-        enableBasicAutocompletion
-        enableLiveAutocompletion
-        editorProps={{ $blockScrolling: Infinity }}
-        fontSize={fontSize}
-        mode="fleet"
-        minLines={2}
-        maxLines={20}
-        name={name}
-        onChange={onChange}
-        onLoad={fixHotkeys}
-        readOnly={readOnly}
-        setOptions={{ enableLinking: true }}
-        showGutter={showGutter}
-        showPrintMargin={false}
-        theme="fleet"
-        value={value}
-        width="100%"
-        wrapEnabled={wrapEnabled}
-        commands={[
-          {
-            name: "commandName",
-            bindKey: { win: "Ctrl-Enter", mac: "Ctrl-Enter" },
-            exec: handleSubmit,
-          },
-          {
-            name: "deleteSelection",
-            bindKey: { win: "Delete", mac: "Delete" },
-            exec: () => handleDelete("del"),
-          },
-          {
-            name: "backspaceSelection",
-            bindKey: { win: "Backspace", mac: "Backspace" },
-            exec: () => handleDelete("backspace"),
-          },
-        ]}
-      />
+      {isReady ? (
+        <AceEditor
+          ref={editorRef}
+          enableBasicAutocompletion
+          enableLiveAutocompletion
+          editorProps={{ $blockScrolling: Infinity }}
+          fontSize={fontSize}
+          mode="fleet"
+          minLines={2}
+          maxLines={20}
+          name={name}
+          onChange={onChange}
+          onLoad={fixHotkeys}
+          readOnly={readOnly}
+          setOptions={{ enableLinking: true }}
+          showGutter={showGutter}
+          showPrintMargin={false}
+          theme="fleet"
+          value={value}
+          width="100%"
+          wrapEnabled={wrapEnabled}
+          commands={[
+            {
+              name: "commandName",
+              bindKey: { win: "Ctrl-Enter", mac: "Ctrl-Enter" },
+              exec: handleSubmit,
+            },
+            {
+              name: "deleteSelection",
+              bindKey: { win: "Delete", mac: "Delete" },
+              exec: () => handleDelete("del"),
+            },
+            {
+              name: "backspaceSelection",
+              bindKey: { win: "Backspace", mac: "Backspace" },
+              exec: () => handleDelete("backspace"),
+            },
+          ]}
+        />
+      ) : (
+        <Spinner />
+      )}
       {renderHint()}
     </div>
   );

frontend/components/FleetAce/_styles.scss

@@ -44,4 +44,8 @@
       font-family: "SourceCodePro", $monospace;
     }
   }
+
+  .card {
+    margin: 0;
+  }
 }