From e65b4d8627ea8e6f344db05c4ab614c351d9b720 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Mon, 30 Sep 2024 13:42:22 -0600 Subject: [PATCH] trying other way of managing monaco editor --- .../[assignmentName]/EditAssignment.tsx | 2 +- nextjs/src/app/globals.css | 14 ------ nextjs/src/app/providers.tsx | 2 +- .../components/editor/InnerMonacoEditor.tsx | 11 +++-- .../editor/InnerMonacoEditorOther.tsx | 49 +++++++++++++++++++ nextjs/src/components/editor/MonacoEditor.css | 15 ++++++ .../components/editor/MonacoEditor.module.css | 4 -- nextjs/src/components/editor/MonacoEditor.tsx | 11 ++++- 8 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 nextjs/src/components/editor/InnerMonacoEditorOther.tsx create mode 100644 nextjs/src/components/editor/MonacoEditor.css delete mode 100644 nextjs/src/components/editor/MonacoEditor.module.css diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx index dc80e78..b1fee39 100644 --- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx +++ b/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); diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css index a411514..3936890 100644 --- a/nextjs/src/app/globals.css +++ b/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; } diff --git a/nextjs/src/app/providers.tsx b/nextjs/src/app/providers.tsx index 09718d8..8f1df14 100644 --- a/nextjs/src/app/providers.tsx +++ b/nextjs/src/app/providers.tsx @@ -16,7 +16,7 @@ export default function Providers({ children }: { children: ReactNode }) { return ( - + {/* */} {children} diff --git a/nextjs/src/components/editor/InnerMonacoEditor.tsx b/nextjs/src/components/editor/InnerMonacoEditor.tsx index adc2f32..cadfb21 100644 --- a/nextjs/src/components/editor/InnerMonacoEditor.tsx +++ b/nextjs/src/components/editor/InnerMonacoEditor.tsx @@ -2,7 +2,7 @@ import React, { useRef, useEffect } from "react"; import loader from "@monaco-editor/loader"; import { editor } from "monaco-editor/esm/vs/editor/editor.api"; -import * as monaco from "monaco-editor"; +// import * as monaco from "monaco-editor"; // import * as editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; // import * as jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; @@ -28,7 +28,7 @@ import * as monaco from "monaco-editor"; // }, // }; -loader.config({ monaco }); +// loader.config({ monaco }); export default function InnerMonacoEditor({ value, @@ -43,6 +43,7 @@ export default function InnerMonacoEditor({ useEffect(() => { if (divRef.current && !editorRef.current) { loader.init().then((monaco) => { + console.log("in init", monaco, divRef.current, editorRef.current); if (divRef.current && !editorRef.current) { const properties: editor.IStandaloneEditorConstructionOptions = { value: value, @@ -64,10 +65,14 @@ export default function InnerMonacoEditor({ editorRef.current = monaco.editor.create(divRef.current, properties); editorRef.current.onDidChangeModelContent((e) => { + console.log("in on change", onChange); onChange(editorRef.current?.getModel()?.getValue() ?? ""); }); + } else { + console.log("second render of init"); } }); + } else if (!divRef.current) { } }, [onChange, value]); @@ -75,7 +80,7 @@ export default function InnerMonacoEditor({
); } diff --git a/nextjs/src/components/editor/InnerMonacoEditorOther.tsx b/nextjs/src/components/editor/InnerMonacoEditorOther.tsx new file mode 100644 index 0000000..fda34e8 --- /dev/null +++ b/nextjs/src/components/editor/InnerMonacoEditorOther.tsx @@ -0,0 +1,49 @@ +"use client"; +import React, { useRef } from "react"; +import { editor } from "monaco-editor/esm/vs/editor/editor.api"; + +import Editor from "@monaco-editor/react"; + +export default function InnerMonacoEditorOther({ + value, + onChange, +}: { + value: string; + onChange: (value: string) => void; // must be memoized +}) { + const editorRef = useRef(null); + + function handleEditorDidMount(editor: editor.IStandaloneCodeEditor) { + editorRef.current = editor; + editor.onDidChangeModelContent((e) => { + onChange(editorRef.current?.getModel()?.getValue() ?? ""); + }); + } + + return ( + <> + + + ); +} diff --git a/nextjs/src/components/editor/MonacoEditor.css b/nextjs/src/components/editor/MonacoEditor.css new file mode 100644 index 0000000..44c7523 --- /dev/null +++ b/nextjs/src/components/editor/MonacoEditor.css @@ -0,0 +1,15 @@ + + +/* 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; +} \ No newline at end of file diff --git a/nextjs/src/components/editor/MonacoEditor.module.css b/nextjs/src/components/editor/MonacoEditor.module.css deleted file mode 100644 index bc41e26..0000000 --- a/nextjs/src/components/editor/MonacoEditor.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.Editor { - width: 100vw; - height: 100vh; -} \ No newline at end of file diff --git a/nextjs/src/components/editor/MonacoEditor.tsx b/nextjs/src/components/editor/MonacoEditor.tsx index a9ef3cc..23ce93f 100755 --- a/nextjs/src/components/editor/MonacoEditor.tsx +++ b/nextjs/src/components/editor/MonacoEditor.tsx @@ -1,7 +1,9 @@ "use client"; import dynamic from "next/dynamic"; +import { useEffect, useState } from "react"; +import "./MonacoEditor.css"; -const InnerMonacoEditor = dynamic(() => import("./InnerMonacoEditor"), { +const InnerMonacoEditor = dynamic(() => import("./InnerMonacoEditorOther"), { ssr: false, }); @@ -9,5 +11,10 @@ export const MonacoEditor: React.FC<{ value: string; onChange: (value: string) => void; }> = ({ value, onChange }) => { - return ; + const [salt, setSalt] = useState(Date.now()); + useEffect(() => { + console.log("onchange changed"); + setSalt(Date.now()); + }, [onChange]); + return ; };