@snack-uikit/code-editor 0.2.0 → 0.2.1-preview-01f9b65f.0

package/dist/components/CodeEditor.js

@@ -18,7 +18,8 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
-import { isDark } from './utils';
+import { initMonacoEnvironment, isDark } from './utils';
+initMonacoEnvironment();
 export function CodeEditor(_a) {
     var { themeClassName, className, theme, options, loading, hasBackground = true } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading", "hasBackground"]);
     const monaco = useMonaco();

package/dist/components/styles.module.css

@@ -9,5 +9,5 @@
   bottom:0;
   width:100%;
   opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #6f717c);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
 }

package/dist/components/utils.d.ts

@@ -1,2 +1,3 @@
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
+export declare function initMonacoEnvironment(): void;

package/dist/components/utils.js

@@ -1,3 +1,4 @@
+import { loader } from '@monaco-editor/react';
 export function rgb2hsl(HTMLcolor) {
     const r = parseInt(HTMLcolor.substring(1, 3), 16) / 255;
     const g = parseInt(HTMLcolor.substring(3, 5), 16) / 255;
@@ -33,3 +34,13 @@ export function isDark(color) {
     const [h, _, l] = rgb2hsl(color);
     return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
+export function initMonacoEnvironment() {
+    var _a;
+    if (!window) {
+        return;
+    }
+    const vs = (_a = window.MonacoEnvironment) === null || _a === void 0 ? void 0 : _a.baseUrl;
+    if (vs) {
+        loader.config({ paths: { vs } });
+    }
+}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.2.1-preview-01f9b65f.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,5 +37,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "e877cb36426721b752a2e98fc7cb28b3f05fc3bf"
+  "gitHead": "4fc8efb2c8fab602fc1e0391b743448d6dffd89b"
 }

package/src/components/CodeEditor.tsx

@@ -8,7 +8,9 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
-import { isDark } from './utils';
+import { initMonacoEnvironment, isDark } from './utils';
+
+initMonacoEnvironment();
 
 export type CodeEditorProps = WithSupportProps<{
   /** Класснейм подключенной темы (из хука useThemeConfig() или ThemeProvider)

package/src/components/utils.ts

@@ -1,3 +1,5 @@
+import { loader } from '@monaco-editor/react';
+
 export function rgb2hsl(HTMLcolor: string) {
   const r = parseInt(HTMLcolor.substring(1, 3), 16) / 255;
   const g = parseInt(HTMLcolor.substring(3, 5), 16) / 255;
@@ -45,3 +47,15 @@ export function isDark(color: string) {
 
   return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
+
+export function initMonacoEnvironment() {
+  if (!window) {
+    return;
+  }
+
+  const vs = window.MonacoEnvironment?.baseUrl;
+
+  if (vs) {
+    loader.config({ paths: { vs } });
+  }
+}