This commit is contained in:
Billy Vong 2021-12-17 12:56:48 -05:00
parent 6fb5565b08
commit b3f9380ebd

@ -92,7 +92,7 @@ export function Root(props: IProps): React.ReactElement {
const editorRef = useRef<IStandaloneCodeEditor | null>(null); const editorRef = useRef<IStandaloneCodeEditor | null>(null);
const vimStatusRef = useRef<HTMLElement>(null); const vimStatusRef = useRef<HTMLElement>(null);
const [vimEditor, setVimEditor] = useState<any>(null); const [vimEditor, setVimEditor] = useState<any>(null);
const [editor, setEditor] = useState<IStandaloneCodeEditor|null>(null); const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
const [filename, setFilename] = useState(props.filename ? props.filename : lastFilename); const [filename, setFilename] = useState(props.filename ? props.filename : lastFilename);
const [code, setCode] = useState<string>(props.filename ? props.code : lastCode); const [code, setCode] = useState<string>(props.filename ? props.code : lastCode);
const [decorations, setDecorations] = useState<string[]>([]); const [decorations, setDecorations] = useState<string[]>([]);
@ -327,11 +327,11 @@ export function Root(props: IProps): React.ReactElement {
// @ts-expect-error // @ts-expect-error
window.require(["monaco-vim"], function (MonacoVim: any) { window.require(["monaco-vim"], function (MonacoVim: any) {
setVimEditor(MonacoVim.initVimMode(editor, vimStatusRef.current)); setVimEditor(MonacoVim.initVimMode(editor, vimStatusRef.current));
MonacoVim.VimMode.Vim.defineEx('write', 'w', function() { MonacoVim.VimMode.Vim.defineEx("write", "w", function () {
// your own implementation on what you want to do when :w is pressed // your own implementation on what you want to do when :w is pressed
save(); save();
}); });
MonacoVim.VimMode.Vim.defineEx('quit', 'q', function() { MonacoVim.VimMode.Vim.defineEx("quit", "q", function () {
save(); save();
}); });
editor.focus(); editor.focus();
@ -345,8 +345,8 @@ export function Root(props: IProps): React.ReactElement {
return () => { return () => {
vimEditor?.dispose(); vimEditor?.dispose();
} };
}, [ options, editorRef, editor, vimEditor]) }, [options, editorRef, editor, vimEditor]);
function onMount(editor: IStandaloneCodeEditor): void { function onMount(editor: IStandaloneCodeEditor): void {
// Required when switching between site navigation (e.g. from Script Editor -> Terminal and back) // Required when switching between site navigation (e.g. from Script Editor -> Terminal and back)
@ -365,7 +365,7 @@ export function Root(props: IProps): React.ReactElement {
lineNumber: lastPosition.lineNumber, lineNumber: lastPosition.lineNumber,
column: lastPosition.column + 1, column: lastPosition.column + 1,
}); });
editorRef.current.focus(); editorRef.current.focus();
} }
@ -411,7 +411,7 @@ export function Root(props: IProps): React.ReactElement {
// Toolbars are roughly 108px + vim bar 34px // Toolbars are roughly 108px + vim bar 34px
// Get percentage of space that toolbars represent and the rest should be the // Get percentage of space that toolbars represent and the rest should be the
// editor // editor
const editorHeight = 100 - (((108 + (options.vim ? 34 : 0)) / window.innerHeight) * 100); const editorHeight = 100 - ((108 + (options.vim ? 34 : 0)) / window.innerHeight) * 100;
return ( return (
<> <>
@ -443,7 +443,14 @@ export function Root(props: IProps): React.ReactElement {
options={{ ...options, glyphMargin: true }} options={{ ...options, glyphMargin: true }}
/> />
<Box ref={vimStatusRef} className="monaco-editor" display="flex" flexDirection="row" sx={{ p: 1 }} alignItems="center"></Box> <Box
ref={vimStatusRef}
className="monaco-editor"
display="flex"
flexDirection="row"
sx={{ p: 1 }}
alignItems="center"
></Box>
<Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center"> <Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
<Button onClick={beautify}>Beautify</Button> <Button onClick={beautify}>Beautify</Button>