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

package/README.md

@@ -12,9 +12,9 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| jsonSchema* | `JsonSchema` | - | Схема для валидации |
 | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| schema | `SchemasSettings` | - | Схема для валидации |
 | defaultValue | `string` | - | Default value of the current model |
 | defaultLanguage | `string` | - | Default language of the current model |
 | 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))` |

package/dist/cjs/components/CodeEditor.d.ts

@@ -1,5 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { EditorProps, EditorWithSchemaProps } from './types';
+import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
     /**
      * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
-}> & (EditorProps | EditorWithSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+}> & (EditorBaseProps | EditorWithJsonSchemaProps);
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CodeEditor.js

@@ -29,7 +29,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
 (0, utils_2.initLoaderConfig)();
 function CodeEditor(_a) {
-  var _b, _c;
   var {
       themeName,
       className,
@@ -37,17 +36,16 @@ function CodeEditor(_a) {
       options,
       loading,
       hasBackground = true,
-      onMount
+      onMount,
+      language
     } = _a,
-    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
-  const {
-    language
-  } = props;
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language"]);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
-  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;
-  (0, hooks_1.useYamlEditor)(props.language === 'yaml' ? props.schema : undefined);
-  (0, hooks_1.useJsonEditor)(props.language === 'json' ? props.schema : undefined);
+  const {
+    jsonSchemaProps,
+    jsonSchemaOptions
+  } = (0, hooks_1.useApplyJsonSchema)(language, 'jsonSchema' in props ? props.jsonSchema : undefined);
   const onEditorMount = (0, react_2.useCallback)((editor, monaco) => {
     var _a;
     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,16 +106,16 @@ function CodeEditor(_a) {
   monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), {
     base: 'vs'
   }));
-  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) ? {
+  const mergedOptions = (0, react_2.useMemo)(() => Object.assign(Object.assign(Object.assign(Object.assign({}, constants_1.CODE_EDITOR_OPTIONS), jsonSchemaOptions), (themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono) ? {
     fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
     fontWeight: themeValues.mono.body.s['font-weight'],
     fontFamily: themeValues.mono.body.s['font-family']
-  } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+  } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono, jsonSchemaOptions]);
   return (0, jsx_runtime_1.jsx)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
     ref: setWrapperElement,
-    children: (0, jsx_runtime_1.jsx)(react_1.Editor, Object.assign({}, props, {
+    children: (0, jsx_runtime_1.jsx)(react_1.Editor, Object.assign({}, props, jsonSchemaProps, {
       theme: theme !== null && theme !== void 0 ? theme : dark ? 'snackDark' : 'snack',
       className: (0, classnames_1.default)({
         [styles_module_scss_1.default.editor]: hasBackground
@@ -125,7 +123,7 @@ function CodeEditor(_a) {
       loading: loading !== null && loading !== void 0 ? loading : (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}),
       options: mergedOptions,
       onMount: onEditorMount,
-      path: modelPath
+      language: language
     }))
   }));
 }

package/dist/cjs/components/constants.d.ts

@@ -104,3 +104,4 @@ export declare const YAML_CODE_EDITOR_OPTIONS: {
         strings: boolean;
     };
 };
+export declare const DEFAULT_SCHEMA_URI = "schema://editor-schema";

package/dist/cjs/components/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.YAML_CODE_EDITOR_OPTIONS = exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
+exports.DEFAULT_SCHEMA_URI = exports.YAML_CODE_EDITOR_OPTIONS = exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
 exports.DEFAULT_THEME_VALUES = {
   semanticTokenColors: {
     enumMember: {
@@ -118,4 +118,5 @@ exports.YAML_CODE_EDITOR_OPTIONS = {
   quickSuggestions: {
     strings: true
   }
-};
+};
+exports.DEFAULT_SCHEMA_URI = 'schema://editor-schema';

package/dist/cjs/components/hooks.d.ts

@@ -1,4 +1,4 @@
-import { SchemasSettings } from 'monaco-yaml';
+import { JsonSchema } from './types';
 type UseCalculatedThemeValuesProps = {
     stylesOriginNode: HTMLDivElement | null;
     themeName?: string;
@@ -42,6 +42,10 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
         };
     };
 } | undefined;
-export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
-export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
+export declare function useApplyJsonSchema(language?: string, jsonSchema?: JsonSchema): {
+    jsonSchemaProps: {
+        path: string | undefined;
+    };
+    jsonSchemaOptions: import("monaco-editor").editor.IStandaloneEditorConstructionOptions | undefined;
+};
 export {};

package/dist/cjs/components/hooks.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCalculatedThemeValues = useCalculatedThemeValues;
-exports.useYamlEditor = useYamlEditor;
-exports.useJsonEditor = useJsonEditor;
+exports.useApplyJsonSchema = useApplyJsonSchema;
 const react_1 = require("@monaco-editor/react");
 const monaco_yaml_1 = require("monaco-yaml");
 const react_2 = require("react");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("./constants");
+const utils_2 = require("./utils");
 function getThemeVars(styles) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function mapComputedTree(tree) {
@@ -42,31 +42,57 @@ function useCalculatedThemeValues(_ref) {
   }, [stylesOriginNode, trigger]);
   return values;
 }
-function useYamlEditor(yamlSchema) {
-  var _a;
-  const modelPath = (_a = yamlSchema === null || yamlSchema === void 0 ? void 0 : yamlSchema.fileMatch) === null || _a === void 0 ? void 0 : _a[0];
+function useApplyJsonSchema(language, jsonSchema) {
   const monaco = (0, react_1.useMonaco)();
-  (0, react_2.useEffect)(() => {
-    if (!yamlSchema || !monaco) {
+  const [jsonSchemaOptions, setJsonSchemaOptions] = (0, react_2.useState)({});
+  const modelPath = jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.fileMatch;
+  const preparedJsonSchema = (0, react_2.useMemo)(() => (0, utils_2.getJsonSchema)(jsonSchema), [jsonSchema]);
+  const configureYamlLanguage = (0, react_2.useCallback)(() => {
+    if (!monaco || !preparedJsonSchema) {
       return;
     }
     const model = (0, monaco_yaml_1.configureMonacoYaml)(monaco, {
       enableSchemaRequest: true,
-      schemas: [yamlSchema]
+      schemas: [preparedJsonSchema]
     });
-    return () => model.dispose();
-  }, [monaco, yamlSchema]);
-  return modelPath;
-}
-function useJsonEditor(jsonSchema) {
-  const monaco = (0, react_1.useMonaco)();
-  (0, react_2.useEffect)(() => {
-    if (!jsonSchema || !monaco) {
+    return {
+      options: constants_1.YAML_CODE_EDITOR_OPTIONS,
+      dispose: model.dispose
+    };
+  }, [monaco, preparedJsonSchema]);
+  const configureJsonLanguage = (0, react_2.useCallback)(() => {
+    if (!monaco || !preparedJsonSchema) {
       return;
     }
     monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
-      schemas: [jsonSchema]
+      schemas: [preparedJsonSchema]
     });
-  }, [monaco, jsonSchema]);
+  }, [monaco, preparedJsonSchema]);
+  const configureJsonSchema = (0, react_2.useCallback)(() => {
+    switch (language) {
+      case 'yaml':
+        return configureYamlLanguage();
+      case 'json':
+        return configureJsonLanguage();
+      default:
+        break;
+    }
+  }, [language, configureYamlLanguage, configureJsonLanguage]);
+  (0, react_2.useEffect)(() => {
+    var _a;
+    const jsonSchemaSettings = configureJsonSchema();
+    setJsonSchemaOptions((_a = jsonSchemaSettings === null || jsonSchemaSettings === void 0 ? void 0 : jsonSchemaSettings.options) !== null && _a !== void 0 ? _a : {});
+    return () => {
+      var _a;
+      setJsonSchemaOptions({});
+      (_a = jsonSchemaSettings === null || jsonSchemaSettings === void 0 ? void 0 : jsonSchemaSettings.dispose) === null || _a === void 0 ? void 0 : _a.call(jsonSchemaSettings);
+    };
+  }, [configureJsonSchema]);
+  return (0, react_2.useMemo)(() => ({
+    jsonSchemaProps: {
+      path: modelPath
+    },
+    jsonSchemaOptions
+  }), [jsonSchemaOptions, modelPath]);
 }

package/dist/cjs/components/types.d.ts

@@ -1,12 +1,25 @@
 import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
-import { SchemasSettings } from 'monaco-yaml';
-export type EditorProps = {
-    schema?: never;
-} & MonacoEditorProps;
-export type EditorWithSchemaProps = {
-    language: 'yaml' | 'json';
+import { JSONSchema } from 'monaco-yaml';
+export type EditorBaseProps = MonacoEditorProps;
+export type SupportedSchemaLanguage = 'json' | 'yaml';
+export type JsonSchema = {
+    uri?: string;
+    schema?: JSONSchema;
+    fileMatch: string;
+};
+export type WithJsonSchema = {
     /**
      * Схема для валидации
      */
-    schema?: SchemasSettings;
-} & Omit<MonacoEditorProps, 'language'>;
+    jsonSchema: JsonSchema;
+    path?: never;
+};
+type WithoutJsonSchema = Pick<MonacoEditorProps, 'path'>;
+export type EditorWithJsonSchemaProps = Omit<EditorBaseProps, 'language' | 'path'> & {
+    language: SupportedSchemaLanguage;
+} & (WithJsonSchema | WithoutJsonSchema);
+export type ConfigureJsonSchemaReturn = {
+    options?: MonacoEditorProps['options'];
+    dispose?: () => void;
+} | undefined;
+export {};

package/dist/cjs/components/utils.d.ts

@@ -1,3 +1,6 @@
+import { SchemasSettings } from 'monaco-yaml';
+import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
 export declare function initLoaderConfig(): void;
+export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;

package/dist/cjs/components/utils.js

@@ -8,11 +8,13 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getJsonSchema = void 0;
 exports.rgb2hsl = rgb2hsl;
 exports.isDark = isDark;
 exports.initLoaderConfig = initLoaderConfig;
 const react_1 = require("@monaco-editor/react");
 const chroma_js_1 = __importDefault(require("chroma-js"));
+const constants_1 = require("./constants");
 function rgb2hsl(HTMLcolor) {
   const [r, g, b] = chroma_js_1.default.valid(HTMLcolor) ? (0, chroma_js_1.default)(HTMLcolor).rgb().map(c => c / 255) : [0, 0, 0];
   const max = Math.max(r, g, b),
@@ -53,4 +55,9 @@ function initLoaderConfig() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   window['__snack-code-editor-loader-config__'] && react_1.loader.config(window['__snack-code-editor-loader-config__']);
-}
+}
+const getJsonSchema = jsonSchema => jsonSchema && Object.assign(Object.assign({}, jsonSchema), {
+  uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || constants_1.DEFAULT_SCHEMA_URI,
+  fileMatch: [jsonSchema.fileMatch]
+});
+exports.getJsonSchema = getJsonSchema;

package/dist/cjs/index.d.ts

@@ -2,5 +2,5 @@
   Monaco loader defines the way how monaco will be loaded.
   @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
  */
-export { loader } from '@monaco-editor/react';
+export { loader, useMonaco } from '@monaco-editor/react';
 export * from './components';

package/dist/cjs/index.js

@@ -22,7 +22,7 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loader = void 0;
+exports.useMonaco = exports.loader = void 0;
 /**
   Monaco loader defines the way how monaco will be loaded.
   @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
@@ -34,4 +34,10 @@ Object.defineProperty(exports, "loader", {
     return react_1.loader;
   }
 });
+Object.defineProperty(exports, "useMonaco", {
+  enumerable: true,
+  get: function () {
+    return react_1.useMonaco;
+  }
+});
 __exportStar(require("./components"), exports);

package/dist/esm/components/CodeEditor.d.ts

@@ -1,5 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { EditorProps, EditorWithSchemaProps } from './types';
+import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
     /**
      * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
-}> & (EditorProps | EditorWithSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+}> & (EditorBaseProps | EditorWithJsonSchemaProps);
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CodeEditor.js

@@ -15,20 +15,16 @@ import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
-import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES, YAML_CODE_EDITOR_OPTIONS, } from './constants';
-import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } from './hooks';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
 import { initLoaderConfig, isDark } from './utils';
 initLoaderConfig();
 export function CodeEditor(_a) {
-    var _b, _c;
-    var { themeName, className, theme, options, loading, hasBackground = true, onMount } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
-    const { language } = props;
+    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language"]);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
-    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;
-    useYamlEditor(props.language === 'yaml' ? props.schema : undefined);
-    useJsonEditor(props.language === 'json' ? props.schema : undefined);
+    const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(language, 'jsonSchema' in props ? props.jsonSchema : undefined);
     const onEditorMount = useCallback((editor, monaco) => {
         var _a;
         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 +80,12 @@ export function CodeEditor(_a) {
     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]);
     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(Object.assign({}, CODE_EDITOR_OPTIONS), (language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {})), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
+    const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), jsonSchemaOptions), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
         ? {
             fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
             fontWeight: themeValues.mono.body.s['font-weight'],
             fontFamily: themeValues.mono.body.s['font-family'],
         }
-        : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
-    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 })) })));
+        : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono, jsonSchemaOptions]);
+    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: _jsx(Editor, Object.assign({}, props, jsonSchemaProps, { 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, language: language })) })));
 }

package/dist/esm/components/constants.d.ts

@@ -104,3 +104,4 @@ export declare const YAML_CODE_EDITOR_OPTIONS: {
         strings: boolean;
     };
 };
+export declare const DEFAULT_SCHEMA_URI = "schema://editor-schema";

package/dist/esm/components/constants.js

@@ -100,3 +100,4 @@ export const YAML_CODE_EDITOR_OPTIONS = {
         strings: true,
     },
 };
+export const DEFAULT_SCHEMA_URI = 'schema://editor-schema';

package/dist/esm/components/hooks.d.ts

@@ -1,4 +1,4 @@
-import { SchemasSettings } from 'monaco-yaml';
+import { JsonSchema } from './types';
 type UseCalculatedThemeValuesProps = {
     stylesOriginNode: HTMLDivElement | null;
     themeName?: string;
@@ -42,6 +42,10 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
         };
     };
 } | undefined;
-export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
-export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
+export declare function useApplyJsonSchema(language?: string, jsonSchema?: JsonSchema): {
+    jsonSchemaProps: {
+        path: string | undefined;
+    };
+    jsonSchemaOptions: import("monaco-editor").editor.IStandaloneEditorConstructionOptions | undefined;
+};
 export {};

package/dist/esm/components/hooks.js

@@ -1,8 +1,9 @@
 import { useMonaco } from '@monaco-editor/react';
 import { configureMonacoYaml } from 'monaco-yaml';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useThemeContext } from '@snack-uikit/utils';
-import { THEME_VARS } from './constants';
+import { THEME_VARS, YAML_CODE_EDITOR_OPTIONS } from './constants';
+import { getJsonSchema } from './utils';
 function getThemeVars(styles) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return function mapComputedTree(tree) {
@@ -28,31 +29,55 @@ export function useCalculatedThemeValues({ stylesOriginNode, themeName }) {
     }, [stylesOriginNode, trigger]);
     return values;
 }
-export function useYamlEditor(yamlSchema) {
-    var _a;
-    const modelPath = (_a = yamlSchema === null || yamlSchema === void 0 ? void 0 : yamlSchema.fileMatch) === null || _a === void 0 ? void 0 : _a[0];
+export function useApplyJsonSchema(language, jsonSchema) {
     const monaco = useMonaco();
-    useEffect(() => {
-        if (!yamlSchema || !monaco) {
+    const [jsonSchemaOptions, setJsonSchemaOptions] = useState({});
+    const modelPath = jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.fileMatch;
+    const preparedJsonSchema = useMemo(() => getJsonSchema(jsonSchema), [jsonSchema]);
+    const configureYamlLanguage = useCallback(() => {
+        if (!monaco || !preparedJsonSchema) {
             return;
         }
         const model = configureMonacoYaml(monaco, {
             enableSchemaRequest: true,
-            schemas: [yamlSchema],
+            schemas: [preparedJsonSchema],
         });
-        return () => model.dispose();
-    }, [monaco, yamlSchema]);
-    return modelPath;
-}
-export function useJsonEditor(jsonSchema) {
-    const monaco = useMonaco();
-    useEffect(() => {
-        if (!jsonSchema || !monaco) {
+        return {
+            options: YAML_CODE_EDITOR_OPTIONS,
+            dispose: model.dispose,
+        };
+    }, [monaco, preparedJsonSchema]);
+    const configureJsonLanguage = useCallback(() => {
+        if (!monaco || !preparedJsonSchema) {
             return;
         }
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
-            schemas: [jsonSchema],
+            schemas: [preparedJsonSchema],
         });
-    }, [monaco, jsonSchema]);
+    }, [monaco, preparedJsonSchema]);
+    const configureJsonSchema = useCallback(() => {
+        switch (language) {
+            case 'yaml':
+                return configureYamlLanguage();
+            case 'json':
+                return configureJsonLanguage();
+            default:
+                break;
+        }
+    }, [language, configureYamlLanguage, configureJsonLanguage]);
+    useEffect(() => {
+        var _a;
+        const jsonSchemaSettings = configureJsonSchema();
+        setJsonSchemaOptions((_a = jsonSchemaSettings === null || jsonSchemaSettings === void 0 ? void 0 : jsonSchemaSettings.options) !== null && _a !== void 0 ? _a : {});
+        return () => {
+            var _a;
+            setJsonSchemaOptions({});
+            (_a = jsonSchemaSettings === null || jsonSchemaSettings === void 0 ? void 0 : jsonSchemaSettings.dispose) === null || _a === void 0 ? void 0 : _a.call(jsonSchemaSettings);
+        };
+    }, [configureJsonSchema]);
+    return useMemo(() => ({
+        jsonSchemaProps: { path: modelPath },
+        jsonSchemaOptions,
+    }), [jsonSchemaOptions, modelPath]);
 }

package/dist/esm/components/types.d.ts

@@ -1,12 +1,25 @@
 import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
-import { SchemasSettings } from 'monaco-yaml';
-export type EditorProps = {
-    schema?: never;
-} & MonacoEditorProps;
-export type EditorWithSchemaProps = {
-    language: 'yaml' | 'json';
+import { JSONSchema } from 'monaco-yaml';
+export type EditorBaseProps = MonacoEditorProps;
+export type SupportedSchemaLanguage = 'json' | 'yaml';
+export type JsonSchema = {
+    uri?: string;
+    schema?: JSONSchema;
+    fileMatch: string;
+};
+export type WithJsonSchema = {
     /**
      * Схема для валидации
      */
-    schema?: SchemasSettings;
-} & Omit<MonacoEditorProps, 'language'>;
+    jsonSchema: JsonSchema;
+    path?: never;
+};
+type WithoutJsonSchema = Pick<MonacoEditorProps, 'path'>;
+export type EditorWithJsonSchemaProps = Omit<EditorBaseProps, 'language' | 'path'> & {
+    language: SupportedSchemaLanguage;
+} & (WithJsonSchema | WithoutJsonSchema);
+export type ConfigureJsonSchemaReturn = {
+    options?: MonacoEditorProps['options'];
+    dispose?: () => void;
+} | undefined;
+export {};

package/dist/esm/components/utils.d.ts

@@ -1,3 +1,6 @@
+import { SchemasSettings } from 'monaco-yaml';
+import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
 export declare function initLoaderConfig(): void;
+export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;

package/dist/esm/components/utils.js

@@ -1,5 +1,6 @@
 import { loader } from '@monaco-editor/react';
 import chroma from 'chroma-js';
+import { DEFAULT_SCHEMA_URI } from './constants';
 export function rgb2hsl(HTMLcolor) {
     const [r, g, b] = chroma.valid(HTMLcolor)
         ? chroma(HTMLcolor)
@@ -45,3 +46,4 @@ export function initLoaderConfig() {
     // @ts-ignore
     window['__snack-code-editor-loader-config__'] && loader.config(window['__snack-code-editor-loader-config__']);
 }
+export const getJsonSchema = (jsonSchema) => jsonSchema && Object.assign(Object.assign({}, jsonSchema), { uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] });

package/dist/esm/index.d.ts

@@ -2,5 +2,5 @@
   Monaco loader defines the way how monaco will be loaded.
   @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
  */
-export { loader } from '@monaco-editor/react';
+export { loader, useMonaco } from '@monaco-editor/react';
 export * from './components';

package/dist/esm/index.js

@@ -2,5 +2,5 @@
   Monaco loader defines the way how monaco will be loaded.
   @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
  */
-export { loader } from '@monaco-editor/react';
+export { loader, useMonaco } from '@monaco-editor/react';
 export * from './components';

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.7-preview-e698fca9.0",
+  "version": "0.4.7-preview-2af706c7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "47cf244ae899e49b7cffec403d0c31648dfc3999"
+  "gitHead": "eee00bc3192c976778bbc1995fed33e98d0f16dc"
 }

package/src/components/CodeEditor.tsx

@@ -5,15 +5,10 @@ import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
 
-import {
-  CODE_EDITOR_OPTIONS,
-  DEFAULT_THEME_OPTIONS,
-  DEFAULT_THEME_VALUES,
-  YAML_CODE_EDITOR_OPTIONS,
-} from './constants';
-import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } from './hooks';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
-import { EditorProps, EditorWithSchemaProps } from './types';
+import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 import { initLoaderConfig, isDark } from './utils';
 
 initLoaderConfig();
@@ -28,7 +23,7 @@ export type CodeEditorProps = WithSupportProps<{
    */
   hasBackground?: boolean;
 }> &
-  (EditorProps | EditorWithSchemaProps);
+  (EditorBaseProps | EditorWithJsonSchemaProps);
 
 export function CodeEditor({
   themeName,
@@ -38,16 +33,16 @@ export function CodeEditor({
   loading,
   hasBackground = true,
   onMount,
+  language,
   ...props
 }: CodeEditorProps) {
-  const { language } = props;
-
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
-  const modelPath = 'schema' in props ? props.schema?.fileMatch?.[0] : undefined;
-  useYamlEditor(props.language === 'yaml' ? props.schema : undefined);
-  useJsonEditor(props.language === 'json' ? props.schema : undefined);
+  const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(
+    language,
+    'jsonSchema' in props ? props.jsonSchema : undefined,
+  );
 
   const onEditorMount = useCallback<OnMount>(
     (editor, monaco) => {
@@ -123,7 +118,7 @@ export function CodeEditor({
   const mergedOptions = useMemo(
     () => ({
       ...CODE_EDITOR_OPTIONS,
-      ...(language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {}),
+      ...jsonSchemaOptions,
       ...(themeValues?.mono
         ? {
             fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
@@ -133,19 +128,20 @@ export function CodeEditor({
         : DEFAULT_THEME_OPTIONS.mono.s),
       ...options,
     }),
-    [options, language, themeValues?.mono],
+    [options, themeValues?.mono, jsonSchemaOptions],
   );
 
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
       <Editor
         {...props}
+        {...jsonSchemaProps}
         theme={theme ?? (dark ? 'snackDark' : 'snack')}
         className={cn({ [styles.editor]: hasBackground })}
         loading={loading ?? <Spinner />}
         options={mergedOptions}
         onMount={onEditorMount}
-        path={modelPath}
+        language={language}
       />
     </div>
   );

package/src/components/constants.ts

@@ -104,3 +104,5 @@ export const YAML_CODE_EDITOR_OPTIONS = {
     strings: true,
   },
 };
+
+export const DEFAULT_SCHEMA_URI = 'schema://editor-schema';

package/src/components/hooks.ts

@@ -1,10 +1,12 @@
-import { useMonaco } from '@monaco-editor/react';
+import { EditorProps as MonacoEditorProps, useMonaco } from '@monaco-editor/react';
 import { configureMonacoYaml, SchemasSettings } from 'monaco-yaml';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useThemeContext } from '@snack-uikit/utils';
 
-import { THEME_VARS } from './constants';
+import { THEME_VARS, YAML_CODE_EDITOR_OPTIONS } from './constants';
+import { ConfigureJsonSchemaReturn, JsonSchema } from './types';
+import { getJsonSchema } from './utils';
 
 function getThemeVars(styles: CSSStyleDeclaration) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -45,37 +47,67 @@ export function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCal
   return values;
 }
 
-export function useYamlEditor(yamlSchema?: SchemasSettings) {
-  const modelPath = yamlSchema?.fileMatch?.[0];
+export function useApplyJsonSchema(language?: string, jsonSchema?: JsonSchema) {
   const monaco = useMonaco();
 
-  useEffect(() => {
-    if (!yamlSchema || !monaco) {
+  const [jsonSchemaOptions, setJsonSchemaOptions] = useState<MonacoEditorProps['options']>({});
+  const modelPath = jsonSchema?.fileMatch;
+
+  const preparedJsonSchema: SchemasSettings | undefined = useMemo(() => getJsonSchema(jsonSchema), [jsonSchema]);
+
+  const configureYamlLanguage = useCallback((): ConfigureJsonSchemaReturn => {
+    if (!monaco || !preparedJsonSchema) {
       return;
     }
 
     const model = configureMonacoYaml(monaco, {
       enableSchemaRequest: true,
-      schemas: [yamlSchema],
+      schemas: [preparedJsonSchema],
     });
 
-    return () => model.dispose();
-  }, [monaco, yamlSchema]);
+    return {
+      options: YAML_CODE_EDITOR_OPTIONS,
+      dispose: model.dispose,
+    };
+  }, [monaco, preparedJsonSchema]);
 
-  return modelPath;
-}
-
-export function useJsonEditor(jsonSchema?: SchemasSettings) {
-  const monaco = useMonaco();
-
-  useEffect(() => {
-    if (!jsonSchema || !monaco) {
+  const configureJsonLanguage = useCallback((): ConfigureJsonSchemaReturn => {
+    if (!monaco || !preparedJsonSchema) {
       return;
     }
 
     monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
-      schemas: [jsonSchema],
+      schemas: [preparedJsonSchema],
     });
-  }, [monaco, jsonSchema]);
+  }, [monaco, preparedJsonSchema]);
+
+  const configureJsonSchema = useCallback(() => {
+    switch (language) {
+      case 'yaml':
+        return configureYamlLanguage();
+      case 'json':
+        return configureJsonLanguage();
+      default:
+        break;
+    }
+  }, [language, configureYamlLanguage, configureJsonLanguage]);
+
+  useEffect(() => {
+    const jsonSchemaSettings = configureJsonSchema();
+    setJsonSchemaOptions(jsonSchemaSettings?.options ?? {});
+
+    return () => {
+      setJsonSchemaOptions({});
+      jsonSchemaSettings?.dispose?.();
+    };
+  }, [configureJsonSchema]);
+
+  return useMemo(
+    () => ({
+      jsonSchemaProps: { path: modelPath } satisfies MonacoEditorProps,
+      jsonSchemaOptions,
+    }),
+    [jsonSchemaOptions, modelPath],
+  );
 }

package/src/components/types.ts

@@ -1,14 +1,33 @@
 import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
-import { SchemasSettings } from 'monaco-yaml';
+import { JSONSchema } from 'monaco-yaml';
 
-export type EditorProps = {
-  schema?: never;
-} & MonacoEditorProps;
+export type EditorBaseProps = MonacoEditorProps;
 
-export type EditorWithSchemaProps = {
-  language: 'yaml' | 'json';
+export type SupportedSchemaLanguage = 'json' | 'yaml';
+
+export type JsonSchema = {
+  uri?: string;
+  schema?: JSONSchema;
+  fileMatch: string;
+};
+
+export type WithJsonSchema = {
   /**
    * Схема для валидации
    */
-  schema?: SchemasSettings;
-} & Omit<MonacoEditorProps, 'language'>;
+  jsonSchema: JsonSchema;
+  path?: never;
+};
+
+type WithoutJsonSchema = Pick<MonacoEditorProps, 'path'>;
+
+export type EditorWithJsonSchemaProps = Omit<EditorBaseProps, 'language' | 'path'> & {
+  language: SupportedSchemaLanguage;
+} & (WithJsonSchema | WithoutJsonSchema);
+
+export type ConfigureJsonSchemaReturn =
+  | {
+      options?: MonacoEditorProps['options'];
+      dispose?: () => void;
+    }
+  | undefined;

package/src/components/utils.ts

@@ -1,5 +1,9 @@
 import { loader } from '@monaco-editor/react';
 import chroma from 'chroma-js';
+import { SchemasSettings } from 'monaco-yaml';
+
+import { DEFAULT_SCHEMA_URI } from './constants';
+import { JsonSchema } from './types';
 
 export function rgb2hsl(HTMLcolor: string) {
   const [r, g, b] = chroma.valid(HTMLcolor)
@@ -60,3 +64,6 @@ export function initLoaderConfig() {
   // @ts-ignore
   window['__snack-code-editor-loader-config__'] && loader.config(window['__snack-code-editor-loader-config__']);
 }
+
+export const getJsonSchema = (jsonSchema?: JsonSchema): SchemasSettings | undefined =>
+  jsonSchema && { ...jsonSchema, uri: jsonSchema?.uri || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] };

package/src/index.ts

@@ -2,5 +2,5 @@
   Monaco loader defines the way how monaco will be loaded.
   @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
  */
-export { loader } from '@monaco-editor/react';
+export { loader, useMonaco } from '@monaco-editor/react';
 export * from './components';