@snack-uikit/code-editor 0.6.5-preview-580e8472.0 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2025-05-28)
+
+
+### Features
+
+* **PDS-2227:** add copy button for code editor ([6891964](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/6891964be3dffecab54a3a226f250f6d303da7e9))
+
+
+
+
+
 ## 0.6.4 (2025-05-16)
 
 ### Only dependencies have been changed

package/README.md

@@ -15,7 +15,8 @@
 | jsonSchema* | `JsonSchema` | - | Схема для валидации |
 | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| onCopyClick | `MouseEventHandler<HTMLElement>` | - | Клик по кнопке копирования |
+| hasHeader | `boolean` | - | Включение/отключение шапки |
+| onCopyClick | `() => void` | - | Клик по кнопке копирования |
 | 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,4 +1,3 @@
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
@@ -10,9 +9,13 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
+    /**
+     * Включение/отключение шапки
+     */
+    hasHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
-    onCopyClick?: ButtonFunctionProps['onClick'];
+    onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CodeEditor.js

@@ -22,7 +22,6 @@ const react_1 = require("@monaco-editor/react");
 const classnames_1 = __importDefault(require("classnames"));
 const react_2 = require("react");
 const loaders_1 = require("@snack-uikit/loaders");
-const locale_1 = require("@snack-uikit/locale");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("./constants");
@@ -40,14 +39,12 @@ function CodeEditor(_a) {
       hasBackground = true,
       onMount,
       language,
-      onCopyClick
+      onCopyClick,
+      hasHeader
     } = _a,
-    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasHeader"]);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
-  const {
-    t
-  } = (0, locale_1.useLocale)();
   const {
     jsonSchemaProps,
     jsonSchemaOptions
@@ -122,10 +119,10 @@ function CodeEditor(_a) {
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
     ref: setWrapperElement,
-    children: [(0, jsx_runtime_1.jsxs)("div", {
+    children: [hasHeader && (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.headline,
-      children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelS, {
-        children: t('Markdown.codeEditorTitle')
+      children: [language && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelS, {
+        children: (0, utils_2.uppercaseFirstLetter)(language)
       }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, {
         valueToCopy: props.value || '',
         size: 's',

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

@@ -4,6 +4,6 @@ export type CopyButtonProps = WithSupportProps<{
     valueToCopy: string | number;
     size?: ButtonFunctionProps['size'];
     className?: string;
-    onClick?: ButtonFunctionProps['onClick'];
+    onClick?(): void;
 }>;
 export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CopyButton/CopyButton.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CopyButton = CopyButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const frontend_tools_copy_to_clipboard_1 = require("@cloud-ru/frontend-tools-copy-to-clipboard");
+const ft_copy_to_clipboard_1 = require("@cloud-ru/ft-copy-to-clipboard");
 const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const locale_1 = require("@snack-uikit/locale");
@@ -43,18 +43,18 @@ function CopyButton(_a) {
   const closeChecked = () => setIsCheckedOpen(false);
   const handleClick = event => {
     event.stopPropagation();
-    valueToCopy && (0, frontend_tools_copy_to_clipboard_1.copyToClipboard)(String(valueToCopy));
+    valueToCopy && (0, ft_copy_to_clipboard_1.copyToClipboard)(String(valueToCopy));
     openChecked();
     clearTimeout(timerId.current);
     timerId.current = setTimeout(closeChecked, 1000);
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onClick === null || onClick === void 0 ? void 0 : onClick();
   };
   (0, react_1.useEffect)(() => () => {
     closeChecked();
     clearTimeout(timerId.current);
   }, []);
   return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
-    tip: t('Markdown.copyButtonToolTip'),
+    tip: t('CodeEditor.copyButtonToolTip'),
     children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
       onClick: handleClick,
       className: className,

package/dist/cjs/components/styles.module.css

@@ -13,9 +13,9 @@
 }
 
 .headline{
-  min-height:var(--size-markdown-code-editor-headline-min-height, 36px);
-  padding-left:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
-  padding-right:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
+  min-height:var(--size-code-editor-headline-min-height, 36px);
+  padding-left:var(--space-code-editor-headline-horizontal-padding, 12px);
+  padding-right:var(--space-code-editor-headline-horizontal-padding, 12px);
   display:flex;
   align-items:center;
   justify-content:space-between;

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

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

package/dist/cjs/components/utils.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getJsonSchema = void 0;
 exports.rgb2hsl = rgb2hsl;
 exports.isDark = isDark;
+exports.uppercaseFirstLetter = uppercaseFirstLetter;
 const chroma_js_1 = __importDefault(require("chroma-js"));
 const constants_1 = require("./constants");
 function rgb2hsl(HTMLcolor) {
@@ -50,4 +51,11 @@ const getJsonSchema = jsonSchema => jsonSchema && Object.assign(Object.assign({}
   uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || constants_1.DEFAULT_SCHEMA_URI,
   fileMatch: [jsonSchema.fileMatch]
 });
-exports.getJsonSchema = getJsonSchema;
+exports.getJsonSchema = getJsonSchema;
+function uppercaseFirstLetter(value) {
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0) {
+    return value;
+  }
+  return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
+}

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

@@ -1,4 +1,3 @@
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
@@ -10,9 +9,13 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
+    /**
+     * Включение/отключение шапки
+     */
+    hasHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
-    onCopyClick?: ButtonFunctionProps['onClick'];
+    onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CodeEditor.js

@@ -14,19 +14,17 @@ import { Editor, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
-import { useLocale } from '@snack-uikit/locale';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { CopyButton } from './CopyButton';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
-import { isDark } from './utils';
+import { isDark, uppercaseFirstLetter } from './utils';
 export function CodeEditor(_a) {
-    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
+    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick, hasHeader } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasHeader"]);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
-    const { t } = useLocale();
     const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(language, 'jsonSchema' in props ? props.jsonSchema : undefined);
     const onEditorMount = useCallback((editor, monaco) => {
         var _a;
@@ -91,5 +89,5 @@ export function CodeEditor(_a) {
             fontFamily: themeValues.mono.body.s['font-family'],
         }
         : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono, jsonSchemaOptions]);
-    return (_jsxs("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansLabelS, { children: t('Markdown.codeEditorTitle') }), _jsx(CopyButton, { valueToCopy: props.value || '', size: 's', onClick: onCopyClick })] }), _jsx(Editor, Object.assign({}, jsonSchemaProps, 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, language: language }))] })));
+    return (_jsxs("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: [hasHeader && (_jsxs("div", { className: styles.headline, children: [language && _jsx(Typography.SansLabelS, { children: uppercaseFirstLetter(language) }), _jsx(CopyButton, { valueToCopy: props.value || '', size: 's', onClick: onCopyClick })] })), _jsx(Editor, Object.assign({}, jsonSchemaProps, 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, language: language }))] })));
 }

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

@@ -4,6 +4,6 @@ export type CopyButtonProps = WithSupportProps<{
     valueToCopy: string | number;
     size?: ButtonFunctionProps['size'];
     className?: string;
-    onClick?: ButtonFunctionProps['onClick'];
+    onClick?(): void;
 }>;
 export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CopyButton/CopyButton.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { copyToClipboard } from '@cloud-ru/frontend-tools-copy-to-clipboard';
+import { copyToClipboard } from '@cloud-ru/ft-copy-to-clipboard';
 import { ButtonFunction } from '@snack-uikit/button';
 import { CheckSVG, CopySVG } from '@snack-uikit/icons';
 import { useLocale } from '@snack-uikit/locale';
@@ -31,11 +31,11 @@ export function CopyButton(_a) {
         openChecked();
         clearTimeout(timerId.current);
         timerId.current = setTimeout(closeChecked, 1000);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
     useEffect(() => () => {
         closeChecked();
         clearTimeout(timerId.current);
     }, []);
-    return (_jsx(Tooltip, { tip: t('Markdown.copyButtonToolTip'), children: _jsx(ButtonFunction, Object.assign({}, extractSupportProps(rest), { onClick: handleClick, className: className, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, { className: styles.checkIcon }) : _jsx(CopySVG, {}), size: size })) }));
+    return (_jsx(Tooltip, { tip: t('CodeEditor.copyButtonToolTip'), children: _jsx(ButtonFunction, Object.assign({}, extractSupportProps(rest), { onClick: handleClick, className: className, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, { className: styles.checkIcon }) : _jsx(CopySVG, {}), size: size })) }));
 }

package/dist/esm/components/styles.module.css

@@ -13,9 +13,9 @@
 }
 
 .headline{
-  min-height:var(--size-markdown-code-editor-headline-min-height, 36px);
-  padding-left:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
-  padding-right:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
+  min-height:var(--size-code-editor-headline-min-height, 36px);
+  padding-left:var(--space-code-editor-headline-horizontal-padding, 12px);
+  padding-right:var(--space-code-editor-headline-horizontal-padding, 12px);
   display:flex;
   align-items:center;
   justify-content:space-between;

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

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

package/dist/esm/components/utils.js

@@ -38,3 +38,10 @@ export function isDark(color) {
     return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
 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] });
+export function uppercaseFirstLetter(value) {
+    const trimmedValue = value.trim();
+    if (trimmedValue.length === 0) {
+        return value;
+    }
+    return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
+}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.5-preview-580e8472.0",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,12 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/frontend-tools-copy-to-clipboard": "0.0.1-preview-8188049.0",
+    "@cloud-ru/ft-copy-to-clipboard": "0.1.0",
     "@monaco-editor/react": "4.6.0",
     "@snack-uikit/button": "0.19.11",
     "@snack-uikit/icons": "0.26.3",
     "@snack-uikit/loaders": "0.9.5",
-    "@snack-uikit/locale": "0.14.1-preview-580e8472.0",
     "@snack-uikit/tooltip": "0.17.2",
     "@snack-uikit/typography": "0.8.7",
     "@snack-uikit/utils": "3.8.2",
@@ -49,8 +48,11 @@
     "classnames": "2.5.1",
     "monaco-yaml": "5.2.3"
   },
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "83474111057d185ee911d5bb4489288c89f1490f"
+  "gitHead": "bfec8dd0ba3b8e294440db45599d9770216e602f"
 }

package/src/components/CodeEditor.tsx

@@ -2,9 +2,7 @@ import { Editor, OnMount, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { Spinner } from '@snack-uikit/loaders';
-import { useLocale } from '@snack-uikit/locale';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
 
@@ -13,7 +11,7 @@ import { CopyButton } from './CopyButton';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
-import { isDark } from './utils';
+import { isDark, uppercaseFirstLetter } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
   /**
@@ -24,10 +22,14 @@ export type CodeEditorProps = WithSupportProps<{
    * Включение/отключение псевдобекграунда
    */
   hasBackground?: boolean;
+  /**
+   * Включение/отключение шапки
+   */
+  hasHeader?: boolean;
   /**
    * Клик по кнопке копирования
    */
-  onCopyClick?: ButtonFunctionProps['onClick'];
+  onCopyClick?(): void;
 }> &
   (EditorBaseProps | EditorWithJsonSchemaProps);
 
@@ -41,13 +43,12 @@ export function CodeEditor({
   onMount,
   language,
   onCopyClick,
+  hasHeader,
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
-  const { t } = useLocale();
-
   const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(
     language,
     'jsonSchema' in props ? props.jsonSchema : undefined,
@@ -143,10 +144,12 @@ export function CodeEditor({
 
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
-      <div className={styles.headline}>
-        <Typography.SansLabelS>{t('Markdown.codeEditorTitle')}</Typography.SansLabelS>
-        <CopyButton valueToCopy={props.value || ''} size={'s'} onClick={onCopyClick} />
-      </div>
+      {hasHeader && (
+        <div className={styles.headline}>
+          {language && <Typography.SansLabelS>{uppercaseFirstLetter(language)}</Typography.SansLabelS>}
+          <CopyButton valueToCopy={props.value || ''} size={'s'} onClick={onCopyClick} />
+        </div>
+      )}
       <Editor
         {...jsonSchemaProps}
         {...props}

package/src/components/CopyButton/CopyButton.tsx

@@ -1,6 +1,6 @@
 import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 
-import { copyToClipboard } from '@cloud-ru/frontend-tools-copy-to-clipboard';
+import { copyToClipboard } from '@cloud-ru/ft-copy-to-clipboard';
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { CheckSVG, CopySVG } from '@snack-uikit/icons';
 import { useLocale } from '@snack-uikit/locale';
@@ -13,7 +13,7 @@ export type CopyButtonProps = WithSupportProps<{
   valueToCopy: string | number;
   size?: ButtonFunctionProps['size'];
   className?: string;
-  onClick?: ButtonFunctionProps['onClick'];
+  onClick?(): void;
 }>;
 
 export function CopyButton({ valueToCopy, size = 's', className, onClick, ...rest }: CopyButtonProps) {
@@ -29,7 +29,7 @@ export function CopyButton({ valueToCopy, size = 's', className, onClick, ...res
     openChecked();
     clearTimeout(timerId.current);
     timerId.current = setTimeout(closeChecked, 1000);
-    onClick?.(event);
+    onClick?.();
   };
 
   useEffect(
@@ -41,7 +41,7 @@ export function CopyButton({ valueToCopy, size = 's', className, onClick, ...res
   );
 
   return (
-    <Tooltip tip={t('Markdown.copyButtonToolTip')}>
+    <Tooltip tip={t('CodeEditor.copyButtonToolTip')}>
       <ButtonFunction
         {...extractSupportProps(rest)}
         onClick={handleClick}

package/src/components/CopyButton/styles.module.scss

@@ -1,6 +1,6 @@
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as ste;
 
 
 .checkIcon {
-  fill: styles-theme-variables.$sys-green-accent-default
+  fill: ste.$sys-green-accent-default
 }

package/src/components/styles.module.scss

@@ -1,5 +1,6 @@
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as var;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-codeEditor' as stc;
+
 
 
 .editor {
@@ -15,19 +16,18 @@
 
     width: 100%;
 
-    opacity: styles-theme-variables.$opacity-a004;
-    background-color: styles-theme-variables.$sys-neutral-accent-default;
+    opacity: var.$opacity-a004;
+    background-color: var.$sys-neutral-accent-default;
   }
 }
 
 .headline {
-  @include styles-tokens-markdown.composite-var(styles-tokens-markdown.$markdown-syntax-code-editor-headline);
+  @include stc.composite-var(stc.$code-editor-headline);
 
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  background-color: styles-tokens-markdown.$sys-neutral-background;
-  border-color: styles-tokens-markdown.$sys-neutral-decor-default;
-
+  background-color: stc.$sys-neutral-background;
+  border-color: stc.$sys-neutral-decor-default;
 }

package/src/components/utils.ts

@@ -56,3 +56,13 @@ export function isDark(color: string) {
 
 export const getJsonSchema = (jsonSchema?: JsonSchema): SchemasSettings | undefined =>
   jsonSchema && { ...jsonSchema, uri: jsonSchema?.uri || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] };
+
+export function uppercaseFirstLetter(value: string) {
+  const trimmedValue = value.trim();
+
+  if (trimmedValue.length === 0) {
+    return value;
+  }
+
+  return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
+}