@skbkontur/markdown 2.4.8 → 2.5.1

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.
Files changed (15) hide show
  1. package/README.md +7 -5
  2. package/package.json +1 -1
  3. package/src/Markdown/Markdown.creevey.js +43 -0
  4. package/src/Markdown/Markdown.d.ts +7 -1
  5. package/src/Markdown/Markdown.js +2 -2
  6. package/src/Markdown/Markdown.styled.js +1 -1
  7. package/src/Markdown/MarkdownActions.d.ts +1 -0
  8. package/src/Markdown/MarkdownActions.js +8 -8
  9. package/src/Markdown/MarkdownHelpItems.d.ts +1 -1
  10. package/src/Markdown/MarkdownHelpItems.js +14 -16
  11. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js +5 -3
  12. package/src/Markdown/MarkdownHelpers/markdownHelpers.js +1 -1
  13. package/src/Markdown/MarkdownHelpers/types.d.ts +1 -0
  14. package/src/MarkdownCombination/MarkdownCombination.js +1 -1
  15. package/src/styles/theme.js +2 -2
package/README.md CHANGED
@@ -19,7 +19,7 @@
19
19
  #### Props
20
20
 
21
21
  | prop | type | default | description |
22
- | ----------------------- | ------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- |
22
+ |-------------------------|---------------------------------------------------------------------------|-----------|-------------------------------------------------------------------------------------|
23
23
  | api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
24
24
  | fileApiUrl? | string | undefined | Url апи для файлов |
25
25
  | profileUrl? | string | undefined | Url для профиля сотрудника |
@@ -27,11 +27,13 @@
27
27
  | panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
28
28
  | renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
29
29
  | hideActionsOptions | object (HideActionsOptions) | undefined | Скрыть отдельные кнопки на панели действий |
30
+ | showActionHints | boolean | true | Показывать подсказки к действиям |
31
+ | showShortKeys | boolean | true | Показывать сочетания клавиш для действия в хинте |
30
32
 
31
33
  #### MarkdownApi
32
34
 
33
35
  | prop | type | default | description |
34
- | ---------------- | ---------------------------------- | --------- | ---------------------------------------- |
36
+ |------------------|------------------------------------|-----------|------------------------------------------|
35
37
  | fileDownloadApi? | (id: string) => Promise<File> | undefined | Метод для загрузки файла |
36
38
  | fileUploadApi? | (file: File) => Promise<RefItem> | undefined | Метод для скачивания файла |
37
39
  | getUsersApi? | (query: string) => Promise<User[]> | undefined | Метод для получения списка пользователей |
@@ -39,14 +41,14 @@
39
41
  #### HorizontalPaddings
40
42
 
41
43
  | prop | type | default |
42
- | ------------------ | ------ | --------- |
44
+ |--------------------|--------|-----------|
43
45
  | fullscreenPadding? | number | undefined |
44
46
  | panelPadding? | nmber | undefined |
45
47
 
46
48
  #### MarkdownTheme
47
49
 
48
50
  | prop | type | description |
49
- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
51
+ |-----------------------------|-------------|--------------------------------------------------------------------------------------------------------------------|
50
52
  | colors | ColorScheme | Цветовая схема |
51
53
  | elementsFontSize | string | font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
52
54
  | elementsLineHeight | string | line-height переменных темы react-ui: tabLineHeight |
@@ -57,7 +59,7 @@
57
59
  #### ColorScheme
58
60
 
59
61
  | prop | type | description |
60
- | -------------- | ------ | ---------------------------------------------------------------------- |
62
+ |----------------|--------|------------------------------------------------------------------------|
61
63
  | brand | string | Цвет сервиса |
62
64
  | disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor |
63
65
  | grayDefault | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.4.8",
3
+ "version": "2.5.1",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.creevey.js CHANGED
@@ -119,6 +119,49 @@ kind('Markdown', function () {
119
119
  });
120
120
  });
121
121
  });
122
+ for (var _i = 0, _a = ['WithoutHints', 'WithActionHint', 'WithShortKeyHint', 'WithActionAndShortKeyHints']; _i < _a.length; _i++) {
123
+ var storyName = _a[_i];
124
+ story(storyName, function (_a) {
125
+ var setStoryParameters = _a.setStoryParameters;
126
+ setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
127
+ test('hint', function () {
128
+ var _a;
129
+ return __awaiter(this, void 0, void 0, function () {
130
+ var buttons, boldButton, boldButtonLocation, hint;
131
+ return __generator(this, function (_b) {
132
+ switch (_b.label) {
133
+ case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
134
+ case 1:
135
+ buttons = _b.sent();
136
+ boldButton = buttons[1];
137
+ return [4 /*yield*/, boldButton.getRect()];
138
+ case 2:
139
+ boldButtonLocation = _b.sent();
140
+ return [4 /*yield*/, this.browser
141
+ .actions()
142
+ .move({
143
+ x: Math.ceil(boldButtonLocation.x + boldButtonLocation.width / 2),
144
+ y: Math.ceil(boldButtonLocation.y + boldButtonLocation.height / 2),
145
+ })
146
+ .perform()];
147
+ case 3:
148
+ _b.sent();
149
+ return [4 /*yield*/, this.browser.sleep(500)];
150
+ case 4:
151
+ _b.sent();
152
+ return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
153
+ case 5:
154
+ hint = _b.sent();
155
+ return [4 /*yield*/, this.expect({ hint: hint }).to.matchImages()];
156
+ case 6:
157
+ _b.sent();
158
+ return [2 /*return*/];
159
+ }
160
+ });
161
+ });
162
+ });
163
+ });
164
+ }
122
165
  story('Editable', function (_a) {
123
166
  var setStoryParameters = _a.setStoryParameters;
124
167
  setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
package/src/Markdown/Markdown.d.ts CHANGED
@@ -20,7 +20,13 @@ export interface MarkdownProps extends MarkdownEditorProps {
20
20
  profileUrl?: string;
21
21
  /** Render валидации файла, если она нужна, максимальный размер файла = 10mb */
22
22
  renderFilesValidation?: (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode;
23
- /** Показывать шорткеи (убирает хинты действий и подсказки) */
23
+ /** Показывать подсказки к действиям */
24
+ showActionHints?: boolean;
25
+ /** Показывать сочетания клавиш для действия в хинте */
26
+ showShortKeys?: boolean;
27
+ /** Показывать шорткеи (убирает хинты действий и подсказки)
28
+ * @deprecated используй {@link showActionHints} и {@link showShortKeys}
29
+ * */
24
30
  showShotKeys?: boolean;
25
31
  }
26
32
  export declare const Markdown: FC<MarkdownProps>;
package/src/Markdown/Markdown.js CHANGED
@@ -43,7 +43,7 @@ import { ThemeProvider } from '../styles/styled-components';
43
43
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
44
44
  export var Markdown = function (props) {
45
45
  var _a;
46
- 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, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
46
+ 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, showActionHints = props.showActionHints, showShortKeys = props.showShortKeys, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, hideActionsOptions = props.hideActionsOptions, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showActionHints", "showShortKeys", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
47
47
  var textareaRef = useRef(null);
48
48
  var _c = useState(), mention = _c[0], setMention = _c[1];
49
49
  var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
@@ -96,7 +96,7 @@ export var Markdown = function (props) {
96
96
  };
97
97
  var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
98
98
  React.createElement(Wrapper, __assign({}, getRootProps()),
99
- !(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), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
99
+ !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showActionHints: showActionHints !== undefined ? showActionHints : showShotKeys, showShortKeys: showShortKeys !== undefined ? 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), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
100
100
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
101
101
  fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
102
102
  React.createElement(SplitViewEditContainer, null, renderEditContainer()),
package/src/Markdown/Markdown.styled.js CHANGED
@@ -56,7 +56,7 @@ export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_17 ||
56
56
  export var MarkdownButtonWrapper = styled(Button)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n button {\n padding: 4px;\n border: none;\n box-sizing: border-box;\n }\n"], ["\n button {\n padding: 4px;\n border: none;\n box-sizing: border-box;\n }\n"])));
57
57
  export var MarkdownButtonIcon = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n height: 24px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"], ["\n height: 24px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"])));
58
58
  export var MarkdownDropdown = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n align-items: end;\n padding-bottom: 1px;\n\n button {\n font-size: ", ";\n }\n"], ["\n display: flex;\n align-items: end;\n padding-bottom: 1px;\n\n button {\n font-size: ", ";\n }\n"])), function (p) { return p.theme.elementsFontSize; });
59
- export var MarkdownSymbolWrapper = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
59
+ export var MarkdownSymbolWrapper = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (p) { return p.theme.colors.brand; });
60
60
  export var MarkdownMenuItem = styled(MenuItem)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n padding-left: 8px;\n padding-right: 8px;\n color: ", ";\n"], ["\n padding-left: 8px;\n padding-right: 8px;\n color: ", ";\n"])), function (p) { return p.theme.colors.grayDefault; });
61
61
  export var MarkdownEditorBlock = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
62
62
  export var getMarkdownMentionStyle = function (x, y) { return ({
package/src/Markdown/MarkdownActions.d.ts CHANGED
@@ -8,6 +8,7 @@ interface Props {
8
8
  onClickFullscreen: () => void;
9
9
  onOpenFileDialog: () => void;
10
10
  onSelectEmoji: (emoji: EmojiData) => void;
11
+ showActionHints: boolean;
11
12
  showShortKeys: boolean;
12
13
  textAreaRef: RefObject<Textarea>;
13
14
  viewMode: ViewMode;
package/src/Markdown/MarkdownActions.js CHANGED
@@ -27,7 +27,7 @@ import { EyeOpen } from '../MarkdownIcons/EyeOpen';
27
27
  import { SplitView } from '../MarkdownIcons/SplitView';
28
28
  import { ToolPencil } from '../MarkdownIcons/ToolPencil';
29
29
  export var MarkdownActions = function (_a) {
30
- 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, isSplitViewAvailable = _a.isSplitViewAvailable, disableFullscreen = _a.disableFullscreen;
30
+ 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, showActionHints = _a.showActionHints, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji, isSplitViewAvailable = _a.isSplitViewAvailable, disableFullscreen = _a.disableFullscreen;
31
31
  var isPreviewMode = viewMode === ViewMode.Preview;
32
32
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
33
33
  React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
@@ -39,19 +39,19 @@ export var MarkdownActions = function (_a) {
39
39
  markdownHelpText.map(function (helper, idx) {
40
40
  if (isHiddenOptions(helper.format))
41
41
  return null;
42
- 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); } }));
42
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
43
43
  }),
44
44
  markdownHelpLists.map(function (helper, idx) {
45
45
  if (isHiddenOptions(helper.format))
46
46
  return null;
47
- 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); } }));
47
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
48
48
  }),
49
49
  markdownHelpOther.map(function (helper, idx) {
50
50
  if (isHiddenOptions(helper.format))
51
51
  return null;
52
- 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); } }));
52
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
53
53
  }),
54
- 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 })),
54
+ 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", showActionHint: showActionHints, 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 })),
55
55
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
56
56
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.help) && (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 }))),
57
57
  React.createElement(ActionsRightWrapper, null,
@@ -59,9 +59,9 @@ export var MarkdownActions = function (_a) {
59
59
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.screenMode) && !disableFullscreen && (React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : ' Развернуть', onClick: onClickFullscreen }))))));
60
60
  function renderViewModeButton() {
61
61
  return (React.createElement("div", null,
62
- viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { icon: React.createElement(SplitView, null), hintText: "\u0421\u043F\u043B\u0438\u0442", text: "\u0421\u043F\u043B\u0438\u0442", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Split); } })),
63
- viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { icon: React.createElement(ToolPencil, null), hintText: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", text: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Edit); } })),
64
- viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { icon: React.createElement(EyeOpen, null), hintText: "\u041F\u0440\u0435\u0432\u044C\u044E", text: "\u041F\u0440\u0435\u0432\u044C\u044E", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Preview); } }))));
62
+ viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { icon: React.createElement(SplitView, null), hintText: "\u0421\u043F\u043B\u0438\u0442", text: "\u0421\u043F\u043B\u0438\u0442", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Split); } })),
63
+ viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { icon: React.createElement(ToolPencil, null), hintText: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", text: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Edit); } })),
64
+ viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { icon: React.createElement(EyeOpen, null), hintText: "\u041F\u0440\u0435\u0432\u044C\u044E", text: "\u041F\u0440\u0435\u0432\u044C\u044E", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Preview); } }))));
65
65
  }
66
66
  function handleMarkdownItemClick(event, format) {
67
67
  var _a;
package/src/Markdown/MarkdownHelpItems.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
2
2
  import { MarkdownFormat } from './MarkdownFormat';
3
3
  import { RefItem } from './types';
4
4
  export declare const eventKeyCodeToMarkdownFormat: {
5
- [key: number]: MarkdownFormat;
5
+ [key: string]: MarkdownFormat;
6
6
  };
7
7
  export declare const markdownFormatToShortKeyLong: Partial<{
8
8
  [key in MarkdownFormat]: string;
package/src/Markdown/MarkdownHelpItems.js CHANGED
@@ -22,31 +22,29 @@ var newLinesRegexp = /([\n\r]+)/g;
22
22
  var spacesMatchRegexp = /\s/gm;
23
23
  var spacesSplitRegexp = /(\s+)/;
24
24
  export var eventKeyCodeToMarkdownFormat = {
25
- 50: MarkdownFormat.h2,
26
- 51: MarkdownFormat.h3,
27
- 52: MarkdownFormat.h4,
28
- 66: MarkdownFormat.bold,
29
- 73: MarkdownFormat.italic,
30
- 83: MarkdownFormat.crossed,
31
- 75: MarkdownFormat.ref,
32
- 76: MarkdownFormat.list,
33
- 68: MarkdownFormat.checkedList,
34
- 78: MarkdownFormat.numberedList,
35
- 67: MarkdownFormat.codeBlock,
36
- 81: MarkdownFormat.quote,
37
- 80: MarkdownFormat.image,
25
+ Digit2: MarkdownFormat.h2,
26
+ Digit3: MarkdownFormat.h3,
27
+ Digit4: MarkdownFormat.h4,
28
+ KeyB: MarkdownFormat.bold,
29
+ KeyI: MarkdownFormat.italic,
30
+ KeyS: MarkdownFormat.crossed,
31
+ KeyK: MarkdownFormat.ref,
32
+ KeyP: MarkdownFormat.list,
33
+ KeyD: MarkdownFormat.checkedList,
34
+ KeyO: MarkdownFormat.numberedList,
35
+ KeyC: MarkdownFormat.codeBlock,
36
+ KeyQ: MarkdownFormat.quote,
38
37
  };
39
38
  export var markdownFormatToShortKeyLong = (_a = {},
40
39
  _a[MarkdownFormat.h2] = '2',
41
40
  _a[MarkdownFormat.h3] = '3',
42
41
  _a[MarkdownFormat.h4] = '4',
43
42
  _a[MarkdownFormat.crossed] = 'S',
44
- _a[MarkdownFormat.list] = 'L',
43
+ _a[MarkdownFormat.list] = 'P',
45
44
  _a[MarkdownFormat.checkedList] = 'D',
46
- _a[MarkdownFormat.numberedList] = 'N',
45
+ _a[MarkdownFormat.numberedList] = 'O',
47
46
  _a[MarkdownFormat.codeBlock] = 'C',
48
47
  _a[MarkdownFormat.quote] = 'Q',
49
- _a[MarkdownFormat.image] = 'P',
50
48
  _a);
51
49
  export var markdownFormatToShortKeyShort = (_b = {},
52
50
  _b[MarkdownFormat.bold] = 'B',
package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js CHANGED
@@ -3,12 +3,14 @@ import React from 'react';
3
3
  import { MarkdownCombination } from '../../MarkdownCombination/MarkdownCombination';
4
4
  import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
5
5
  export var MarkdownFormatButton = function (_a) {
6
- var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text, href = _a.href, showShortKey = _a.showShortKey;
6
+ var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text, href = _a.href, showActionHint = _a.showActionHint, showShortKey = _a.showShortKey;
7
7
  var button = (React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
8
8
  React.createElement(MarkdownButtonIcon, null, icon),
9
9
  React.createElement(VisuallyHidden, null, text)));
10
10
  var content = href ? (React.createElement("a", { href: href, tabIndex: -1, target: "_blank", rel: "noopener noreferrer nofollow" }, button)) : (button);
11
- if (!showShortKey)
11
+ if (!showActionHint && !showShortKey)
12
12
  return content;
13
- return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 360 }, content));
13
+ var actualHintText = showActionHint && hintText;
14
+ var hintComponent = format ? (React.createElement(MarkdownCombination, { format: format, text: actualHintText, showShortKey: showShortKey })) : (actualHintText);
15
+ return (React.createElement(Hint, { manual: disabled, text: hintComponent, pos: "top center", maxWidth: 360 }, content));
14
16
  };
package/src/Markdown/MarkdownHelpers/markdownHelpers.js CHANGED
@@ -62,7 +62,7 @@ export function createMarkdownHelpKeyDownHandler(text, ref, callback) {
62
62
  if (!(ref === null || ref === void 0 ? void 0 : ref.current))
63
63
  return;
64
64
  var textareaNode = ref.current.node;
65
- var format = eventKeyCodeToMarkdownFormat[event.keyCode];
65
+ var format = eventKeyCodeToMarkdownFormat[event.code];
66
66
  var isLong = markdownFormatToShortKeyLong[format];
67
67
  if ((event.metaKey || event.ctrlKey) && (isLong ? event.shiftKey : true) && format) {
68
68
  var markdownHelpItem = markdownHelpItems.find(function (item) { return item.format === format; });
package/src/Markdown/MarkdownHelpers/types.d.ts CHANGED
@@ -6,5 +6,6 @@ export interface MarkdownButtonProps {
6
6
  disabled?: boolean;
7
7
  isLoading?: boolean;
8
8
  onClick?: (event: SyntheticEvent) => void;
9
+ showActionHint?: boolean;
9
10
  showShortKey?: boolean;
10
11
  }
package/src/MarkdownCombination/MarkdownCombination.js CHANGED
@@ -11,7 +11,7 @@ export var MarkdownCombination = function (_a) {
11
11
  var shortKey = shortKeyLong || shortKeyShort;
12
12
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) { return (React.createElement(ThemeProvider, { theme: theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME },
13
13
  React.createElement(HintContentWrapper, null,
14
- React.createElement("span", null, text),
14
+ text && React.createElement("span", null, text),
15
15
  showShortKey && !!shortKey && renderHint()))); }));
16
16
  function renderHint() {
17
17
  var ctrlKey = isMacintosh() ? '⌘' : 'CTRL';
package/src/styles/theme.js CHANGED
@@ -8,7 +8,7 @@ export var DEFAULT_MARKDOWN_THEME = {
8
8
  panelBg: '#d6d6d6',
9
9
  link: '#51adff',
10
10
  textInverse: '#fff',
11
- emojiPickerBackgroundRGBColor: 'rgb(255,255,255, 0)',
11
+ emojiPickerBackgroundRGBColor: 'rgb(255, 255, 255, 0)',
12
12
  },
13
13
  elementsFontSize: '16px',
14
14
  elementsLineHeight: '24px',
@@ -23,7 +23,7 @@ export var DEFAULT_MARKDOWN_DARK_THEME = {
23
23
  panelBg: '#d6d6d6',
24
24
  link: '#51adff',
25
25
  textInverse: '#222',
26
- emojiPickerBackgroundRGBColor: 'rgb(0,0,0,0)',
26
+ emojiPickerBackgroundRGBColor: 'rgb(0, 0, 0, 0)',
27
27
  },
28
28
  elementsFontSize: '16px',
29
29
  elementsLineHeight: '24px',