@snack-uikit/code-editor 0.4.7-preview-e698fca9.0 → 0.4.7

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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.4.7 (2025-01-23)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/loaders@0.9.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/loaders/CHANGELOG.md)
10
+ * [@snack-uikit/utils@3.7.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
11
+
12
+
13
+
14
+
15
+
6
16
  ## 0.4.6 (2024-12-17)
7
17
 
8
18
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -14,7 +14,6 @@
14
14
  |------|------|---------------|-------------|
15
15
  | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
16
16
  | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
17
- | schema | `SchemasSettings` | - | Схема для валидации |
18
17
  | defaultValue | `string` | - | Default value of the current model |
19
18
  | defaultLanguage | `string` | - | Default language of the current model |
20
19
  | defaultPath | `string` | - | Default path of the current model Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
@@ -39,17 +38,3 @@
39
38
 
40
39
 
41
40
  [//]: DOCUMENTATION_SECTION_END
42
-
43
- ### Поддержка YAML
44
- Для обеспечения полноценной работы YAML Monaco Editor необходимо подключить `yaml.worker`. Это можно сделать следующими способами: с использованием [`window.MonacoEnvironment`](https://www.npmjs.com/package/monaco-yaml#usage) или с помощью плагина [`MonacoWebpackPlugin`](https://www.npmjs.com/package/monaco-yaml#using-monaco-webpack-loader-plugin) . Подробнее с `monaco-yaml` можно ознакомиться [тут]((https://www.npmjs.com/package/monaco-yaml))
45
-
46
- ### Как редактор загружает worker?
47
- Плагин создает новые точки входа каждого build-in воркера и для каждого дабавленного отдельно. Плагин создат глобальную переменную, используя которую редкатор будет загружать нужный воркер на основе текущего `language`.
48
-
49
- Чтобы управлять конфигурацией загрузчика Monaco Editor, добавьте
50
- ```typescript
51
- import * as monaco from 'monaco-editor';
52
- import { loader } from '@snack-uikit/code-editor';
53
- loader.config({ monaco });
54
- ```
55
- Это позволяет динамически настраивать пути и другие параметры при инициализации редактора.
@@ -1,5 +1,5 @@
1
+ import { EditorProps } from '@monaco-editor/react';
1
2
  import { WithSupportProps } from '@snack-uikit/utils';
2
- import { EditorProps, EditorWithSchemaProps } from './types';
3
3
  export type CodeEditorProps = WithSupportProps<{
4
4
  /**
5
5
  * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
9
9
  * Включение/отключение псевдобекграунда
10
10
  */
11
11
  hasBackground?: boolean;
12
- }> & (EditorProps | EditorWithSchemaProps);
12
+ }> & EditorProps;
13
13
  export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
@@ -29,7 +29,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
29
29
  const utils_2 = require("./utils");
30
30
  (0, utils_2.initLoaderConfig)();
31
31
  function CodeEditor(_a) {
32
- var _b, _c;
33
32
  var {
34
33
  themeName,
35
34
  className,
@@ -40,14 +39,8 @@ function CodeEditor(_a) {
40
39
  onMount
41
40
  } = _a,
42
41
  props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
43
- const {
44
- language
45
- } = props;
46
42
  const monaco = (0, react_1.useMonaco)();
47
43
  const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
48
- const modelPath = 'schema' in props ? (_c = (_b = props.schema) === null || _b === void 0 ? void 0 : _b.fileMatch) === null || _c === void 0 ? void 0 : _c[0] : undefined;
49
- (0, hooks_1.useYamlEditor)(props.language === 'yaml' ? props.schema : undefined);
50
- (0, hooks_1.useJsonEditor)(props.language === 'json' ? props.schema : undefined);
51
44
  const onEditorMount = (0, react_2.useCallback)((editor, monaco) => {
52
45
  var _a;
53
46
  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));
@@ -108,11 +101,11 @@ function CodeEditor(_a) {
108
101
  monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), {
109
102
  base: 'vs'
110
103
  }));
111
- const mergedOptions = (0, react_2.useMemo)(() => Object.assign(Object.assign(Object.assign(Object.assign({}, constants_1.CODE_EDITOR_OPTIONS), language === 'yaml' ? constants_1.YAML_CODE_EDITOR_OPTIONS : {}), (themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono) ? {
104
+ const mergedOptions = (0, react_2.useMemo)(() => Object.assign(Object.assign(Object.assign({}, constants_1.CODE_EDITOR_OPTIONS), (themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono) ? {
112
105
  fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
113
106
  fontWeight: themeValues.mono.body.s['font-weight'],
114
107
  fontFamily: themeValues.mono.body.s['font-family']
115
- } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
108
+ } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
116
109
  return (0, jsx_runtime_1.jsx)("div", Object.assign({
117
110
  className: className
118
111
  }, (0, utils_1.extractSupportProps)(props), {
@@ -124,8 +117,7 @@ function CodeEditor(_a) {
124
117
  }),
125
118
  loading: loading !== null && loading !== void 0 ? loading : (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}),
126
119
  options: mergedOptions,
127
- onMount: onEditorMount,
128
- path: modelPath
120
+ onMount: onEditorMount
129
121
  }))
130
122
  }));
131
123
  }
@@ -99,8 +99,3 @@ export declare const CODE_EDITOR_OPTIONS: {
99
99
  indentation: boolean;
100
100
  };
101
101
  };
102
- export declare const YAML_CODE_EDITOR_OPTIONS: {
103
- quickSuggestions: {
104
- strings: boolean;
105
- };
106
- };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.YAML_CODE_EDITOR_OPTIONS = exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
6
+ exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
7
7
  exports.DEFAULT_THEME_VALUES = {
8
8
  semanticTokenColors: {
9
9
  enumMember: {
@@ -113,9 +113,4 @@ exports.CODE_EDITOR_OPTIONS = {
113
113
  guides: {
114
114
  indentation: false
115
115
  }
116
- };
117
- exports.YAML_CODE_EDITOR_OPTIONS = {
118
- quickSuggestions: {
119
- strings: true
120
- }
121
116
  };
@@ -1,4 +1,3 @@
1
- import { SchemasSettings } from 'monaco-yaml';
2
1
  type UseCalculatedThemeValuesProps = {
3
2
  stylesOriginNode: HTMLDivElement | null;
4
3
  themeName?: string;
@@ -42,6 +41,4 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
42
41
  };
43
42
  };
44
43
  } | undefined;
45
- export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
46
- export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
47
44
  export {};
@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useCalculatedThemeValues = useCalculatedThemeValues;
7
- exports.useYamlEditor = useYamlEditor;
8
- exports.useJsonEditor = useJsonEditor;
9
- const react_1 = require("@monaco-editor/react");
10
- const monaco_yaml_1 = require("monaco-yaml");
11
- const react_2 = require("react");
7
+ const react_1 = require("react");
12
8
  const utils_1 = require("@snack-uikit/utils");
13
9
  const constants_1 = require("./constants");
14
10
  function getThemeVars(styles) {
@@ -29,44 +25,16 @@ function useCalculatedThemeValues(_ref) {
29
25
  stylesOriginNode,
30
26
  themeName
31
27
  } = _ref;
32
- const [values, setValues] = (0, react_2.useState)(undefined);
28
+ const [values, setValues] = (0, react_1.useState)(undefined);
33
29
  const {
34
30
  themeClassName
35
31
  } = (0, utils_1.useThemeContext)();
36
32
  const trigger = themeName !== null && themeName !== void 0 ? themeName : themeClassName;
37
- (0, react_2.useEffect)(() => {
33
+ (0, react_1.useEffect)(() => {
38
34
  if (stylesOriginNode) {
39
35
  const styles = getComputedStyle(stylesOriginNode);
40
36
  setValues(getThemeVars(styles)(constants_1.THEME_VARS));
41
37
  }
42
38
  }, [stylesOriginNode, trigger]);
43
39
  return values;
44
- }
45
- function useYamlEditor(yamlSchema) {
46
- var _a;
47
- const modelPath = (_a = yamlSchema === null || yamlSchema === void 0 ? void 0 : yamlSchema.fileMatch) === null || _a === void 0 ? void 0 : _a[0];
48
- const monaco = (0, react_1.useMonaco)();
49
- (0, react_2.useEffect)(() => {
50
- if (!yamlSchema || !monaco) {
51
- return;
52
- }
53
- const model = (0, monaco_yaml_1.configureMonacoYaml)(monaco, {
54
- enableSchemaRequest: true,
55
- schemas: [yamlSchema]
56
- });
57
- return () => model.dispose();
58
- }, [monaco, yamlSchema]);
59
- return modelPath;
60
- }
61
- function useJsonEditor(jsonSchema) {
62
- const monaco = (0, react_1.useMonaco)();
63
- (0, react_2.useEffect)(() => {
64
- if (!jsonSchema || !monaco) {
65
- return;
66
- }
67
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
68
- validate: true,
69
- schemas: [jsonSchema]
70
- });
71
- }, [monaco, jsonSchema]);
72
40
  }
@@ -1,2 +1 @@
1
1
  export * from './CodeEditor';
2
- export * from './types';
@@ -22,5 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
22
22
  Object.defineProperty(exports, "__esModule", {
23
23
  value: true
24
24
  });
25
- __exportStar(require("./CodeEditor"), exports);
26
- __exportStar(require("./types"), exports);
25
+ __exportStar(require("./CodeEditor"), exports);
@@ -1,5 +1,5 @@
1
+ import { EditorProps } from '@monaco-editor/react';
1
2
  import { WithSupportProps } from '@snack-uikit/utils';
2
- import { EditorProps, EditorWithSchemaProps } from './types';
3
3
  export type CodeEditorProps = WithSupportProps<{
4
4
  /**
5
5
  * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
9
9
  * Включение/отключение псевдобекграунда
10
10
  */
11
11
  hasBackground?: boolean;
12
- }> & (EditorProps | EditorWithSchemaProps);
12
+ }> & EditorProps;
13
13
  export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
@@ -15,20 +15,15 @@ import cn from 'classnames';
15
15
  import { useCallback, useMemo, useState } from 'react';
16
16
  import { Spinner } from '@snack-uikit/loaders';
17
17
  import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
18
- import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES, YAML_CODE_EDITOR_OPTIONS, } from './constants';
19
- import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } from './hooks';
18
+ import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
19
+ import { useCalculatedThemeValues } from './hooks';
20
20
  import styles from './styles.module.css';
21
21
  import { initLoaderConfig, isDark } from './utils';
22
22
  initLoaderConfig();
23
23
  export function CodeEditor(_a) {
24
- var _b, _c;
25
24
  var { themeName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
26
- const { language } = props;
27
25
  const monaco = useMonaco();
28
26
  const [wrapperElement, setWrapperElement] = useState(null);
29
- const modelPath = 'schema' in props ? (_c = (_b = props.schema) === null || _b === void 0 ? void 0 : _b.fileMatch) === null || _c === void 0 ? void 0 : _c[0] : undefined;
30
- useYamlEditor(props.language === 'yaml' ? props.schema : undefined);
31
- useJsonEditor(props.language === 'json' ? props.schema : undefined);
32
27
  const onEditorMount = useCallback((editor, monaco) => {
33
28
  var _a;
34
29
  monaco && isBrowser() && ((_a = document === null || document === void 0 ? void 0 : document.fonts) === null || _a === void 0 ? void 0 : _a.ready.finally(monaco.editor.remeasureFonts));
@@ -84,12 +79,12 @@ export function CodeEditor(_a) {
84
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]);
85
80
  monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
86
81
  monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
87
- const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), (language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {})), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
82
+ const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
88
83
  ? {
89
84
  fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
90
85
  fontWeight: themeValues.mono.body.s['font-weight'],
91
86
  fontFamily: themeValues.mono.body.s['font-family'],
92
87
  }
93
- : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
94
- 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: modelPath })) })));
88
+ : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
89
+ 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 })) })));
95
90
  }
@@ -99,8 +99,3 @@ export declare const CODE_EDITOR_OPTIONS: {
99
99
  indentation: boolean;
100
100
  };
101
101
  };
102
- export declare const YAML_CODE_EDITOR_OPTIONS: {
103
- quickSuggestions: {
104
- strings: boolean;
105
- };
106
- };
@@ -95,8 +95,3 @@ export const CODE_EDITOR_OPTIONS = {
95
95
  indentation: false,
96
96
  },
97
97
  };
98
- export const YAML_CODE_EDITOR_OPTIONS = {
99
- quickSuggestions: {
100
- strings: true,
101
- },
102
- };
@@ -1,4 +1,3 @@
1
- import { SchemasSettings } from 'monaco-yaml';
2
1
  type UseCalculatedThemeValuesProps = {
3
2
  stylesOriginNode: HTMLDivElement | null;
4
3
  themeName?: string;
@@ -42,6 +41,4 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
42
41
  };
43
42
  };
44
43
  } | undefined;
45
- export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
46
- export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
47
44
  export {};
@@ -1,5 +1,3 @@
1
- import { useMonaco } from '@monaco-editor/react';
2
- import { configureMonacoYaml } from 'monaco-yaml';
3
1
  import { useEffect, useState } from 'react';
4
2
  import { useThemeContext } from '@snack-uikit/utils';
5
3
  import { THEME_VARS } from './constants';
@@ -28,31 +26,3 @@ export function useCalculatedThemeValues({ stylesOriginNode, themeName }) {
28
26
  }, [stylesOriginNode, trigger]);
29
27
  return values;
30
28
  }
31
- export function useYamlEditor(yamlSchema) {
32
- var _a;
33
- const modelPath = (_a = yamlSchema === null || yamlSchema === void 0 ? void 0 : yamlSchema.fileMatch) === null || _a === void 0 ? void 0 : _a[0];
34
- const monaco = useMonaco();
35
- useEffect(() => {
36
- if (!yamlSchema || !monaco) {
37
- return;
38
- }
39
- const model = configureMonacoYaml(monaco, {
40
- enableSchemaRequest: true,
41
- schemas: [yamlSchema],
42
- });
43
- return () => model.dispose();
44
- }, [monaco, yamlSchema]);
45
- return modelPath;
46
- }
47
- export function useJsonEditor(jsonSchema) {
48
- const monaco = useMonaco();
49
- useEffect(() => {
50
- if (!jsonSchema || !monaco) {
51
- return;
52
- }
53
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
54
- validate: true,
55
- schemas: [jsonSchema],
56
- });
57
- }, [monaco, jsonSchema]);
58
- }
@@ -1,2 +1 @@
1
1
  export * from './CodeEditor';
2
- export * from './types';
@@ -1,2 +1 @@
1
1
  export * from './CodeEditor';
2
- export * from './types';
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.4.7-preview-e698fca9.0",
7
+ "version": "0.4.7",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,14 +37,13 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@monaco-editor/react": "4.6.0",
40
- "@snack-uikit/loaders": "0.9.0",
41
- "@snack-uikit/utils": "3.6.0",
40
+ "@snack-uikit/loaders": "0.9.1",
41
+ "@snack-uikit/utils": "3.7.0",
42
42
  "chroma-js": "3.1.2",
43
- "classnames": "2.5.1",
44
- "monaco-yaml": "5.2.3"
43
+ "classnames": "2.5.1"
45
44
  },
46
45
  "devDependencies": {
47
46
  "@types/chroma-js": "2.4.4"
48
47
  },
49
- "gitHead": "47cf244ae899e49b7cffec403d0c31648dfc3999"
48
+ "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
50
49
  }
@@ -1,19 +1,13 @@
1
- import { Editor, OnMount, useMonaco } from '@monaco-editor/react';
1
+ import { Editor, EditorProps, OnMount, useMonaco } from '@monaco-editor/react';
2
2
  import cn from 'classnames';
3
3
  import { useCallback, useMemo, useState } from 'react';
4
4
 
5
5
  import { Spinner } from '@snack-uikit/loaders';
6
6
  import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
7
7
 
8
- import {
9
- CODE_EDITOR_OPTIONS,
10
- DEFAULT_THEME_OPTIONS,
11
- DEFAULT_THEME_VALUES,
12
- YAML_CODE_EDITOR_OPTIONS,
13
- } from './constants';
14
- import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } from './hooks';
8
+ import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
9
+ import { useCalculatedThemeValues } from './hooks';
15
10
  import styles from './styles.module.scss';
16
- import { EditorProps, EditorWithSchemaProps } from './types';
17
11
  import { initLoaderConfig, isDark } from './utils';
18
12
 
19
13
  initLoaderConfig();
@@ -28,7 +22,7 @@ export type CodeEditorProps = WithSupportProps<{
28
22
  */
29
23
  hasBackground?: boolean;
30
24
  }> &
31
- (EditorProps | EditorWithSchemaProps);
25
+ EditorProps;
32
26
 
33
27
  export function CodeEditor({
34
28
  themeName,
@@ -40,15 +34,9 @@ export function CodeEditor({
40
34
  onMount,
41
35
  ...props
42
36
  }: CodeEditorProps) {
43
- const { language } = props;
44
-
45
37
  const monaco = useMonaco();
46
38
  const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
47
39
 
48
- const modelPath = 'schema' in props ? props.schema?.fileMatch?.[0] : undefined;
49
- useYamlEditor(props.language === 'yaml' ? props.schema : undefined);
50
- useJsonEditor(props.language === 'json' ? props.schema : undefined);
51
-
52
40
  const onEditorMount = useCallback<OnMount>(
53
41
  (editor, monaco) => {
54
42
  monaco && isBrowser() && document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
@@ -123,7 +111,6 @@ export function CodeEditor({
123
111
  const mergedOptions = useMemo(
124
112
  () => ({
125
113
  ...CODE_EDITOR_OPTIONS,
126
- ...(language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {}),
127
114
  ...(themeValues?.mono
128
115
  ? {
129
116
  fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
@@ -133,7 +120,7 @@ export function CodeEditor({
133
120
  : DEFAULT_THEME_OPTIONS.mono.s),
134
121
  ...options,
135
122
  }),
136
- [options, language, themeValues?.mono],
123
+ [options, themeValues?.mono],
137
124
  );
138
125
 
139
126
  return (
@@ -145,7 +132,6 @@ export function CodeEditor({
145
132
  loading={loading ?? <Spinner />}
146
133
  options={mergedOptions}
147
134
  onMount={onEditorMount}
148
- path={modelPath}
149
135
  />
150
136
  </div>
151
137
  );
@@ -98,9 +98,3 @@ export const CODE_EDITOR_OPTIONS = {
98
98
  indentation: false,
99
99
  },
100
100
  };
101
-
102
- export const YAML_CODE_EDITOR_OPTIONS = {
103
- quickSuggestions: {
104
- strings: true,
105
- },
106
- };
@@ -1,5 +1,3 @@
1
- import { useMonaco } from '@monaco-editor/react';
2
- import { configureMonacoYaml, SchemasSettings } from 'monaco-yaml';
3
1
  import { useEffect, useState } from 'react';
4
2
 
5
3
  import { useThemeContext } from '@snack-uikit/utils';
@@ -44,38 +42,3 @@ export function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCal
44
42
 
45
43
  return values;
46
44
  }
47
-
48
- export function useYamlEditor(yamlSchema?: SchemasSettings) {
49
- const modelPath = yamlSchema?.fileMatch?.[0];
50
- const monaco = useMonaco();
51
-
52
- useEffect(() => {
53
- if (!yamlSchema || !monaco) {
54
- return;
55
- }
56
-
57
- const model = configureMonacoYaml(monaco, {
58
- enableSchemaRequest: true,
59
- schemas: [yamlSchema],
60
- });
61
-
62
- return () => model.dispose();
63
- }, [monaco, yamlSchema]);
64
-
65
- return modelPath;
66
- }
67
-
68
- export function useJsonEditor(jsonSchema?: SchemasSettings) {
69
- const monaco = useMonaco();
70
-
71
- useEffect(() => {
72
- if (!jsonSchema || !monaco) {
73
- return;
74
- }
75
-
76
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
77
- validate: true,
78
- schemas: [jsonSchema],
79
- });
80
- }, [monaco, jsonSchema]);
81
- }
@@ -1,2 +1 @@
1
1
  export * from './CodeEditor';
2
- export * from './types';
@@ -1,12 +0,0 @@
1
- import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
2
- import { SchemasSettings } from 'monaco-yaml';
3
- export type EditorProps = {
4
- schema?: never;
5
- } & MonacoEditorProps;
6
- export type EditorWithSchemaProps = {
7
- language: 'yaml' | 'json';
8
- /**
9
- * Схема для валидации
10
- */
11
- schema?: SchemasSettings;
12
- } & Omit<MonacoEditorProps, 'language'>;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,12 +0,0 @@
1
- import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
2
- import { SchemasSettings } from 'monaco-yaml';
3
- export type EditorProps = {
4
- schema?: never;
5
- } & MonacoEditorProps;
6
- export type EditorWithSchemaProps = {
7
- language: 'yaml' | 'json';
8
- /**
9
- * Схема для валидации
10
- */
11
- schema?: SchemasSettings;
12
- } & Omit<MonacoEditorProps, 'language'>;
@@ -1 +0,0 @@
1
- export {};
@@ -1,14 +0,0 @@
1
- import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
2
- import { SchemasSettings } from 'monaco-yaml';
3
-
4
- export type EditorProps = {
5
- schema?: never;
6
- } & MonacoEditorProps;
7
-
8
- export type EditorWithSchemaProps = {
9
- language: 'yaml' | 'json';
10
- /**
11
- * Схема для валидации
12
- */
13
- schema?: SchemasSettings;
14
- } & Omit<MonacoEditorProps, 'language'>;