@skbkontur/markdown 2.0.0 → 2.1.0
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 +27 -26
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +4 -1
- package/src/Markdown/Emoji/Emoji.logic.d.ts +15 -0
- package/src/Markdown/Emoji/Emoji.logic.js +12 -0
- package/src/Markdown/Emoji/Emoji.styled.d.ts +5 -0
- package/src/Markdown/Emoji/Emoji.styled.js +11 -0
- package/src/Markdown/Emoji/EmojiDropdown.d.ts +9 -0
- package/src/Markdown/Emoji/EmojiDropdown.js +23 -0
- package/src/Markdown/Markdown.d.ts +3 -5
- package/src/Markdown/Markdown.js +4 -2
- package/src/Markdown/MarkdownActions.d.ts +4 -2
- package/src/Markdown/MarkdownActions.js +23 -6
- package/src/Markdown/types.d.ts +2 -0
- package/src/MarkdownIcons/EmojiFace.d.ts +1 -0
- package/src/MarkdownIcons/EmojiFace.js +11 -0
package/README.md
CHANGED
|
@@ -15,48 +15,49 @@
|
|
|
15
15
|
### [Примеры использования](https://stackblitz.com/edit/skbkontur-markdown?file=src%2FApp.tsx)
|
|
16
16
|
|
|
17
17
|
### Markdown
|
|
18
|
+
|
|
18
19
|
#### Props
|
|
19
20
|
|
|
20
|
-
| prop | type
|
|
21
|
-
|
|
22
|
-
| api? | MarkdownApi
|
|
23
|
-
| fileApiUrl? | string
|
|
24
|
-
| profileUrl? | string
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
21
|
+
| prop | type | default | description |
|
|
22
|
+
| ----------------------- | ------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- |
|
|
23
|
+
| api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
|
|
24
|
+
| fileApiUrl? | string | undefined | Url апи для файлов |
|
|
25
|
+
| profileUrl? | string | undefined | Url для профиля сотрудника |
|
|
26
|
+
| markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
|
|
27
|
+
| panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
|
|
28
|
+
| renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
|
|
29
|
+
| hideActionsOptions | object (HideActionsOptions) | undefined | Скрыть отдельные кнопки на панели действий |
|
|
29
30
|
|
|
30
31
|
#### MarkdownApi
|
|
31
32
|
|
|
32
|
-
| prop | type
|
|
33
|
-
|
|
34
|
-
| fileDownloadApi? |(id: string) => Promise<File
|
|
35
|
-
| fileUploadApi? |(file: File) => Promise<RefItem
|
|
36
|
-
| getUsersApi? |(query: string) => Promise<User[]
|
|
33
|
+
| prop | type | default | description |
|
|
34
|
+
| ---------------- | ---------------------------------- | --------- | ---------------------------------------- |
|
|
35
|
+
| fileDownloadApi? | (id: string) => Promise<File> | undefined | Метод для загрузки файла |
|
|
36
|
+
| fileUploadApi? | (file: File) => Promise<RefItem> | undefined | Метод для скачивания файла |
|
|
37
|
+
| getUsersApi? | (query: string) => Promise<User[]> | undefined | Метод для получения списка пользователей |
|
|
37
38
|
|
|
38
39
|
#### HorizontalPaddings
|
|
39
40
|
|
|
40
|
-
| prop | type
|
|
41
|
-
|
|
41
|
+
| prop | type | default |
|
|
42
|
+
| ------------------ | ------ | --------- |
|
|
42
43
|
| fullscreenPadding? | number | undefined |
|
|
43
|
-
| panelPadding? | nmber
|
|
44
|
+
| panelPadding? | nmber | undefined |
|
|
44
45
|
|
|
45
46
|
#### MarkdownTheme
|
|
46
47
|
|
|
47
|
-
| prop
|
|
48
|
-
|
|
|
49
|
-
| colors
|
|
50
|
-
| elementsFontSize
|
|
51
|
-
| elementsLineHeight
|
|
52
|
-
| themeMode
|
|
53
|
-
| droppablePlaceholderBgImage |string| Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
|
|
54
|
-
| reactUiTheme
|
|
48
|
+
| prop | type | description |
|
|
49
|
+
| --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
50
|
+
| colors | ColorScheme | Цветовая схема |
|
|
51
|
+
| elementsFontSize | string | font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
|
|
52
|
+
| elementsLineHeight | string | line-height переменных темы react-ui: tabLineHeight |
|
|
53
|
+
| themeMode | string | Темный/светлый режим темы |
|
|
54
|
+
| droppablePlaceholderBgImage | string | Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
|
|
55
|
+
| reactUiTheme | string | Тема react-ui |
|
|
55
56
|
|
|
56
57
|
#### ColorScheme
|
|
57
58
|
|
|
58
59
|
| prop | type | description |
|
|
59
|
-
|
|
60
|
+
| -------------- | ------ | ---------------------------------------------------------------------- |
|
|
60
61
|
| brand | string | Цвет сервиса |
|
|
61
62
|
| disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor |
|
|
62
63
|
| grayDefault | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
|
|
|
2
2
|
export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
|
|
3
3
|
export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
|
|
4
4
|
export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
|
|
5
|
-
export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode } from '././src/Markdown/types';
|
|
5
|
+
export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, } from '././src/Markdown/types';
|
|
6
6
|
export { ThemeMode, ColorScheme } from './src/styles/types';
|
|
7
7
|
export { MarkdownTheme, MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';
|
package/index.js
CHANGED
|
@@ -2,5 +2,5 @@ export { Markdown } from './src/Markdown/Markdown';
|
|
|
2
2
|
export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
|
|
3
3
|
export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
|
|
4
4
|
export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
|
|
5
|
-
export { ViewMode } from '././src/Markdown/types';
|
|
5
|
+
export { ViewMode, } from '././src/Markdown/types';
|
|
6
6
|
export { MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/markdown",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"registry": "https://registry.npmjs.org/",
|
|
6
6
|
"access": "public"
|
|
@@ -10,9 +10,12 @@
|
|
|
10
10
|
"license": "UNLICENSED",
|
|
11
11
|
"author": "tsypilov",
|
|
12
12
|
"dependencies": {
|
|
13
|
+
"@emoji-mart/data": "1.2.1",
|
|
14
|
+
"@emoji-mart/react": "1.1.1",
|
|
13
15
|
"@types/styled-components": "5.1.26",
|
|
14
16
|
"@types/turndown": "^5.0.1",
|
|
15
17
|
"@types/uuid": "^9.0.1",
|
|
18
|
+
"emoji-mart": "5.6.0",
|
|
16
19
|
"react-dropzone": "^14.2.3",
|
|
17
20
|
"react-foco": "^1.3.1",
|
|
18
21
|
"react-markdown": "^8.0.7",
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Textarea } from '@skbkontur/react-ui';
|
|
2
|
+
import { Nullable } from '../types';
|
|
3
|
+
/** FIXME: разобраться как достать тип EmojiData из либы emoji-mart */
|
|
4
|
+
export interface EmojiData {
|
|
5
|
+
emoticons: string[];
|
|
6
|
+
id: string;
|
|
7
|
+
keywords: string[];
|
|
8
|
+
name: string;
|
|
9
|
+
native: string;
|
|
10
|
+
shortcodes: string;
|
|
11
|
+
unified: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const useEmojiLogic: (textarea: Nullable<Textarea>) => {
|
|
14
|
+
onSelectEmoji: (emoji: EmojiData) => void;
|
|
15
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { setMarkdownPastedHtml } from '../MarkdownHelpers/markdownHelpers';
|
|
2
|
+
export var useEmojiLogic = function (textarea) {
|
|
3
|
+
var onSelectEmoji = function (emoji) {
|
|
4
|
+
if (textarea) {
|
|
5
|
+
var textareaNode = textarea.node;
|
|
6
|
+
setMarkdownPastedHtml(emoji.native, textareaNode);
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
return {
|
|
10
|
+
onSelectEmoji: onSelectEmoji,
|
|
11
|
+
};
|
|
12
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Все доступные переменные для кастомизации стилей можно посмотреть здесь:
|
|
3
|
+
* https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
|
|
4
|
+
*/
|
|
5
|
+
export declare const EmojiPickerWrapper: import("styled-components").StyledComponent<"div", import("../../..").MarkdownTheme, {}, never>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import styled from '../../styles/styled-components';
|
|
6
|
+
/**
|
|
7
|
+
* Все доступные переменные для кастомизации стилей можно посмотреть здесь:
|
|
8
|
+
* https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
|
|
9
|
+
*/
|
|
10
|
+
export var EmojiPickerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n em-emoji-picker {\n --font-family: inherit;\n --shadow: unset;\n --rgb-accent: ", ";\n --color-border: rgba(0, 0, 0, 0);\n }\n"], ["\n em-emoji-picker {\n --font-family: inherit;\n --shadow: unset;\n --rgb-accent: ", ";\n --color-border: rgba(0, 0, 0, 0);\n }\n"])), function (p) { return p.theme.colors.brand; });
|
|
11
|
+
var templateObject_1;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import data from '@emoji-mart/data';
|
|
2
|
+
import EmojiPicker from '@emoji-mart/react';
|
|
3
|
+
import { DropdownMenu } from '@skbkontur/react-ui';
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
|
+
import { EmojiPickerWrapper } from './Emoji.styled';
|
|
6
|
+
import { EmojiFace } from '../../MarkdownIcons/EmojiFace';
|
|
7
|
+
import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/theme';
|
|
8
|
+
import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
|
|
9
|
+
export var EmojiDropdown = function (_a) {
|
|
10
|
+
var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect;
|
|
11
|
+
var dropdownMenuRef = useRef(null);
|
|
12
|
+
return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
|
|
13
|
+
var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
|
|
14
|
+
return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji" }) },
|
|
15
|
+
React.createElement(EmojiPickerWrapper, null,
|
|
16
|
+
React.createElement(EmojiPicker, { data: data, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
|
|
17
|
+
}));
|
|
18
|
+
function handleSelectEmoji(data) {
|
|
19
|
+
var _a;
|
|
20
|
+
onSelect(data);
|
|
21
|
+
(_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.close();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { MarkdownEditorProps } from './MarkdownEditor';
|
|
3
|
-
import { HorizontalPaddings, MarkdownApi } from './types';
|
|
3
|
+
import { HorizontalPaddings, MarkdownApi, HideActionsOptions } from './types';
|
|
4
4
|
export interface MarkdownProps extends MarkdownEditorProps {
|
|
5
5
|
/** Методы апи для загрузки/скачивания файлов и меншена */
|
|
6
6
|
api?: MarkdownApi;
|
|
@@ -8,10 +8,8 @@ export interface MarkdownProps extends MarkdownEditorProps {
|
|
|
8
8
|
borderless?: boolean;
|
|
9
9
|
/** Url апи для файлов */
|
|
10
10
|
fileApiUrl?: string;
|
|
11
|
-
/**
|
|
12
|
-
|
|
13
|
-
/** Скрыть панель действий (кнопки помощи форматирования текста) */
|
|
14
|
-
hideMarkdownActions?: boolean;
|
|
11
|
+
/** Скрывать выборочно опции */
|
|
12
|
+
hideActionsOptions?: HideActionsOptions;
|
|
15
13
|
/** Превьювер мардауна, по умолчанию используется MarkdownViewer */
|
|
16
14
|
markdownViewer?: (value: string) => ReactNode;
|
|
17
15
|
/** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
|
package/src/Markdown/Markdown.js
CHANGED
|
@@ -25,6 +25,7 @@ import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVer
|
|
|
25
25
|
import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
|
|
26
26
|
import Foco from 'react-foco/lib';
|
|
27
27
|
import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
|
|
28
|
+
import { useEmojiLogic } from './Emoji/Emoji.logic';
|
|
28
29
|
import { useFileLogic } from './Files/Files.logic';
|
|
29
30
|
import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
|
|
30
31
|
import { MarkdownActions } from './MarkdownActions';
|
|
@@ -41,7 +42,7 @@ import { ThemeProvider } from '../styles/styled-components';
|
|
|
41
42
|
import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
|
|
42
43
|
export var Markdown = function (props) {
|
|
43
44
|
var _a;
|
|
44
|
-
var panelHorizontalPadding = props.panelHorizontalPadding,
|
|
45
|
+
var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, hideActionsOptions = props.hideActionsOptions, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions"]);
|
|
45
46
|
var textareaRef = useRef(null);
|
|
46
47
|
var _c = useState(), mention = _c[0], setMention = _c[1];
|
|
47
48
|
var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
|
|
@@ -53,6 +54,7 @@ export var Markdown = function (props) {
|
|
|
53
54
|
var isEditMode = viewMode === ViewMode.Edit;
|
|
54
55
|
var width = fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width;
|
|
55
56
|
var _j = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _j.getRootProps, isDragActive = _j.isDragActive, requestStatus = _j.requestStatus, open = _j.open, error = _j.error, onResetError = _j.onResetError;
|
|
57
|
+
var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
|
|
56
58
|
usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
|
|
57
59
|
useListenTextareaScroll(resetMention, textareaRef.current);
|
|
58
60
|
useLayoutEffect(function () {
|
|
@@ -76,7 +78,7 @@ export var Markdown = function (props) {
|
|
|
76
78
|
};
|
|
77
79
|
var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
|
|
78
80
|
React.createElement(Wrapper, __assign({}, getRootProps()),
|
|
79
|
-
!
|
|
81
|
+
!(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
|
|
80
82
|
isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
|
|
81
83
|
isEditMode && renderEditContainer(),
|
|
82
84
|
isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { Textarea } from '@skbkontur/react-ui';
|
|
2
2
|
import { FC, RefObject } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { EmojiData } from './Emoji/Emoji.logic';
|
|
4
|
+
import { HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from './types';
|
|
4
5
|
interface Props {
|
|
5
6
|
horizontalPaddings: HorizontalPaddings;
|
|
6
7
|
onChangeViewMode: (viewMode: ViewMode) => void;
|
|
7
8
|
onClickFullscreen: () => void;
|
|
8
9
|
onOpenFileDialog: () => void;
|
|
10
|
+
onSelectEmoji: (emoji: EmojiData) => void;
|
|
9
11
|
showShortKeys: boolean;
|
|
10
12
|
textAreaRef: RefObject<Textarea>;
|
|
11
13
|
viewMode: ViewMode;
|
|
12
14
|
fullscreen?: boolean;
|
|
13
15
|
hasFilesApi?: boolean;
|
|
14
|
-
|
|
16
|
+
hideOptions?: HideActionsOptions;
|
|
15
17
|
loadingFile?: boolean;
|
|
16
18
|
selectionEnd?: Nullable<number>;
|
|
17
19
|
selectionStart?: Nullable<number>;
|
|
@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { Dropdown } from '@skbkontur/react-ui';
|
|
13
13
|
import React from 'react';
|
|
14
14
|
import { COMMONMARK_HELP_URL } from './constants';
|
|
15
|
+
import { EmojiDropdown } from './Emoji/EmojiDropdown';
|
|
15
16
|
import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
|
|
16
17
|
import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
|
|
17
18
|
import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
|
|
@@ -25,18 +26,31 @@ import { Expand } from '../MarkdownIcons/Expand';
|
|
|
25
26
|
import { EyeOpen } from '../MarkdownIcons/EyeOpen';
|
|
26
27
|
import { ToolPencil } from '../MarkdownIcons/ToolPencil';
|
|
27
28
|
export var MarkdownActions = function (_a) {
|
|
28
|
-
var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi,
|
|
29
|
+
var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi, width = _a.width, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji;
|
|
29
30
|
var isPreviewMode = viewMode === ViewMode.Preview;
|
|
30
31
|
return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
|
|
31
32
|
React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
|
|
32
33
|
React.createElement(ActionsWrapper, null,
|
|
33
|
-
|
|
34
|
+
!(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, null,
|
|
34
35
|
React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 280, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
|
|
35
36
|
React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); })))),
|
|
36
|
-
markdownHelpText.map(function (helper, idx) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
markdownHelpText.map(function (helper, idx) {
|
|
38
|
+
if (isHiddenOptions(helper.format))
|
|
39
|
+
return null;
|
|
40
|
+
return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
|
|
41
|
+
}),
|
|
42
|
+
markdownHelpLists.map(function (helper, idx) {
|
|
43
|
+
if (isHiddenOptions(helper.format))
|
|
44
|
+
return null;
|
|
45
|
+
return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
|
|
46
|
+
}),
|
|
47
|
+
markdownHelpOther.map(function (helper, idx) {
|
|
48
|
+
if (isHiddenOptions(helper.format))
|
|
49
|
+
return null;
|
|
50
|
+
return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
|
|
51
|
+
}),
|
|
52
|
+
hasFilesApi && !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.file) && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", showShortKey: showShortKeys, disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onOpenFileDialog })),
|
|
53
|
+
!(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
|
|
40
54
|
React.createElement(MarkdownFormatButton, { hintText: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", icon: React.createElement(DocIcon, null), text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", href: COMMONMARK_HELP_URL })),
|
|
41
55
|
React.createElement(ActionsWrapper, null,
|
|
42
56
|
renderViewModeButton(),
|
|
@@ -65,4 +79,7 @@ export var MarkdownActions = function (_a) {
|
|
|
65
79
|
}
|
|
66
80
|
}
|
|
67
81
|
}
|
|
82
|
+
function isHiddenOptions(format) {
|
|
83
|
+
return hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions[format];
|
|
84
|
+
}
|
|
68
85
|
};
|
package/src/Markdown/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { THEME_2022 } from '@skbkontur/react-ui';
|
|
2
|
+
import { MarkdownFormat } from './MarkdownFormat';
|
|
2
3
|
export declare enum ViewMode {
|
|
3
4
|
Preview = "Preview",
|
|
4
5
|
Edit = "Edit"
|
|
@@ -37,3 +38,4 @@ export interface TestCase<V, E> {
|
|
|
37
38
|
values: V;
|
|
38
39
|
}
|
|
39
40
|
export type ReactUIThemeType = Partial<typeof THEME_2022>;
|
|
41
|
+
export type HideActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'allActions', boolean>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const EmojiFace: () => JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var EmojiFace = function () { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" },
|
|
3
|
+
React.createElement("g", { clipPath: "url(#a)" },
|
|
4
|
+
React.createElement("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", clipPath: "url(#b)" },
|
|
5
|
+
React.createElement("path", { d: "M2 8a6 6 0 1 1 12 0M14 8A6 6 0 1 1 2 8M5.667 6v.667M10.333 6v.667" }),
|
|
6
|
+
React.createElement("path", { d: "M10.333 9.792s-.876.875-2.334.875-2.333-.875-2.333-.875" }))),
|
|
7
|
+
React.createElement("defs", null,
|
|
8
|
+
React.createElement("clipPath", { id: "a" },
|
|
9
|
+
React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" })),
|
|
10
|
+
React.createElement("clipPath", { id: "b" },
|
|
11
|
+
React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" }))))); };
|