Fix CodeEditor

oj-lab · Sep 22, 2024 · 5bef083 · 5bef083
1 parent 8a8b214
commit 5bef083
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/components/input/CodeEditor.tsx b/src/components/input/CodeEditor.tsx
@@ -9,7 +9,7 @@ export interface CodeEditorProps {
   className?: string;
   language?: string;
   onChange: (value: string) => void;
-  parent: HTMLElement;
+  parent: HTMLElement | null;
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = (props) => {
@@ -30,9 +30,6 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
           theme: isLightMode ? "vs" : "vs-dark",
           automaticLayout: true,
           scrollBeyondLastLine: false,
-          scrollbar: {
-            vertical: "auto",
-          },
         });
 
         props.onChange(editor!.getValue());
@@ -69,24 +66,25 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
         // wait for next frame to ensure last layout finished
         window.requestAnimationFrame(() => {
           // get the parent dimensions and re-layout the editor
-          const rect = props.parent.getBoundingClientRect();
+          const rect = props.parent?.getBoundingClientRect();
+          if (!rect) return;
           if (isDrawerOpen && window.innerWidth >= 1024) {
             editor.layout({
-              width: rect.width - 352,
-              height: window.innerHeight,
+              width: rect.width,
+              height: rect.height,
             });
           } else {
             const currentWidth = editor.getLayoutInfo().width;
             // make the transition smooth
             if (currentWidth < rect.width - 112) {
               editor.layout({
                 width: currentWidth + 1,
-                height: window.innerHeight,
+                height: rect.height,
               });
             } else {
               editor.layout({
-                width: rect.width - 112,
-                height: window.innerHeight,
+                width: rect.width,
+                height: rect.height,
               });
             }
           }

diff --git a/src/pages/problem/Problem.tsx b/src/pages/problem/Problem.tsx
@@ -20,6 +20,7 @@ const Problem: React.FC = () => {
   const navigate = useNavigate();
   const slug = useParams().slug as string;
   const [toggleToast, setToggleToast] = React.useState<boolean>(false);
+  const codeEditorContainer = React.useRef<HTMLDivElement | null>(null);
 
   const { getProblem } = useProblem(slug, () => {
     navigate("/problem");
@@ -59,15 +60,18 @@ const Problem: React.FC = () => {
         <option value={"cpp"}>C++</option>
         <option value={"python"}>Python</option>
       </select>
-      <div className="flex h-72 flex-col gap-4 rounded border border-base-content/10">
+      <div
+        className="flex h-96 flex-col gap-4 rounded border border-base-content/10"
+        ref={codeEditorContainer}
+      >
         <CodeEditor
           className="h-full overflow-hidden rounded"
           value={defaultCode}
           onChange={(value: string) => {
             setSrc(value);
           }}
           language={getSrcLanguage()}
-          parent={document.body}
+          parent={codeEditorContainer.current}
         />
       </div>
       <div className="relative">