UI: Add Script Editor toggle for Sticky Scroll (#2431)

src/ScriptEditor/ui/Options.ts

@@ -4,6 +4,7 @@ export type WordWrapOptions = "on" | "off" | "bounded" | "wordWrapColumn";
 
 export type CursorStyle = editor.IEditorOptions["cursorStyle"];
 export type CursorBlinking = editor.IEditorOptions["cursorBlinking"];
+export type StickyScroll = editor.IEditorOptions["stickyScroll"];
 
 export interface Options {
   theme: string;
@@ -17,4 +18,5 @@ export interface Options {
   cursorStyle: CursorStyle;
   cursorBlinking: CursorBlinking;
   beautifyOnSave: boolean;
+  stickyScroll: StickyScroll;
 }

src/ScriptEditor/ui/OptionsModal.tsx

@@ -132,7 +132,7 @@ export function OptionsModal(props: OptionsModalProps): ReactElement {
       <div style={{ display: "flex", alignItems: "center" }}>
         <Typography marginRight={"auto"}>Cursor blinking: </Typography>
         <Select
-          onChange={(event) => props.onOptionChange("cursorBlinking", event.target.value as CursorBlinking)}
+          onChange={(event) => props.onOptionChange("cursorBlinking", event.target.value)}
           value={props.options.cursorBlinking}
         >
           {CURSOR_BLINKING_MODES.map((cursorBlinking) => (
@@ -150,6 +150,14 @@ export function OptionsModal(props: OptionsModalProps): ReactElement {
           checked={props.options.beautifyOnSave}
         />
       </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Enable Sticky Scroll: </Typography>
+        <Switch
+          onChange={(e) => props.onOptionChange("stickyScroll", { enabled: e.target.checked })}
+          checked={props.options.stickyScroll?.enabled}
+        />
+      </div>
     </Modal>
   );
 }

src/ScriptEditor/ui/ScriptEditorContext.tsx

@@ -92,6 +92,7 @@ export function ScriptEditorContextProvider({ children }: { children: React.Reac
     cursorStyle: Settings.MonacoCursorStyle,
     cursorBlinking: Settings.MonacoCursorBlinking,
     beautifyOnSave: Settings.MonacoBeautifyOnSave,
+    stickyScroll: Settings.MonacoStickyScroll,
   });
 
   function saveOptions(options: Options) {
@@ -107,6 +108,7 @@ export function ScriptEditorContextProvider({ children }: { children: React.Reac
     Settings.MonacoCursorBlinking = options.cursorBlinking;
     Settings.MonacoWordWrap = options.wordWrap;
     Settings.MonacoBeautifyOnSave = options.beautifyOnSave;
+    Settings.MonacoStickyScroll = options.stickyScroll;
   }
 
   return (

src/Settings/Settings.ts

@@ -1,7 +1,7 @@
 import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
 import { defaultTheme } from "../Themes/Themes";
 import { defaultStyles } from "../Themes/Styles";
-import { CursorStyle, CursorBlinking, WordWrapOptions } from "../ScriptEditor/ui/Options";
+import { CursorStyle, CursorBlinking, WordWrapOptions, StickyScroll } from "../ScriptEditor/ui/Options";
 import { defaultMonacoTheme } from "../ScriptEditor/ui/themes";
 import { assertObject } from "../utils/TypeAssertion";
 import { Result } from "../types";
@@ -184,6 +184,8 @@ export const Settings = {
   MonacoCursorStyle: "line" as CursorStyle,
   /** Control the cursor animation style */
   MonacoCursorBlinking: "blink" as CursorBlinking,
+  /** Toggle use of Sticky Scroll in the Script Editor */
+  MonacoStickyScroll: { enabled: false } as StickyScroll,
   /** Whether to hide trailing zeroes on fractional part of decimal */
   hideTrailingDecimalZeros: false,
   /** Whether to hide thousands separators. */