alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 07:38:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

monaco editor in progress

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-02 21:40:07 -06:00
parent 13f20b5970
commit 7bf8e0b86f
12 changed files with 210 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
View File

@@ -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()}
>
<Link
href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
href={
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
"/quiz/" +
encodeURIComponent(q.name)
}
>
{q.name}
</Link>

5
nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
View File

@@ -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,
]
);

15
nextjs/src/app/course/[courseName]/layout.tsx
View File

@@ -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>
);
}

9
nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
View File

@@ -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>
);
}

4
nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx
View File

@@ -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} />;
}

33
nextjs/src/app/course/[courseName]/page.tsx
View File

@@ -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>
);
}

13
nextjs/src/components/MonacoEditor.tsx
View File

@@ -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"
/>
);
}

61
nextjs/src/components/editor/InnerMonacoEditor.tsx Normal file
View File

@@ -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)}
/>
);
}

0
nextjs/src/components/MonacoEditor.module.css → nextjs/src/components/editor/MonacoEditor.module.css
View File

13
nextjs/src/components/editor/MonacoEditor.tsx Executable file
View File

@@ -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} />;
};