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

1
nextjs/next.config.mjs
View File

@@ -1,5 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
};
export default nextConfig;

83
nextjs/package-lock.json generated
View File

@@ -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",

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