@skbkontur/markdown 2.5.8-alpha.13 → 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 (22) hide show
  1. package/package.json +3 -3
  2. package/src/Markdown/Emoji/EmojiDropdown.d.ts +1 -0
  3. package/src/Markdown/Emoji/EmojiDropdown.js +3 -2
  4. package/src/Markdown/Markdown.creevey.js +175 -260
  5. package/src/Markdown/Markdown.styled.d.ts +2 -0
  6. package/src/Markdown/Markdown.styled.js +16 -14
  7. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts +1 -0
  8. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js +4 -5
  9. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts +0 -1
  10. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js +1 -2
  11. package/src/Markdown/MarkdownActions/MarkdownActions.js +15 -14
  12. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts +5 -0
  13. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js +8 -10
  14. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.styled.js +1 -1
  15. package/src/Markdown/MarkdownHelpItems.d.ts +2 -0
  16. package/src/Markdown/MarkdownHelpItems.js +16 -0
  17. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts +15 -3
  18. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js +7 -6
  19. package/src/Markdown/MarkdownTids.d.ts +24 -0
  20. package/src/Markdown/MarkdownTids.js +25 -0
  21. package/src/Markdown/MarkdownHelpers/types.d.ts +0 -11
  22. 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.13",
3
+ "version": "2.5.8-alpha.15",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
@@ -46,7 +46,7 @@
46
46
  "test-storybook": "test-storybook --url http://127.0.0.1:6007",
47
47
  "test": "jest test",
48
48
  "test:ci": "cross-env CI=true jest test --passWithNoTests --testResultsProcessor=jest-teamcity-reporter",
49
- "creevey:ui": "creevey --ui --port=3003",
49
+ "creevey:ui": "creevey test --ui --port=3003",
50
50
  "screenshots:ci": "concurrently -k -s first \"yarn start-storybook-server\" \"yarn creevey\" \"yarn test-storybook\""
51
51
  },
52
52
  "peerDependencies": {
@@ -79,7 +79,7 @@
79
79
  "@vitejs/plugin-react-swc": "3.7.2",
80
80
  "axe-playwright": "1.2.3",
81
81
  "concurrently": "^7.0.0",
82
- "creevey": "0.9.2",
82
+ "creevey": "0.10.35",
83
83
  "cross-env": "6.0.3",
84
84
  "eslint": "8.32.0",
85
85
  "eslint-config-prettier": "8.8.0",
package/src/Markdown/Emoji/EmojiDropdown.d.ts CHANGED
@@ -3,6 +3,7 @@ import { EmojiData } from './Emoji.logic';
3
3
  interface Props {
4
4
  isPreviewMode: boolean;
5
5
  onSelect: (emoji: EmojiData) => void;
6
+ showActionHint: boolean;
6
7
  showShortKey: boolean;
7
8
  }
8
9
  export declare const EmojiDropdown: React.FC<Props>;
package/src/Markdown/Emoji/EmojiDropdown.js CHANGED
@@ -7,15 +7,16 @@ 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
- var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect;
13
+ var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect, showActionHint = _a.showActionHint;
13
14
  var dropdownMenuRef = useRef(null);
14
15
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
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, 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
@@ -34,286 +34,201 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
34
34
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35
35
  }
36
36
  };
37
+ import { delay } from '@skbkontur/react-ui/lib/utils';
37
38
  import { story, kind, test } from 'creevey';
39
+ import { MarkdownTids } from './MarkdownTids';
40
+ var getByTid = function (tid) { return "[data-tid=\"".concat(tid, "\"]"); };
38
41
  kind('Markdown', function () {
39
- story('MediumSize', function (_a) {
42
+ story('CustomWidth', function (_a) {
40
43
  var setStoryParameters = _a.setStoryParameters;
41
44
  setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
42
- test('withPreview', function () {
43
- var _a, _b;
44
- return __awaiter(this, void 0, void 0, function () {
45
- var buttons, idle, preview;
46
- return __generator(this, function (_c) {
47
- switch (_c.label) {
48
- case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
49
- case 1:
50
- buttons = _c.sent();
51
- return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
52
- case 2:
53
- idle = _c.sent();
54
- return [4 /*yield*/, this.browser
55
- .actions()
56
- .click(buttons[buttons.length - 2])
57
- .perform()];
58
- case 3:
59
- _c.sent();
60
- return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
61
- case 4:
62
- preview = _c.sent();
63
- return [4 /*yield*/, this.expect({ idle: idle, preview: preview }).to.matchImages()];
64
- case 5:
65
- _c.sent();
66
- return [2 /*return*/];
67
- }
68
- });
45
+ test('withPreview', function (context) { return __awaiter(void 0, void 0, void 0, function () {
46
+ var previewButton, idle, preview;
47
+ return __generator(this, function (_a) {
48
+ switch (_a.label) {
49
+ case 0:
50
+ previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
51
+ return [4 /*yield*/, context.takeScreenshot()];
52
+ case 1:
53
+ idle = _a.sent();
54
+ return [4 /*yield*/, previewButton.click()];
55
+ case 2:
56
+ _a.sent();
57
+ return [4 /*yield*/, context.takeScreenshot()];
58
+ case 3:
59
+ preview = _a.sent();
60
+ return [4 /*yield*/, context.matchImages({ idle: idle, preview: preview })];
61
+ case 4:
62
+ _a.sent();
63
+ return [2 /*return*/];
64
+ }
69
65
  });
70
- });
71
- test('withFullscreen', function () {
72
- var _a, _b, _c;
73
- return __awaiter(this, void 0, void 0, function () {
74
- var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
75
- return __generator(this, function (_d) {
76
- switch (_d.label) {
77
- case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
78
- case 1:
79
- buttons = _d.sent();
80
- return [4 /*yield*/, this.browser
81
- .actions()
82
- .click(buttons[buttons.length - 1])
83
- .perform()];
84
- case 2:
85
- _d.sent();
86
- return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
87
- case 3:
88
- fullscreenSplit = _d.sent();
89
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
90
- case 4:
91
- buttons = _d.sent();
92
- return [4 /*yield*/, this.browser
93
- .actions()
94
- .click(buttons[buttons.length - 2])
95
- .perform()];
96
- case 5:
97
- _d.sent();
98
- return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
99
- case 6:
100
- fullscreenPreview = _d.sent();
101
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
102
- case 7:
103
- buttons = _d.sent();
104
- return [4 /*yield*/, this.browser
105
- .actions()
106
- .click(buttons[buttons.length - 2])
107
- .perform()];
108
- case 8:
109
- _d.sent();
110
- return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
111
- case 9:
112
- fullscreenEdit = _d.sent();
113
- return [4 /*yield*/, this.expect({ fullscreenSplit: fullscreenSplit, fullscreenPreview: fullscreenPreview, fullscreenEdit: fullscreenEdit }).to.matchImages()];
114
- case 10:
115
- _d.sent();
116
- return [2 /*return*/];
117
- }
118
- });
66
+ }); });
67
+ test('withFullscreen', function (context) { return __awaiter(void 0, void 0, void 0, function () {
68
+ var fullscreenButton, previewButton, editButton, fullscreenSplit, fullscreenPreview, fullscreenEdit;
69
+ return __generator(this, function (_a) {
70
+ switch (_a.label) {
71
+ case 0:
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()];
76
+ case 1:
77
+ _a.sent();
78
+ return [4 /*yield*/, context.takeScreenshot()];
79
+ case 2:
80
+ fullscreenSplit = _a.sent();
81
+ return [4 /*yield*/, previewButton.click()];
82
+ case 3:
83
+ _a.sent();
84
+ return [4 /*yield*/, context.takeScreenshot()];
85
+ case 4:
86
+ fullscreenPreview = _a.sent();
87
+ return [4 /*yield*/, editButton.click()];
88
+ case 5:
89
+ _a.sent();
90
+ return [4 /*yield*/, context.takeScreenshot()];
91
+ case 6:
92
+ fullscreenEdit = _a.sent();
93
+ return [4 /*yield*/, context.matchImages({
94
+ fullscreenSplit: fullscreenSplit,
95
+ fullscreenPreview: fullscreenPreview,
96
+ fullscreenEdit: fullscreenEdit,
97
+ })];
98
+ case 7:
99
+ _a.sent();
100
+ return [2 /*return*/];
101
+ }
119
102
  });
120
- });
103
+ }); });
121
104
  });
122
105
  for (var _i = 0, _a = ['WithoutHints', 'WithActionHint', 'WithShortKeyHint', 'WithActionAndShortKeyHints']; _i < _a.length; _i++) {
123
106
  var storyName = _a[_i];
124
107
  story(storyName, function (_a) {
125
108
  var setStoryParameters = _a.setStoryParameters;
126
109
  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
- }
165
- story('Editable', function (_a) {
166
- var setStoryParameters = _a.setStoryParameters;
167
- setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
168
- test('markdownTests', function () {
169
- var _a, _b, _c, _d, _e, _f;
170
- return __awaiter(this, void 0, void 0, function () {
171
- var textarea, buttons, openedDropdown, newButtons, h1FromButton, h1FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
172
- return __generator(this, function (_g) {
173
- switch (_g.label) {
174
- case 0: return [4 /*yield*/, this.browser.findElement({ tagName: 'textarea' })];
110
+ test('hint', function (context) { return __awaiter(void 0, void 0, void 0, function () {
111
+ var boldButton, hint;
112
+ return __generator(this, function (_a) {
113
+ switch (_a.label) {
114
+ case 0:
115
+ boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
116
+ return [4 /*yield*/, boldButton.hover()];
175
117
  case 1:
176
- textarea = _g.sent();
177
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
118
+ _a.sent();
119
+ return [4 /*yield*/, delay(500)];
178
120
  case 2:
179
- buttons = _g.sent();
180
- return [4 /*yield*/, this.browser.actions().click(textarea).perform()];
121
+ _a.sent();
122
+ return [4 /*yield*/, context.takeScreenshot()];
181
123
  case 3:
182
- _g.sent();
183
- return [4 /*yield*/, this.browser.actions().sendKeys('Заголовок').keyDown(this.keys.CONTROL).sendKeys('a').perform()];
124
+ hint = _a.sent();
125
+ return [4 /*yield*/, context.matchImages({ hint: hint })];
184
126
  case 4:
185
- _g.sent();
186
- return [4 /*yield*/, this.browser.actions().click(buttons[0]).perform()];
187
- case 5:
188
- _g.sent();
189
- return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
190
- case 6:
191
- openedDropdown = _g.sent();
192
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
193
- case 7:
194
- newButtons = _g.sent();
195
- return [4 /*yield*/, this.browser.actions().click(newButtons[1]).perform()];
196
- case 8:
197
- _g.sent();
198
- return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
199
- case 9:
200
- h1FromButton = _g.sent();
201
- return [4 /*yield*/, this.browser
202
- .actions()
203
- .keyDown(this.keys.CONTROL)
204
- .sendKeys('a')
205
- .sendKeys('Заголовок')
206
- .keyDown(this.keys.CONTROL)
207
- .sendKeys('a')
208
- .keyDown(this.keys.CONTROL)
209
- .keyDown(this.keys.ALT)
210
- .sendKeys('1')
211
- .perform()];
212
- case 10:
213
- _g.sent();
214
- return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
215
- case 11:
216
- h1FromKeyboard = _g.sent();
217
- return [4 /*yield*/, this.browser
218
- .actions()
219
- .keyDown(this.keys.CONTROL)
220
- .sendKeys('a')
221
- .sendKeys('Жирный')
222
- .keyDown(this.keys.CONTROL)
223
- .sendKeys('a')
224
- .click(buttons[1])
225
- .perform()];
226
- case 12:
227
- _g.sent();
228
- return [4 /*yield*/, ((_d = this.captureElement) === null || _d === void 0 ? void 0 : _d.takeScreenshot())];
229
- case 13:
230
- boldFromButton = _g.sent();
231
- return [4 /*yield*/, this.browser
232
- .actions()
233
- .keyDown(this.keys.CONTROL)
234
- .sendKeys('a')
235
- .sendKeys('Жирный')
236
- .keyDown(this.keys.CONTROL)
237
- .sendKeys('a')
238
- .keyDown(this.keys.CONTROL)
239
- .keyDown(this.keys.ALT)
240
- .sendKeys('b')
241
- .perform()];
242
- case 14:
243
- _g.sent();
244
- return [4 /*yield*/, ((_e = this.captureElement) === null || _e === void 0 ? void 0 : _e.takeScreenshot())];
245
- case 15:
246
- boldFromKeyboard = _g.sent();
247
- return [4 /*yield*/, this.browser.actions().click(buttons[12]).perform()];
248
- case 16:
249
- _g.sent();
250
- return [4 /*yield*/, ((_f = this.captureElement) === null || _f === void 0 ? void 0 : _f.takeScreenshot())];
251
- case 17:
252
- openedEmojiPicker = _g.sent();
253
- return [4 /*yield*/, this.expect({
254
- openedDropdown: openedDropdown,
255
- h1FromButton: h1FromButton,
256
- h1FromKeyboard: h1FromKeyboard,
257
- boldFromButton: boldFromButton,
258
- boldFromKeyboard: boldFromKeyboard,
259
- openedEmojiPicker: openedEmojiPicker,
260
- }).to.matchImages()];
261
- case 18:
262
- _g.sent();
127
+ _a.sent();
263
128
  return [2 /*return*/];
264
129
  }
265
130
  });
266
- });
131
+ }); });
267
132
  });
268
- test('withFullscreen', function () {
269
- var _a, _b, _c;
270
- return __awaiter(this, void 0, void 0, function () {
271
- var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
272
- return __generator(this, function (_d) {
273
- switch (_d.label) {
274
- case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
275
- case 1:
276
- buttons = _d.sent();
277
- return [4 /*yield*/, this.browser
278
- .actions()
279
- .click(buttons[buttons.length - 1])
280
- .perform()];
281
- case 2:
282
- _d.sent();
283
- return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
284
- case 3:
285
- fullscreenSplit = _d.sent();
286
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
287
- case 4:
288
- buttons = _d.sent();
289
- return [4 /*yield*/, this.browser
290
- .actions()
291
- .click(buttons[buttons.length - 2])
292
- .perform()];
293
- case 5:
294
- _d.sent();
295
- return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
296
- case 6:
297
- fullscreenPreview = _d.sent();
298
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
299
- case 7:
300
- buttons = _d.sent();
301
- return [4 /*yield*/, this.browser
302
- .actions()
303
- .click(buttons[buttons.length - 2])
304
- .perform()];
305
- case 8:
306
- _d.sent();
307
- return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
308
- case 9:
309
- fullscreenEdit = _d.sent();
310
- return [4 /*yield*/, this.expect({ fullscreenSplit: fullscreenSplit, fullscreenPreview: fullscreenPreview, fullscreenEdit: fullscreenEdit }).to.matchImages()];
311
- case 10:
312
- _d.sent();
313
- return [2 /*return*/];
314
- }
315
- });
133
+ }
134
+ story('Editable', function (_a) {
135
+ var setStoryParameters = _a.setStoryParameters;
136
+ setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
137
+ test('markdownTests', function (context) { return __awaiter(void 0, void 0, void 0, function () {
138
+ var textarea, headingDropdown, headingH2, boldButton, emojiButton, openedDropdown, h2FromButton, h2FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
139
+ return __generator(this, function (_a) {
140
+ switch (_a.label) {
141
+ case 0:
142
+ textarea = context.webdriver.locator('textarea').nth(0);
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));
147
+ return [4 /*yield*/, textarea.click()];
148
+ case 1:
149
+ _a.sent();
150
+ return [4 /*yield*/, textarea.type('Заголовок')];
151
+ case 2:
152
+ _a.sent();
153
+ return [4 /*yield*/, textarea.press('Control+A')];
154
+ case 3:
155
+ _a.sent();
156
+ return [4 /*yield*/, headingDropdown.click()];
157
+ case 4:
158
+ _a.sent();
159
+ return [4 /*yield*/, context.takeScreenshot()];
160
+ case 5:
161
+ openedDropdown = _a.sent();
162
+ return [4 /*yield*/, headingH2.click()];
163
+ case 6:
164
+ _a.sent();
165
+ return [4 /*yield*/, context.takeScreenshot()];
166
+ case 7:
167
+ h2FromButton = _a.sent();
168
+ return [4 /*yield*/, textarea.press('Control+A')];
169
+ case 8:
170
+ _a.sent();
171
+ return [4 /*yield*/, textarea.type('Заголовок')];
172
+ case 9:
173
+ _a.sent();
174
+ return [4 /*yield*/, textarea.press('Control+A')];
175
+ case 10:
176
+ _a.sent();
177
+ return [4 /*yield*/, textarea.press('Control+Shift+2')];
178
+ case 11:
179
+ _a.sent();
180
+ return [4 /*yield*/, context.takeScreenshot()];
181
+ case 12:
182
+ h2FromKeyboard = _a.sent();
183
+ return [4 /*yield*/, textarea.press('Control+A')];
184
+ case 13:
185
+ _a.sent();
186
+ return [4 /*yield*/, textarea.type('Жирный')];
187
+ case 14:
188
+ _a.sent();
189
+ return [4 /*yield*/, textarea.press('Control+A')];
190
+ case 15:
191
+ _a.sent();
192
+ return [4 /*yield*/, boldButton.click()];
193
+ case 16:
194
+ _a.sent();
195
+ return [4 /*yield*/, context.takeScreenshot()];
196
+ case 17:
197
+ boldFromButton = _a.sent();
198
+ return [4 /*yield*/, textarea.press('Control+A')];
199
+ case 18:
200
+ _a.sent();
201
+ return [4 /*yield*/, textarea.type('Жирный')];
202
+ case 19:
203
+ _a.sent();
204
+ return [4 /*yield*/, textarea.press('Control+A')];
205
+ case 20:
206
+ _a.sent();
207
+ return [4 /*yield*/, textarea.press('Control+B')];
208
+ case 21:
209
+ _a.sent();
210
+ return [4 /*yield*/, context.takeScreenshot()];
211
+ case 22:
212
+ boldFromKeyboard = _a.sent();
213
+ return [4 /*yield*/, emojiButton.click()];
214
+ case 23:
215
+ _a.sent();
216
+ return [4 /*yield*/, context.takeScreenshot()];
217
+ case 24:
218
+ openedEmojiPicker = _a.sent();
219
+ return [4 /*yield*/, context.matchImages({
220
+ openedDropdown: openedDropdown,
221
+ h2FromButton: h2FromButton,
222
+ h2FromKeyboard: h2FromKeyboard,
223
+ boldFromButton: boldFromButton,
224
+ boldFromKeyboard: boldFromKeyboard,
225
+ openedEmojiPicker: openedEmojiPicker,
226
+ })];
227
+ case 25:
228
+ _a.sent();
229
+ return [2 /*return*/];
230
+ }
316
231
  });
317
- });
232
+ }); });
318
233
  });
319
234
  });
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.d.ts CHANGED
@@ -3,6 +3,7 @@ import { FC, RefObject } from 'react';
3
3
  import { AIApi } from '../../types';
4
4
  interface Props {
5
5
  api: AIApi;
6
+ showActionHint: boolean;
6
7
  textareaRef: RefObject<Textarea>;
7
8
  isPreviewMode?: boolean;
8
9
  }
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js CHANGED
@@ -36,17 +36,18 @@ 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';
47
48
  export var AIActionsDropdown = function (_a) {
48
49
  var _b;
49
- var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, api = _a.api;
50
+ var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, showActionHint = _a.showActionHint, api = _a.api;
50
51
  var _c = useState(), processedText = _c[0], setProcessedText = _c[1];
51
52
  var _d = useState(RequestStatus.Default), requestStatus = _d[0], setRequestStatus = _d[1];
52
53
  var tooltipRef = useRef(null);
@@ -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, { 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, { 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
- !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
55
- !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!AIApi && (React.createElement(AIActionsDropdown, { textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
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 })),
55
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
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,7 +1,12 @@
1
+ import { PopupPositionsType, ShortPopupPositionsType } from '@skbkontur/react-ui/cjs/internal/Popup';
1
2
  import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
3
+ import { MarkdownTids } from '../../MarkdownTids';
2
4
  interface Props {
3
5
  caption: ReactNode;
6
+ showActionHint: boolean;
7
+ dataTid?: MarkdownTids;
4
8
  disabled?: boolean;
9
+ hintPos?: ShortPopupPositionsType | PopupPositionsType;
5
10
  hintText?: string;
6
11
  icon?: ReactElement;
7
12
  menuWidth?: number;
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;
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: hintText, pos: "top left", 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 {};