@skbkontur/markdown v2.4.8
Редактор и вьювер 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 для профиля сотрудника |
| markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
| panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
| renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
| hideActionsOptions | object (HideActionsOptions) | undefined | Скрыть отдельные кнопки на панели действий |
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 | Белый цвет |
9 months ago
9 months ago
5 months ago
9 months ago
5 months ago
9 months ago
5 months ago
9 months ago
5 months ago
9 months ago
5 months ago
6 months ago
5 months ago
8 months ago
5 months ago
10 months ago
5 months ago
5 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago