@snack-uikit/code-editor 0.4.6 → 0.4.7-preview-9b2da27a.0

package/README.md

@@ -12,29 +12,6 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
-| hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| 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

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

@@ -1,5 +1,5 @@
-import { EditorProps } from '@monaco-editor/react';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { EditorProps, YamlEditorProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
     /**
      * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
-}> & EditorProps;
+}> & (EditorProps | YamlEditorProps);
 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

@@ -39,13 +39,22 @@ function CodeEditor(_a) {
       onMount
     } = _a,
     props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
+  const {
+    language
+  } = props;
   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 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));
     onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
-  }, [onMount]);
+    if (language === 'yaml') {
+      monaco.languages.register({
+        id: 'yaml'
+      });
+    }
+  }, [language, onMount]);
   const themeValues = (0, hooks_1.useCalculatedThemeValues)({
     themeName,
     stylesOriginNode: wrapperElement
@@ -101,11 +110,11 @@ 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({}, constants_1.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), language === 'yaml' ? constants_1.YAML_CODE_EDITOR_OPTIONS : {}), (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, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+  } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, language, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
   return (0, jsx_runtime_1.jsx)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
@@ -117,7 +126,8 @@ function CodeEditor(_a) {
       }),
       loading: loading !== null && loading !== void 0 ? loading : (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}),
       options: mergedOptions,
-      onMount: onEditorMount
+      onMount: onEditorMount,
+      path: yamlModelPath
     }))
   }));
 }

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

@@ -99,3 +99,8 @@ export declare const CODE_EDITOR_OPTIONS: {
         indentation: boolean;
     };
 };
+export declare const YAML_CODE_EDITOR_OPTIONS: {
+    quickSuggestions: {
+        strings: boolean;
+    };
+};

package/dist/cjs/components/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
+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: {
@@ -113,4 +113,9 @@ exports.CODE_EDITOR_OPTIONS = {
   guides: {
     indentation: false
   }
+};
+exports.YAML_CODE_EDITOR_OPTIONS = {
+  quickSuggestions: {
+    strings: true
+  }
 };

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

@@ -1,3 +1,4 @@
+import { SchemasSettings } from 'monaco-yaml';
 type UseCalculatedThemeValuesProps = {
     stylesOriginNode: HTMLDivElement | null;
     themeName?: string;
@@ -41,4 +42,5 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
         };
     };
 } | undefined;
+export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
 export {};

package/dist/cjs/components/hooks.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCalculatedThemeValues = useCalculatedThemeValues;
-const react_1 = require("react");
+exports.useYamlEditor = useYamlEditor;
+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");
 function getThemeVars(styles) {
@@ -25,16 +28,31 @@ function useCalculatedThemeValues(_ref) {
     stylesOriginNode,
     themeName
   } = _ref;
-  const [values, setValues] = (0, react_1.useState)(undefined);
+  const [values, setValues] = (0, react_2.useState)(undefined);
   const {
     themeClassName
   } = (0, utils_1.useThemeContext)();
   const trigger = themeName !== null && themeName !== void 0 ? themeName : themeClassName;
-  (0, react_1.useEffect)(() => {
+  (0, react_2.useEffect)(() => {
     if (stylesOriginNode) {
       const styles = getComputedStyle(stylesOriginNode);
       setValues(getThemeVars(styles)(constants_1.THEME_VARS));
     }
   }, [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];
+  const monaco = (0, react_1.useMonaco)();
+  (0, react_2.useEffect)(() => {
+    if (!yamlSchema || !monaco) {
+      return;
+    }
+    (0, monaco_yaml_1.configureMonacoYaml)(monaco, {
+      enableSchemaRequest: true,
+      schemas: [yamlSchema]
+    });
+  }, [monaco, yamlSchema]);
+  return modelPath;
 }

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

@@ -1 +1,2 @@
 export * from './CodeEditor';
+export * from './types';

package/dist/cjs/components/index.js

@@ -22,4 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./CodeEditor"), exports);
+__exportStar(require("./CodeEditor"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,9 @@
+import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
+import { SchemasSettings } from 'monaco-yaml';
+export type EditorProps = {
+    yamlSchema?: never;
+} & MonacoEditorProps;
+export type YamlEditorProps = {
+    language: 'yaml';
+    yamlSchema?: SchemasSettings;
+} & Omit<MonacoEditorProps, 'language'>;

package/dist/cjs/components/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,5 +1,5 @@
-import { EditorProps } from '@monaco-editor/react';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { EditorProps, YamlEditorProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
     /**
      * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
@@ -9,5 +9,5 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
-}> & EditorProps;
+}> & (EditorProps | YamlEditorProps);
 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

@@ -15,20 +15,25 @@ 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 } from './constants';
-import { useCalculatedThemeValues } from './hooks';
+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 monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
+    const yamlModelPath = useYamlEditor(props.language === 'yaml' ? props.yamlSchema : 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));
         onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
-    }, [onMount]);
+        if (language === 'yaml') {
+            monaco.languages.register({ id: 'yaml' });
+        }
+    }, [language, onMount]);
     const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperElement });
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
         ? {
@@ -79,12 +84,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({}, 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), (language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {})), ((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, 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 })) })));
+        : 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: yamlModelPath })) })));
 }

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

@@ -99,3 +99,8 @@ export declare const CODE_EDITOR_OPTIONS: {
         indentation: boolean;
     };
 };
+export declare const YAML_CODE_EDITOR_OPTIONS: {
+    quickSuggestions: {
+        strings: boolean;
+    };
+};

package/dist/esm/components/constants.js

@@ -95,3 +95,8 @@ export const CODE_EDITOR_OPTIONS = {
         indentation: false,
     },
 };
+export const YAML_CODE_EDITOR_OPTIONS = {
+    quickSuggestions: {
+        strings: true,
+    },
+};

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

@@ -1,3 +1,4 @@
+import { SchemasSettings } from 'monaco-yaml';
 type UseCalculatedThemeValuesProps = {
     stylesOriginNode: HTMLDivElement | null;
     themeName?: string;
@@ -41,4 +42,5 @@ export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }
         };
     };
 } | undefined;
+export declare function useYamlEditor(yamlSchema?: SchemasSettings): string | undefined;
 export {};

package/dist/esm/components/hooks.js

@@ -1,3 +1,5 @@
+import { useMonaco } from '@monaco-editor/react';
+import { configureMonacoYaml } from 'monaco-yaml';
 import { useEffect, useState } from 'react';
 import { useThemeContext } from '@snack-uikit/utils';
 import { THEME_VARS } from './constants';
@@ -26,3 +28,18 @@ 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];
+    const monaco = useMonaco();
+    useEffect(() => {
+        if (!yamlSchema || !monaco) {
+            return;
+        }
+        configureMonacoYaml(monaco, {
+            enableSchemaRequest: true,
+            schemas: [yamlSchema],
+        });
+    }, [monaco, yamlSchema]);
+    return modelPath;
+}

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

@@ -1 +1,2 @@
 export * from './CodeEditor';
+export * from './types';

package/dist/esm/components/index.js

@@ -1 +1,2 @@
 export * from './CodeEditor';
+export * from './types';

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

@@ -0,0 +1,9 @@
+import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
+import { SchemasSettings } from 'monaco-yaml';
+export type EditorProps = {
+    yamlSchema?: never;
+} & MonacoEditorProps;
+export type YamlEditorProps = {
+    language: 'yaml';
+    yamlSchema?: SchemasSettings;
+} & Omit<MonacoEditorProps, 'language'>;

package/dist/esm/components/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.6",
+  "version": "0.4.7-preview-9b2da27a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,10 +40,11 @@
     "@snack-uikit/loaders": "0.9.0",
     "@snack-uikit/utils": "3.6.0",
     "chroma-js": "3.1.2",
-    "classnames": "2.5.1"
+    "classnames": "2.5.1",
+    "monaco-yaml": "5.2.3"
   },
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "33a6d8bc270bd11dec3e4834f2ba8e97c57d5c15"
+  "gitHead": "dff6045c82808e07fd469610e3d894ed9d5eb1b9"
 }

package/src/components/CodeEditor.tsx

@@ -1,13 +1,19 @@
-import { Editor, EditorProps, OnMount, useMonaco } from '@monaco-editor/react';
+import { Editor, OnMount, useMonaco } from '@monaco-editor/react';
 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 { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
-import { useCalculatedThemeValues } from './hooks';
+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.scss';
+import { EditorProps, YamlEditorProps } from './types';
 import { initLoaderConfig, isDark } from './utils';
 
 initLoaderConfig();
@@ -22,7 +28,7 @@ export type CodeEditorProps = WithSupportProps<{
    */
   hasBackground?: boolean;
 }> &
-  EditorProps;
+  (EditorProps | YamlEditorProps);
 
 export function CodeEditor({
   themeName,
@@ -34,15 +40,23 @@ export function CodeEditor({
   onMount,
   ...props
 }: CodeEditorProps) {
+  const { language } = props;
+
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
+  const yamlModelPath = useYamlEditor(props.language === 'yaml' ? props.yamlSchema : undefined);
+
   const onEditorMount = useCallback<OnMount>(
     (editor, monaco) => {
       monaco && isBrowser() && document?.fonts?.ready.finally(monaco.editor.remeasureFonts);
       onMount?.(editor, monaco);
+
+      if (language === 'yaml') {
+        monaco.languages.register({ id: 'yaml' });
+      }
     },
-    [onMount],
+    [language, onMount],
   );
 
   const themeValues = useCalculatedThemeValues({ themeName, stylesOriginNode: wrapperElement });
@@ -111,6 +125,7 @@ export function CodeEditor({
   const mergedOptions = useMemo(
     () => ({
       ...CODE_EDITOR_OPTIONS,
+      ...(language === 'yaml' ? YAML_CODE_EDITOR_OPTIONS : {}),
       ...(themeValues?.mono
         ? {
             fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
@@ -120,7 +135,7 @@ export function CodeEditor({
         : DEFAULT_THEME_OPTIONS.mono.s),
       ...options,
     }),
-    [options, themeValues?.mono],
+    [options, language, themeValues?.mono],
   );
 
   return (
@@ -132,6 +147,7 @@ export function CodeEditor({
         loading={loading ?? <Spinner />}
         options={mergedOptions}
         onMount={onEditorMount}
+        path={yamlModelPath}
       />
     </div>
   );

package/src/components/constants.ts

@@ -98,3 +98,9 @@ export const CODE_EDITOR_OPTIONS = {
     indentation: false,
   },
 };
+
+export const YAML_CODE_EDITOR_OPTIONS = {
+  quickSuggestions: {
+    strings: true,
+  },
+};

package/src/components/hooks.ts

@@ -1,3 +1,5 @@
+import { useMonaco } from '@monaco-editor/react';
+import { configureMonacoYaml, SchemasSettings } from 'monaco-yaml';
 import { useEffect, useState } from 'react';
 
 import { useThemeContext } from '@snack-uikit/utils';
@@ -42,3 +44,21 @@ export function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCal
 
   return values;
 }
+
+export function useYamlEditor(yamlSchema?: SchemasSettings) {
+  const modelPath = yamlSchema?.fileMatch?.[0];
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    if (!yamlSchema || !monaco) {
+      return;
+    }
+
+    configureMonacoYaml(monaco, {
+      enableSchemaRequest: true,
+      schemas: [yamlSchema],
+    });
+  }, [monaco, yamlSchema]);
+
+  return modelPath;
+}

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './CodeEditor';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,11 @@
+import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
+import { SchemasSettings } from 'monaco-yaml';
+
+export type EditorProps = {
+  yamlSchema?: never;
+} & MonacoEditorProps;
+
+export type YamlEditorProps = {
+  language: 'yaml';
+  yamlSchema?: SchemasSettings;
+} & Omit<MonacoEditorProps, 'language'>;