@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 +10 -0
- package/README.md +0 -15
- package/dist/cjs/components/CodeEditor.d.ts +2 -2
- package/dist/cjs/components/CodeEditor.js +3 -11
- package/dist/cjs/components/constants.d.ts +0 -5
- package/dist/cjs/components/constants.js +1 -6
- package/dist/cjs/components/hooks.d.ts +0 -3
- package/dist/cjs/components/hooks.js +3 -35
- package/dist/cjs/components/index.d.ts +0 -1
- package/dist/cjs/components/index.js +1 -2
- package/dist/esm/components/CodeEditor.d.ts +2 -2
- package/dist/esm/components/CodeEditor.js +5 -10
- package/dist/esm/components/constants.d.ts +0 -5
- package/dist/esm/components/constants.js +0 -5
- package/dist/esm/components/hooks.d.ts +0 -3
- package/dist/esm/components/hooks.js +0 -30
- package/dist/esm/components/index.d.ts +0 -1
- package/dist/esm/components/index.js +0 -1
- package/package.json +5 -6
- package/src/components/CodeEditor.tsx +5 -19
- package/src/components/constants.ts +0 -6
- package/src/components/hooks.ts +0 -37
- package/src/components/index.ts +0 -1
- package/dist/cjs/components/types.d.ts +0 -12
- package/dist/cjs/components/types.js +0 -5
- package/dist/esm/components/types.d.ts +0 -12
- package/dist/esm/components/types.js +0 -1
- package/src/components/types.ts +0 -14
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
|
-
}> &
|
|
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(
|
|
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,
|
|
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
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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
|
}
|
|
@@ -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
|
-
}> &
|
|
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
|
|
19
|
-
import { useCalculatedThemeValues
|
|
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(
|
|
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,
|
|
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
|
|
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
|
}
|
|
@@ -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
|
-
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.4.7
|
|
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.
|
|
41
|
-
"@snack-uikit/utils": "3.
|
|
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": "
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
);
|
package/src/components/hooks.ts
CHANGED
|
@@ -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
|
-
}
|
package/src/components/index.ts
CHANGED
|
@@ -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,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 {};
|
package/src/components/types.ts
DELETED
|
@@ -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'>;
|