Add wordWrap option to Monaco

This commit is contained in:
Martin Fournier 2022-01-04 09:41:44 -05:00
parent dfae337d26
commit f0161367af
4 changed files with 22 additions and 1 deletions

@ -1,6 +1,8 @@
export type WordWrapOptions = 'on' | 'off' | 'bounded' | 'wordWrapColumn';
export interface Options { export interface Options {
theme: string; theme: string;
insertSpaces: boolean; insertSpaces: boolean;
fontSize: number; fontSize: number;
wordWrap: WordWrapOptions;
vim: boolean; vim: boolean;
} }

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Options } from "./Options"; import { Options, WordWrapOptions } from "./Options";
import { Modal } from "../../ui/React/Modal"; import { Modal } from "../../ui/React/Modal";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
@ -21,6 +21,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
const [theme, setTheme] = useState(props.options.theme); const [theme, setTheme] = useState(props.options.theme);
const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces); const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
const [fontSize, setFontSize] = useState(props.options.fontSize); const [fontSize, setFontSize] = useState(props.options.fontSize);
const [wordWrap, setWordWrap] = useState(props.options.wordWrap);
const [vim, setVim] = useState(props.options.vim); const [vim, setVim] = useState(props.options.vim);
function save(): void { function save(): void {
@ -28,6 +29,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
theme, theme,
insertSpaces, insertSpaces,
fontSize, fontSize,
wordWrap,
vim, vim,
}); });
props.onClose(); props.onClose();
@ -58,6 +60,16 @@ export function OptionsModal(props: IProps): React.ReactElement {
<Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} /> <Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
</Box> </Box>
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>Word Wrap: </Typography>
<Select onChange={(event) => setWordWrap(event.target.value as WordWrapOptions)} value={wordWrap}>
<MenuItem value={"off"}>Off</MenuItem>
<MenuItem value={"on"}>On</MenuItem>
<MenuItem value={"bounded"}>Bounded</MenuItem>
<MenuItem value={"wordWrapColumn"}>Word Wrap Column</MenuItem>
</Select>
</Box>
<Box display="flex" flexDirection="row" alignItems="center"> <Box display="flex" flexDirection="row" alignItems="center">
<Typography>Enable vim mode: </Typography> <Typography>Enable vim mode: </Typography>
<Switch onChange={(event) => setVim(event.target.checked)} checked={vim} /> <Switch onChange={(event) => setVim(event.target.checked)} checked={vim} />

@ -117,6 +117,7 @@ export function Root(props: IProps): React.ReactElement {
theme: Settings.MonacoTheme, theme: Settings.MonacoTheme,
insertSpaces: Settings.MonacoInsertSpaces, insertSpaces: Settings.MonacoInsertSpaces,
fontSize: Settings.MonacoFontSize, fontSize: Settings.MonacoFontSize,
wordWrap: Settings.MonacoWordWrap,
vim: props.vim || Settings.MonacoVim, vim: props.vim || Settings.MonacoVim,
}); });
@ -794,6 +795,7 @@ export function Root(props: IProps): React.ReactElement {
theme: Settings.MonacoTheme, theme: Settings.MonacoTheme,
insertSpaces: Settings.MonacoInsertSpaces, insertSpaces: Settings.MonacoInsertSpaces,
fontSize: Settings.MonacoFontSize, fontSize: Settings.MonacoFontSize,
wordWrap: Settings.MonacoWordWrap,
vim: Settings.MonacoVim, vim: Settings.MonacoVim,
}} }}
save={(options: Options) => { save={(options: Options) => {
@ -801,6 +803,7 @@ export function Root(props: IProps): React.ReactElement {
Settings.MonacoTheme = options.theme; Settings.MonacoTheme = options.theme;
Settings.MonacoInsertSpaces = options.insertSpaces; Settings.MonacoInsertSpaces = options.insertSpaces;
Settings.MonacoFontSize = options.fontSize; Settings.MonacoFontSize = options.fontSize;
Settings.MonacoWordWrap = options.wordWrap;
Settings.MonacoVim = options.vim; Settings.MonacoVim = options.vim;
}} }}
/> />

@ -1,6 +1,7 @@
import { ISelfInitializer, ISelfLoading } from "../types"; import { ISelfInitializer, ISelfLoading } from "../types";
import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums"; import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
import { defaultTheme, ITheme } from "./Themes"; import { defaultTheme, ITheme } from "./Themes";
import { WordWrapOptions } from '../ScriptEditor/ui/Options';
/** /**
* Represents the default settings the player could customize. * Represents the default settings the player could customize.
@ -141,6 +142,8 @@ interface ISettings extends IDefaultSettings {
MonacoFontSize: number; MonacoFontSize: number;
MonacoVim: boolean; MonacoVim: boolean;
MonacoWordWrap: WordWrapOptions;
} }
export const defaultSettings: IDefaultSettings = { export const defaultSettings: IDefaultSettings = {
@ -203,6 +206,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
MonacoInsertSpaces: false, MonacoInsertSpaces: false,
MonacoFontSize: 20, MonacoFontSize: 20,
MonacoVim: false, MonacoVim: false,
MonacoWordWrap: 'off',
theme: { ...defaultTheme }, theme: { ...defaultTheme },
init() { init() {