refactor(monaco): package monaco editor

Author: xrgzs

index.html

@@ -28,7 +28,6 @@
     <script>
       window.OPENLIST_CONFIG = {
         cdn: undefined,
-        monaco_cdn: undefined,
         base_path: undefined,
         api: undefined,
         main_color: undefined,

package.json

@@ -84,6 +84,7 @@
     "lightgallery": "^2.8.3",
     "mark.js": "^8.11.1",
     "mitt": "^3.0.1",
+    "monaco-editor": "^0.52.2",
     "mpegts.js": "^1.8.0",
     "pdfjs-dist": "^5.3.31",
     "qrcode": "^1.5.4",

pnpm-lock.yaml

@@ -1,65 +1,82 @@
 import { Box } from "@hope-ui/solid"
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
-import { MaybeLoading } from "./FullLoading"
-import loader from "@monaco-editor/loader"
-import { monaco_cdn } from "~/utils"
+import { createEffect, onCleanup, onMount, splitProps } from "solid-js"
+import * as monaco from "monaco-editor"
 
-loader.config({
-  paths: {
-    vs: monaco_cdn,
+// Configure worker for Monaco Editor
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === "json") {
+      return new jsonWorker()
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker()
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker()
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker()
+    }
+    return new editorWorker()
   },
-})
-export interface MonacoEditorProps {
+}
+export interface MonacoEditorProps
+  extends monaco.editor.IStandaloneEditorConstructionOptions {
   value: string
   onChange?: (value: string) => void
-  theme: "vs" | "vs-dark"
+  theme?: "vs" | "vs-dark" | "hc-black" | "hc-light"
   path?: string
   language?: string
 }
-let monaco: any
-
-export const MonacoEditorLoader = (props: MonacoEditorProps) => {
-  const [loading, setLoading] = createSignal(true)
-  loader.init().then((m) => {
-    monaco = m
-    setLoading(false)
-  })
-  return (
-    <MaybeLoading loading={loading()}>
-      <MonacoEditor {...props} />
-    </MaybeLoading>
-  )
-}
 
 export const MonacoEditor = (props: MonacoEditorProps) => {
   let monacoEditorDiv: HTMLDivElement
-  let monacoEditor: any /*monaco.editor.IStandaloneCodeEditor*/
-  let model: any /*monaco.editor.ITextModel*/
+  let monacoEditor: monaco.editor.IStandaloneCodeEditor
+  let model: monaco.editor.ITextModel
+
+  // Separate custom properties and Monaco options
+  const [customProps, monacoOptions] = splitProps(props, ["onChange", "path"])
+
   onMount(() => {
     monacoEditor = monaco.editor.create(monacoEditorDiv!, {
-      value: props.value,
-      theme: props.theme,
+      automaticLayout: true,
+      ...monacoOptions,
     })
+
     model = monaco.editor.createModel(
       props.value,
       props.language,
-      props.path ? monaco.Uri.parse(props.path) : undefined,
+      customProps.path ? monaco.Uri.parse(customProps.path) : undefined,
     )
     monacoEditor.setModel(model)
+
     monacoEditor.onDidChangeModelContent(() => {
-      props.onChange?.(monacoEditor.getValue())
+      customProps.onChange?.(monacoEditor.getValue())
     })
   })
+
   createEffect(() => {
-    monacoEditor.setValue(props.value)
+    if (monacoEditor && props.value !== monacoEditor.getValue()) {
+      monacoEditor.setValue(props.value)
+    }
   })
 
   createEffect(() => {
-    monaco.editor.setTheme(props.theme)
+    if (monacoEditor && props.theme) {
+      monaco.editor.setTheme(props.theme)
+    }
   })
+
   onCleanup(() => {
-    model && model.dispose()
-    monacoEditor && monacoEditor.dispose()
+    model?.dispose()
+    monacoEditor?.dispose()
   })
+
   return <Box w="$full" h="70vh" ref={monacoEditorDiv!} />
 }

src/components/MonacoEditor.tsx

@@ -1,7 +1,7 @@
 import { Button, useColorMode, VStack } from "@hope-ui/solid"
 import { createEffect, createMemo, createSignal, on, Show } from "solid-js"
 import { EncodingSelect, MaybeLoading } from "~/components"
-import { MonacoEditorLoader } from "~/components/MonacoEditor"
+import { MonacoEditor } from "~/components/MonacoEditor"
 import { useFetch, useFetchText, useParseText, useRouter, useT } from "~/hooks"
 import { objStore, userCan } from "~/store"
 import { PEmptyResp } from "~/types"
@@ -51,7 +51,7 @@ function Editor(props: { data?: string | ArrayBuffer; contentType?: string }) {
           referenceText={props.data}
         />
       </Show>
-      <MonacoEditorLoader
+      <MonacoEditor
         value={text(encoding())}
         theme={theme()}
         path={objStore.obj.name}

src/pages/home/previews/text-editor.tsx

@@ -24,7 +24,3 @@ if (api === "/") {
 if (api.endsWith("/")) {
   api = api.slice(0, -1)
 }
-
-export const monaco_cdn =
-  window.OPENLIST_CONFIG.monaco_cdn ||
-  "https://registry.npmmirror.com/monaco-editor/0.52.2/files/min/vs"

src/utils/config.ts

@@ -32,6 +32,17 @@ export default defineConfig({
   build: {
     // target: "es2015", //next
     // polyfillDynamicImport: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          jsonWorker: ["monaco-editor/esm/vs/language/json/json.worker"],
+          cssWorker: ["monaco-editor/esm/vs/language/css/css.worker"],
+          htmlWorker: ["monaco-editor/esm/vs/language/html/html.worker"],
+          tsWorker: ["monaco-editor/esm/vs/language/typescript/ts.worker"],
+          editorWorker: ["monaco-editor/esm/vs/editor/editor.worker"],
+        },
+      },
+    },
   },
   // experimental: {
   //   renderBuiltUrl: (filename, { type, hostId, hostType }) => {