diff --git a/client/app/bundles/course/assessment/submission/components/Editor.jsx b/client/app/bundles/course/assessment/submission/components/Editor.jsx index d0d63e3838..74f79cba9c 100644 --- a/client/app/bundles/course/assessment/submission/components/Editor.jsx +++ b/client/app/bundles/course/assessment/submission/components/Editor.jsx @@ -1,7 +1,8 @@ -import { Component } from 'react'; +import { Component, useEffect, useRef } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { Stack } from '@mui/material'; import PropTypes from 'prop-types'; +import ResizeObserver from 'utilities/ResizeObserver'; import FormEditorField from 'lib/components/form/fields/EditorField'; @@ -17,6 +18,20 @@ const Editor = (props) => { editorRef, } = props; const { control } = useFormContext(); + const containerRef = useRef(null); + + useEffect(() => { + const container = containerRef.current; + if (!container) return undefined; + + const observer = new ResizeObserver(() => { + editorRef?.current?.editor?.resize(); + }); + + observer.observe(container); + + return () => observer.disconnect(); + }, []); return ( @@ -24,23 +39,27 @@ const Editor = (props) => { control={control} name={fieldName} render={({ field }) => ( - { - field.onChange(event); - onChangeCallback(); - }, - }} - filename={file.filename} - language={language} - maxLines={25} - minLines={25} - onCursorChange={onCursorChange ?? (() => {})} - readOnly={false} - style={{ marginBottom: 10 }} - /> +
+ { + field.onChange(event); + onChangeCallback(); + }, + }} + filename={file.filename} + height="100%" + language={language} + onCursorChange={onCursorChange ?? (() => {})} + readOnly={false} + /> +
)} />
diff --git a/client/app/lib/components/core/fields/EditorField.tsx b/client/app/lib/components/core/fields/EditorField.tsx index 15e4c5c2ef..3565ea8ee3 100644 --- a/client/app/lib/components/core/fields/EditorField.tsx +++ b/client/app/lib/components/core/fields/EditorField.tsx @@ -143,6 +143,15 @@ const EditorField = forwardRef( useWorker: false, fontFamily: DEFAULT_FONT_FAMILY, showInvisibles: true, + behavioursEnabled: true, + wrapBehavioursEnabled: true, + enableMultiselect: true, + highlightActiveLine: true, + highlightSelectedWord: true, + showPrintMargin: false, + enableBasicAutocompletion: false, + enableLiveAutocompletion: false, + enableSnippets: false, }} /> );