trying other way of managing monaco editor

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -28,12 +28,12 @@ export default function EditAssignment({
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: assignment } = useAssignmentQuery(moduleName, assignmentName);
-  console.log("due date on edit page", assignment.dueAt);
   const updateAssignment = useUpdateAssignmentMutation();
 
   const [assignmentText, setAssignmentText] = useState(
     localAssignmentMarkdown.toMarkdown(assignment)
   );
+  console.log("assignment text render");
 
   const [error, setError] = useState("");
   const [showHelp, setShowHelp] = useState(false);

nextjs/src/app/globals.css

@@ -15,20 +15,6 @@
   @apply text-lg;
 }
 
-/* monaco editor */
-.monaco-editor-background,
-.monaco-editor .margin {
-  background-color: #020617 !important;
-  /* background-color: #18181b !important; */
-}
-.monaco-editor {
-  position: absolute !important;
-}
-
-.monaco-editor .mtk1 {
-  @apply text-slate-300;
-}
-
 h1 {
   @apply text-4xl font-bold my-1;
 }

nextjs/src/app/providers.tsx

@@ -16,7 +16,7 @@ export default function Providers({ children }: { children: ReactNode }) {
   return (
     <SuspenseAndErrorHandling>
       <QueryClientProvider client={queryClient}>
-        <ReactQueryDevtools initialIsOpen={false} />
+        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
         {children}
       </QueryClientProvider>
     </SuspenseAndErrorHandling>