@snack-uikit/code-editor 0.4.7-preview-aa6874cd.0 → 0.4.7-preview-9a2892b7.0

package/README.md

@@ -14,7 +14,7 @@
 |------|------|---------------|-------------|
 | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| yamlSchema | `SchemasSettings` | - | Схема для yaml валидации |
+| 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))` |
@@ -44,4 +44,12 @@
 Для обеспечения полноценной работы 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))
 
 ### Как редактор загружает worker?
-Для storybook воркеры определены и расширены `yaml` в настройках вебпака сторибука. Плагин создает новые точки входа каждого build-in воркера и для каждого дабавленного отдельно. Плагин создат глобальную переменную, используя которую редкатор будет загружать нужный воркер на основе текущего `language`.
+Плагин создает новые точки входа каждого build-in воркера и для каждого дабавленного отдельно. Плагин создат глобальную переменную, используя которую редкатор будет загружать нужный воркер на основе текущего `language`.
+
+Чтобы управлять конфигурацией загрузчика Monaco Editor, добавьте
+```typescript
+import * as monaco from 'monaco-editor';
+import { loader } from '@snack-uikit/code-editor';
+loader.config({ monaco });
+```
+Это позволяет динамически настраивать пути и другие параметры при инициализации редактора.

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

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

package/dist/cjs/components/CodeEditor.js

@@ -27,7 +27,9 @@ const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
 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,
@@ -41,14 +43,11 @@ function CodeEditor(_a) {
   const {
     language
   } = props;
-  const [canRender, setCanRender] = (0, react_2.useState)(false);
-  (0, utils_1.useLayoutEffect)(() => {
-    (0, utils_2.initLoaderConfig)();
-    setCanRender(true);
-  }, []);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
-  const yamlModelPath = (0, hooks_1.useYamlEditor)(props.language === 'yaml' ? props.yamlSchema : undefined);
+  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 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));
@@ -114,9 +113,6 @@ function CodeEditor(_a) {
     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]);
-  if (!canRender) {
-    return null;
-  }
   return (0, jsx_runtime_1.jsx)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
@@ -129,7 +125,7 @@ function CodeEditor(_a) {
       loading: loading !== null && loading !== void 0 ? loading : (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}),
       options: mergedOptions,
       onMount: onEditorMount,
-      path: yamlModelPath
+      path: modelPath
     }))
   }));
 }

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

@@ -43,4 +43,5 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
     };
 } | undefined;
 export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
+export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
 export {};

package/dist/cjs/components/hooks.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCalculatedThemeValues = useCalculatedThemeValues;
 exports.useYamlEditor = useYamlEditor;
+exports.useJsonEditor = useJsonEditor;
 const react_1 = require("@monaco-editor/react");
 const monaco_yaml_1 = require("monaco-yaml");
 const react_2 = require("react");
@@ -55,4 +56,16 @@ function useYamlEditor(yamlSchema) {
     });
   }, [monaco, yamlSchema]);
   return modelPath;
+}
+function useJsonEditor(jsonSchema) {
+  const monaco = (0, react_1.useMonaco)();
+  (0, react_2.useEffect)(() => {
+    if (!jsonSchema || !monaco) {
+      return;
+    }
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [jsonSchema]
+    });
+  }, [monaco, jsonSchema]);
 }

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

@@ -1,12 +1,12 @@
 import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
 import { SchemasSettings } from 'monaco-yaml';
 export type EditorProps = {
-    yamlSchema?: never;
+    schema?: never;
 } & MonacoEditorProps;
-export type YamlEditorProps = {
-    language: 'yaml';
+export type EditorWithSchemaProps = {
+    language: 'yaml' | 'json';
     /**
-     * Схема для yaml валидации
+     * Схема для валидации
      */
-    yamlSchema?: SchemasSettings;
+    schema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;

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

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

package/dist/esm/components/CodeEditor.js

@@ -14,22 +14,21 @@ import { Editor, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
-import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
+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, useYamlEditor } from './hooks';
+import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } 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;
-    const [canRender, setCanRender] = useState(false);
-    useLayoutEffect(() => {
-        initLoaderConfig();
-        setCanRender(true);
-    }, []);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
-    const yamlModelPath = useYamlEditor(props.language === 'yaml' ? props.yamlSchema : undefined);
+    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 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));
@@ -92,8 +91,5 @@ export function CodeEditor(_a) {
             fontFamily: themeValues.mono.body.s['font-family'],
         }
         : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
-    if (!canRender) {
-        return null;
-    }
-    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: yamlModelPath })) })));
+    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 })) })));
 }

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

@@ -43,4 +43,5 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
     };
 } | undefined;
 export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
+export declare function useJsonEditor(jsonSchema?: SchemasSettings): void;
 export {};

package/dist/esm/components/hooks.js

@@ -43,3 +43,15 @@ export function useYamlEditor(yamlSchema) {
     }, [monaco, yamlSchema]);
     return modelPath;
 }
+export function useJsonEditor(jsonSchema) {
+    const monaco = useMonaco();
+    useEffect(() => {
+        if (!jsonSchema || !monaco) {
+            return;
+        }
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: [jsonSchema],
+        });
+    }, [monaco, jsonSchema]);
+}

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

@@ -1,12 +1,12 @@
 import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
 import { SchemasSettings } from 'monaco-yaml';
 export type EditorProps = {
-    yamlSchema?: never;
+    schema?: never;
 } & MonacoEditorProps;
-export type YamlEditorProps = {
-    language: 'yaml';
+export type EditorWithSchemaProps = {
+    language: 'yaml' | 'json';
     /**
-     * Схема для yaml валидации
+     * Схема для валидации
      */
-    yamlSchema?: SchemasSettings;
+    schema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.7-preview-aa6874cd.0",
+  "version": "0.4.7-preview-9a2892b7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "e8e7969f21fb78891213f7bac60d2c87ceb7b8f9"
+  "gitHead": "f7c3a794edac35282a081e454b0d2c514401194c"
 }

package/src/components/CodeEditor.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
-import { extractSupportProps, isBrowser, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
 
 import {
   CODE_EDITOR_OPTIONS,
@@ -11,11 +11,13 @@ import {
   DEFAULT_THEME_VALUES,
   YAML_CODE_EDITOR_OPTIONS,
 } from './constants';
-import { useCalculatedThemeValues, useYamlEditor } from './hooks';
+import { useCalculatedThemeValues, useJsonEditor, useYamlEditor } from './hooks';
 import styles from './styles.module.scss';
-import { EditorProps, YamlEditorProps } from './types';
+import { EditorProps, EditorWithSchemaProps } from './types';
 import { initLoaderConfig, isDark } from './utils';
 
+initLoaderConfig();
+
 export type CodeEditorProps = WithSupportProps<{
   /**
    * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -26,7 +28,7 @@ export type CodeEditorProps = WithSupportProps<{
    */
   hasBackground?: boolean;
 }> &
-  (EditorProps | YamlEditorProps);
+  (EditorProps | EditorWithSchemaProps);
 
 export function CodeEditor({
   themeName,
@@ -39,17 +41,13 @@ export function CodeEditor({
   ...props
 }: CodeEditorProps) {
   const { language } = props;
-  const [canRender, setCanRender] = useState(false);
-
-  useLayoutEffect(() => {
-    initLoaderConfig();
-    setCanRender(true);
-  }, []);
 
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
-  const yamlModelPath = useYamlEditor(props.language === 'yaml' ? props.yamlSchema : undefined);
+  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 onEditorMount = useCallback<OnMount>(
     (editor, monaco) => {
@@ -138,10 +136,6 @@ export function CodeEditor({
     [options, language, themeValues?.mono],
   );
 
-  if (!canRender) {
-    return null;
-  }
-
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
       <Editor
@@ -151,7 +145,7 @@ export function CodeEditor({
         loading={loading ?? <Spinner />}
         options={mergedOptions}
         onMount={onEditorMount}
-        path={yamlModelPath}
+        path={modelPath}
       />
     </div>
   );

package/src/components/hooks.ts

@@ -62,3 +62,18 @@ export function useYamlEditor(yamlSchema?: SchemasSettings) {
 
   return modelPath;
 }
+
+export function useJsonEditor(jsonSchema?: SchemasSettings) {
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    if (!jsonSchema || !monaco) {
+      return;
+    }
+
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [jsonSchema],
+    });
+  }, [monaco, jsonSchema]);
+}

package/src/components/types.ts

@@ -2,13 +2,13 @@ import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
 import { SchemasSettings } from 'monaco-yaml';
 
 export type EditorProps = {
-  yamlSchema?: never;
+  schema?: never;
 } & MonacoEditorProps;
 
-export type YamlEditorProps = {
-  language: 'yaml';
+export type EditorWithSchemaProps = {
+  language: 'yaml' | 'json';
   /**
-   * Схема для yaml валидации
+   * Схема для валидации
    */
-  yamlSchema?: SchemasSettings;
+  schema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;