@skbkontur/markdown

Редактор и вьювер 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	Белый цвет