1.8.0 • Published 2 months ago
@skbkontur/markdown v1.8.0
Редактор и вьювер Markdown
Компоненты
- Markdown - редактор
- MarkdownViewer - вьювер MD текста
Компоненты работают на основе библиотеки react-ui.
В peerDependencies указана совместимая версия пакета @skbkontur/react-ui.
Тема Textarea берется из ThemeContext из react-ui.
Стилизация Markdown через MarkdownThemeProvider.
Примеры использования
Markdown
Props
| prop | type | default | description |
|---|---|---|---|
| api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
| fileApiUrl? | string | undefined | Url апи для файлов |
| profileUrl? | string | undefined | Url для профиля сотрудника |
| hideMarkdownActions? | boolean | undefined | Скрыть панель действий (кнопки помощи форматирования текста) |
| markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
| panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
| renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
MarkdownApi
| prop | type | default | description |
|---|---|---|---|
| fileDownloadApi? | (id: string) => Promise | undefined | Метод для загрузки файла |
| fileUploadApi? | (file: File) => Promise | undefined | Метод для скачивания файла |
| getUsersApi? | (query: string) => Promise<User[]> | undefined | Метод для получения списка пользователей |
HorizontalPaddings
| prop | type | default |
|---|---|---|
| fullscreenPadding? | number | undefined |
| panelPadding? | nmber | undefined |
MarkdownTheme
| prop | type | description |
|---|---|---|
| colors | ColorScheme | Цветовая схема |
| elementsFontSize | string | font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
| elementsLineHeight | string | line-height переменных темы react-ui: tabLineHeight |
| themeMode | string | Темный/светлый режим темы |
| droppablePlaceholderBgImage | string | Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
| reactUiTheme | string | Тема react-ui |
ColorScheme
| prop | type | description |
|---|---|---|
| brand | string | Цвет сервиса |
| disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor |
| grayDefault | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |
| link | string | Цвет ссылок |
| panelBg | string | Цвет панели, в режиме panel |
| white | string | Белый цвет |
1.8.0
2 months ago
1.7.0
2 months ago
1.6.0
2 months ago
1.5.1
2 months ago
1.5.0
2 months ago
1.4.1
3 months ago
1.4.0
5 months ago
1.3.5
6 months ago
1.3.4
7 months ago
1.3.3
9 months ago
1.3.2
9 months ago
1.3.1
9 months ago
1.3.0
9 months ago
1.2.5
9 months ago
1.2.4
9 months ago
1.2.3
9 months ago
1.2.2
9 months ago
1.2.1
9 months ago
1.2.0
9 months ago
1.1.3
9 months ago
1.1.2
10 months ago
1.1.1
10 months ago
1.1.0
10 months ago
1.0.14
10 months ago
1.0.13
10 months ago
1.0.12
10 months ago
1.0.11
10 months ago
1.0.10
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago