@snack-uikit/markdown 0.4.13 → 0.5.1
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 +20 -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 +4 -4
- 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.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -35,9 +35,9 @@
|
|
|
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
|
-
"@snack-uikit/fields": "0.47.
|
|
40
|
+
"@snack-uikit/fields": "0.47.1",
|
|
41
41
|
"@snack-uikit/link": "0.17.1",
|
|
42
42
|
"@snack-uikit/toggles": "0.13.14",
|
|
43
43
|
"@snack-uikit/typography": "0.8.7",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"react-markdown": "7.1.1",
|
|
47
47
|
"remark-gfm": "3.0.1"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "c7d15bfb4027c8177ba19f9b55be31d6f7cfcdbb"
|
|
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
|
}
|