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 (