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