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

package/README.md

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

package/dist/cjs/components/CodeEditor.js

@@ -22,8 +22,11 @@ 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");
+const CopyButton_1 = require("./CopyButton");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
@@ -36,11 +39,15 @@ function CodeEditor(_a) {
       loading,
       hasBackground = true,
       onMount,
-      language
+      language,
+      onCopyClick
     } = _a,
-    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language"]);
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
+  const {
+    t
+  } = (0, locale_1.useLocale)();
   const {
     jsonSchemaProps,
     jsonSchemaOptions
@@ -111,11 +118,20 @@ 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, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono, jsonSchemaOptions]);
-  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
     ref: setWrapperElement,
-    children: (0, jsx_runtime_1.jsx)(react_1.Editor, Object.assign({}, jsonSchemaProps, props, {
+    children: [(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')
+      }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, {
+        valueToCopy: props.value || '',
+        size: 's',
+        onClick: onCopyClick
+      })]
+    }), (0, jsx_runtime_1.jsx)(react_1.Editor, Object.assign({}, jsonSchemaProps, props, {
       theme: theme !== null && theme !== void 0 ? theme : dark ? 'snackDark' : 'snack',
       className: (0, classnames_1.default)({
         [styles_module_scss_1.default.editor]: hasBackground
@@ -124,6 +140,6 @@ function CodeEditor(_a) {
       options: mergedOptions,
       onMount: onEditorMount,
       language: language
-    }))
+    }))]
   }));
 }

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

@@ -0,0 +1,9 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CopyButtonProps = WithSupportProps<{
+    valueToCopy: string | number;
+    size?: ButtonFunctionProps['size'];
+    className?: string;
+    onClick?: ButtonFunctionProps['onClick'];
+}>;
+export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const locale_1 = require("@snack-uikit/locale");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function CopyButton(_a) {
+  var {
+      valueToCopy,
+      size = 's',
+      className,
+      onClick
+    } = _a,
+    rest = __rest(_a, ["valueToCopy", "size", "className", "onClick"]);
+  const {
+    t
+  } = (0, locale_1.useLocale)();
+  const [isChecked, setIsCheckedOpen] = (0, react_1.useState)(false);
+  const timerId = (0, react_1.useRef)();
+  const openChecked = () => setIsCheckedOpen(true);
+  const closeChecked = () => setIsCheckedOpen(false);
+  const handleClick = event => {
+    event.stopPropagation();
+    valueToCopy && (0, frontend_tools_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);
+  };
+  (0, react_1.useEffect)(() => () => {
+    closeChecked();
+    clearTimeout(timerId.current);
+  }, []);
+  return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+    tip: t('Markdown.copyButtonToolTip'),
+    children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+      onClick: handleClick,
+      className: className,
+      "data-test-id": 'button-copy-value',
+      type: 'button',
+      icon: isChecked ? (0, jsx_runtime_1.jsx)(icons_1.CheckSVG, {
+        className: styles_module_scss_1.default.checkIcon
+      }) : (0, jsx_runtime_1.jsx)(icons_1.CopySVG, {}),
+      size: size
+    }))
+  });
+}

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

@@ -0,0 +1 @@
+export * from './CopyButton';

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./CopyButton"), exports);

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

@@ -0,0 +1,3 @@
+.checkIcon{
+  fill:var(--sys-green-accent-default, #57b762);
+}

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

@@ -10,4 +10,15 @@
   width:100%;
   opacity:var(--opacity-a004, 0.04);
   background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+
+.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);
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }

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

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

package/dist/esm/components/CodeEditor.js

@@ -9,20 +9,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
 export function CodeEditor(_a) {
-    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language"]);
+    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
     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;
@@ -87,5 +91,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 (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: _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: [_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 }))] })));
 }

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

@@ -0,0 +1,9 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CopyButtonProps = WithSupportProps<{
+    valueToCopy: string | number;
+    size?: ButtonFunctionProps['size'];
+    className?: string;
+    onClick?: ButtonFunctionProps['onClick'];
+}>;
+export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 { ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export function CopyButton(_a) {
+    var { valueToCopy, size = 's', className, onClick } = _a, rest = __rest(_a, ["valueToCopy", "size", "className", "onClick"]);
+    const { t } = useLocale();
+    const [isChecked, setIsCheckedOpen] = useState(false);
+    const timerId = useRef();
+    const openChecked = () => setIsCheckedOpen(true);
+    const closeChecked = () => setIsCheckedOpen(false);
+    const handleClick = event => {
+        event.stopPropagation();
+        valueToCopy && copyToClipboard(String(valueToCopy));
+        openChecked();
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeChecked, 1000);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    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 })) }));
+}

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

@@ -0,0 +1 @@
+export * from './CopyButton';

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

@@ -0,0 +1 @@
+export * from './CopyButton';

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

@@ -0,0 +1,3 @@
+.checkIcon{
+  fill:var(--sys-green-accent-default, #57b762);
+}

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

@@ -10,4 +10,15 @@
   width:100%;
   opacity:var(--opacity-a004, 0.04);
   background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+
+.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);
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.4",
+  "version": "0.6.5-preview-580e8472.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,8 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
+    "@cloud-ru/frontend-tools-copy-to-clipboard": "0.0.1-preview-8188049.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",
     "chroma-js": "3.1.2",
     "classnames": "2.5.1",
@@ -46,5 +52,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "0eedd13082bdc63c6f0b1a6c592421e6133f17af"
+  "gitHead": "83474111057d185ee911d5bb4489288c89f1490f"
 }

package/src/components/CodeEditor.tsx

@@ -2,10 +2,14 @@ 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';
 
 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.scss';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
@@ -20,6 +24,10 @@ export type CodeEditorProps = WithSupportProps<{
    * Включение/отключение псевдобекграунда
    */
   hasBackground?: boolean;
+  /**
+   * Клик по кнопке копирования
+   */
+  onCopyClick?: ButtonFunctionProps['onClick'];
 }> &
   (EditorBaseProps | EditorWithJsonSchemaProps);
 
@@ -32,11 +40,14 @@ export function CodeEditor({
   hasBackground = true,
   onMount,
   language,
+  onCopyClick,
   ...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,
@@ -132,6 +143,10 @@ 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>
       <Editor
         {...jsonSchemaProps}
         {...props}

package/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,56 @@
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { copyToClipboard } from '@cloud-ru/frontend-tools-copy-to-clipboard';
+import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type CopyButtonProps = WithSupportProps<{
+  valueToCopy: string | number;
+  size?: ButtonFunctionProps['size'];
+  className?: string;
+  onClick?: ButtonFunctionProps['onClick'];
+}>;
+
+export function CopyButton({ valueToCopy, size = 's', className, onClick, ...rest }: CopyButtonProps) {
+  const { t } = useLocale();
+  const [isChecked, setIsCheckedOpen] = useState(false);
+  const timerId = useRef<NodeJS.Timeout>();
+  const openChecked = () => setIsCheckedOpen(true);
+  const closeChecked = () => setIsCheckedOpen(false);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    event.stopPropagation();
+    valueToCopy && copyToClipboard(String(valueToCopy));
+    openChecked();
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(closeChecked, 1000);
+    onClick?.(event);
+  };
+
+  useEffect(
+    () => () => {
+      closeChecked();
+      clearTimeout(timerId.current);
+    },
+    [],
+  );
+
+  return (
+    <Tooltip tip={t('Markdown.copyButtonToolTip')}>
+      <ButtonFunction
+        {...extractSupportProps(rest)}
+        onClick={handleClick}
+        className={className}
+        data-test-id='button-copy-value'
+        type='button'
+        icon={isChecked ? <CheckSVG className={styles.checkIcon} /> : <CopySVG />}
+        size={size}
+      />
+    </Tooltip>
+  );
+}

package/src/components/CopyButton/index.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

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

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

package/src/components/styles.module.scss

@@ -1,4 +1,6 @@
 @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
+
 
 .editor {
   background-color: inherit;
@@ -17,3 +19,15 @@
     background-color: styles-theme-variables.$sys-neutral-accent-default;
   }
 }
+
+.headline {
+  @include styles-tokens-markdown.composite-var(styles-tokens-markdown.$markdown-syntax-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;
+
+}