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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/CodeEditor.js +12 -7
  3. package/package.json +2 -2
  4. package/src/components/CodeEditor.tsx +17 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.2.1 (2024-07-18)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-450:** add loader config init ([1453a87](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/1453a87b70885d1b1beb351b6cf9124f2cf3889a))
12
+
13
+
14
+
15
+
16
+
6
17
  # 0.2.0 (2024-04-27)
7
18
 
8
19
 
package/dist/components/CodeEditor.js CHANGED
@@ -24,11 +24,11 @@ export function CodeEditor(_a) {
24
24
  var { themeName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
25
25
  const monaco = useMonaco();
26
26
  const wrapperRef = useRef(null);
27
- const onEditorMount = useCallback((editor, monaco) => {
28
- var _a, _b;
29
- 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));
30
- onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
31
- }, [onMount]);
27
+ const defineTheme = monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme;
28
+ const applyTheme = useCallback((themeDataWithoutBase) => {
29
+ defineTheme === null || defineTheme === void 0 ? void 0 : defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
30
+ defineTheme === null || defineTheme === void 0 ? void 0 : defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
31
+ }, [defineTheme]);
32
32
  const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
33
33
  const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
34
34
  ? {
@@ -77,8 +77,7 @@ export function CodeEditor(_a) {
77
77
  }
78
78
  : DEFAULT_THEME_VALUES))), [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys]);
79
79
  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]);
80
- monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
81
- monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
80
+ applyTheme(themeDataWithoutBase);
82
81
  const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
83
82
  ? {
84
83
  fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
@@ -86,5 +85,11 @@ export function CodeEditor(_a) {
86
85
  fontFamily: themeValues.mono.body.s['font-family'],
87
86
  }
88
87
  : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
88
+ const onEditorMount = useCallback((editor, monaco) => {
89
+ var _a, _b;
90
+ 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));
91
+ applyTheme(themeDataWithoutBase);
92
+ onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
93
+ }, [applyTheme, onMount, themeDataWithoutBase]);
89
94
  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 })) })));
90
95
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.2.1-preview-41bee0a4.0",
7
+ "version": "0.2.2-preview-6dbb02ba.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,5 +37,5 @@
37
37
  "@snack-uikit/utils": "3.3.0",
38
38
  "classnames": "2.5.1"
39
39
  },
40
- "gitHead": "74a281ab089c84e90be8d8a6c363c277b53bd802"
40
+ "gitHead": "526554531839b6d0f24eec52ddf4679cedb99573"
41
41
  }
package/src/components/CodeEditor.tsx CHANGED
@@ -36,13 +36,15 @@ export function CodeEditor({
36
36
  }: CodeEditorProps) {
37
37
  const monaco = useMonaco();
38
38
  const wrapperRef = useRef<HTMLDivElement>(null);
39
+ const defineTheme = monaco?.editor.defineTheme;
40
+ type ThemeData = Parameters<Exclude<typeof defineTheme, undefined>>[1];
39
41
 
40
- const onEditorMount = useCallback<OnMount>(
41
- (editor, monaco) => {
42
- monaco && window?.document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
43
- onMount?.(editor, monaco);
42
+ const applyTheme = useCallback(
43
+ (themeDataWithoutBase: Omit<ThemeData, 'base'>) => {
44
+ defineTheme?.('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
45
+ defineTheme?.('snack', { ...themeDataWithoutBase, base: 'vs' });
44
46
  },
45
- [onMount],
47
+ [defineTheme],
46
48
  );
47
49
 
48
50
  const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperRef.current });
@@ -105,8 +107,7 @@ export function CodeEditor({
105
107
  [themeValues?.sys.available.complementary],
106
108
  );
107
109
 
108
- monaco?.editor.defineTheme('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
109
- monaco?.editor.defineTheme('snack', { ...themeDataWithoutBase, base: 'vs' });
110
+ applyTheme(themeDataWithoutBase);
110
111
 
111
112
  const mergedOptions = useMemo(
112
113
  () => ({
@@ -123,6 +124,15 @@ export function CodeEditor({
123
124
  [options, themeValues?.mono],
124
125
  );
125
126
 
127
+ const onEditorMount = useCallback<OnMount>(
128
+ (editor, monaco) => {
129
+ monaco && window?.document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
130
+ applyTheme(themeDataWithoutBase);
131
+ onMount?.(editor, monaco);
132
+ },
133
+ [applyTheme, onMount, themeDataWithoutBase],
134
+ );
135
+
126
136
  return (
127
137
  <div className={className} {...extractSupportProps(props)} ref={wrapperRef}>
128
138
  <Editor