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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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.14",
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",
@@ -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>;
@@ -9,13 +9,13 @@ import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/them
9
9
  import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
10
10
  emojiLocale.search = 'Поиск на английском';
11
11
  export var EmojiDropdown = function (_a) {
12
- var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect;
12
+ var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect, showActionHint = _a.showActionHint;
13
13
  var dropdownMenuRef = useRef(null);
14
14
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
15
15
  var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
16
16
  return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: function (_a) {
17
17
  var toggleMenu = _a.toggleMenu;
18
- return (React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
18
+ return (React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
19
19
  }, menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
20
20
  React.createElement(EmojiPickerWrapper, null,
21
21
  React.createElement(EmojiPicker, { dynamicWidth: true, data: data, i18n: emojiLocale, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
@@ -34,286 +34,194 @@ 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';
38
39
  kind('Markdown', function () {
39
- story('MediumSize', function (_a) {
40
+ story('CustomWidth', function (_a) {
40
41
  var setStoryParameters = _a.setStoryParameters;
41
42
  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
- });
43
+ test('withPreview', function (context) { return __awaiter(void 0, void 0, void 0, function () {
44
+ var button, idle, preview;
45
+ return __generator(this, function (_a) {
46
+ switch (_a.label) {
47
+ case 0:
48
+ button = context.webdriver.locator('button[class*="react-ui"]').nth(-2);
49
+ return [4 /*yield*/, context.takeScreenshot()];
50
+ case 1:
51
+ idle = _a.sent();
52
+ return [4 /*yield*/, button.click()];
53
+ case 2:
54
+ _a.sent();
55
+ return [4 /*yield*/, context.takeScreenshot()];
56
+ case 3:
57
+ preview = _a.sent();
58
+ return [4 /*yield*/, context.matchImages({ idle: idle, preview: preview })];
59
+ case 4:
60
+ _a.sent();
61
+ return [2 /*return*/];
62
+ }
69
63
  });
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
- });
64
+ }); });
65
+ test('withFullscreen', function (context) { return __awaiter(void 0, void 0, void 0, function () {
66
+ var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
67
+ return __generator(this, function (_a) {
68
+ switch (_a.label) {
69
+ case 0:
70
+ buttons = context.webdriver.locator('button[class*="react-ui"]');
71
+ return [4 /*yield*/, buttons.nth(-1).click()];
72
+ case 1:
73
+ _a.sent();
74
+ return [4 /*yield*/, context.takeScreenshot()];
75
+ case 2:
76
+ fullscreenSplit = _a.sent();
77
+ return [4 /*yield*/, buttons.nth(-2).click()];
78
+ case 3:
79
+ _a.sent();
80
+ return [4 /*yield*/, context.takeScreenshot()];
81
+ case 4:
82
+ fullscreenPreview = _a.sent();
83
+ return [4 /*yield*/, buttons.nth(-2).click()];
84
+ case 5:
85
+ _a.sent();
86
+ return [4 /*yield*/, context.takeScreenshot()];
87
+ case 6:
88
+ fullscreenEdit = _a.sent();
89
+ return [4 /*yield*/, context.matchImages({
90
+ fullscreenSplit: fullscreenSplit,
91
+ fullscreenPreview: fullscreenPreview,
92
+ fullscreenEdit: fullscreenEdit,
93
+ })];
94
+ case 7:
95
+ _a.sent();
96
+ return [2 /*return*/];
97
+ }
119
98
  });
120
- });
99
+ }); });
121
100
  });
122
101
  for (var _i = 0, _a = ['WithoutHints', 'WithActionHint', 'WithShortKeyHint', 'WithActionAndShortKeyHints']; _i < _a.length; _i++) {
123
102
  var storyName = _a[_i];
124
103
  story(storyName, function (_a) {
125
104
  var setStoryParameters = _a.setStoryParameters;
126
105
  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' })];
106
+ test('hint', function (context) { return __awaiter(void 0, void 0, void 0, function () {
107
+ var boldButton, hint;
108
+ return __generator(this, function (_a) {
109
+ switch (_a.label) {
110
+ case 0:
111
+ boldButton = context.webdriver.locator('button[class*="react-ui"]').nth(1);
112
+ return [4 /*yield*/, boldButton.hover()];
175
113
  case 1:
176
- textarea = _g.sent();
177
- return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
114
+ _a.sent();
115
+ return [4 /*yield*/, delay(500)];
178
116
  case 2:
179
- buttons = _g.sent();
180
- return [4 /*yield*/, this.browser.actions().click(textarea).perform()];
117
+ _a.sent();
118
+ return [4 /*yield*/, context.takeScreenshot()];
181
119
  case 3:
182
- _g.sent();
183
- return [4 /*yield*/, this.browser.actions().sendKeys('Заголовок').keyDown(this.keys.CONTROL).sendKeys('a').perform()];
120
+ hint = _a.sent();
121
+ return [4 /*yield*/, context.matchImages({ hint: hint })];
184
122
  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();
123
+ _a.sent();
263
124
  return [2 /*return*/];
264
125
  }
265
126
  });
266
- });
127
+ }); });
267
128
  });
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
- });
129
+ }
130
+ story('Editable', function (_a) {
131
+ var setStoryParameters = _a.setStoryParameters;
132
+ setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
133
+ test('markdownTests', function (context) { return __awaiter(void 0, void 0, void 0, function () {
134
+ var textarea, buttons, openedDropdown, h2FromButton, h2FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
135
+ return __generator(this, function (_a) {
136
+ switch (_a.label) {
137
+ case 0:
138
+ textarea = context.webdriver.locator('textarea').nth(0);
139
+ buttons = context.webdriver.locator('button[class*="react-ui"]');
140
+ return [4 /*yield*/, textarea.click()];
141
+ case 1:
142
+ _a.sent();
143
+ return [4 /*yield*/, textarea.type('Заголовок')];
144
+ case 2:
145
+ _a.sent();
146
+ return [4 /*yield*/, textarea.press('Control+A')];
147
+ case 3:
148
+ _a.sent();
149
+ return [4 /*yield*/, buttons.nth(0).click()];
150
+ case 4:
151
+ _a.sent();
152
+ return [4 /*yield*/, context.takeScreenshot()];
153
+ case 5:
154
+ openedDropdown = _a.sent();
155
+ return [4 /*yield*/, buttons.nth(1).click()];
156
+ case 6:
157
+ _a.sent();
158
+ return [4 /*yield*/, context.takeScreenshot()];
159
+ case 7:
160
+ h2FromButton = _a.sent();
161
+ return [4 /*yield*/, textarea.press('Control+A')];
162
+ case 8:
163
+ _a.sent();
164
+ return [4 /*yield*/, textarea.type('Заголовок')];
165
+ case 9:
166
+ _a.sent();
167
+ return [4 /*yield*/, textarea.press('Control+A')];
168
+ case 10:
169
+ _a.sent();
170
+ return [4 /*yield*/, textarea.press('Control+Shift+2')];
171
+ case 11:
172
+ _a.sent();
173
+ return [4 /*yield*/, context.takeScreenshot()];
174
+ case 12:
175
+ h2FromKeyboard = _a.sent();
176
+ return [4 /*yield*/, textarea.press('Control+A')];
177
+ case 13:
178
+ _a.sent();
179
+ return [4 /*yield*/, textarea.type('Жирный')];
180
+ case 14:
181
+ _a.sent();
182
+ return [4 /*yield*/, textarea.press('Control+A')];
183
+ case 15:
184
+ _a.sent();
185
+ return [4 /*yield*/, buttons.nth(1).click()];
186
+ case 16:
187
+ _a.sent();
188
+ return [4 /*yield*/, context.takeScreenshot()];
189
+ case 17:
190
+ boldFromButton = _a.sent();
191
+ return [4 /*yield*/, textarea.press('Control+A')];
192
+ case 18:
193
+ _a.sent();
194
+ return [4 /*yield*/, textarea.type('Жирный')];
195
+ case 19:
196
+ _a.sent();
197
+ return [4 /*yield*/, textarea.press('Control+A')];
198
+ case 20:
199
+ _a.sent();
200
+ return [4 /*yield*/, textarea.press('Control+B')];
201
+ case 21:
202
+ _a.sent();
203
+ return [4 /*yield*/, context.takeScreenshot()];
204
+ case 22:
205
+ boldFromKeyboard = _a.sent();
206
+ return [4 /*yield*/, buttons.nth(12).click()];
207
+ case 23:
208
+ _a.sent();
209
+ return [4 /*yield*/, context.takeScreenshot()];
210
+ case 24:
211
+ openedEmojiPicker = _a.sent();
212
+ return [4 /*yield*/, context.matchImages({
213
+ openedDropdown: openedDropdown,
214
+ h2FromButton: h2FromButton,
215
+ h2FromKeyboard: h2FromKeyboard,
216
+ boldFromButton: boldFromButton,
217
+ boldFromKeyboard: boldFromKeyboard,
218
+ openedEmojiPicker: openedEmojiPicker,
219
+ })];
220
+ case 25:
221
+ _a.sent();
222
+ return [2 /*return*/];
223
+ }
316
224
  });
317
- });
225
+ }); });
318
226
  });
319
227
  });
@@ -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
  }
@@ -46,7 +46,7 @@ import { RequestStatus } from '../../utils/requestStatus';
46
46
  import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
47
47
  export var AIActionsDropdown = function (_a) {
48
48
  var _b;
49
- var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, api = _a.api;
49
+ var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, showActionHint = _a.showActionHint, api = _a.api;
50
50
  var _c = useState(), processedText = _c[0], setProcessedText = _c[1];
51
51
  var _d = useState(RequestStatus.Default), requestStatus = _d[0], setRequestStatus = _d[1];
52
52
  var tooltipRef = useRef(null);
@@ -68,7 +68,7 @@ export var AIActionsDropdown = function (_a) {
68
68
  var value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
69
69
  var isEmptySelected = selectionEnd === selectionStart;
70
70
  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,
71
+ React.createElement(MarkdownDropdown, { pos: "top center", showActionHint: showActionHint, hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', caption: React.createElement(DropdownCaptionWrapper, null,
72
72
  React.createElement(NatureFxSparkleA2, null),
73
73
  " \u0418\u0418"), menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
74
74
  var method = _a.method, caption = _a.caption;
@@ -33,7 +33,7 @@ export var MarkdownActions = function (_a) {
33
33
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
34
34
  React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
35
35
  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); } },
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
37
  React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); }))),
38
38
  markdownHelpText.map(function (helper, idx) {
39
39
  if (isHiddenOptions(helper.format))
@@ -51,8 +51,8 @@ export var MarkdownActions = function (_a) {
51
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
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
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
55
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
56
56
  React.createElement(ActionsRightWrapper, null,
57
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
58
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
@@ -1,11 +1,14 @@
1
+ import { PopupPositionsType, ShortPopupPositionsType } from '@skbkontur/react-ui/cjs/internal/Popup';
1
2
  import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
2
3
  interface Props {
3
4
  caption: ReactNode;
5
+ showActionHint: boolean;
4
6
  disabled?: boolean;
5
7
  hintText?: string;
6
8
  icon?: ReactElement;
7
9
  menuWidth?: number;
8
10
  onOpen?: () => void;
11
+ pos?: ShortPopupPositionsType | PopupPositionsType;
9
12
  }
10
13
  export declare const MarkdownDropdown: FC<PropsWithChildren<Props>>;
11
14
  export {};
@@ -2,10 +2,10 @@ import { Dropdown, Hint } from '@skbkontur/react-ui';
2
2
  import React, { useState } from 'react';
3
3
  import { Wrapper } from './MarkdownDropdown.styled';
4
4
  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;
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
6
  var _b = useState(false), isOpened = _b[0], setIsOpened = _b[1];
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 },
8
+ React.createElement(Hint, { text: showActionHint && hintText, pos: pos, manual: isOpened, opened: !isOpened },
9
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
10
  function handleOpen() {
11
11
  onOpen === null || onOpen === void 0 ? void 0 : onOpen();