@snack-uikit/markdown 0.4.10 → 0.4.11-preview-580e8472.0

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Markdown",
-  "version": "0.4.10",
+  "version": "0.4.11-preview-580e8472.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -35,7 +35,7 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/code-editor": "0.6.4",
+    "@snack-uikit/code-editor": "0.6.5-preview-580e8472.0",
     "@snack-uikit/divider": "3.2.6",
     "@snack-uikit/fields": "0.44.0",
     "@snack-uikit/link": "0.17.1",
@@ -46,5 +46,5 @@
     "react-markdown": "7.1.1",
     "remark-gfm": "3.0.1"
   },
-  "gitHead": "98d8215a4c461746557441b6a31b109ebe43ce5c"
+  "gitHead": "83474111057d185ee911d5bb4489288c89f1490f"
 }

package/src/components/Markdown/Markdown.tsx

@@ -1,6 +1,7 @@
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import { CodeEditorProps } from '@snack-uikit/code-editor';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { Blockquote, Code, Divider, Link, Table } from '../../helperComponents';
@@ -11,9 +12,13 @@ export type MarkdownProps = WithSupportProps<{
   value?: string;
   /** CSS-класс */
   className?: string;
+  /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor*/
+  components?: Components;
+  /** Действие при клике на кнопку копирования кода*/
+  onCopyClick?: CodeEditorProps['onCopyClick'];
 }>;
 
-export function Markdown({ value, className, ...rest }: MarkdownProps) {
+export function Markdown({ value, className, onCopyClick, components = {}, ...rest }: MarkdownProps) {
   return (
     <div className={className} {...extractSupportProps(rest)}>
       {value && (
@@ -22,11 +27,12 @@ export function Markdown({ value, className, ...rest }: MarkdownProps) {
           remarkPlugins={[remarkGfm]}
           skipHtml
           components={{
-            code: Code,
+            code: props => <Code {...props} onClick={onCopyClick} />,
             table: Table,
             hr: Divider,
             blockquote: Blockquote,
             a: Link,
+            ...components,
           }}
         >
           {value}

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,6 +1,8 @@
 import cn from 'classnames';
 import { useEffect, useState } from 'react';
+import { Components } from 'react-markdown';
 
+import { CodeEditorProps } from '@snack-uikit/code-editor';
 import { FieldDecorator, FieldTextArea, VALIDATION_STATE } from '@snack-uikit/fields';
 import { Switch } from '@snack-uikit/toggles';
 import { Typography } from '@snack-uikit/typography';
@@ -30,6 +32,10 @@ export type MarkdownEditorProps = WithSupportProps<{
   required?: boolean;
   /** Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) */
   resizable?: boolean;
+  /** Действие при клике на кнопку копирования кода*/
+  onCodeCopyClick?: CodeEditorProps['onCopyClick'];
+  /** Переопределение компонентов по умолчанию и добавление новых в CodeEditor*/
+  components?: Components;
 }>;
 
 export function MarkdownEditor({
@@ -42,30 +48,34 @@ export function MarkdownEditor({
   placeholder,
   required,
   resizable,
+  onCodeCopyClick,
+  components,
   ...rest
 }: MarkdownEditorProps) {
-  const [viewMode, setViewMode] = useState<boolean>(false);
+  const [isViewMode, setIsViewMode] = useState<boolean>(false);
 
   useEffect(() => {
-    setViewMode(defaultMode === MODE.View);
+    setIsViewMode(defaultMode === MODE.View);
   }, [defaultMode]);
 
   return (
     <div className={cn(styles.editor, className)} {...extractSupportProps(rest)}>
       <div className={styles.control}>
         <div className={styles.switchWrapper}>
-          <Switch checked={viewMode} onChange={setViewMode} />
+          <Switch checked={isViewMode} onChange={setIsViewMode} />
           <Typography.SansBodyM>Предпросмотр</Typography.SansBodyM>
         </div>
 
         <Typography.SansBodyS className={styles.tip}>Поддерживается Markdown</Typography.SansBodyS>
       </div>
 
-      {viewMode ? (
+      {isViewMode ? (
         <FieldDecorator label={label} required={required} error={error} size='m'>
           <Markdown
             value={value}
+            onCopyClick={onCodeCopyClick}
             className={styles.viewWrapper}
+            components={components}
             data-validation={error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default}
           />
         </FieldDecorator>

package/src/helperComponents/Code/Code.tsx

@@ -1,28 +1,37 @@
 import { ReactNode } from 'react';
 
-import { CodeEditor } from '@snack-uikit/code-editor';
+import { CodeEditor, CodeEditorProps } from '@snack-uikit/code-editor';
 
 import styles from './styles.module.scss';
 
-type CodeProps = { inline?: boolean; className?: string; children: ReactNode & ReactNode[] };
+type CodeProps = {
+  inline?: boolean;
+  className?: string;
+  children: ReactNode & ReactNode[];
+  onClick?: CodeEditorProps['onCopyClick'];
+};
 
-export function Code({ inline, className, children }: CodeProps) {
+export function Code({ inline, className, children, onClick }: CodeProps) {
   const language = /language-(\w+)/.exec(className || '')?.[1];
+  const value = String(children).replace(/\n$/, '');
 
   if (!inline) {
     return (
-      <CodeEditor
-        className={styles.wrapper}
-        height={200}
-        language={language}
-        value={String(children).replace(/\n$/, '')}
-        options={{
-          readOnly: true,
-          minimap: {
-            enabled: false,
-          },
-        }}
-      />
+      <div className={styles.wrapper}>
+        <CodeEditor
+          onCopyClick={onClick}
+          height={200}
+          className={styles.editor}
+          language={language}
+          value={value}
+          options={{
+            readOnly: true,
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+      </div>
     );
   }
 

package/src/helperComponents/Code/styles.module.scss

@@ -3,8 +3,7 @@
 .wrapper {
   @include styles-tokens-markdown.composite-var(styles-tokens-markdown.$markdown-syntax-code-editor);
 
-  display: flex;
-  max-height: 200px;
+  max-height: 230px;
 }
 
 .code {