@skbkontur/markdown 2.5.8-alpha.14 → 2.5.8-alpha.15

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 (20) hide show
  1. package/package.json +1 -1
  2. package/src/Markdown/Emoji/EmojiDropdown.js +2 -1
  3. package/src/Markdown/Markdown.creevey.js +22 -15
  4. package/src/Markdown/Markdown.styled.d.ts +2 -0
  5. package/src/Markdown/Markdown.styled.js +16 -14
  6. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js +3 -4
  7. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts +0 -1
  8. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js +1 -2
  9. package/src/Markdown/MarkdownActions/MarkdownActions.js +13 -12
  10. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts +3 -1
  11. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js +8 -10
  12. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.styled.js +1 -1
  13. package/src/Markdown/MarkdownHelpItems.d.ts +2 -0
  14. package/src/Markdown/MarkdownHelpItems.js +16 -0
  15. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts +15 -3
  16. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js +7 -6
  17. package/src/Markdown/MarkdownTids.d.ts +24 -0
  18. package/src/Markdown/MarkdownTids.js +25 -0
  19. package/src/Markdown/MarkdownHelpers/types.d.ts +0 -11
  20. package/src/Markdown/MarkdownHelpers/types.js +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.5.8-alpha.14",
3
+ "version": "2.5.8-alpha.15",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Emoji/EmojiDropdown.js CHANGED
@@ -7,6 +7,7 @@ import { EmojiPickerWrapper } from './Emoji.styled';
7
7
  import { EmojiFace } from '../../MarkdownIcons/EmojiFace';
8
8
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/theme';
9
9
  import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
10
+ import { MarkdownTids } from '../MarkdownTids';
10
11
  emojiLocale.search = 'Поиск на английском';
11
12
  export var EmojiDropdown = function (_a) {
12
13
  var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect, showActionHint = _a.showActionHint;
@@ -15,7 +16,7 @@ export var EmojiDropdown = function (_a) {
15
16
  var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
16
17
  return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: function (_a) {
17
18
  var toggleMenu = _a.toggleMenu;
18
- return (React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
19
+ return (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.Emoji, showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
19
20
  }, menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
20
21
  React.createElement(EmojiPickerWrapper, null,
21
22
  React.createElement(EmojiPicker, { dynamicWidth: true, data: data, i18n: emojiLocale, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
package/src/Markdown/Markdown.creevey.js CHANGED
@@ -36,20 +36,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
36
36
  };
37
37
  import { delay } from '@skbkontur/react-ui/lib/utils';
38
38
  import { story, kind, test } from 'creevey';
39
+ import { MarkdownTids } from './MarkdownTids';
40
+ var getByTid = function (tid) { return "[data-tid=\"".concat(tid, "\"]"); };
39
41
  kind('Markdown', function () {
40
42
  story('CustomWidth', function (_a) {
41
43
  var setStoryParameters = _a.setStoryParameters;
42
44
  setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
43
45
  test('withPreview', function (context) { return __awaiter(void 0, void 0, void 0, function () {
44
- var button, idle, preview;
46
+ var previewButton, idle, preview;
45
47
  return __generator(this, function (_a) {
46
48
  switch (_a.label) {
47
49
  case 0:
48
- button = context.webdriver.locator('button[class*="react-ui"]').nth(-2);
50
+ previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
49
51
  return [4 /*yield*/, context.takeScreenshot()];
50
52
  case 1:
51
53
  idle = _a.sent();
52
- return [4 /*yield*/, button.click()];
54
+ return [4 /*yield*/, previewButton.click()];
53
55
  case 2:
54
56
  _a.sent();
55
57
  return [4 /*yield*/, context.takeScreenshot()];
@@ -63,24 +65,26 @@ kind('Markdown', function () {
63
65
  });
64
66
  }); });
65
67
  test('withFullscreen', function (context) { return __awaiter(void 0, void 0, void 0, function () {
66
- var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
68
+ var fullscreenButton, previewButton, editButton, fullscreenSplit, fullscreenPreview, fullscreenEdit;
67
69
  return __generator(this, function (_a) {
68
70
  switch (_a.label) {
69
71
  case 0:
70
- buttons = context.webdriver.locator('button[class*="react-ui"]');
71
- return [4 /*yield*/, buttons.nth(-1).click()];
72
+ fullscreenButton = context.webdriver.locator(getByTid(MarkdownTids.FullscreenToggle));
73
+ previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
74
+ editButton = context.webdriver.locator(getByTid(MarkdownTids.EditView));
75
+ return [4 /*yield*/, fullscreenButton.click()];
72
76
  case 1:
73
77
  _a.sent();
74
78
  return [4 /*yield*/, context.takeScreenshot()];
75
79
  case 2:
76
80
  fullscreenSplit = _a.sent();
77
- return [4 /*yield*/, buttons.nth(-2).click()];
81
+ return [4 /*yield*/, previewButton.click()];
78
82
  case 3:
79
83
  _a.sent();
80
84
  return [4 /*yield*/, context.takeScreenshot()];
81
85
  case 4:
82
86
  fullscreenPreview = _a.sent();
83
- return [4 /*yield*/, buttons.nth(-2).click()];
87
+ return [4 /*yield*/, editButton.click()];
84
88
  case 5:
85
89
  _a.sent();
86
90
  return [4 /*yield*/, context.takeScreenshot()];
@@ -108,7 +112,7 @@ kind('Markdown', function () {
108
112
  return __generator(this, function (_a) {
109
113
  switch (_a.label) {
110
114
  case 0:
111
- boldButton = context.webdriver.locator('button[class*="react-ui"]').nth(1);
115
+ boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
112
116
  return [4 /*yield*/, boldButton.hover()];
113
117
  case 1:
114
118
  _a.sent();
@@ -131,12 +135,15 @@ kind('Markdown', function () {
131
135
  var setStoryParameters = _a.setStoryParameters;
132
136
  setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
133
137
  test('markdownTests', function (context) { return __awaiter(void 0, void 0, void 0, function () {
134
- var textarea, buttons, openedDropdown, h2FromButton, h2FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
138
+ var textarea, headingDropdown, headingH2, boldButton, emojiButton, openedDropdown, h2FromButton, h2FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
135
139
  return __generator(this, function (_a) {
136
140
  switch (_a.label) {
137
141
  case 0:
138
142
  textarea = context.webdriver.locator('textarea').nth(0);
139
- buttons = context.webdriver.locator('button[class*="react-ui"]');
143
+ headingDropdown = context.webdriver.locator(getByTid(MarkdownTids.HeadingDropdown));
144
+ headingH2 = context.webdriver.locator(getByTid(MarkdownTids.HeadingH2));
145
+ boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
146
+ emojiButton = context.webdriver.locator(getByTid(MarkdownTids.Emoji));
140
147
  return [4 /*yield*/, textarea.click()];
141
148
  case 1:
142
149
  _a.sent();
@@ -146,13 +153,13 @@ kind('Markdown', function () {
146
153
  return [4 /*yield*/, textarea.press('Control+A')];
147
154
  case 3:
148
155
  _a.sent();
149
- return [4 /*yield*/, buttons.nth(0).click()];
156
+ return [4 /*yield*/, headingDropdown.click()];
150
157
  case 4:
151
158
  _a.sent();
152
159
  return [4 /*yield*/, context.takeScreenshot()];
153
160
  case 5:
154
161
  openedDropdown = _a.sent();
155
- return [4 /*yield*/, buttons.nth(1).click()];
162
+ return [4 /*yield*/, headingH2.click()];
156
163
  case 6:
157
164
  _a.sent();
158
165
  return [4 /*yield*/, context.takeScreenshot()];
@@ -182,7 +189,7 @@ kind('Markdown', function () {
182
189
  return [4 /*yield*/, textarea.press('Control+A')];
183
190
  case 15:
184
191
  _a.sent();
185
- return [4 /*yield*/, buttons.nth(1).click()];
192
+ return [4 /*yield*/, boldButton.click()];
186
193
  case 16:
187
194
  _a.sent();
188
195
  return [4 /*yield*/, context.takeScreenshot()];
@@ -203,7 +210,7 @@ kind('Markdown', function () {
203
210
  return [4 /*yield*/, context.takeScreenshot()];
204
211
  case 22:
205
212
  boldFromKeyboard = _a.sent();
206
- return [4 /*yield*/, buttons.nth(12).click()];
213
+ return [4 /*yield*/, emojiButton.click()];
207
214
  case 23:
208
215
  _a.sent();
209
216
  return [4 /*yield*/, context.takeScreenshot()];
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -29,9 +29,11 @@ export declare const MarkdownActionsWrapper: import("styled-components").StyledC
29
29
  export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
30
30
  fullscreen?: boolean | undefined;
31
31
  }, never>;
32
+ export declare const ViewModeButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
32
33
  export declare const ActionsRightWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
33
34
  export declare const ActionsLeftWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
34
35
  export declare const MarkdownButtonWrapper: import("styled-components").StyledComponent<typeof Button, MarkdownTheme, {}, never>;
36
+ export declare const MarkdownButtonContentWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
35
37
  export declare const MarkdownButtonIcon: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
36
38
  export declare const MarkdownSymbolWrapper: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
37
39
  export declare const MarkdownMenuItem: import("styled-components").StyledComponent<typeof MenuItem, MarkdownTheme, {}, never>;
package/src/Markdown/Markdown.styled.js CHANGED
@@ -51,24 +51,26 @@ export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObj
51
51
  return panelStyle({ theme: theme, panelPadding: panelPadding });
52
52
  });
53
53
  export var ButtonsWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n"])), function (p) { return (p.fullscreen ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
54
- export var ActionsRightWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
55
- export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n flex-wrap: wrap;\n"], ["\n flex-wrap: wrap;\n"])));
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
- 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
- export var MarkdownSymbolWrapper = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (p) { return p.theme.colors.brand; });
59
- export var MarkdownMenuItem = styled(MenuItem)(templateObject_21 || (templateObject_21 = __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.text; });
60
- export var MarkdownEditorBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
54
+ export var ViewModeButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
55
+ export var ActionsRightWrapper = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
56
+ export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex-wrap: wrap;\n"], ["\n flex-wrap: wrap;\n"])));
57
+ export var MarkdownButtonWrapper = styled(Button)(templateObject_19 || (templateObject_19 = __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"])));
58
+ export var MarkdownButtonContentWrapper = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n align-items: center;\n"], ["\n display: flex;\n gap: 4px;\n align-items: center;\n"])));
59
+ export var MarkdownButtonIcon = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n height: 22px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"], ["\n height: 22px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"])));
60
+ export var MarkdownSymbolWrapper = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (p) { return p.theme.colors.brand; });
61
+ export var MarkdownMenuItem = styled(MenuItem)(templateObject_23 || (templateObject_23 = __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.text; });
62
+ export var MarkdownEditorBlock = styled.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
61
63
  export var getMarkdownMentionStyle = function (x, y) { return ({
62
64
  position: 'absolute',
63
65
  top: y,
64
66
  left: x,
65
67
  }); };
66
- export var UserDescriptions = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n white-space: pre-line;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n overflow: hidden;\n margin-top: 4px;\n"], ["\n white-space: pre-line;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n overflow: hidden;\n margin-top: 4px;\n"])));
67
- export var MentionMenuItem = styled(MenuItem)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
68
- export var VisuallyHidden = styled.span(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"])));
69
- export var EmptyPreviewContainer = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n display: flex;\n width: 407px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 407px;\n flex-direction: column;\n"])));
70
- export var EmptyPreviewText = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"], ["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"])));
71
- export var EmptyPreviewIconWrapper = styled.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n margin-top: 16px;\n margin-bottom: 32px;\n"], ["\n margin-top: 16px;\n margin-bottom: 32px;\n"])));
68
+ export var UserDescriptions = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n white-space: pre-line;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n overflow: hidden;\n margin-top: 4px;\n"], ["\n white-space: pre-line;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n overflow: hidden;\n margin-top: 4px;\n"])));
69
+ export var MentionMenuItem = styled(MenuItem)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
70
+ export var VisuallyHidden = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n"])));
71
+ export var EmptyPreviewContainer = styled.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n width: 407px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 407px;\n flex-direction: column;\n"])));
72
+ export var EmptyPreviewText = styled.span(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"], ["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"])));
73
+ export var EmptyPreviewIconWrapper = styled.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n margin-top: 16px;\n margin-bottom: 32px;\n"], ["\n margin-top: 16px;\n margin-bottom: 32px;\n"])));
72
74
  var extendThemeConfigWithSized = function (config) {
73
75
  var finalConfig = {};
74
76
  var configKeys = Object.keys(config);
@@ -113,4 +115,4 @@ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, pa
113
115
  textareaPaddingY: '0',
114
116
  })))))), reactUiTheme);
115
117
  };
116
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
118
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js CHANGED
@@ -36,11 +36,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
36
36
  };
37
37
  import { Button, Hint, Spinner, Toast, Tooltip } from '@skbkontur/react-ui';
38
38
  import React, { useEffect, useRef, useState } from 'react';
39
- import { DropdownCaptionWrapper, TooltipButtonsWrapper, TooltipContentWrapper, TooltipWrapper, } from './AIActionsDropdown.styled';
39
+ import { TooltipButtonsWrapper, TooltipContentWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
40
40
  import { COPY_BUTTON_TEXT, ERRORS_NOT_FOUND_TEXT } from './constants';
41
41
  import { Copy } from '../../../MarkdownIcons/Copy';
42
42
  import { NatureFxSparkleA2 } from '../../../MarkdownIcons/NatureFxSparkleA2';
43
43
  import { MarkdownMenuItem } from '../../Markdown.styled';
44
+ import { MarkdownTids } from '../../MarkdownTids';
44
45
  import { Guid } from '../../utils/guid';
45
46
  import { RequestStatus } from '../../utils/requestStatus';
46
47
  import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
@@ -68,9 +69,7 @@ export var AIActionsDropdown = function (_a) {
68
69
  var value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
69
70
  var isEmptySelected = selectionEnd === selectionStart;
70
71
  return (React.createElement(Tooltip, { key: processedText, ref: tooltipRef, pos: "top right", allowedPositions: ['top right', 'right middle', 'bottom right', 'bottom left'], trigger: "manual", render: renderTooltipContent },
71
- React.createElement(MarkdownDropdown, { pos: "top center", showActionHint: showActionHint, hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', caption: React.createElement(DropdownCaptionWrapper, null,
72
- React.createElement(NatureFxSparkleA2, null),
73
- " \u0418\u0418"), menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
72
+ React.createElement(MarkdownDropdown, { dataTid: MarkdownTids.AI, hintPos: "top center", showActionHint: showActionHint, hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', icon: React.createElement(NatureFxSparkleA2, null), caption: "\u0418\u0418", menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
74
73
  var method = _a.method, caption = _a.caption;
75
74
  return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
76
75
  }))));
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
2
2
  export declare const TooltipContentWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
3
3
  export declare const TooltipButtonsWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
4
- export declare const DropdownCaptionWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js CHANGED
@@ -6,5 +6,4 @@ import styled from '../../../styles/styled-components';
6
6
  export var TooltipWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 300px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 300px;\n"])));
7
7
  export var TooltipContentWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-height: 400px;\n white-space: pre-wrap;\n overflow-y: auto;\n"], ["\n max-height: 400px;\n white-space: pre-wrap;\n overflow-y: auto;\n"])));
8
8
  export var TooltipButtonsWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
9
- export var DropdownCaptionWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
10
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
9
+ var templateObject_1, templateObject_2, templateObject_3;
package/src/Markdown/MarkdownActions/MarkdownActions.js CHANGED
@@ -22,10 +22,11 @@ import { SplitView } from '../../MarkdownIcons/SplitView';
22
22
  import { ToolPencil } from '../../MarkdownIcons/ToolPencil';
23
23
  import { COMMONMARK_HELP_URL } from '../constants';
24
24
  import { EmojiDropdown } from '../Emoji/EmojiDropdown';
25
- import { ActionsLeftWrapper, ActionsRightWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownMenuItem, } from '../Markdown.styled';
25
+ import { ActionsLeftWrapper, ActionsRightWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownMenuItem, ViewModeButtonsWrapper, } from '../Markdown.styled';
26
26
  import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
27
27
  import { setMarkdown } from '../MarkdownHelpers/markdownHelpers';
28
28
  import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from '../MarkdownHelpItems';
29
+ import { MarkdownTids } from '../MarkdownTids';
29
30
  import { ViewMode } from '../types';
30
31
  export var MarkdownActions = function (_a) {
31
32
  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, AIApi = _a.AIApi;
@@ -33,35 +34,35 @@ export var MarkdownActions = function (_a) {
33
34
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
34
35
  React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
35
36
  React.createElement(ActionsLeftWrapper, null,
36
- !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, { showActionHint: showActionHints, pos: "top left", caption: "H", hintText: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", disabled: isPreviewMode }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
37
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, { dataTid: MarkdownTids.HeadingDropdown, showActionHint: showActionHints, hintPos: "top left", caption: "H", hintText: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", disabled: isPreviewMode }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, "data-tid": helper.tid, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
37
38
  React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); }))),
38
39
  markdownHelpText.map(function (helper, idx) {
39
40
  if (isHiddenOptions(helper.format))
40
41
  return null;
41
- 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); } }));
42
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, dataTid: helper.tid, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
42
43
  }),
43
44
  markdownHelpLists.map(function (helper, idx) {
44
45
  if (isHiddenOptions(helper.format))
45
46
  return null;
46
- 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); } }));
47
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, dataTid: helper.tid, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
47
48
  }),
48
49
  markdownHelpOther.map(function (helper, idx) {
49
50
  if (isHiddenOptions(helper.format))
50
51
  return null;
51
- 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); } }));
52
+ return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, dataTid: helper.tid, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
52
53
  }),
53
- 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 })),
54
+ hasFilesApi && !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.file) && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.AttachFile, 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 })),
54
55
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
55
56
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
56
57
  React.createElement(ActionsRightWrapper, null,
57
- !(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 })),
58
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.help) && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.Help, 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 })),
58
59
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
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
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.screenMode) && !disableFullscreen && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.FullscreenToggle, hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : ' Развернуть', onClick: onClickFullscreen }))))));
60
61
  function renderViewModeButton() {
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", 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); } }))));
62
+ return (React.createElement(ViewModeButtonsWrapper, null,
63
+ viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.SplitView, 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); } })),
64
+ viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.EditView, 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); } })),
65
+ viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.PreviewView, 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
66
  }
66
67
  function handleMarkdownItemClick(event, format) {
67
68
  var _a;
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts CHANGED
@@ -1,14 +1,16 @@
1
1
  import { PopupPositionsType, ShortPopupPositionsType } from '@skbkontur/react-ui/cjs/internal/Popup';
2
2
  import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
3
+ import { MarkdownTids } from '../../MarkdownTids';
3
4
  interface Props {
4
5
  caption: ReactNode;
5
6
  showActionHint: boolean;
7
+ dataTid?: MarkdownTids;
6
8
  disabled?: boolean;
9
+ hintPos?: ShortPopupPositionsType | PopupPositionsType;
7
10
  hintText?: string;
8
11
  icon?: ReactElement;
9
12
  menuWidth?: number;
10
13
  onOpen?: () => void;
11
- pos?: ShortPopupPositionsType | PopupPositionsType;
12
14
  }
13
15
  export declare const MarkdownDropdown: FC<PropsWithChildren<Props>>;
14
16
  export {};
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js CHANGED
@@ -1,14 +1,12 @@
1
- import { Dropdown, Hint } from '@skbkontur/react-ui';
2
- import React, { useState } from 'react';
1
+ import { Dropdown } from '@skbkontur/react-ui';
2
+ import React from 'react';
3
3
  import { Wrapper } from './MarkdownDropdown.styled';
4
+ import { MarkdownFormatButton } from '../../MarkdownHelpers/MarkdownFormatButton';
4
5
  export var MarkdownDropdown = function (_a) {
5
- var icon = _a.icon, disabled = _a.disabled, children = _a.children, caption = _a.caption, onOpen = _a.onOpen, menuWidth = _a.menuWidth, hintText = _a.hintText, showActionHint = _a.showActionHint, pos = _a.pos;
6
- var _b = useState(false), isOpened = _b[0], setIsOpened = _b[1];
6
+ var dataTid = _a.dataTid, icon = _a.icon, disabled = _a.disabled, children = _a.children, caption = _a.caption, onOpen = _a.onOpen, menuWidth = _a.menuWidth, hintText = _a.hintText, showActionHint = _a.showActionHint, hintPos = _a.hintPos;
7
7
  return (React.createElement(Wrapper, { onMouseDown: function (e) { return e.preventDefault(); } },
8
- React.createElement(Hint, { text: showActionHint && hintText, pos: pos, manual: isOpened, opened: !isOpened },
9
- React.createElement(Dropdown, { disablePortal: true, disabled: disabled, menuWidth: menuWidth !== null && menuWidth !== void 0 ? menuWidth : 300, caption: caption, icon: icon, onOpen: handleOpen, onClose: function () { return setIsOpened(false); } }, children))));
10
- function handleOpen() {
11
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
12
- setIsOpened(true);
13
- }
8
+ React.createElement(Dropdown, { disablePortal: true, disabled: disabled, caption: caption, menuWidth: menuWidth !== null && menuWidth !== void 0 ? menuWidth : 300, _renderButton: function (_a) {
9
+ var onClick = _a.onClick;
10
+ return (React.createElement(MarkdownFormatButton, { showText: true, dataTid: dataTid, hintPos: hintPos, showActionHint: showActionHint, disabled: disabled, hintText: hintText, icon: icon, text: caption, onClick: function () { return onClick(); } }));
11
+ }, onOpen: onOpen }, children)));
14
12
  };
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.styled.js CHANGED
@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled from '../../../styles/styled-components';
6
- export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __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; });
6
+ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n button {\n font-size: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n\n button {\n font-size: ", ";\n }\n"])), function (p) { return p.theme.elementsFontSize; });
7
7
  var templateObject_1;
package/src/Markdown/MarkdownHelpItems.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { MarkdownFormat } from './MarkdownFormat';
3
+ import { MarkdownTids } from './MarkdownTids';
3
4
  import { RefItem } from './types';
4
5
  export declare const eventKeyCodeToMarkdownFormat: {
5
6
  [key: string]: MarkdownFormat;
@@ -14,6 +15,7 @@ export interface MarkdownHelpItem {
14
15
  format: MarkdownFormat;
15
16
  node: ReactNode;
16
17
  text: string;
18
+ tid: MarkdownTids;
17
19
  wrapContent: (content: string) => string;
18
20
  checkLength?: number;
19
21
  icon?: ReactNode;
package/src/Markdown/MarkdownHelpItems.js CHANGED
@@ -11,6 +11,7 @@ var _a, _b;
11
11
  import React from 'react';
12
12
  import { MarkdownSymbolWrapper } from './Markdown.styled';
13
13
  import { MarkdownFormat } from './MarkdownFormat';
14
+ import { MarkdownTids } from './MarkdownTids';
14
15
  import { AttachLink } from '../MarkdownIcons/AttachLink';
15
16
  import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
16
17
  import { CheckedList } from '../MarkdownIcons/CheckedList';
@@ -70,6 +71,7 @@ export function checkSpaceSymbol(text, checkedLength) {
70
71
  export var markdownHelpHeaders = [
71
72
  {
72
73
  format: MarkdownFormat.h2,
74
+ tid: MarkdownTids.HeadingH2,
73
75
  node: (React.createElement(React.Fragment, null,
74
76
  React.createElement(MarkdownSymbolWrapper, null, "##"),
75
77
  " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2")),
@@ -78,6 +80,7 @@ export var markdownHelpHeaders = [
78
80
  },
79
81
  {
80
82
  format: MarkdownFormat.h3,
83
+ tid: MarkdownTids.HeadingH3,
81
84
  node: (React.createElement(React.Fragment, null,
82
85
  React.createElement(MarkdownSymbolWrapper, null, "###"),
83
86
  " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3")),
@@ -86,6 +89,7 @@ export var markdownHelpHeaders = [
86
89
  },
87
90
  {
88
91
  format: MarkdownFormat.h4,
92
+ tid: MarkdownTids.HeadingH4,
89
93
  node: (React.createElement(React.Fragment, null,
90
94
  React.createElement(MarkdownSymbolWrapper, null, "####"),
91
95
  " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 4")),
@@ -96,6 +100,7 @@ export var markdownHelpHeaders = [
96
100
  export var markdownHelpText = [
97
101
  {
98
102
  format: MarkdownFormat.bold,
103
+ tid: MarkdownTids.Bold,
99
104
  node: (React.createElement(React.Fragment, null,
100
105
  React.createElement(MarkdownSymbolWrapper, null, "**"),
101
106
  "\u0416\u0438\u0440\u043D\u044B\u0439",
@@ -107,6 +112,7 @@ export var markdownHelpText = [
107
112
  },
108
113
  {
109
114
  format: MarkdownFormat.italic,
115
+ tid: MarkdownTids.Italic,
110
116
  node: (React.createElement(React.Fragment, null,
111
117
  React.createElement(MarkdownSymbolWrapper, null, "*"),
112
118
  "\u041A\u0443\u0440\u0441\u0438\u0432",
@@ -118,6 +124,7 @@ export var markdownHelpText = [
118
124
  },
119
125
  {
120
126
  format: MarkdownFormat.crossed,
127
+ tid: MarkdownTids.Crossed,
121
128
  node: (React.createElement(React.Fragment, null,
122
129
  React.createElement(MarkdownSymbolWrapper, null, "~~"),
123
130
  "\u0417\u0430\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439",
@@ -131,6 +138,7 @@ export var markdownHelpText = [
131
138
  },
132
139
  {
133
140
  format: MarkdownFormat.ref,
141
+ tid: MarkdownTids.Ref,
134
142
  node: (React.createElement(React.Fragment, null,
135
143
  React.createElement(MarkdownSymbolWrapper, null, "["),
136
144
  "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0441\u0441\u044B\u043B\u043A\u0438",
@@ -147,6 +155,7 @@ export var markdownHelpText = [
147
155
  export var markdownHelpLists = [
148
156
  {
149
157
  format: MarkdownFormat.list,
158
+ tid: MarkdownTids.List,
150
159
  node: (React.createElement(React.Fragment, null,
151
160
  React.createElement(MarkdownSymbolWrapper, null, "*"),
152
161
  " \u0421\u043F\u0438\u0441\u043E\u043A")),
@@ -156,6 +165,7 @@ export var markdownHelpLists = [
156
165
  },
157
166
  {
158
167
  format: MarkdownFormat.checkedList,
168
+ tid: MarkdownTids.CheckedList,
159
169
  node: (React.createElement(React.Fragment, null,
160
170
  React.createElement(MarkdownSymbolWrapper, null, "* [x]"),
161
171
  " \u0421\u043F\u0438\u0441\u043E\u043A - \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u043E")),
@@ -165,6 +175,7 @@ export var markdownHelpLists = [
165
175
  },
166
176
  {
167
177
  format: MarkdownFormat.numberedList,
178
+ tid: MarkdownTids.NumberedList,
168
179
  node: (React.createElement(React.Fragment, null,
169
180
  React.createElement(MarkdownSymbolWrapper, null, "1. "),
170
181
  " \u0421\u043F\u0438\u0441\u043E\u043A - \u043D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439")),
@@ -176,6 +187,7 @@ export var markdownHelpLists = [
176
187
  export var markdownHelpOther = [
177
188
  {
178
189
  format: MarkdownFormat.codeBlock,
190
+ tid: MarkdownTids.CodeBlock,
179
191
  node: (React.createElement(React.Fragment, null,
180
192
  React.createElement(MarkdownSymbolWrapper, null, "`"),
181
193
  "\u0411\u043B\u043E\u043A \u043A\u043E\u0434\u0430",
@@ -187,6 +199,7 @@ export var markdownHelpOther = [
187
199
  },
188
200
  {
189
201
  format: MarkdownFormat.quote,
202
+ tid: MarkdownTids.Quote,
190
203
  node: (React.createElement(React.Fragment, null,
191
204
  React.createElement(MarkdownSymbolWrapper, null,
192
205
  '>',
@@ -198,6 +211,7 @@ export var markdownHelpOther = [
198
211
  },
199
212
  {
200
213
  format: MarkdownFormat.table,
214
+ tid: MarkdownTids.Table,
201
215
  node: 'Таблица',
202
216
  icon: React.createElement(Table, null),
203
217
  wrapContent: function () { return "| \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A | \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A |\n| ------ | ------ |\n| \u042F\u0447\u0435\u0439\u043A\u0430 | \u042F\u0447\u0435\u0439\u043A\u0430 |\n| \u042F\u0447\u0435\u0439\u043A\u0430 | \u042F\u0447\u0435\u0439\u043A\u0430 |"; },
@@ -210,6 +224,7 @@ export var markdownHelpFiles = function (fileApiUrl) {
210
224
  return [
211
225
  {
212
226
  format: MarkdownFormat.image,
227
+ tid: MarkdownTids.AttachFile,
213
228
  node: '',
214
229
  icon: React.createElement("span", null),
215
230
  wrapContent: function (file) { return "![img](".concat(fileApiUrl).concat(file.id, ")"); },
@@ -217,6 +232,7 @@ export var markdownHelpFiles = function (fileApiUrl) {
217
232
  },
218
233
  {
219
234
  format: MarkdownFormat.file,
235
+ tid: MarkdownTids.AttachFile,
220
236
  node: '',
221
237
  icon: React.createElement(AttachPaperclip, null),
222
238
  wrapContent: function (file) { return "[".concat(file.caption, "](").concat(fileApiUrl).concat(file.id, ")"); },
package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts CHANGED
@@ -1,9 +1,21 @@
1
- import { FC } from 'react';
2
- import { MarkdownButtonProps } from './types';
1
+ import { PopupPositionsType, ShortPopupPositionsType } from '@skbkontur/react-ui/cjs/internal/Popup';
2
+ import { FC, ReactNode, SyntheticEvent } from 'react';
3
3
  import { MarkdownFormat } from '../MarkdownFormat';
4
- interface Props extends MarkdownButtonProps {
4
+ import { MarkdownTids } from '../MarkdownTids';
5
+ interface Props {
6
+ hintText: ReactNode;
7
+ icon: ReactNode;
8
+ text: ReactNode;
9
+ dataTid?: MarkdownTids;
10
+ disabled?: boolean;
5
11
  format?: MarkdownFormat;
12
+ hintPos?: ShortPopupPositionsType | PopupPositionsType;
6
13
  href?: string;
14
+ isLoading?: boolean;
15
+ onClick?: (event: SyntheticEvent) => void;
16
+ showActionHint?: boolean;
17
+ showShortKey?: boolean;
18
+ showText?: boolean;
7
19
  }
8
20
  export declare const MarkdownFormatButton: FC<Props>;
9
21
  export {};
package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { Hint } from '@skbkontur/react-ui';
2
2
  import React from 'react';
3
3
  import { MarkdownCombination } from '../../MarkdownCombination/MarkdownCombination';
4
- import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
4
+ import { MarkdownButtonContentWrapper, 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, showActionHint = _a.showActionHint, showShortKey = _a.showShortKey;
7
- var button = (React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
8
- React.createElement(MarkdownButtonIcon, null, icon),
9
- React.createElement(VisuallyHidden, null, text)));
6
+ var dataTid = _a.dataTid, 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, showText = _a.showText, hintPos = _a.hintPos;
7
+ var button = (React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, "data-tid": dataTid, onClick: onClick },
8
+ React.createElement(MarkdownButtonContentWrapper, { onMouseDown: function (e) { return e.preventDefault(); } },
9
+ !!icon && React.createElement(MarkdownButtonIcon, null, icon),
10
+ showText ? text : React.createElement(VisuallyHidden, null, text))));
10
11
  var content = href ? (React.createElement("a", { href: href, tabIndex: -1, target: "_blank", rel: "noopener noreferrer nofollow" }, button)) : (button);
11
12
  if (!showActionHint && !showShortKey)
12
13
  return content;
13
14
  var actualHintText = showActionHint && hintText;
14
15
  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));
16
+ return (React.createElement(Hint, { manual: disabled, text: hintComponent, pos: hintPos !== null && hintPos !== void 0 ? hintPos : 'top center', maxWidth: 360 }, content));
16
17
  };
package/src/Markdown/MarkdownTids.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ export declare enum MarkdownTids {
2
+ HeadingDropdown = "MarkdownHeadingDropdown",
3
+ HeadingH2 = "MarkdownHeadingH2",
4
+ HeadingH3 = "MarkdownHeadingH3",
5
+ HeadingH4 = "MarkdownHeadingH4",
6
+ Bold = "MarkdownBold",
7
+ Italic = "MarkdownItalic",
8
+ Crossed = "MarkdownCrossed",
9
+ Ref = "MarkdownRef",
10
+ List = "MarkdownList",
11
+ CheckedList = "MarkdownCheckedList",
12
+ NumberedList = "MarkdownNumberedList",
13
+ CodeBlock = "MarkdownCodeBlock",
14
+ Quote = "MarkdownQuote",
15
+ Table = "MarkdownTable",
16
+ AttachFile = "MarkdownAttachFile",
17
+ Emoji = "MarkdownEmoji",
18
+ AI = "MarkdownAI",
19
+ Help = "MarkdownHelp",
20
+ SplitView = "MarkdownSplitView",
21
+ EditView = "MarkdownEditView",
22
+ PreviewView = "MarkdownPreviewView",
23
+ FullscreenToggle = "MarkdownFullscreenToggle"
24
+ }
package/src/Markdown/MarkdownTids.js ADDED
@@ -0,0 +1,25 @@
1
+ export var MarkdownTids;
2
+ (function (MarkdownTids) {
3
+ MarkdownTids["HeadingDropdown"] = "MarkdownHeadingDropdown";
4
+ MarkdownTids["HeadingH2"] = "MarkdownHeadingH2";
5
+ MarkdownTids["HeadingH3"] = "MarkdownHeadingH3";
6
+ MarkdownTids["HeadingH4"] = "MarkdownHeadingH4";
7
+ MarkdownTids["Bold"] = "MarkdownBold";
8
+ MarkdownTids["Italic"] = "MarkdownItalic";
9
+ MarkdownTids["Crossed"] = "MarkdownCrossed";
10
+ MarkdownTids["Ref"] = "MarkdownRef";
11
+ MarkdownTids["List"] = "MarkdownList";
12
+ MarkdownTids["CheckedList"] = "MarkdownCheckedList";
13
+ MarkdownTids["NumberedList"] = "MarkdownNumberedList";
14
+ MarkdownTids["CodeBlock"] = "MarkdownCodeBlock";
15
+ MarkdownTids["Quote"] = "MarkdownQuote";
16
+ MarkdownTids["Table"] = "MarkdownTable";
17
+ MarkdownTids["AttachFile"] = "MarkdownAttachFile";
18
+ MarkdownTids["Emoji"] = "MarkdownEmoji";
19
+ MarkdownTids["AI"] = "MarkdownAI";
20
+ MarkdownTids["Help"] = "MarkdownHelp";
21
+ MarkdownTids["SplitView"] = "MarkdownSplitView";
22
+ MarkdownTids["EditView"] = "MarkdownEditView";
23
+ MarkdownTids["PreviewView"] = "MarkdownPreviewView";
24
+ MarkdownTids["FullscreenToggle"] = "MarkdownFullscreenToggle";
25
+ })(MarkdownTids || (MarkdownTids = {}));
package/src/Markdown/MarkdownHelpers/types.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { ReactNode, SyntheticEvent } from 'react';
2
- export interface MarkdownButtonProps {
3
- hintText: ReactNode;
4
- icon: ReactNode;
5
- text: string;
6
- disabled?: boolean;
7
- isLoading?: boolean;
8
- onClick?: (event: SyntheticEvent) => void;
9
- showActionHint?: boolean;
10
- showShortKey?: boolean;
11
- }
package/src/Markdown/MarkdownHelpers/types.js DELETED
@@ -1 +0,0 @@
1
- export {};