UI: add cursor options to the script editor (#615)

src/ScriptEditor/ui/Editor.tsx

@@ -1,6 +1,7 @@
+import React, { useEffect, useRef } from "react";
+
 import * as monaco from "monaco-editor";
-import * as React from "react";
+
-import { useEffect, useRef } from "react";
 import { useScriptEditorContext } from "./ScriptEditorContext";
 
 interface EditorProps {

src/ScriptEditor/ui/OpenScript.ts

@@ -1,19 +1,19 @@
+import type { editor, Position } from "monaco-editor";
+
 import type { ContentFilePath } from "../../Paths/ContentFile";
 
-import * as monaco from "monaco-editor";
+type ITextModel = editor.ITextModel;
-
-type ITextModel = monaco.editor.ITextModel;
 
 // Holds all the data for a open script
 export class OpenScript {
   path: ContentFilePath;
   code: string;
   hostname: string;
-  lastPosition: monaco.Position;
+  lastPosition: Position;
   model: ITextModel;
   isTxt: boolean;
 
-  constructor(path: ContentFilePath, code: string, hostname: string, lastPosition: monaco.Position, model: ITextModel) {
+  constructor(path: ContentFilePath, code: string, hostname: string, lastPosition: Position, model: ITextModel) {
     this.path = path;
     this.code = code;
     this.hostname = hostname;

src/ScriptEditor/ui/Options.ts

@@ -1,4 +1,10 @@
+import type { editor } from "monaco-editor";
+
 export type WordWrapOptions = "on" | "off" | "bounded" | "wordWrapColumn";
+
+export type CursorStyle = editor.IEditorOptions["cursorStyle"];
+export type CursorBlinking = editor.IEditorOptions["cursorBlinking"];
+
 export interface Options {
   theme: string;
   insertSpaces: boolean;
@@ -9,4 +15,6 @@ export interface Options {
   fontLigatures: boolean;
   wordWrap: WordWrapOptions;
   vim: boolean;
+  cursorStyle: CursorStyle;
+  cursorBlinking: CursorBlinking;
 }

src/ScriptEditor/ui/OptionsModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
@@ -11,7 +11,10 @@ import EditIcon from "@mui/icons-material/Edit";
 import { useBoolean } from "../../ui/React/hooks";
 import { Modal } from "../../ui/React/Modal";
 import { ThemeEditorModal } from "./ThemeEditorModal";
-import { Options } from "./Options";
+import { CursorBlinking, CursorStyle, Options } from "./Options";
+
+const CURSOR_STYLES: CursorStyle[] = ["line", "block", "underline", "line-thin", "block-outline", "underline-thin"];
+const CURSOR_BLINKING_MODES: CursorBlinking[] = ["blink", "smooth", "phase", "expand", "solid"];
 
 export type OptionsModalProps = {
   open: boolean;
@@ -21,7 +24,7 @@ export type OptionsModalProps = {
   onThemeChange: () => void;
 };
 
-export function OptionsModal(props: OptionsModalProps): React.ReactElement {
+export function OptionsModal(props: OptionsModalProps): ReactElement {
   const [themeEditorOpen, { on: openThemeEditor, off: closeThemeEditor }] = useBoolean(false);
 
   const onFontSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -116,6 +119,34 @@ export function OptionsModal(props: OptionsModalProps): React.ReactElement {
           checked={props.options.fontLigatures}
         />
       </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Cursor style: </Typography>
+        <Select
+          onChange={(event) => props.onOptionChange("cursorStyle", event.target.value)}
+          value={props.options.cursorStyle}
+        >
+          {CURSOR_STYLES.map((cursorStyle) => (
+            <MenuItem key={cursorStyle} value={cursorStyle}>
+              {cursorStyle}
+            </MenuItem>
+          ))}
+        </Select>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography marginRight={"auto"}>Cursor blinking: </Typography>
+        <Select
+          onChange={(event) => props.onOptionChange("cursorBlinking", event.target.value as CursorBlinking)}
+          value={props.options.cursorBlinking}
+        >
+          {CURSOR_BLINKING_MODES.map((cursorBlinking) => (
+            <MenuItem key={cursorBlinking} value={cursorBlinking}>
+              {cursorBlinking}
+            </MenuItem>
+          ))}
+        </Select>
+      </div>
     </Modal>
   );
 }

src/ScriptEditor/ui/ScriptEditorContext.tsx

@@ -79,6 +79,8 @@ export function ScriptEditorContextProvider({ children, vim }: { children: React
     fontLigatures: Settings.MonacoFontLigatures,
     wordWrap: Settings.MonacoWordWrap,
     vim: vim || Settings.MonacoVim,
+    cursorStyle: Settings.MonacoCursorStyle,
+    cursorBlinking: Settings.MonacoCursorBlinking,
   });
 
   function saveOptions(options: Options) {
@@ -90,6 +92,8 @@ export function ScriptEditorContextProvider({ children, vim }: { children: React
     Settings.MonacoFontFamily = options.fontFamily;
     Settings.MonacoFontSize = options.fontSize;
     Settings.MonacoFontLigatures = options.fontLigatures;
+    Settings.MonacoCursorStyle = options.cursorStyle;
+    Settings.MonacoCursorBlinking = options.cursorBlinking;
     Settings.MonacoWordWrap = options.wordWrap;
     Settings.MonacoVim = options.vim;
   }

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from "react";
-import { Editor } from "./Editor";
 import * as monaco from "monaco-editor";
 
+import { Editor } from "./Editor";
+
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 
 import { Router } from "../../ui/GameRoot";

src/ScriptEditor/ui/Toolbar.tsx

@@ -40,8 +40,13 @@ export function Toolbar({ editor, onSave }: IProps) {
   const { ram, ramEntries, isUpdatingRAM, options, saveOptions } = useScriptEditorContext();
 
   const onOptionChange: OptionsModalProps["onOptionChange"] = (option, value) => {
-    saveOptions({ ...options, [option]: value });
+    const newOptions = { ...options, [option]: value };
-    editor?.updateOptions(options);
+    saveOptions(newOptions);
+    // delaying editor options update to avoid an issue
+    // where switching between vim and regular modes causes some settings to be reset
+    setTimeout(() => {
+      editor?.updateOptions(newOptions);
+    }, 100);
   };
 
   const onThemeChange = () => {

src/ScriptEditor/ui/useVimEditor.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 // @ts-expect-error This library does not have types.
 import * as MonacoVim from "monaco-vim";
-import * as monaco from "monaco-editor";
+import type { editor } from "monaco-editor";
-type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
+type IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 
 import Box from "@mui/material/Box";
 

src/Settings/Settings.ts

@@ -1,7 +1,7 @@
 import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
 import { defaultTheme } from "../Themes/Themes";
 import { defaultStyles } from "../Themes/Styles";
-import { WordWrapOptions } from "../ScriptEditor/ui/Options";
+import { CursorStyle, CursorBlinking, WordWrapOptions } from "../ScriptEditor/ui/Options";
 import { defaultMonacoTheme } from "../ScriptEditor/ui/themes";
 
 /** The current options the player has customized to their play style. */
@@ -96,6 +96,10 @@ export const Settings = {
   MonacoVim: false,
   /** Word wrap setting for Script Editor. */
   MonacoWordWrap: "off" as WordWrapOptions,
+  /** Control the cursor style*/
+  MonacoCursorStyle: "line" as CursorStyle,
+  /** Control the cursor animation style */
+  MonacoCursorBlinking: "blink" as CursorBlinking,
   /** Whether to hide trailing zeroes on fractional part of decimal */
   hideTrailingDecimalZeros: false,
   /** Whether to hide thousands separators. */