@wandelbots/wandelbots-js-react-components 1.13.0 → 1.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/wandelscript-editor/WandelscriptEditor.tsx

@@ -1,13 +1,13 @@
-import Editor, { useMonaco, type Monaco } from "@monaco-editor/react"
-import { useEffect, useRef, useState } from "react"
+import type { Monaco } from "@monaco-editor/react"
+import { lazy, Suspense, useRef, useState } from "react"
 import type { BundledLanguage, HighlighterGeneric } from "shiki"
-import { createHighlighter, type BundledTheme } from "shiki"
-import { shikiToMonaco } from "@shikijs/monaco"
+import type { BundledTheme } from "shiki"
 
 import wandelscriptTextmateGrammar from "./wandelscript.tmLanguage"
 import { useTheme } from "@mui/material"
 import type { editor } from "monaco-editor"
 import { externalizeComponent } from "../../externalizeComponent"
+import { LoadingCover } from "../LoadingCover"
 
 type WandelscriptEditorProps = {
   /** The current Wandelscript content of the code editor (controlled component) */
@@ -26,20 +26,24 @@ type WandelscriptEditorProps = {
 /** A Monaco (VSCode-style) embedded code editor with Wandelscript syntax highlighting */
 export const WandelscriptEditor = externalizeComponent(
   (props: WandelscriptEditorProps) => {
-    const monaco = useMonaco()
     const theme = useTheme()
     const shikiHighlighterRef = useRef<HighlighterGeneric<
       BundledLanguage,
       BundledTheme
     > | null>(null)
-
     const [activeShikiTheme, setActiveShikiTheme] =
       useState<BundledTheme>("dark-plus")
-
     const targetShikiTheme =
       theme.palette.mode === "dark" ? "dark-plus" : "light-plus"
 
+    const Editor = lazy(() => import("@monaco-editor/react"))
+
     async function setupEditor(monaco: Monaco) {
+      const [{ createHighlighter }, { shikiToMonaco }] = await Promise.all([
+        import("shiki"),
+        import("@shikijs/monaco"),
+      ])
+
       // Register and configure the Wandelscript language
       monaco.languages.register({ id: "wandelscript" })
 
@@ -99,29 +103,24 @@ export const WandelscriptEditor = externalizeComponent(
       setActiveShikiTheme(targetShikiTheme)
     }
 
-    useEffect(() => {
-      if (monaco) {
-        setupEditor(monaco)
-      }
-    }, [monaco, targetShikiTheme])
-
-    if (!monaco) {
-      return null
-    }
-
     return (
-      <Editor
-        value={props.code}
-        onChange={props.onChange}
-        defaultLanguage="wandelscript"
-        theme={activeShikiTheme}
-        options={{
-          minimap: { enabled: false },
-          wordWrap: "on",
-          automaticLayout: true,
-          ...props.monacoOptions,
-        }}
-      />
+      <Suspense fallback={<LoadingCover />}>
+        <Editor
+          value={props.code}
+          onMount={(_editor, monaco) => {
+            setupEditor(monaco)
+          }}
+          onChange={props.onChange}
+          defaultLanguage="wandelscript"
+          theme={activeShikiTheme}
+          options={{
+            minimap: { enabled: false },
+            wordWrap: "on",
+            automaticLayout: true,
+            ...props.monacoOptions,
+          }}
+        />
+      </Suspense>
     )
   },
 )