@snack-uikit/code-editor 0.4.7-preview-9b2da27a.0 → 0.4.7-preview-ac85ab7b.0

package/dist/cjs/components/CodeEditor.d.ts

@@ -10,4 +10,4 @@ export type CodeEditorProps = WithSupportProps<{
      */
     hasBackground?: boolean;
 }> & (EditorProps | YamlEditorProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/CodeEditor.js

@@ -27,7 +27,6 @@ const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
-(0, utils_2.initLoaderConfig)();
 function CodeEditor(_a) {
   var {
       themeName,
@@ -42,6 +41,11 @@ function CodeEditor(_a) {
   const {
     language
   } = props;
+  const [canRender, setCanRender] = (0, react_2.useState)(false);
+  (0, utils_1.useLayoutEffect)(() => {
+    (0, utils_2.initLoaderConfig)();
+    setCanRender(true);
+  }, []);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
   const yamlModelPath = (0, hooks_1.useYamlEditor)(props.language === 'yaml' ? props.yamlSchema : undefined);
@@ -49,12 +53,7 @@ function CodeEditor(_a) {
     var _a;
     monaco && (0, utils_1.isBrowser)() && ((_a = document === null || document === void 0 ? void 0 : document.fonts) === null || _a === void 0 ? void 0 : _a.ready.finally(monaco.editor.remeasureFonts));
     onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
-    if (language === 'yaml') {
-      monaco.languages.register({
-        id: 'yaml'
-      });
-    }
-  }, [language, onMount]);
+  }, [onMount]);
   const themeValues = (0, hooks_1.useCalculatedThemeValues)({
     themeName,
     stylesOriginNode: wrapperElement
@@ -115,6 +114,9 @@ function CodeEditor(_a) {
     fontWeight: themeValues.mono.body.s['font-weight'],
     fontFamily: themeValues.mono.body.s['font-family']
   } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+  if (!canRender) {
+    return null;
+  }
   return (0, jsx_runtime_1.jsx)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(props), {

package/dist/esm/components/CodeEditor.d.ts

@@ -10,4 +10,4 @@ export type CodeEditorProps = WithSupportProps<{
      */
     hasBackground?: boolean;
 }> & (EditorProps | YamlEditorProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/CodeEditor.js

@@ -14,15 +14,19 @@ import { Editor, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
-import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES, YAML_CODE_EDITOR_OPTIONS, } from './constants';
 import { useCalculatedThemeValues, useYamlEditor } from './hooks';
 import styles from './styles.module.css';
 import { initLoaderConfig, isDark } from './utils';
-initLoaderConfig();
 export function CodeEditor(_a) {
     var { themeName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
     const { language } = props;
+    const [canRender, setCanRender] = useState(false);
+    useLayoutEffect(() => {
+        initLoaderConfig();
+        setCanRender(true);
+    }, []);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
     const yamlModelPath = useYamlEditor(props.language === 'yaml' ? props.yamlSchema : undefined);
@@ -30,10 +34,7 @@ export function CodeEditor(_a) {
         var _a;
         monaco && isBrowser() && ((_a = document === null || document === void 0 ? void 0 : document.fonts) === null || _a === void 0 ? void 0 : _a.ready.finally(monaco.editor.remeasureFonts));
         onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
-        if (language === 'yaml') {
-            monaco.languages.register({ id: 'yaml' });
-        }
-    }, [language, onMount]);
+    }, [onMount]);
     const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperElement });
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
         ? {
@@ -91,5 +92,8 @@ export function CodeEditor(_a) {
             fontFamily: themeValues.mono.body.s['font-family'],
         }
         : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+    if (!canRender) {
+        return null;
+    }
     return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: _jsx(Editor, Object.assign({}, props, { theme: theme !== null && theme !== void 0 ? theme : (dark ? 'snackDark' : 'snack'), className: cn({ [styles.editor]: hasBackground }), loading: loading !== null && loading !== void 0 ? loading : _jsx(Spinner, {}), options: mergedOptions, onMount: onEditorMount, path: yamlModelPath })) })));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.7-preview-9b2da27a.0",
+  "version": "0.4.7-preview-ac85ab7b.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "dff6045c82808e07fd469610e3d894ed9d5eb1b9"
+  "gitHead": "b48c28c30724091afb0c9c00a9f06a0d8fdaa943"
 }

package/src/components/CodeEditor.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
-import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
 
 import {
   CODE_EDITOR_OPTIONS,
@@ -16,8 +16,6 @@ import styles from './styles.module.scss';
 import { EditorProps, YamlEditorProps } from './types';
 import { initLoaderConfig, isDark } from './utils';
 
-initLoaderConfig();
-
 export type CodeEditorProps = WithSupportProps<{
   /**
    * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -41,6 +39,12 @@ export function CodeEditor({
   ...props
 }: CodeEditorProps) {
   const { language } = props;
+  const [canRender, setCanRender] = useState(false);
+
+  useLayoutEffect(() => {
+    initLoaderConfig();
+    setCanRender(true);
+  }, []);
 
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
@@ -51,12 +55,8 @@ export function CodeEditor({
     (editor, monaco) => {
       monaco && isBrowser() && document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
       onMount?.(editor, monaco);
-
-      if (language === 'yaml') {
-        monaco.languages.register({ id: 'yaml' });
-      }
     },
-    [language, onMount],
+    [onMount],
   );
 
   const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperElement });
@@ -138,6 +138,10 @@ export function CodeEditor({
     [options, language, themeValues?.mono],
   );
 
+  if (!canRender) {
+    return null;
+  }
+
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
       <Editor