@skbkontur/markdown 2.5.8-alpha.9 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) 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.js +33 -30
  6. package/src/Markdown/Markdown.styled.d.ts +2 -0
  7. package/src/Markdown/Markdown.styled.js +16 -14
  8. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts +1 -0
  9. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js +39 -33
  10. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts +1 -1
  11. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js +2 -2
  12. package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.d.ts +1 -1
  13. package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.js +1 -1
  14. package/src/Markdown/MarkdownActions/MarkdownActions.js +15 -14
  15. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts +6 -0
  16. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js +8 -10
  17. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.styled.js +1 -1
  18. package/src/Markdown/MarkdownHelpItems.d.ts +2 -0
  19. package/src/Markdown/MarkdownHelpItems.js +16 -0
  20. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts +16 -3
  21. package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js +7 -6
  22. package/src/Markdown/MarkdownTids.d.ts +24 -0
  23. package/src/Markdown/MarkdownTids.js +25 -0
  24. package/src/Markdown/MarkdownHelpers/types.d.ts +0 -11
  25. package/src/Markdown/MarkdownHelpers/types.js +0 -1
package/src/Markdown/Markdown.js CHANGED
@@ -42,33 +42,33 @@ import { MarkdownViewer } from '../MarkdownViewer';
42
42
  import { ThemeProvider } from '../styles/styled-components';
43
43
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
44
44
  export var Markdown = function (props) {
45
- var _a, _b;
46
- var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, showActionHints = props.showActionHints, showShortKeys = props.showShortKeys, _c = props.showShotKeys, showShotKeys = _c === void 0 ? true : _c, hideActionsOptions = props.hideActionsOptions, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showActionHints", "showShortKeys", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
47
- var _d = useState(), mention = _d[0], setMention = _d[1];
48
- var _e = useState(ViewMode.Edit), viewMode = _e[0], setViewMode = _e[1];
49
- var _f = useState(false), fullscreen = _f[0], setFullScreen = _f[1];
50
- var _g = useState(0), initialWidth = _g[0], setInitialWidth = _g[1];
51
- var _h = useState(), selectionStart = _h[0], setSelectionStart = _h[1];
52
- var _j = useState(), selectionEnd = _j[0], setSelectionEnd = _j[1];
45
+ var _a;
46
+ var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, showActionHints = props.showActionHints, showShortKeys = props.showShortKeys, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, hideActionsOptions = props.hideActionsOptions, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showActionHints", "showShortKeys", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
47
+ var _c = useState(), mention = _c[0], setMention = _c[1];
48
+ var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
49
+ var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
50
+ var _f = useState(0), initialWidth = _f[0], setInitialWidth = _f[1];
51
+ var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
52
+ var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
53
53
  var guid = useRef(new Guid().generate()).current;
54
54
  var textareaRef = useRef(null);
55
- var textareaNodeRef = useRef((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node);
55
+ var textareaNode = getTextareaNode();
56
56
  var isEditMode = viewMode !== ViewMode.Preview;
57
57
  var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
58
- var _k = useResponsiveLayout({
58
+ var _j = useResponsiveLayout({
59
59
  customMediaQueries: {
60
60
  isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
61
61
  },
62
- }), isSplitViewAvailable = _k.isSplitViewAvailable, isMobile = _k.isMobile;
63
- var _l = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _l.getRootProps, isDragActive = _l.isDragActive, requestStatus = _l.requestStatus, open = _l.open, error = _l.error, onResetError = _l.onResetError;
62
+ }), isSplitViewAvailable = _j.isSplitViewAvailable, isMobile = _j.isMobile;
63
+ var _k = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _k.getRootProps, isDragActive = _k.isDragActive, requestStatus = _k.requestStatus, open = _k.open, error = _k.error, onResetError = _k.onResetError;
64
64
  var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
65
65
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
66
66
  useListenTextareaScroll(resetMention, textareaRef.current);
67
67
  var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
68
68
  useLayoutEffect(function () {
69
- var _a, _b, _c;
70
- textareaNodeRef.current = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
71
- setInitialWidth((_c = (_b = textareaNodeRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0);
69
+ var textareaNode = getTextareaNode();
70
+ if (textareaNode)
71
+ setInitialWidth(textareaNode.clientWidth);
72
72
  }, []);
73
73
  useEffect(function () {
74
74
  if (fullscreen && isSplitViewAvailable)
@@ -82,19 +82,19 @@ export var Markdown = function (props) {
82
82
  }, [isMobile]);
83
83
  useEffect(function () {
84
84
  if (fullscreen && isEditMode && textareaRef) {
85
- var textareaNode = textareaNodeRef.current;
86
- if (textareaNode) {
87
- textareaNode.focus();
88
- textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
89
- textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
85
+ var textareaNode_1 = getTextareaNode();
86
+ if (textareaNode_1 && !textareaNode_1.selectionStart && !textareaNode_1.selectionEnd) {
87
+ textareaNode_1.focus();
88
+ textareaNode_1.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
89
+ textareaNode_1.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
90
90
  }
91
91
  }
92
92
  }, [fullscreen, isEditMode, selectionEnd, selectionStart, textareaRef]);
93
93
  useEffect(function () {
94
94
  var handleSelectionChange = function () {
95
- var _a, _b;
96
- setSelectionStart((_a = textareaNodeRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart);
97
- setSelectionEnd((_b = textareaNodeRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd);
95
+ var textareaNode = getTextareaNode();
96
+ setSelectionStart(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart);
97
+ setSelectionEnd(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionEnd);
98
98
  };
99
99
  document.addEventListener('selectionchange', handleSelectionChange);
100
100
  return function () { return document.removeEventListener('selectionchange', handleSelectionChange); };
@@ -109,7 +109,7 @@ export var Markdown = function (props) {
109
109
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
110
110
  fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
111
111
  React.createElement(SplitViewEditContainer, null, renderEditContainer()),
112
- React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_b = textareaProps.width) === null || _b === void 0 ? void 0 : _b.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
112
+ React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_a = textareaProps.width) === null || _a === void 0 ? void 0 : _a.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
113
113
  viewMode === ViewMode.Edit && renderEditContainer(),
114
114
  viewMode === ViewMode.Preview && renderPreview(),
115
115
  isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
@@ -140,8 +140,8 @@ export var Markdown = function (props) {
140
140
  return (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings, { viewMode: viewMode, width: width }), (markdownViewer === null || markdownViewer === void 0 ? void 0 : markdownViewer(props.value)) || (React.createElement(MarkdownViewer, { source: (_a = props.value) !== null && _a !== void 0 ? _a : '', downloadFileApi: api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl: fileApiUrl, profileUrl: profileUrl }))));
141
141
  }
142
142
  function renderMentions() {
143
- if (textareaNodeRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
144
- var position = getCursorCoordinates(textareaNodeRef.current, guid);
143
+ if (textareaNode && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
144
+ var position = getCursorCoordinates(textareaNode, guid);
145
145
  return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
146
146
  }
147
147
  }
@@ -150,8 +150,8 @@ export var Markdown = function (props) {
150
150
  onChangeViewMode === null || onChangeViewMode === void 0 ? void 0 : onChangeViewMode(mode);
151
151
  }
152
152
  function handleSelectUser(login, name) {
153
- if (textareaNodeRef.current && mention) {
154
- textareaNodeRef.current.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
153
+ if (textareaNode && mention) {
154
+ textareaNode.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
155
155
  document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
156
156
  resetMention();
157
157
  }
@@ -173,11 +173,10 @@ export var Markdown = function (props) {
173
173
  mentionActions(event, setMention);
174
174
  }
175
175
  function resetStates() {
176
- var _a;
177
176
  resetMention();
178
177
  setSelectionStart(undefined);
179
178
  setSelectionEnd(undefined);
180
- (_a = textareaNodeRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 0);
179
+ textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.setSelectionRange(0, 0);
181
180
  }
182
181
  function resetMention() {
183
182
  setMention(undefined);
@@ -186,4 +185,8 @@ export var Markdown = function (props) {
186
185
  setViewMode(function (prevState) { return (prevState !== ViewMode.Split && isSplitViewAvailable ? ViewMode.Split : ViewMode.Edit); });
187
186
  setFullScreen(!fullscreen);
188
187
  }
188
+ function getTextareaNode() {
189
+ var _a;
190
+ return (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
191
+ }
189
192
  };
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,48 +36,50 @@ 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, TooltipWrapper } from './AIActionsDropdown.styled';
40
- import { COPY_BUTTON_TEXT, ERROR_NOT_FOUND_TEXT } from './constants';
39
+ import { TooltipButtonsWrapper, TooltipContentWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
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
- var _b;
49
- var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, api = _a.api;
50
- var _c = useState(), processedText = _c[0], setProcessedText = _c[1];
51
- var _d = useState(RequestStatus.Default), requestStatus = _d[0], setRequestStatus = _d[1];
49
+ var _b, _c, _d, _e;
50
+ var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, showActionHint = _a.showActionHint, api = _a.api;
51
+ var _f = useState(), processedText = _f[0], setProcessedText = _f[1];
52
+ var _g = useState(RequestStatus.Default), requestStatus = _g[0], setRequestStatus = _g[1];
52
53
  var tooltipRef = useRef(null);
53
54
  var taskIdRef = useRef(new Guid());
54
55
  var availableMethods = api.availableMethods, onSendMessage = api.onSendMessage;
55
- var htmlTextArea = (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.node;
56
- var selectionStart = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionStart;
57
- var selectionEnd = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionEnd;
56
+ var htmlTextArea = (_b = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _b === void 0 ? void 0 : _b.node;
57
+ var selectionStart = (_c = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionStart) !== null && _c !== void 0 ? _c : 0;
58
+ var selectionEnd = (_d = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionEnd) !== null && _d !== void 0 ? _d : 0;
58
59
  useEffect(function () {
59
60
  handleCloseTooltip();
60
61
  }, [selectionStart, selectionEnd]);
61
- if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
62
- return null;
63
- var value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
62
+ useEffect(function () {
63
+ var _a;
64
+ if (processedText)
65
+ (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
66
+ }, [processedText]);
67
+ var value = (_e = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined)) !== null && _e !== void 0 ? _e : '';
64
68
  var isEmptySelected = selectionEnd === selectionStart;
65
- var content = (React.createElement(MarkdownDropdown, { hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', caption: React.createElement(DropdownCaptionWrapper, null,
66
- React.createElement(NatureFxSparkleA2, null),
67
- " \u0418\u0418"), menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
68
- var method = _a.method, caption = _a.caption;
69
- return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
70
- })));
71
- return (React.createElement(Tooltip, { ref: tooltipRef, pos: "top right", allowedPositions: ['top right', 'right middle', 'bottom right'], trigger: "manual", render: renderTooltipContent, onClose: handleCloseTooltip }, content));
69
+ return (React.createElement(Tooltip, { key: processedText, ref: tooltipRef, pos: "top right", allowedPositions: ['top right', 'right middle', 'bottom right', 'bottom left'], trigger: "manual", render: renderTooltipContent },
70
+ React.createElement(MarkdownDropdown, { dataTid: MarkdownTids.AI, hintPos: "top center", showActionHint: showActionHint, showHintWhenDisabled: !isPreviewMode, hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', icon: React.createElement(NatureFxSparkleA2, null), caption: "\u0418\u0418", menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
71
+ var method = _a.method, caption = _a.caption;
72
+ return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
73
+ }))));
72
74
  function renderTooltipContent() {
73
75
  if (requestStatus === RequestStatus.isFetching)
74
76
  return React.createElement(Spinner, { caption: "\u041E\u0431\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0435\u043C", type: "mini" });
75
77
  return (React.createElement(TooltipWrapper, null,
76
- React.createElement("div", null, processedText),
77
- processedText !== ERROR_NOT_FOUND_TEXT && (React.createElement(TooltipButtonsWrapper, null,
78
+ React.createElement(TooltipContentWrapper, null, processedText),
79
+ processedText !== ERRORS_NOT_FOUND_TEXT && (React.createElement(TooltipButtonsWrapper, null,
78
80
  React.createElement(Button, { onClick: handleSetText }, "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442"),
79
81
  React.createElement(Hint, { text: COPY_BUTTON_TEXT },
80
- React.createElement(Button, { "aria-label": COPY_BUTTON_TEXT, icon: React.createElement(Copy, null), onClick: handleCopyText }))))));
82
+ React.createElement(Button, { "aria-label": COPY_BUTTON_TEXT, icon: React.createElement(Copy, null), onMouseDown: function (e) { return e.preventDefault(); }, onClick: handleCopyText }))))));
81
83
  }
82
84
  function handleProcessText(method) {
83
85
  var _a;
@@ -86,24 +88,28 @@ export var AIActionsDropdown = function (_a) {
86
88
  return __generator(this, function (_b) {
87
89
  switch (_b.label) {
88
90
  case 0:
89
- _b.trys.push([0, 2, , 3]);
90
- (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
91
91
  taskId = taskIdRef.current.generate();
92
+ _b.label = 1;
93
+ case 1:
94
+ _b.trys.push([1, 3, , 4]);
95
+ (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
92
96
  setRequestStatus(RequestStatus.isFetching);
93
97
  return [4 /*yield*/, onSendMessage(value, method)];
94
- case 1:
98
+ case 2:
95
99
  response = _b.sent();
96
100
  if (response && taskId === taskIdRef.current.generated) {
97
101
  setRequestStatus(RequestStatus.isLoaded);
98
- setProcessedText(value === response ? ERROR_NOT_FOUND_TEXT : response);
102
+ setProcessedText(value.trim() === response ? ERRORS_NOT_FOUND_TEXT : response);
99
103
  }
100
- return [3 /*break*/, 3];
101
- case 2:
104
+ return [3 /*break*/, 4];
105
+ case 3:
102
106
  e_1 = _b.sent();
103
- handleCloseTooltip();
104
- Toast.push('Ошибка обработки текста');
105
- return [3 /*break*/, 3];
106
- case 3: return [2 /*return*/];
107
+ if (taskId === taskIdRef.current.generated) {
108
+ handleCloseTooltip();
109
+ Toast.push('Ошибка обработки текста');
110
+ }
111
+ return [3 /*break*/, 4];
112
+ case 4: return [2 /*return*/];
107
113
  }
108
114
  });
109
115
  });
@@ -128,7 +134,7 @@ export var AIActionsDropdown = function (_a) {
128
134
  var valueLength = value.length;
129
135
  var spaceInStartCount = valueLength - value.trimStart().length;
130
136
  var spaceInEndCount = valueLength - value.trimEnd().length;
131
- htmlTextArea.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
137
+ htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
132
138
  document.execCommand('insertText', false, processedText);
133
139
  handleCloseTooltip();
134
140
  }
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
2
+ export declare const TooltipContentWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
2
3
  export declare const TooltipButtonsWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
3
- export declare const DropdownCaptionWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js CHANGED
@@ -4,6 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  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
- export var TooltipButtonsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
8
- export var DropdownCaptionWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
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
+ 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
9
  var templateObject_1, templateObject_2, templateObject_3;
package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const ERROR_NOT_FOUND_TEXT = "\u041E\u0448\u0438\u0431\u043E\u043A \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
1
+ export declare const ERRORS_NOT_FOUND_TEXT = "\u041E\u0448\u0438\u0431\u043E\u043A \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
2
2
  export declare const COPY_BUTTON_TEXT = "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C";
package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.js CHANGED
@@ -1,2 +1,2 @@
1
- export var ERROR_NOT_FOUND_TEXT = 'Ошибок не найдено';
1
+ export var ERRORS_NOT_FOUND_TEXT = 'Ошибок не найдено';
2
2
  export var COPY_BUTTON_TEXT = 'Скопировать';
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,11 +1,17 @@
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;
8
13
  onOpen?: () => void;
14
+ showHintWhenDisabled?: boolean;
9
15
  }
10
16
  export declare const MarkdownDropdown: FC<PropsWithChildren<Props>>;
11
17
  export {};
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js CHANGED
@@ -1,14 +1,12 @@
1
- import { Dropdown, Hint } from '@skbkontur/react-ui';
2
- import React, { useState } from 'react';
1
+ import { Dropdown } from '@skbkontur/react-ui';
2
+ import React from 'react';
3
3
  import { Wrapper } from './MarkdownDropdown.styled';
4
+ import { MarkdownFormatButton } from '../../MarkdownHelpers/MarkdownFormatButton';
4
5
  export var MarkdownDropdown = function (_a) {
5
- var icon = _a.icon, disabled = _a.disabled, children = _a.children, caption = _a.caption, onOpen = _a.onOpen, menuWidth = _a.menuWidth, hintText = _a.hintText;
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, showHintWhenDisabled = _a.showHintWhenDisabled, 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, showHintWhenDisabled: showHintWhenDisabled, 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;