@snack-uikit/code-editor 0.2.2-preview-6dbb02ba.0 → 0.2.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.2.2 (2024-07-19)
+
+
+### Bug Fixes
+
+* **FF-0000:** code-editor theme init ([da4f622](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/da4f622f5a5b9b8028127d357dbe6fc8e20a81ab))
+
+
+
+
+
 ## 0.2.1 (2024-07-18)
 
 

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, useRef } from 'react';
+import { useCallback, useMemo, useState } 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';
@@ -23,13 +23,13 @@ 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 monaco = useMonaco();
-    const wrapperRef = useRef(null);
-    const defineTheme = monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme;
-    const applyTheme = useCallback((themeDataWithoutBase) => {
-        defineTheme === null || defineTheme === void 0 ? void 0 : defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
-        defineTheme === null || defineTheme === void 0 ? void 0 : defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
-    }, [defineTheme]);
-    const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
+    const [wrapperElement, setWrapperElement] = useState(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({ themeName, stylesOriginNode: wrapperElement });
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
         ? {
             semanticTokenColors: {
@@ -77,7 +77,8 @@ export function CodeEditor(_a) {
         }
         : DEFAULT_THEME_VALUES))), [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys]);
     const dark = useMemo(() => { var _a; return isDark((_a = themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary) !== null && _a !== void 0 ? _a : ''); }, [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary]);
-    applyTheme(themeDataWithoutBase);
+    monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
+    monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
     const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
         ? {
             fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
@@ -85,11 +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]);
-    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));
-        applyTheme(themeDataWithoutBase);
-        onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
-    }, [applyTheme, onMount, themeDataWithoutBase]);
-    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 })) })));
+    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 })) })));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.2-preview-6dbb02ba.0",
+  "version": "0.2.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,5 +37,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "526554531839b6d0f24eec52ddf4679cedb99573"
+  "gitHead": "7bb0d0cace003d77312cb0cc9a567540f3d58bc6"
 }

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, useRef } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -35,19 +35,17 @@ export function CodeEditor({
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const defineTheme = monaco?.editor.defineTheme;
-  type ThemeData = Parameters<Exclude<typeof defineTheme, undefined>>[1];
+  const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
-  const applyTheme = useCallback(
-    (themeDataWithoutBase: Omit<ThemeData, 'base'>) => {
-      defineTheme?.('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
-      defineTheme?.('snack', { ...themeDataWithoutBase, base: 'vs' });
+  const onEditorMount = useCallback<OnMount>(
+    (editor, monaco) => {
+      monaco && window?.document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
+      onMount?.(editor, monaco);
     },
-    [defineTheme],
+    [onMount],
   );
 
-  const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
+  const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperElement });
 
   const themeDataWithoutBase = useMemo(
     () => ({
@@ -107,7 +105,8 @@ export function CodeEditor({
     [themeValues?.sys.available.complementary],
   );
 
-  applyTheme(themeDataWithoutBase);
+  monaco?.editor.defineTheme('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
+  monaco?.editor.defineTheme('snack', { ...themeDataWithoutBase, base: 'vs' });
 
   const mergedOptions = useMemo(
     () => ({
@@ -124,17 +123,8 @@ export function CodeEditor({
     [options, themeValues?.mono],
   );
 
-  const onEditorMount = useCallback<OnMount>(
-    (editor, monaco) => {
-      monaco && window?.document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
-      applyTheme(themeDataWithoutBase);
-      onMount?.(editor, monaco);
-    },
-    [applyTheme, onMount, themeDataWithoutBase],
-  );
-
   return (
-    <div className={className} {...extractSupportProps(props)} ref={wrapperRef}>
+    <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
       <Editor
         {...props}
         theme={theme ?? dark ? 'snackDark' : 'snack'}