@snack-uikit/markdown 0.4.12 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2025-05-28)
+
+
+### Features
+
+* **PDS-2227:** add copy button for code editor ([6891964](https://github.com/cloud-ru-tech/snack-uikit/commit/6891964be3dffecab54a3a226f250f6d303da7e9))
+
+
+
+
+
+## 0.4.13 (2025-05-27)
+
+### Only dependencies have been changed
+* [@snack-uikit/fields@0.47.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/CHANGELOG.md)
+
+
+
+
+
 ## 0.4.12 (2025-05-26)
 
 ### Only dependencies have been changed

package/README.md

@@ -35,6 +35,8 @@ const handleChange = (newValue: string) => {
 |------|------|---------------|-------------|
 | value | `string` | - | Текст c разметкой |
 | className | `string` | - | CSS-класс |
+| components | `Partial<Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents>` | {} | Переопределение компонентов по умолчанию и добавление новых в CodeEditor |
+| onCopyClick | `() => void` | - | Действие при клике на кнопку копирования кода |
 ## MarkdownEditor
 ### Props
 | name | type | default value | description |
@@ -48,6 +50,8 @@ const handleChange = (newValue: string) => {
 | placeholder | `string` | - | Плейсхолдер для textarea |
 | required | `boolean` | - | Является ли поле обязательным |
 | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
+| onCodeCopyClick | `() => void` | - | Действие при клике на кнопку копирования кода |
+| components | `Partial<Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents>` | - | Переопределение компонентов по умолчанию и добавление новых в CodeEditor |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,8 +1,13 @@
+import { Components } from 'react-markdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 export type MarkdownProps = WithSupportProps<{
     /** Текст c разметкой */
     value?: string;
     /** CSS-класс */
     className?: string;
+    /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor */
+    components?: Components;
+    /** Действие при клике на кнопку копирования кода */
+    onCopyClick?(): void;
 }>;
-export declare function Markdown({ value, className, ...rest }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Markdown({ value, className, onCopyClick, components, ...rest }: MarkdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Markdown/Markdown.js

@@ -26,9 +26,11 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Markdown(_a) {
   var {
       value,
-      className
+      className,
+      onCopyClick,
+      components = {}
     } = _a,
-    rest = __rest(_a, ["value", "className"]);
+    rest = __rest(_a, ["value", "className", "onCopyClick", "components"]);
   return (0, jsx_runtime_1.jsx)("div", Object.assign({
     className: className
   }, (0, utils_1.extractSupportProps)(rest), {
@@ -36,13 +38,15 @@ function Markdown(_a) {
       className: styles_module_scss_1.default.markdown,
       remarkPlugins: [remark_gfm_1.default],
       skipHtml: true,
-      components: {
-        code: helperComponents_1.Code,
+      components: Object.assign({
+        code: props => (0, jsx_runtime_1.jsx)(helperComponents_1.Code, Object.assign({}, props, {
+          onClick: onCopyClick
+        })),
         table: helperComponents_1.Table,
         hr: helperComponents_1.Divider,
         blockquote: helperComponents_1.Blockquote,
         a: helperComponents_1.Link
-      },
+      }, components),
       children: value
     })
   }));

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

@@ -1,3 +1,4 @@
+import { Components } from 'react-markdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Mode } from '../../types';
 export type MarkdownEditorProps = WithSupportProps<{
@@ -19,5 +20,9 @@ export type MarkdownEditorProps = WithSupportProps<{
     required?: boolean;
     /** Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) */
     resizable?: boolean;
+    /** Действие при клике на кнопку копирования кода*/
+    onCodeCopyClick?(): void;
+    /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor*/
+    components?: Components;
 }>;
-export declare function MarkdownEditor({ value, onChange, defaultMode, className, error, label, placeholder, required, resizable, ...rest }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownEditor({ value, onChange, defaultMode, className, error, label, placeholder, required, resizable, onCodeCopyClick, components, ...rest }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MarkdownEditor/MarkdownEditor.js

@@ -37,12 +37,14 @@ function MarkdownEditor(_a) {
       label,
       placeholder,
       required,
-      resizable
+      resizable,
+      onCodeCopyClick,
+      components
     } = _a,
-    rest = __rest(_a, ["value", "onChange", "defaultMode", "className", "error", "label", "placeholder", "required", "resizable"]);
-  const [viewMode, setViewMode] = (0, react_1.useState)(false);
+    rest = __rest(_a, ["value", "onChange", "defaultMode", "className", "error", "label", "placeholder", "required", "resizable", "onCodeCopyClick", "components"]);
+  const [isViewMode, setIsViewMode] = (0, react_1.useState)(false);
   (0, react_1.useEffect)(() => {
-    setViewMode(defaultMode === constants_1.MODE.View);
+    setIsViewMode(defaultMode === constants_1.MODE.View);
   }, [defaultMode]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.editor, className)
@@ -52,8 +54,8 @@ function MarkdownEditor(_a) {
       children: [(0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.switchWrapper,
         children: [(0, jsx_runtime_1.jsx)(toggles_1.Switch, {
-          checked: viewMode,
-          onChange: setViewMode
+          checked: isViewMode,
+          onChange: setIsViewMode
         }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, {
           children: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440"
         })]
@@ -61,14 +63,16 @@ function MarkdownEditor(_a) {
         className: styles_module_scss_1.default.tip,
         children: "\u041F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F Markdown"
       })]
-    }), viewMode ? (0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, {
+    }), isViewMode ? (0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, {
       label: label,
       required: required,
       error: error,
       size: 'm',
       children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, {
         value: value,
+        onCopyClick: onCodeCopyClick,
         className: styles_module_scss_1.default.viewWrapper,
+        components: components,
         "data-validation": error ? fields_1.VALIDATION_STATE.Error : fields_1.VALIDATION_STATE.Default
       })
     }) : (0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, {

package/dist/cjs/helperComponents/Code/Code.d.ts

@@ -3,6 +3,7 @@ type CodeProps = {
     inline?: boolean;
     className?: string;
     children: ReactNode & ReactNode[];
+    onClick?(): void;
 };
-export declare function Code({ inline, className, children }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ inline, className, children, onClick }: CodeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/Code/Code.js

@@ -16,16 +16,20 @@ function Code(_ref) {
   let {
     inline,
     className,
-    children
+    children,
+    onClick
   } = _ref;
   var _a;
   const language = (_a = /language-(\w+)/.exec(className || '')) === null || _a === void 0 ? void 0 : _a[1];
+  const value = String(children).replace(/\n$/, '');
   if (!inline) {
     return (0, jsx_runtime_1.jsx)(code_editor_1.CodeEditor, {
-      className: styles_module_scss_1.default.wrapper,
+      onCopyClick: onClick,
       height: 200,
+      className: styles_module_scss_1.default.wrapper,
       language: language,
-      value: String(children).replace(/\n$/, ''),
+      hasHeader: true,
+      value: value,
       options: {
         readOnly: true,
         minimap: {

package/dist/cjs/helperComponents/Code/styles.module.css

@@ -1,7 +1,7 @@
 .wrapper{
   padding-top:var(--space-markdown-syntax-code-editor, 5px);
-  display:flex;
-  max-height:200px;
+  box-sizing:border-box;
+  max-height:241px;
 }
 
 .code{

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

@@ -1,8 +1,13 @@
+import { Components } from 'react-markdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 export type MarkdownProps = WithSupportProps<{
     /** Текст c разметкой */
     value?: string;
     /** CSS-класс */
     className?: string;
+    /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor */
+    components?: Components;
+    /** Действие при клике на кнопку копирования кода */
+    onCopyClick?(): void;
 }>;
-export declare function Markdown({ value, className, ...rest }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Markdown({ value, className, onCopyClick, components, ...rest }: MarkdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Markdown/Markdown.js

@@ -16,12 +16,6 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { Blockquote, Code, Divider, Link, Table } from '../../helperComponents';
 import styles from './styles.module.css';
 export function Markdown(_a) {
-    var { value, className } = _a, rest = __rest(_a, ["value", "className"]);
-    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(rest), { children: value && (_jsx(ReactMarkdown, { className: styles.markdown, remarkPlugins: [remarkGfm], skipHtml: true, components: {
-                code: Code,
-                table: Table,
-                hr: Divider,
-                blockquote: Blockquote,
-                a: Link,
-            }, children: value })) })));
+    var { value, className, onCopyClick, components = {} } = _a, rest = __rest(_a, ["value", "className", "onCopyClick", "components"]);
+    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(rest), { children: value && (_jsx(ReactMarkdown, { className: styles.markdown, remarkPlugins: [remarkGfm], skipHtml: true, components: Object.assign({ code: props => _jsx(Code, Object.assign({}, props, { onClick: onCopyClick })), table: Table, hr: Divider, blockquote: Blockquote, a: Link }, components), children: value })) })));
 }

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

@@ -1,3 +1,4 @@
+import { Components } from 'react-markdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Mode } from '../../types';
 export type MarkdownEditorProps = WithSupportProps<{
@@ -19,5 +20,9 @@ export type MarkdownEditorProps = WithSupportProps<{
     required?: boolean;
     /** Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) */
     resizable?: boolean;
+    /** Действие при клике на кнопку копирования кода*/
+    onCodeCopyClick?(): void;
+    /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor*/
+    components?: Components;
 }>;
-export declare function MarkdownEditor({ value, onChange, defaultMode, className, error, label, placeholder, required, resizable, ...rest }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownEditor({ value, onChange, defaultMode, className, error, label, placeholder, required, resizable, onCodeCopyClick, components, ...rest }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MarkdownEditor/MarkdownEditor.js

@@ -20,10 +20,10 @@ import { MODE } from '../../constants';
 import { Markdown } from '../Markdown';
 import styles from './styles.module.css';
 export function MarkdownEditor(_a) {
-    var { value, onChange, defaultMode, className, error, label, placeholder, required, resizable } = _a, rest = __rest(_a, ["value", "onChange", "defaultMode", "className", "error", "label", "placeholder", "required", "resizable"]);
-    const [viewMode, setViewMode] = useState(false);
+    var { value, onChange, defaultMode, className, error, label, placeholder, required, resizable, onCodeCopyClick, components } = _a, rest = __rest(_a, ["value", "onChange", "defaultMode", "className", "error", "label", "placeholder", "required", "resizable", "onCodeCopyClick", "components"]);
+    const [isViewMode, setIsViewMode] = useState(false);
     useEffect(() => {
-        setViewMode(defaultMode === MODE.View);
+        setIsViewMode(defaultMode === MODE.View);
     }, [defaultMode]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.editor, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.control, children: [_jsxs("div", { className: styles.switchWrapper, children: [_jsx(Switch, { checked: viewMode, onChange: setViewMode }), _jsx(Typography.SansBodyM, { children: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440" })] }), _jsx(Typography.SansBodyS, { className: styles.tip, children: "\u041F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F Markdown" })] }), viewMode ? (_jsx(FieldDecorator, { label: label, required: required, error: error, size: 'm', children: _jsx(Markdown, { value: value, className: styles.viewWrapper, "data-validation": error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default }) })) : (_jsx(FieldTextArea, { value: value, onChange: onChange, label: label, placeholder: placeholder, required: required, resizable: resizable, error: error, size: 'm' }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.editor, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.control, children: [_jsxs("div", { className: styles.switchWrapper, children: [_jsx(Switch, { checked: isViewMode, onChange: setIsViewMode }), _jsx(Typography.SansBodyM, { children: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440" })] }), _jsx(Typography.SansBodyS, { className: styles.tip, children: "\u041F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F Markdown" })] }), isViewMode ? (_jsx(FieldDecorator, { label: label, required: required, error: error, size: 'm', children: _jsx(Markdown, { value: value, onCopyClick: onCodeCopyClick, className: styles.viewWrapper, components: components, "data-validation": error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default }) })) : (_jsx(FieldTextArea, { value: value, onChange: onChange, label: label, placeholder: placeholder, required: required, resizable: resizable, error: error, size: 'm' }))] })));
 }

package/dist/esm/helperComponents/Code/Code.d.ts

@@ -3,6 +3,7 @@ type CodeProps = {
     inline?: boolean;
     className?: string;
     children: ReactNode & ReactNode[];
+    onClick?(): void;
 };
-export declare function Code({ inline, className, children }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ inline, className, children, onClick }: CodeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/Code/Code.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CodeEditor } from '@snack-uikit/code-editor';
 import styles from './styles.module.css';
-export function Code({ inline, className, children }) {
+export function Code({ inline, className, children, onClick }) {
     var _a;
     const language = (_a = /language-(\w+)/.exec(className || '')) === null || _a === void 0 ? void 0 : _a[1];
+    const value = String(children).replace(/\n$/, '');
     if (!inline) {
-        return (_jsx(CodeEditor, { className: styles.wrapper, height: 200, language: language, value: String(children).replace(/\n$/, ''), options: {
+        return (_jsx(CodeEditor, { onCopyClick: onClick, height: 200, className: styles.wrapper, language: language, hasHeader: true, value: value, options: {
                 readOnly: true,
                 minimap: {
                     enabled: false,

package/dist/esm/helperComponents/Code/styles.module.css

@@ -1,7 +1,7 @@
 .wrapper{
   padding-top:var(--space-markdown-syntax-code-editor, 5px);
-  display:flex;
-  max-height:200px;
+  box-sizing:border-box;
+  max-height:241px;
 }
 
 .code{