@snack-uikit/code-editor 0.2.1-preview-69f7a1cd.0 → 0.2.1-preview-03f6df7e.0

package/dist/components/CodeEditor.d.ts

@@ -8,4 +8,4 @@ export type CodeEditorProps = WithSupportProps<{
     /** Включение/отключение псевдобекграунда*/
     hasBackground?: boolean;
 }> & EditorProps;
-export declare function CodeEditor({ themeClassName, className, theme, options, loading, hasBackground, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeClassName, 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 { useEffect, useMemo } from 'react';
+import { useCallback, useMemo } 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,8 +21,13 @@ import styles from './styles.module.css';
 import { initLoaderConfig, isDark } from './utils';
 initLoaderConfig();
 export function CodeEditor(_a) {
-    var { themeClassName, className, theme, options, loading, hasBackground = true } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading", "hasBackground"]);
+    var { themeClassName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
     const monaco = useMonaco();
+    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 themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
         ? {
@@ -80,10 +85,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]);
-    useEffect(() => {
-        // eslint-disable-next-line no-console
-        console.log('!_! remeasureFonts');
-        setTimeout(() => monaco === null || monaco === void 0 ? void 0 : monaco.editor.remeasureFonts(), 0);
-    }, [mergedOptions, monaco === null || monaco === void 0 ? void 0 : monaco.editor]);
-    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 })) })));
+    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 })) })));
 }

package/package.json

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

package/src/components/CodeEditor.tsx

@@ -1,6 +1,6 @@
-import { Editor, EditorProps, useMonaco } from '@monaco-editor/react';
+import { Editor, EditorProps, OnMount, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -29,10 +29,19 @@ export function CodeEditor({
   options,
   loading,
   hasBackground = true,
+  onMount,
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
 
+  const onEditorMount = useCallback<OnMount>(
+    (editor, monaco) => {
+      monaco && window?.document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
+      onMount?.(editor, monaco);
+    },
+    [onMount],
+  );
+
   const themeValues = useCalculatedThemeValues(themeClassName);
 
   const themeDataWithoutBase = useMemo(
@@ -111,12 +120,6 @@ export function CodeEditor({
     [options, themeValues?.mono],
   );
 
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log('!_! remeasureFonts');
-    setTimeout(() => monaco?.editor.remeasureFonts(), 0);
-  }, [mergedOptions, monaco?.editor]);
-
   return (
     <div className={className} {...extractSupportProps(props)}>
       <Editor
@@ -125,6 +128,7 @@ export function CodeEditor({
         className={cn({ [styles.editor]: hasBackground })}
         loading={loading ?? <Spinner />}
         options={mergedOptions}
+        onMount={onEditorMount}
       />
     </div>
   );