@skbkontur/markdown 1.0.4 → 1.0.6
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/README.md +53 -1
- package/package.json +2 -1
- package/src/MarkdownViewer/MarkdownViewer.js +2 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
## Редактор и вьювер Markdown
|
|
2
2
|
|
|
3
3
|
#### Компоненты
|
|
4
4
|
|
|
@@ -6,6 +6,58 @@
|
|
|
6
6
|
- MarkdownViewer - вьювер MD текста
|
|
7
7
|
|
|
8
8
|
Компоненты работают на основе библиотеки [react-ui](https://tech.skbkontur.ru/react-ui/).
|
|
9
|
+
|
|
9
10
|
В `peerDependencies` указана совместимая версия пакета `@skbkontur/react-ui`.
|
|
11
|
+
|
|
10
12
|
Тема `Textarea` берется из ThemeContext из react-ui.
|
|
11
13
|
Стилизация `Markdown` через `MarkdownThemeProvider`.
|
|
14
|
+
|
|
15
|
+
### Markdown
|
|
16
|
+
#### Props
|
|
17
|
+
|
|
18
|
+
| prop | type | default | description |
|
|
19
|
+
|-------------------------|------------------------------|-------|-----------------------------------------------------|
|
|
20
|
+
| api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
|
|
21
|
+
| fileApiUrl? | string | undefined | Url апи для файлов |
|
|
22
|
+
| profileUrl? | string | undefined | Url для профиля сотрудника |
|
|
23
|
+
| hideMarkdownActions? | boolean | undefined | Скрыть панель действий (кнопки помощи форматирования текста) |
|
|
24
|
+
| markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
|
|
25
|
+
| panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
|
|
26
|
+
| renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
|
|
27
|
+
|
|
28
|
+
#### MarkdownApi
|
|
29
|
+
|
|
30
|
+
| prop | type | default | description |
|
|
31
|
+
|------------------|------------------------------|-----------|-----------------------------------------------------|
|
|
32
|
+
| fileDownloadApi? |(id: string) => Promise<File>| undefined |Метод для загрузки файла|
|
|
33
|
+
| fileUploadApi? |(file: File) => Promise<RefItem>| undefined |Метод для скачивания файла|
|
|
34
|
+
| getUsersApi? |(query: string) => Promise<User[]>| undefined |Метод для получения списка пользователей|
|
|
35
|
+
|
|
36
|
+
#### HorizontalPaddings
|
|
37
|
+
|
|
38
|
+
| prop | type | default |
|
|
39
|
+
|--------------------|------------------------------------|-----------|
|
|
40
|
+
| fullscreenPadding? | number | undefined |
|
|
41
|
+
| panelPadding? | nmber | undefined |
|
|
42
|
+
|
|
43
|
+
#### MarkdownTheme
|
|
44
|
+
|
|
45
|
+
| prop | type | description |
|
|
46
|
+
| ---- |-----------------------------|--------------------------------------------------------------------------------------------------------------------|
|
|
47
|
+
| colors |ColorScheme | Цветовая схема |
|
|
48
|
+
| elementsFontSize |string| font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
|
|
49
|
+
| elementsLineHeight |string| line-height переменных темы react-ui: tabLineHeight |
|
|
50
|
+
| themeMode |string| Темный/светлый режим темы |
|
|
51
|
+
| droppablePlaceholderBgImage |string| Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
|
|
52
|
+
| reactUiTheme |string| Тема react-ui |
|
|
53
|
+
|
|
54
|
+
#### ColorScheme
|
|
55
|
+
|
|
56
|
+
| prop | type | description |
|
|
57
|
+
|----------------|--------|------------------------------------------------------------------------|
|
|
58
|
+
| brand | string | Цвет сервиса |
|
|
59
|
+
| disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor |
|
|
60
|
+
| grayDefault | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |
|
|
61
|
+
| link | string | Цвет ссылок |
|
|
62
|
+
| panelBg | string | Цвет панели, в режиме panel |
|
|
63
|
+
| white | string | Белый цвет |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/markdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"registry": "https://registry.npmjs.org/",
|
|
6
6
|
"access": "public"
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"uuid": "^9.0.0"
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
|
+
"push": "git push --follow-tag",
|
|
26
27
|
"bump": "lerna version",
|
|
27
28
|
"build": "yarn tsc",
|
|
28
29
|
"lint-staged": "lint-staged",
|
|
@@ -2,6 +2,7 @@ import { Checkbox } from '@skbkontur/react-ui';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import ReactMarkdown from 'react-markdown';
|
|
4
4
|
import rehypeRaw from 'rehype-raw';
|
|
5
|
+
import rehypeSanitize from 'rehype-sanitize';
|
|
5
6
|
import remarkBreaks from 'remark-breaks';
|
|
6
7
|
import gfm from 'remark-gfm';
|
|
7
8
|
import { MarkdownImage } from './Helpers/MarkdownImage';
|
|
@@ -16,7 +17,7 @@ export var MarkdownViewer = function (_a) {
|
|
|
16
17
|
return null;
|
|
17
18
|
}
|
|
18
19
|
return (React.createElement(Wrapper, { "aria-label": "\u0424\u043E\u0440\u043C\u0430\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442" },
|
|
19
|
-
React.createElement(ReactMarkdown, { components: getCustomComponents(), remarkPlugins: [gfm, remarkBreaks], rehypePlugins: [rehypeRaw], linkTarget: "_blank" }, source)));
|
|
20
|
+
React.createElement(ReactMarkdown, { components: getCustomComponents(), remarkPlugins: [gfm, remarkBreaks], rehypePlugins: [rehypeRaw, rehypeSanitize], linkTarget: "_blank" }, source)));
|
|
20
21
|
function getCustomComponents() {
|
|
21
22
|
return {
|
|
22
23
|
a: renderLink,
|