From 7bf8e0b86fda7c6c7cae51798228cafe6db91244 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Mon, 2 Sep 2024 21:40:07 -0600 Subject: [PATCH] monaco editor in progress --- nextjs/next.config.mjs | 1 + nextjs/package-lock.json | 83 ++++++++++++++++++- .../calendar/DayItemsInModule.tsx | 27 ++++-- .../context/DraggingContextProvider.tsx | 5 +- nextjs/src/app/course/[courseName]/layout.tsx | 15 ++-- .../[moduleName]/quiz/[quizName]/EditQuiz.tsx | 9 +- .../[moduleName]/quiz/[quizName]/page.tsx | 4 +- nextjs/src/app/course/[courseName]/page.tsx | 33 +++----- nextjs/src/components/MonacoEditor.tsx | 13 --- .../components/editor/InnerMonacoEditor.tsx | 61 ++++++++++++++ .../{ => editor}/MonacoEditor.module.css | 0 nextjs/src/components/editor/MonacoEditor.tsx | 13 +++ 12 files changed, 210 insertions(+), 54 deletions(-) delete mode 100755 nextjs/src/components/MonacoEditor.tsx create mode 100644 nextjs/src/components/editor/InnerMonacoEditor.tsx rename nextjs/src/components/{ => editor}/MonacoEditor.module.css (100%) create mode 100755 nextjs/src/components/editor/MonacoEditor.tsx diff --git a/nextjs/next.config.mjs b/nextjs/next.config.mjs index 0a7c9af..4cb30e9 100644 --- a/nextjs/next.config.mjs +++ b/nextjs/next.config.mjs @@ -1,5 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + }; export default nextConfig; diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json index d717e77..0486a9e 100644 --- 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", diff --git a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx index 125b608..d67b41d 100644 --- 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, @@ -74,7 +82,7 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) { function Quizzes({ moduleName, day }: { moduleName: string; day: string }) { const { data: quizNames } = useQuizNamesQuery(moduleName); const { data: quizzes } = useQuizzesQueries(moduleName, quizNames); - + const { courseName } = useCourseContext(); const todaysQuizzes = useMemo( () => @@ -115,7 +123,14 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) { onDragEnd={(e) => e.preventDefault()} > {q.name} diff --git a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx index 4117a3f..2caeb8c 100644 --- 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, ] ); diff --git a/nextjs/src/app/course/[courseName]/layout.tsx b/nextjs/src/app/course/[courseName]/layout.tsx index f46fc19..d0e4f4b 100644 --- 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
; } const queryClient = getQueryClient(); - await hydrateCourse(queryClient, courseName); + await hydrateCourse(queryClient, decodedCourseName); const dehydratedState = dehydrate(queryClient); // console.log("hydrated course state", courseName, dehydratedState); return ( - {children} + + {children} + ); } diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx index 93b8f37..d916b7c 100644 --- 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({
{quiz.name} - {/* */} +
); } diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx index ab8fa00..7781cb2 100644 --- 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 ; + const decodedQuizName = decodeURIComponent(quizName) + const decodedModuleName = decodeURIComponent(moduleName) + return ; } diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx index 081e18a..f9efd15 100644 --- 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 ( - -
- -
- -
- -
-
- -
- -
+
+ +
+ +
+ +
+
+ +
+
- +
); } diff --git a/nextjs/src/components/MonacoEditor.tsx b/nextjs/src/components/MonacoEditor.tsx deleted file mode 100755 index 29d9086..0000000 --- a/nextjs/src/components/MonacoEditor.tsx +++ /dev/null @@ -1,13 +0,0 @@ -"use client"; -import styles from "./MonacoEditor.module.css"; -import Editor from "@monaco-editor/react"; - -export default function MonacoEditor() { - return ( - - ); -} diff --git a/nextjs/src/components/editor/InnerMonacoEditor.tsx b/nextjs/src/components/editor/InnerMonacoEditor.tsx new file mode 100644 index 0000000..459a765 --- /dev/null +++ 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 ( + //
+ console.log(value)} + /> + ); +} diff --git a/nextjs/src/components/MonacoEditor.module.css b/nextjs/src/components/editor/MonacoEditor.module.css similarity index 100% rename from nextjs/src/components/MonacoEditor.module.css rename to nextjs/src/components/editor/MonacoEditor.module.css diff --git a/nextjs/src/components/editor/MonacoEditor.tsx b/nextjs/src/components/editor/MonacoEditor.tsx new file mode 100755 index 0000000..a9ef3cc --- /dev/null +++ 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 ; +};