@snack-uikit/code-editor 0.2.1-preview-03f6df7e.0 → 0.2.1-preview-41bee0a4.0

package/README.md

@@ -12,7 +12,7 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| themeClassName | `string` | - | Класснейм подключенной темы (из хука useThemeConfig() или ThemeProvider) <br> По дефолту берется значение из useTheme внутри |
+| themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
 | defaultValue | `string` | - | Default value of the current model |
 | defaultLanguage | `string` | - | Default language of the current model |

package/dist/components/CodeEditor.d.ts

@@ -1,11 +1,13 @@
 import { EditorProps } from '@monaco-editor/react';
 import { WithSupportProps } from '@snack-uikit/utils';
 export type CodeEditorProps = WithSupportProps<{
-    /** Класснейм подключенной темы (из хука useThemeConfig() или ThemeProvider)
-     * <br> По дефолту берется значение из useTheme внутри
+    /**
+     * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
+     */
+    themeName?: string;
+    /**
+     * Включение/отключение псевдобекграунда
      */
-    themeClassName?: string;
-    /** Включение/отключение псевдобекграунда*/
     hasBackground?: boolean;
 }> & EditorProps;
-export declare function CodeEditor({ themeClassName, 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;

package/dist/components/CodeEditor.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
@@ -21,14 +21,15 @@ import styles from './styles.module.css';
 import { initLoaderConfig, isDark } from './utils';
 initLoaderConfig();
 export function CodeEditor(_a) {
-    var { themeClassName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
+    var { themeName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
     const monaco = useMonaco();
+    const wrapperRef = useRef(null);
     const onEditorMount = useCallback((editor, monaco) => {
         var _a, _b;
         monaco && ((_b = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.fonts) === null || _b === void 0 ? void 0 : _b.ready.finally(monaco.editor.remeasureFonts));
         onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
     }, [onMount]);
-    const themeValues = useCalculatedThemeValues(themeClassName);
+    const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
         ? {
             semanticTokenColors: {
@@ -85,5 +86,5 @@ export function CodeEditor(_a) {
             fontFamily: themeValues.mono.body.s['font-family'],
         }
         : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
-    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { 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 })) })));
+    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { ref: wrapperRef, 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 })) })));
 }

package/dist/components/hooks.d.ts

@@ -1,4 +1,8 @@
-export declare function useCalculatedThemeValues(themeClassNameProps?: string): {
+type UseCalculatedThemeValuesProps = {
+    stylesOriginNode: HTMLDivElement | null;
+    themeName?: string;
+};
+export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCalculatedThemeValuesProps): {
     sys: {
         neutral: {
             decorDefault: string;
@@ -37,3 +41,4 @@ export declare function useCalculatedThemeValues(themeClassNameProps?: string):
         };
     };
 } | undefined;
+export {};

package/dist/components/hooks.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useThemeContext } from '@snack-uikit/utils';
 import { THEME_VARS } from './constants';
 function getThemeVars(styles) {
@@ -14,16 +14,15 @@ function getThemeVars(styles) {
         return res;
     };
 }
-export function useCalculatedThemeValues(themeClassNameProps) {
+export function useCalculatedThemeValues({ stylesOriginNode, themeName }) {
     const [values, setValues] = useState(undefined);
-    const { themeClassName: themeClassNameContext } = useThemeContext();
-    const themeClassName = useMemo(() => themeClassNameProps !== null && themeClassNameProps !== void 0 ? themeClassNameProps : themeClassNameContext, [themeClassNameContext, themeClassNameProps]);
+    const { themeClassName } = useThemeContext();
+    const trigger = themeName !== null && themeName !== void 0 ? themeName : themeClassName;
     useEffect(() => {
-        const elem = document.querySelector(themeClassName ? '.' + themeClassName : 'body');
-        if (elem) {
-            const styles = getComputedStyle(elem);
+        if (stylesOriginNode) {
+            const styles = getComputedStyle(stylesOriginNode);
             setValues(getThemeVars(styles)(THEME_VARS));
         }
-    }, [themeClassName]);
+    }, [stylesOriginNode, trigger]);
     return values;
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.1-preview-03f6df7e.0",
+  "version": "0.2.1-preview-41bee0a4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,5 +37,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "6901ea13eae02eca6b24ac88fc2f8e8e8f9c3dba"
+  "gitHead": "74a281ab089c84e90be8d8a6c363c277b53bd802"
 }

package/src/components/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import { Editor, EditorProps, OnMount, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -13,17 +13,19 @@ import { initLoaderConfig, isDark } from './utils';
 initLoaderConfig();
 
 export type CodeEditorProps = WithSupportProps<{
-  /** Класснейм подключенной темы (из хука useThemeConfig() или ThemeProvider)
-   * <br> По дефолту берется значение из useTheme внутри
+  /**
+   * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
+   */
+  themeName?: string;
+  /**
+   * Включение/отключение псевдобекграунда
    */
-  themeClassName?: string;
-  /** Включение/отключение псевдобекграунда*/
   hasBackground?: boolean;
 }> &
   EditorProps;
 
 export function CodeEditor({
-  themeClassName,
+  themeName,
   className,
   theme,
   options,
@@ -33,6 +35,7 @@ export function CodeEditor({
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const onEditorMount = useCallback<OnMount>(
     (editor, monaco) => {
@@ -42,7 +45,7 @@ export function CodeEditor({
     [onMount],
   );
 
-  const themeValues = useCalculatedThemeValues(themeClassName);
+  const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
 
   const themeDataWithoutBase = useMemo(
     () => ({
@@ -121,7 +124,7 @@ export function CodeEditor({
   );
 
   return (
-    <div className={className} {...extractSupportProps(props)}>
+    <div className={className} {...extractSupportProps(props)} ref={wrapperRef}>
       <Editor
         {...props}
         theme={theme ?? dark ? 'snackDark' : 'snack'}

package/src/components/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useThemeContext } from '@snack-uikit/utils';
 
@@ -21,25 +21,24 @@ function getThemeVars(styles: CSSStyleDeclaration) {
   };
 }
 
-export function useCalculatedThemeValues(themeClassNameProps?: string) {
+type UseCalculatedThemeValuesProps = {
+  stylesOriginNode: HTMLDivElement | null;
+  themeName?: string;
+};
+
+export function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCalculatedThemeValuesProps) {
   const [values, setValues] = useState<typeof THEME_VARS | undefined>(undefined);
 
-  const { themeClassName: themeClassNameContext } = useThemeContext();
+  const { themeClassName } = useThemeContext();
 
-  const themeClassName = useMemo(
-    () => themeClassNameProps ?? themeClassNameContext,
-    [themeClassNameContext, themeClassNameProps],
-  );
+  const trigger = themeName ?? themeClassName;
 
   useEffect(() => {
-    const elem = document.querySelector(themeClassName ? '.' + themeClassName : 'body');
-
-    if (elem) {
-      const styles = getComputedStyle(elem);
-
+    if (stylesOriginNode) {
+      const styles = getComputedStyle(stylesOriginNode);
       setValues(getThemeVars(styles)(THEME_VARS) as typeof THEME_VARS);
     }
-  }, [themeClassName]);
+  }, [stylesOriginNode, trigger]);
 
   return values;
 }