@snack-uikit/markdown 0.4.13 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +4 -0
- package/dist/cjs/components/Markdown/Markdown.d.ts +6 -1
- package/dist/cjs/components/Markdown/Markdown.js +9 -5
- package/dist/cjs/components/MarkdownEditor/MarkdownEditor.d.ts +6 -1
- package/dist/cjs/components/MarkdownEditor/MarkdownEditor.js +11 -7
- package/dist/cjs/helperComponents/Code/Code.d.ts +2 -1
- package/dist/cjs/helperComponents/Code/Code.js +7 -3
- package/dist/cjs/helperComponents/Code/styles.module.css +2 -2
- package/dist/esm/components/Markdown/Markdown.d.ts +6 -1
- package/dist/esm/components/Markdown/Markdown.js +2 -8
- package/dist/esm/components/MarkdownEditor/MarkdownEditor.d.ts +6 -1
- package/dist/esm/components/MarkdownEditor/MarkdownEditor.js +4 -4
- package/dist/esm/helperComponents/Code/Code.d.ts +2 -1
- package/dist/esm/helperComponents/Code/Code.js +3 -2
- package/dist/esm/helperComponents/Code/styles.module.css +2 -2
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/Markdown/Markdown.tsx +8 -3
- package/src/components/Markdown/styles.module.scss +20 -20
- package/src/components/MarkdownEditor/MarkdownEditor.tsx +13 -4
- package/src/components/MarkdownEditor/styles.module.scss +15 -15
- package/src/helperComponents/Blockquote/styles.module.scss +5 -5
- package/src/helperComponents/Code/Code.tsx +12 -4
- package/src/helperComponents/Code/styles.module.scss +8 -8
- package/src/helperComponents/Divider/styles.module.scss +2 -2
- package/src/helperComponents/Table/styles.module.scss +7 -7
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Markdown",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.5.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"license": "Apache-2.0",
|
|
36
36
|
"scripts": {},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@snack-uikit/code-editor": "0.
|
|
38
|
+
"@snack-uikit/code-editor": "0.7.0",
|
|
39
39
|
"@snack-uikit/divider": "3.2.6",
|
|
40
40
|
"@snack-uikit/fields": "0.47.0",
|
|
41
41
|
"@snack-uikit/link": "0.17.1",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"react-markdown": "7.1.1",
|
|
47
47
|
"remark-gfm": "3.0.1"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "bfec8dd0ba3b8e294440db45599d9770216e602f"
|
|
50
50
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ReactMarkdown from 'react-markdown';
|
|
1
|
+
import ReactMarkdown, { Components } from 'react-markdown';
|
|
2
2
|
import remarkGfm from 'remark-gfm';
|
|
3
3
|
|
|
4
4
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
@@ -11,9 +11,13 @@ export type MarkdownProps = WithSupportProps<{
|
|
|
11
11
|
value?: string;
|
|
12
12
|
/** CSS-класс */
|
|
13
13
|
className?: string;
|
|
14
|
+
/** Переопределение компонентов по умолчанию и добавление новых в CodeEditor */
|
|
15
|
+
components?: Components;
|
|
16
|
+
/** Действие при клике на кнопку копирования кода */
|
|
17
|
+
onCopyClick?(): void;
|
|
14
18
|
}>;
|
|
15
19
|
|
|
16
|
-
export function Markdown({ value, className, ...rest }: MarkdownProps) {
|
|
20
|
+
export function Markdown({ value, className, onCopyClick, components = {}, ...rest }: MarkdownProps) {
|
|
17
21
|
return (
|
|
18
22
|
<div className={className} {...extractSupportProps(rest)}>
|
|
19
23
|
{value && (
|
|
@@ -22,11 +26,12 @@ export function Markdown({ value, className, ...rest }: MarkdownProps) {
|
|
|
22
26
|
remarkPlugins={[remarkGfm]}
|
|
23
27
|
skipHtml
|
|
24
28
|
components={{
|
|
25
|
-
code: Code
|
|
29
|
+
code: props => <Code {...props} onClick={onCopyClick} />,
|
|
26
30
|
table: Table,
|
|
27
31
|
hr: Divider,
|
|
28
32
|
blockquote: Blockquote,
|
|
29
33
|
a: Link,
|
|
34
|
+
...components,
|
|
30
35
|
}}
|
|
31
36
|
>
|
|
32
37
|
{value}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
2
|
|
|
3
3
|
.markdown {
|
|
4
4
|
overflow: auto;
|
|
5
5
|
height: 100%;
|
|
6
|
-
color:
|
|
6
|
+
color: stm.$sys-neutral-text-main;
|
|
7
7
|
|
|
8
8
|
>:first-child {
|
|
9
9
|
padding-top: 0;
|
|
@@ -16,33 +16,33 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
h1 {
|
|
19
|
-
@include
|
|
20
|
-
@include
|
|
19
|
+
@include stm.composite-var(stm.$sans-headline-l);
|
|
20
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level1);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
h2 {
|
|
24
|
-
@include
|
|
25
|
-
@include
|
|
24
|
+
@include stm.composite-var(stm.$sans-headline-m);
|
|
25
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level2);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
h3 {
|
|
29
|
-
@include
|
|
30
|
-
@include
|
|
29
|
+
@include stm.composite-var(stm.$sans-headline-s);
|
|
30
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level3);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
h4 {
|
|
34
|
-
@include
|
|
35
|
-
@include
|
|
34
|
+
@include stm.composite-var(stm.$sans-title-l);
|
|
35
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level4);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
h5 {
|
|
39
|
-
@include
|
|
40
|
-
@include
|
|
39
|
+
@include stm.composite-var(stm.$sans-title-m);
|
|
40
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level5);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
h6 {
|
|
44
|
-
@include
|
|
45
|
-
@include
|
|
44
|
+
@include stm.composite-var(stm.$sans-title-s);
|
|
45
|
+
@include stm.composite-var(stm.$markdown-syntax-headings-level6);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
h1,
|
|
@@ -55,25 +55,25 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
p {
|
|
58
|
-
@include
|
|
59
|
-
@include
|
|
58
|
+
@include stm.composite-var(stm.$sans-body-m);
|
|
59
|
+
@include stm.composite-var(stm.$markdown-syntax-paragraphs);
|
|
60
60
|
|
|
61
61
|
margin: 0;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
li {
|
|
65
|
-
@include
|
|
65
|
+
@include stm.composite-var(stm.$sans-body-m);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
strong {
|
|
69
|
-
@include
|
|
69
|
+
@include stm.composite-var(stm.$sans-label-l);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
ul,
|
|
73
73
|
ol {
|
|
74
|
-
@include
|
|
74
|
+
@include stm.composite-var(stm.$markdown-syntax-list);
|
|
75
75
|
|
|
76
|
-
padding-inline-start: calc(
|
|
76
|
+
padding-inline-start: calc(#{stm.$dimension-3m} - #{stm.$dimension-050m});
|
|
77
77
|
|
|
78
78
|
p {
|
|
79
79
|
padding-top: 0;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
+
import { Components } from 'react-markdown';
|
|
3
4
|
|
|
4
5
|
import { FieldDecorator, FieldTextArea, VALIDATION_STATE } from '@snack-uikit/fields';
|
|
5
6
|
import { Switch } from '@snack-uikit/toggles';
|
|
@@ -30,6 +31,10 @@ export type MarkdownEditorProps = WithSupportProps<{
|
|
|
30
31
|
required?: boolean;
|
|
31
32
|
/** Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) */
|
|
32
33
|
resizable?: boolean;
|
|
34
|
+
/** Действие при клике на кнопку копирования кода*/
|
|
35
|
+
onCodeCopyClick?(): void;
|
|
36
|
+
/** Переопределение компонентов по умолчанию и добавление новых в CodeEditor*/
|
|
37
|
+
components?: Components;
|
|
33
38
|
}>;
|
|
34
39
|
|
|
35
40
|
export function MarkdownEditor({
|
|
@@ -42,30 +47,34 @@ export function MarkdownEditor({
|
|
|
42
47
|
placeholder,
|
|
43
48
|
required,
|
|
44
49
|
resizable,
|
|
50
|
+
onCodeCopyClick,
|
|
51
|
+
components,
|
|
45
52
|
...rest
|
|
46
53
|
}: MarkdownEditorProps) {
|
|
47
|
-
const [
|
|
54
|
+
const [isViewMode, setIsViewMode] = useState<boolean>(false);
|
|
48
55
|
|
|
49
56
|
useEffect(() => {
|
|
50
|
-
|
|
57
|
+
setIsViewMode(defaultMode === MODE.View);
|
|
51
58
|
}, [defaultMode]);
|
|
52
59
|
|
|
53
60
|
return (
|
|
54
61
|
<div className={cn(styles.editor, className)} {...extractSupportProps(rest)}>
|
|
55
62
|
<div className={styles.control}>
|
|
56
63
|
<div className={styles.switchWrapper}>
|
|
57
|
-
<Switch checked={
|
|
64
|
+
<Switch checked={isViewMode} onChange={setIsViewMode} />
|
|
58
65
|
<Typography.SansBodyM>Предпросмотр</Typography.SansBodyM>
|
|
59
66
|
</div>
|
|
60
67
|
|
|
61
68
|
<Typography.SansBodyS className={styles.tip}>Поддерживается Markdown</Typography.SansBodyS>
|
|
62
69
|
</div>
|
|
63
70
|
|
|
64
|
-
{
|
|
71
|
+
{isViewMode ? (
|
|
65
72
|
<FieldDecorator label={label} required={required} error={error} size='m'>
|
|
66
73
|
<Markdown
|
|
67
74
|
value={value}
|
|
75
|
+
onCopyClick={onCodeCopyClick}
|
|
68
76
|
className={styles.viewWrapper}
|
|
77
|
+
components={components}
|
|
69
78
|
data-validation={error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default}
|
|
70
79
|
/>
|
|
71
80
|
</FieldDecorator>
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
2
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element' as ste;
|
|
3
3
|
|
|
4
4
|
@mixin validationState($state, $rainbowColor, $bgDefault) {
|
|
5
5
|
&[data-validation='#{$state}'] {
|
|
6
|
-
background-color:
|
|
7
|
-
border-color:
|
|
6
|
+
background-color: stm.simple-var(stm.$theme-variables, 'sys', $bgDefault, 'background1-level');
|
|
7
|
+
border-color: stm.simple-var(stm.$theme-variables, 'sys', $bgDefault, 'decor-default');
|
|
8
8
|
|
|
9
9
|
&:hover {
|
|
10
|
-
background-color:
|
|
11
|
-
border-color:
|
|
10
|
+
background-color: stm.$sys-neutral-background2-level;
|
|
11
|
+
border-color: stm.simple-var(stm.$theme-variables, 'sys', $rainbowColor, 'decor-hovered');
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
&:focus-within,
|
|
15
15
|
&[data-focused] {
|
|
16
16
|
&:not([data-disabled]) {
|
|
17
|
-
@include
|
|
17
|
+
@include stm.outline-var(ste.$container-focused-m);
|
|
18
18
|
|
|
19
|
-
background-color:
|
|
20
|
-
border-color:
|
|
21
|
-
outline-color:
|
|
19
|
+
background-color: stm.simple-var(ste.$sys-neutral-background2-level);
|
|
20
|
+
border-color: stm.simple-var(ste.$theme-variables, 'sys', $rainbowColor, 'accent-default');
|
|
21
|
+
outline-color: stm.simple-var(ste.$theme-variables, 'sys', $rainbowColor, 'decor-activated');
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.viewWrapper {
|
|
28
|
-
@include
|
|
28
|
+
@include stm.composite-var(stm.$markdown-preview-container);
|
|
29
29
|
@include validationState('default', 'primary', 'neutral');
|
|
30
30
|
@include validationState('error', 'red', 'red');
|
|
31
31
|
|
|
@@ -35,23 +35,23 @@
|
|
|
35
35
|
.editor {
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: column;
|
|
38
|
-
gap:
|
|
38
|
+
gap: stm.$dimension-1m;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.control {
|
|
42
42
|
display: flex;
|
|
43
|
-
gap:
|
|
43
|
+
gap: stm.$dimension-1m;
|
|
44
44
|
align-items: center;
|
|
45
45
|
justify-content: space-between;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.switchWrapper {
|
|
49
49
|
display: flex;
|
|
50
|
-
gap:
|
|
50
|
+
gap: stm.$dimension-1m;
|
|
51
51
|
align-items: center;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.tip {
|
|
55
|
-
color:
|
|
55
|
+
color: stm.$sys-neutral-text-light;
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
2
|
|
|
3
3
|
.wrapper {
|
|
4
|
-
@include
|
|
4
|
+
@include stm.composite-var(stm.$markdown-syntax-quote);
|
|
5
5
|
|
|
6
6
|
.blockquote > p {
|
|
7
7
|
padding-top: 0;
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.blockquote {
|
|
12
|
-
@include
|
|
12
|
+
@include stm.composite-var(stm.$markdown-quote-container);
|
|
13
13
|
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
margin: 0;
|
|
16
16
|
|
|
17
|
-
background-color:
|
|
18
|
-
border-left-color:
|
|
17
|
+
background-color: stm.$sys-neutral-background;
|
|
18
|
+
border-left-color: stm.$sys-neutral-decor-default;
|
|
19
19
|
border-left-style: solid;
|
|
20
20
|
}
|
|
@@ -4,18 +4,26 @@ import { CodeEditor } from '@snack-uikit/code-editor';
|
|
|
4
4
|
|
|
5
5
|
import styles from './styles.module.scss';
|
|
6
6
|
|
|
7
|
-
type CodeProps = {
|
|
7
|
+
type CodeProps = {
|
|
8
|
+
inline?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
children: ReactNode & ReactNode[];
|
|
11
|
+
onClick?(): void;
|
|
12
|
+
};
|
|
8
13
|
|
|
9
|
-
export function Code({ inline, className, children }: CodeProps) {
|
|
14
|
+
export function Code({ inline, className, children, onClick }: CodeProps) {
|
|
10
15
|
const language = /language-(\w+)/.exec(className || '')?.[1];
|
|
16
|
+
const value = String(children).replace(/\n$/, '');
|
|
11
17
|
|
|
12
18
|
if (!inline) {
|
|
13
19
|
return (
|
|
14
20
|
<CodeEditor
|
|
15
|
-
|
|
21
|
+
onCopyClick={onClick}
|
|
16
22
|
height={200}
|
|
23
|
+
className={styles.wrapper}
|
|
17
24
|
language={language}
|
|
18
|
-
|
|
25
|
+
hasHeader
|
|
26
|
+
value={value}
|
|
19
27
|
options={{
|
|
20
28
|
readOnly: true,
|
|
21
29
|
minimap: {
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
2
|
|
|
3
3
|
.wrapper {
|
|
4
|
-
@include
|
|
4
|
+
@include stm.composite-var(stm.$markdown-syntax-code-editor);
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
max-height:
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
max-height: 241px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.code {
|
|
11
|
-
@include
|
|
12
|
-
@include
|
|
11
|
+
@include stm.composite-var(stm.$markdown-inline-code-container);
|
|
12
|
+
@include stm.composite-var(stm.$mono-body-s);
|
|
13
13
|
|
|
14
|
-
color:
|
|
14
|
+
color: stm.$sys-neutral-text-support;
|
|
15
15
|
text-shadow: none;
|
|
16
|
-
background-color:
|
|
16
|
+
background-color: stm.$sys-neutral-background;
|
|
17
17
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
2
|
|
|
3
3
|
.wrapper {
|
|
4
|
-
@include
|
|
4
|
+
@include stm.composite-var(stm.$markdown-syntax-divider);
|
|
5
5
|
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
|
|
1
|
+
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
|
|
2
2
|
|
|
3
3
|
.wrapper {
|
|
4
|
-
@include
|
|
4
|
+
@include stm.composite-var(stm.$markdown-syntax-table);
|
|
5
5
|
|
|
6
6
|
border-spacing: 0;
|
|
7
7
|
width: 100%;
|
|
8
8
|
|
|
9
9
|
th, td {
|
|
10
|
-
@include
|
|
10
|
+
@include stm.composite-var(stm.$markdown-table-cell-container);
|
|
11
11
|
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
text-align: left;
|
|
14
14
|
text-overflow: ellipsis;
|
|
15
|
-
border-bottom: 1px solid
|
|
15
|
+
border-bottom: 1px solid stm.$sys-neutral-decor-default;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
th {
|
|
19
|
-
@include
|
|
19
|
+
@include stm.composite-var(stm.$sans-label-l);
|
|
20
20
|
|
|
21
|
-
background-color:
|
|
21
|
+
background-color: stm.$sys-neutral-background;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
td {
|
|
25
|
-
@include
|
|
25
|
+
@include stm.composite-var(stm.$sans-body-m);
|
|
26
26
|
}
|
|
27
27
|
}
|