More script editor options (#386)

* Options are responsive again (fix from previous changes)
* Better height control on the monaco container using flexbox.
* Added options for tab size, auto-detect indentation per-file, font family, and font ligatures.
This commit is contained in:
Snarling
2023-02-24 07:37:29 -05:00
committed by GitHub
parent ee3b220858
commit 4166c09bd4
5 changed files with 99 additions and 43 deletions
+4 -7
View File
@@ -5,8 +5,6 @@ import { useEffect, useRef } from "react";
export type Monaco = typeof monaco;
type EditorProps = {
/** css height of editor */
height: string;
/** Editor options */
options: monaco.editor.IEditorOptions;
/** Function to be ran prior to mounting editor */
@@ -17,7 +15,7 @@ type EditorProps = {
onChange: (newCode?: string) => void;
};
export function Editor({ height, options, beforeMount, onMount, onChange }: EditorProps) {
export function Editor({ options, beforeMount, onMount, onChange }: EditorProps) {
const containerDiv = useRef<HTMLDivElement | null>(null);
const editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
const subscription = useRef<monaco.IDisposable | null>(null);
@@ -43,12 +41,11 @@ export function Editor({ height, options, beforeMount, onMount, onChange }: Edit
// Unmounting
return () => {
editor.current?.dispose();
const model = editor.current?.getModel();
model?.dispose();
subscription.current?.dispose();
editor.current?.getModel()?.dispose();
editor.current?.dispose();
};
}, []);
return <div ref={containerDiv} style={{ height: height, width: "100%" }} />;
return <div ref={containerDiv} style={{ height: "1px", width: "100%", flexGrow: 1 }} />;
}