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

package/README.md

@@ -12,6 +12,36 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
+| hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
+| yamlSchema | `SchemasSettings` | - | Схема для yaml валидации |
+| 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))` |
+| value | `string` | - | Value of the current model |
+| language | `string` | - | Language of the current model |
+| path | `string` | - | Path of the current model Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
+| theme | `string` | "light" | The theme for the monaco Available options "vs-dark" \| "light" Define new themes by `monaco.editor.defineTheme` |
+| line | `number` | - | The line to jump on it |
+| loading | `ReactNode` | "Loading..." | The loading screen before the editor will be mounted |
+| options | `IStandaloneEditorConstructionOptions` | - | IStandaloneEditorConstructionOptions |
+| overrideServices | `IEditorOverrideServices` | - | IEditorOverrideServices |
+| saveViewState | `boolean` | - | Indicator whether to save the models' view states between model changes or not Defaults to true |
+| keepCurrentModel | `boolean` | false | Indicator whether to dispose the current model when the Editor is unmounted or not |
+| width | `string \| number` | "100%" | Width of the editor wrapper |
+| height | `string \| number` | "100%" | Height of the editor wrapper |
+| className | `string` | - | Class name for the editor container |
+| wrapperProps | `object` | - | Props applied to the wrapper element |
+| beforeMount | `BeforeMount` | - | Signature: function(monaco: Monaco) => void An event is emitted before the editor is mounted It gets the monaco instance as a first argument Defaults to "noop" |
+| onMount | `OnMount` | - | Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void An event is emitted when the editor is mounted It gets the editor instance as a first argument and the monaco instance as a second Defaults to "noop" |
+| onChange | `OnChange` | - | Signature: function(value: string \| undefined, ev: monaco.editor.IModelContentChangedEvent) => void An event is emitted when the content of the current model is changed |
+| onValidate | `OnValidate` | - | Signature: function(markers: monaco.editor.IMarker[]) => void An event is emitted when the content of the current model is changed and the current model markers are ready Defaults to "noop" |
 
 
 [//]: DOCUMENTATION_SECTION_END
+
+### Поддержка YAML
+Для обеспечения полноценной работы 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`.

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

@@ -10,4 +10,4 @@ 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;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/CodeEditor.js

@@ -27,7 +27,6 @@ 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 {
       themeName,
@@ -42,6 +41,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);
@@ -110,6 +114,9 @@ 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), {

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

@@ -5,5 +5,8 @@ export type EditorProps = {
 } & MonacoEditorProps;
 export type YamlEditorProps = {
     language: 'yaml';
+    /**
+     * Схема для yaml валидации
+     */
     yamlSchema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;

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

@@ -10,4 +10,4 @@ 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;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/CodeEditor.js

@@ -14,15 +14,19 @@ 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 } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } 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 styles from './styles.module.css';
 import { initLoaderConfig, isDark } from './utils';
-initLoaderConfig();
 export function CodeEditor(_a) {
     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);
@@ -88,5 +92,8 @@ 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 })) })));
 }

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

@@ -5,5 +5,8 @@ export type EditorProps = {
 } & MonacoEditorProps;
 export type YamlEditorProps = {
     language: 'yaml';
+    /**
+     * Схема для yaml валидации
+     */
     yamlSchema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;

package/package.json

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

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, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
 
 import {
   CODE_EDITOR_OPTIONS,
@@ -16,8 +16,6 @@ import styles from './styles.module.scss';
 import { EditorProps, YamlEditorProps } from './types';
 import { initLoaderConfig, isDark } from './utils';
 
-initLoaderConfig();
-
 export type CodeEditorProps = WithSupportProps<{
   /**
    * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -41,6 +39,12 @@ 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);
@@ -134,6 +138,10 @@ export function CodeEditor({
     [options, language, themeValues?.mono],
   );
 
+  if (!canRender) {
+    return null;
+  }
+
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
       <Editor

package/src/components/types.ts

@@ -7,5 +7,8 @@ export type EditorProps = {
 
 export type YamlEditorProps = {
   language: 'yaml';
+  /**
+   * Схема для yaml валидации
+   */
   yamlSchema?: SchemasSettings;
 } & Omit<MonacoEditorProps, 'language'>;