@wandelbots/wandelbots-js-react-components 1.37.0 → 1.38.0

package/dist/themes/createDarkTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEvD,wBAAgB,eAAe,IAAI,KAAK,CAyOvC"}
+{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA8PvC"}

package/dist/themes/themeTypes.d.ts

@@ -1,3 +1,4 @@
+import type { editor } from "monaco-editor";
 type NovaColorPaletteExtension = {
     paletteExt?: {
         primary?: {
@@ -32,6 +33,9 @@ interface NovaComponentsExtension {
                 Z?: AxisControlComponentColors;
             };
         };
+        WandelscriptEditor?: {
+            monacoTheme: editor.IStandaloneThemeData;
+        };
     };
 }
 interface BackgroundPaperElevation {

package/dist/themes/themeTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"AAAA,KAAK,yBAAyB,GAAG;IAC/B,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE;YACR,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,CAAC,EAAE,MAAM,CAAA;YACjB,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,YAAY,CAAC,EAAE,MAAM,CAAA;YACrB,aAAa,CAAC,EAAE,MAAM,CAAA;SACvB,CAAA;QACD,SAAS,CAAC,EAAE;YACV,KAAK,CAAC,EAAE,MAAM,CAAA;SACf,CAAA;KACF,CAAA;CACF,CAAA;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qBAAqB,CAAC,EAAE;QACtB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;CACF;AAED,UAAU,uBAAuB;IAC/B,aAAa,CAAC,EAAE;QACd,gBAAgB,CAAC,EAAE;YACjB,IAAI,CAAC,EAAE;gBACL,CAAC,CAAC,EAAE,0BAA0B,CAAA;gBAC9B,CAAC,CAAC,EAAE,0BAA0B,CAAA;gBAC9B,CAAC,CAAC,EAAE,0BAA0B,CAAA;aAC/B,CAAA;SACF,CAAA;KACF,CAAA;CACF;AAED,UAAU,wBAAwB;IAChC,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;QAC5B,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;KACpD;IAED,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;QACpC,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;KACpD;IAED,UAAU,KAAM,SAAQ,uBAAuB,EAAE,yBAAyB;KAAG;IAE7E,UAAU,YACR,SAAQ,uBAAuB,EAC7B,yBAAyB;KAAG;CACjC"}
+{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "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,12 @@
 import type { Monaco } from "@monaco-editor/react"
 import { lazy, Suspense, useRef, useState } from "react"
-import type { BundledLanguage, HighlighterGeneric } from "shiki"
-import type { BundledTheme } from "shiki"
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } 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"
+import wandelscriptTextmateGrammar from "./wandelscript.tmLanguage"
 
 type WandelscriptEditorProps = {
   /** The current Wandelscript content of the code editor (controlled component) */
@@ -81,20 +80,15 @@ export const WandelscriptEditor = externalizeComponent(
 
       // Override the generated shiki theme to use shiki syntax highlighting
       // but vscode colors
-      monaco.editor.defineTheme(targetShikiTheme, {
-        base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-        inherit: true,
-        rules: [],
-        colors:
-          theme.palette.mode === "dark"
-            ? {
-                "editor.background": "#262F42",
-                "editorLineNumber.foreground": "#797979",
-                "editorLineNumber.activeForeground": "#e9e9e9",
-                "editor.lineHighlightBorder": "#494949",
-              }
-            : {},
-      })
+      monaco.editor.defineTheme(
+        targetShikiTheme,
+        theme.componentsExt?.WandelscriptEditor?.monacoTheme ?? {
+          base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+          inherit: true,
+          rules: [],
+          colors: {},
+        },
+      )
 
       if (props.monacoSetup) {
         props.monacoSetup(monaco)

package/src/themes/createDarkTheme.ts

@@ -1,4 +1,4 @@
-import { createTheme, type Theme } from "@mui/material"
+import { createTheme, rgbToHex, type Theme } from "@mui/material"
 
 export function createDarkTheme(): Theme {
   const baseTheme = createTheme({
@@ -231,6 +231,27 @@ export function createDarkTheme(): Theme {
           },
         },
       },
+      WandelscriptEditor: {
+        monacoTheme: {
+          base: "vs-dark",
+          inherit: true,
+          rules: [
+            {
+              token: "keyword",
+              foreground: "#b349a9ff",
+            },
+          ],
+          colors: {
+            "editor.background": rgbToHex(
+              baseTheme.palette.backgroundPaperElevation?.[5] ?? "",
+            ),
+            "editor.foreground": "#d4d4d4",
+            "editorLineNumber.foreground": "#797979",
+            "editorLineNumber.activeForeground": "#e9e9e9",
+            "editor.lineHighlightBorder": "#e9e9e911",
+          },
+        },
+      },
     },
   }
 }

package/src/themes/themeTypes.ts

@@ -1,3 +1,5 @@
+import type { editor } from "monaco-editor"
+
 type NovaColorPaletteExtension = {
   paletteExt?: {
     primary?: {
@@ -34,6 +36,9 @@ interface NovaComponentsExtension {
         Z?: AxisControlComponentColors
       }
     }
+    WandelscriptEditor?: {
+      monacoTheme: editor.IStandaloneThemeData
+    }
   }
 }