monaco editor in progress

2026-03-25 23:28:33 -06:00 · 2024-09-02 21:40:07 -06:00
parent 13f20b5970
commit 7bf8e0b86f
12 changed files with 210 additions and 54 deletions
--- a/nextjs/next.config.mjs
+++ b/nextjs/next.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  
 };

 export default nextConfig;
--- a/nextjs/package-lock.json
+++ b/nextjs/package-lock.json
@@ -1048,6 +1048,19 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -2470,6 +2483,15 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/busboy": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -5389,9 +5411,9 @@
      }
    },
    "node_modules/monaco-editor": {
-      "version": "0.51.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
-      "integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw==",
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==",
      "license": "MIT",
      "peer": true
    },
@@ -6722,6 +6744,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -6731,6 +6765,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
    "node_modules/stackback": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -7134,6 +7181,36 @@
        "node": ">=6"
      }
    },
+    "node_modules/terser": {
+      "version": "5.31.6",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz",
+      "integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
--- a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
@@ -1,12 +1,20 @@
 "use client";
 import React, { useMemo } from "react";
 import { useCourseContext } from "../context/courseContext";
-import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import Link from "next/link";
-import { usePageNamesQuery, usePagesQueries } from "@/hooks/localCourse/pageHooks";
-import { useQuizNamesQuery, useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
-import { useAssignmentNamesQuery, useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
+import {
+  usePageNamesQuery,
+  usePagesQueries,
+} from "@/hooks/localCourse/pageHooks";
+import {
+  useQuizNamesQuery,
+  useQuizzesQueries,
+} from "@/hooks/localCourse/quizHooks";
+import {
+  useAssignmentNamesQuery,
+  useAssignmentsQueries,
+} from "@/hooks/localCourse/assignmentHooks";

 export default function DayItemsInModule({
  day,
@@ -115,7 +123,14 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
          onDragEnd={(e) => e.preventDefault()}
        >
          <Link
-            href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
+            href={
+              "/course/" +
+              encodeURIComponent(courseName) +
+              "/modules/" +
+              encodeURIComponent(moduleName) +
+              "/quiz/" +
+              encodeURIComponent(q.name)
+            }
          >
            {q.name}
          </Link>
--- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
+++ b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
@@ -17,7 +17,6 @@ export default function DraggingContextProvider({
  children,
 }: {
  children: ReactNode;
-  localCourseName: string;
 }) {
  const updateQuizMutation = useUpdateQuizMutation();
  const updateAssignmentMutation = useUpdateAssignmentMutation();
@@ -73,7 +72,8 @@ export default function DraggingContextProvider({
        const assignment: LocalAssignment = {
          ...previousAssignment,
          dueAt: dateToMarkdownString(dayAsDate),
-          lockAt: previousAssignment.lockAt &&
+          lockAt:
+            previousAssignment.lockAt &&
            (getDateFromStringOrThrow(
              previousAssignment.lockAt,
              "lockAt date"
@@ -92,6 +92,7 @@ export default function DraggingContextProvider({
      settings.defaultDueTime.hour,
      settings.defaultDueTime.minute,
      updateAssignmentMutation,
+      updatePageMutation,
      updateQuizMutation,
    ]
  );
--- a/nextjs/src/app/course/[courseName]/layout.tsx
+++ b/nextjs/src/app/course/[courseName]/layout.tsx
@@ -1,9 +1,7 @@
-import {
-  dehydrate,
-  HydrationBoundary,
-} from "@tanstack/react-query";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
 import { hydrateCourse } from "@/hooks/hookHydration";
+import CourseContextProvider from "./context/CourseContextProvider";

 export default async function CourseLayout({
  children,
@@ -12,17 +10,20 @@ export default async function CourseLayout({
  children: React.ReactNode;
  params: { courseName: string };
 }) {
+  const decodedCourseName = decodeURIComponent(courseName)
  if (courseName.includes(".js.map")) {
-    console.log("cannot load course that is .js.map " + courseName);
+    console.log("cannot load course that is .js.map " + decodedCourseName);
    return <div></div>;
  }
  const queryClient = getQueryClient();

-  await hydrateCourse(queryClient, courseName);
+  await hydrateCourse(queryClient, decodedCourseName);
  const dehydratedState = dehydrate(queryClient);

  // console.log("hydrated course state", courseName, dehydratedState);
  return (
-    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+    <CourseContextProvider localCourseName={decodedCourseName}>
+      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+    </CourseContextProvider>
  );
 }
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -1,5 +1,5 @@
 "use client";
-import MonacoEditor from "@/components/MonacoEditor";
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
 import { useQuizQuery } from "@/hooks/localCourse/quizHooks";

 export default function EditQuiz({
@@ -15,7 +15,12 @@ export default function EditQuiz({
    <div>
      {quiz.name}

-      {/* <MonacoEditor /> */}
+      <MonacoEditor
+        value={""}
+        onChange={function (value: string): void {
+          throw new Error("Function not implemented.");
+        }}
+      />
    </div>
  );
 }
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx
@@ -6,5 +6,7 @@ export default async function Page({
 }: {
  params: { quizName: string; moduleName: string };
 }) {
-  return <EditQuiz quizName={quizName} moduleName={moduleName} />;
+  const decodedQuizName = decodeURIComponent(quizName)
+  const decodedModuleName = decodeURIComponent(moduleName)
+  return <EditQuiz quizName={decodedQuizName} moduleName={decodedModuleName} />;
 }
--- a/nextjs/src/app/course/[courseName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/page.tsx
@@ -1,29 +1,22 @@
-import CourseContextProvider from "./context/CourseContextProvider";
 import CourseCalendar from "./calendar/CourseCalendar";
 import CourseSettings from "./CourseSettings";
 import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";

-export default async function CoursePage({
-  params: { courseName },
-}: {
-  params: { courseName: string };
-}) {
+export default async function CoursePage({}: {}) {
  return (
-    <CourseContextProvider localCourseName={courseName}>
-      <div className="h-full flex flex-col">
-        <CourseSettings />
-        <div className="flex flex-row min-h-0">
-          <DraggingContextProvider localCourseName={courseName}>
-            <div className="flex-1 min-h-0">
-              <CourseCalendar />
-            </div>
-            <div className="w-96 p-3">
-              <ModuleList />
-            </div>
-          </DraggingContextProvider>
-        </div>
+    <div className="h-full flex flex-col">
+      <CourseSettings />
+      <div className="flex flex-row min-h-0">
+        <DraggingContextProvider>
+          <div className="flex-1 min-h-0">
+            <CourseCalendar />
+          </div>
+          <div className="w-96 p-3">
+            <ModuleList />
+          </div>
+        </DraggingContextProvider>
      </div>
-    </CourseContextProvider>
+    </div>
  );
 }
--- a/nextjs/src/components/MonacoEditor.tsx
+++ b/nextjs/src/components/MonacoEditor.tsx
@@ -1,13 +0,0 @@
-"use client";
-import styles from "./MonacoEditor.module.css";
-import Editor from "@monaco-editor/react";
-
-export default function MonacoEditor() {
-  return (
-    <Editor
-    height={"100vh"}
-      defaultLanguage="javascript"
-      defaultValue="// some comment"
-    />
-  );
-}
--- a/nextjs/src/components/editor/InnerMonacoEditor.tsx
+++ b/nextjs/src/components/editor/InnerMonacoEditor.tsx
@@ -0,0 +1,61 @@
+"use client";
+import React, { useRef, useEffect } from "react";
+// import * as monaco from "monaco-editor";
+import Editor, { Monaco } from "@monaco-editor/react";
+// @ts-ignore
+// self.MonacoEnvironment = {
+// 	getWorkerUrl: function (_moduleId: any, label: string) {
+// 		if (label === 'json') {
+// 			return './json.worker.bundle.js';
+// 		}
+// 		if (label === 'css' || label === 'scss' || label === 'less') {
+// 			return './css.worker.bundle.js';
+// 		}
+// 		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+// 			return './html.worker.bundle.js';
+// 		}
+// 		if (label === 'typescript' || label === 'javascript') {
+// 			return './ts.worker.bundle.js';
+// 		}
+// 		return './editor.worker.bundle.js';
+// 	}
+// };
+
+export default function InnerMonacoEditor({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  console.log("monaco editor");
+ 
+  const monacoRef = useRef(null);
+
+  function handleEditorWillMount(monaco: Monaco) {
+    // here is the monaco instance
+    // do something before editor is mounted
+    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+  }
+
+  function handleEditorDidMount(editor: Monaco, monaco: Monaco) {
+    // here is another way to get monaco instance
+    // you can also store it in `useRef` for further usage
+    monacoRef.current = monaco;
+  }
+  return (
+    // <div
+    //   className="Editor"
+    //   ref={divEl}
+    //   style={{ height: "500px", width: "100%" }}
+    // ></div>
+    <Editor
+      height="90vh"
+      defaultLanguage="markdown"
+      theme="vs-dark"
+      
+      defaultValue="// some comment"
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
--- a/nextjs/src/components/editor/MonacoEditor.module.css
+++ b/nextjs/src/components/editor/MonacoEditor.module.css
--- a/nextjs/src/components/editor/MonacoEditor.tsx
+++ b/nextjs/src/components/editor/MonacoEditor.tsx
@@ -0,0 +1,13 @@
+"use client";
+import dynamic from "next/dynamic";
+
+const InnerMonacoEditor = dynamic(() => import("./InnerMonacoEditor"), {
+  ssr: false,
+});
+
+export const MonacoEditor: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+}> = ({ value, onChange }) => {
+  return <InnerMonacoEditor value={value} onChange={onChange} />;
+};