@skbkontur/markdown 2.5.8-alpha.2 → 2.5.8-alpha.4

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 (13) hide show
  1. package/package.json +1 -1
  2. package/src/Markdown/Markdown.js +35 -31
  3. package/src/Markdown/Markdown.styled.js +1 -1
  4. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts +1 -3
  5. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js +21 -11
  6. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts +1 -0
  7. package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js +2 -1
  8. package/src/Markdown/MarkdownActions/MarkdownActions.d.ts +1 -0
  9. package/src/Markdown/MarkdownActions/MarkdownActions.js +3 -3
  10. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts +4 -3
  11. package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js +2 -2
  12. package/src/MarkdownIcons/NatureFxSparkleA2.d.ts +2 -0
  13. package/src/MarkdownIcons/NatureFxSparkleA2.js +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.5.8-alpha.2",
3
+ "version": "2.5.8-alpha.4",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.js CHANGED
@@ -42,32 +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;
46
- var availableAIMethods = props.availableAIMethods, 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, ["availableAIMethods", "panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showActionHints", "showShortKeys", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
47
- var textareaRef = useRef(null);
48
- var _c = useState(), mention = _c[0], setMention = _c[1];
49
- var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
50
- var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
51
- var _f = useState(0), initialWidth = _f[0], setInitialWidth = _f[1];
52
- var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
53
- var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
45
+ var _a, _b;
46
+ var availableAIMethods = props.availableAIMethods, 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, ["availableAIMethods", "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];
54
53
  var guid = useRef(new Guid().generate()).current;
54
+ var textareaRef = useRef(null);
55
+ var textareaNodeRef = useRef((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node);
55
56
  var isEditMode = viewMode !== ViewMode.Preview;
56
57
  var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
57
- var _j = useResponsiveLayout({
58
+ var _k = useResponsiveLayout({
58
59
  customMediaQueries: {
59
60
  isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
60
61
  },
61
- }), isSplitViewAvailable = _j.isSplitViewAvailable, isMobile = _j.isMobile;
62
- 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;
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;
63
64
  var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
64
65
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
65
66
  useListenTextareaScroll(resetMention, textareaRef.current);
66
67
  var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
67
68
  useLayoutEffect(function () {
68
- var _a;
69
- var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
70
- setInitialWidth(textareaNode.clientWidth);
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);
71
72
  }, []);
72
73
  useEffect(function () {
73
74
  if (fullscreen && isSplitViewAvailable)
@@ -80,9 +81,8 @@ export var Markdown = function (props) {
80
81
  setFullScreen(false);
81
82
  }, [isMobile]);
82
83
  useEffect(function () {
83
- var _a;
84
84
  if (fullscreen && isEditMode && textareaRef) {
85
- var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
85
+ var textareaNode = textareaNodeRef.current;
86
86
  if (textareaNode) {
87
87
  textareaNode.focus();
88
88
  textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
@@ -90,6 +90,15 @@ export var Markdown = function (props) {
90
90
  }
91
91
  }
92
92
  }, [fullscreen, isEditMode, selectionEnd, selectionStart, textareaRef]);
93
+ useEffect(function () {
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);
98
+ };
99
+ document.addEventListener('selectionchange', handleSelectionChange);
100
+ return function () { return document.removeEventListener('selectionchange', handleSelectionChange); };
101
+ }, []);
93
102
  var horizontalPaddings = {
94
103
  panelPadding: panelHorizontalPadding,
95
104
  fullscreenPadding: fullscreenTextareaPadding,
@@ -100,7 +109,7 @@ export var Markdown = function (props) {
100
109
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
101
110
  fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
102
111
  React.createElement(SplitViewEditContainer, null, renderEditContainer()),
103
- React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_a = textareaProps.width) === null || _a === void 0 ? void 0 : _a.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
112
+ React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_b = textareaProps.width) === null || _b === void 0 ? void 0 : _b.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
104
113
  viewMode === ViewMode.Edit && renderEditContainer(),
105
114
  viewMode === ViewMode.Preview && renderPreview(),
106
115
  isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
@@ -122,7 +131,7 @@ export var Markdown = function (props) {
122
131
  return (React.createElement(MarkdownEditorBlock, null,
123
132
  React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
124
133
  showMention && renderMentions(),
125
- React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
134
+ React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelect, onClick: listenClick }))));
126
135
  }
127
136
  function renderPreview() {
128
137
  var _a;
@@ -131,10 +140,8 @@ export var Markdown = function (props) {
131
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 }))));
132
141
  }
133
142
  function renderMentions() {
134
- var _a;
135
- if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
136
- var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
137
- var position = getCursorCoordinates(textareaNode, guid);
143
+ if (textareaNodeRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
144
+ var position = getCursorCoordinates(textareaNodeRef.current, guid);
138
145
  return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
139
146
  }
140
147
  }
@@ -143,18 +150,13 @@ export var Markdown = function (props) {
143
150
  onChangeViewMode === null || onChangeViewMode === void 0 ? void 0 : onChangeViewMode(mode);
144
151
  }
145
152
  function handleSelectUser(login, name) {
146
- if (textareaRef.current && mention) {
147
- var htmlTextArea = textareaRef.current;
148
- htmlTextArea.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
153
+ if (textareaNodeRef.current && mention) {
154
+ textareaNodeRef.current.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
149
155
  document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
150
156
  resetMention();
151
157
  }
152
158
  }
153
- function listenSelection(event) {
154
- var _a = event.currentTarget, textSelectionStart = _a.selectionStart, textSelectionEnd = _a.selectionEnd;
155
- console.log('textSelectionStart', textSelectionStart);
156
- setSelectionStart(textSelectionStart);
157
- setSelectionEnd(textSelectionEnd);
159
+ function listenSelect(event) {
158
160
  onSelect && onSelect(event);
159
161
  checkMention(event);
160
162
  }
@@ -171,9 +173,11 @@ export var Markdown = function (props) {
171
173
  mentionActions(event, setMention);
172
174
  }
173
175
  function resetStates() {
176
+ var _a;
174
177
  resetMention();
175
178
  setSelectionStart(undefined);
176
179
  setSelectionEnd(undefined);
180
+ (_a = textareaNodeRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 0);
177
181
  }
178
182
  function resetMention() {
179
183
  setMention(undefined);
package/src/Markdown/Markdown.styled.js CHANGED
@@ -56,7 +56,7 @@ export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_17 ||
56
56
  export var MarkdownButtonWrapper = styled(Button)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n button {\n padding: 4px;\n border: none;\n box-sizing: border-box;\n }\n"], ["\n button {\n padding: 4px;\n border: none;\n box-sizing: border-box;\n }\n"])));
57
57
  export var MarkdownButtonIcon = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n height: 24px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"], ["\n height: 24px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n"])));
58
58
  export var 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.grayDefault; });
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
60
  export var MarkdownEditorBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
61
61
  export var getMarkdownMentionStyle = function (x, y) { return ({
62
62
  position: 'absolute',
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  import { Textarea } from '@skbkontur/react-ui';
2
2
  import { FC, RefObject } from 'react';
3
- import { AIMethod, Nullable } from '../../types';
3
+ import { AIMethod } from '../../types';
4
4
  interface Props {
5
5
  api: (query: string, type: string) => Promise<string>;
6
6
  availableMethods: AIMethod[];
7
7
  textareaRef: RefObject<Textarea>;
8
8
  isPreviewMode?: boolean;
9
- selectionEnd?: Nullable<number>;
10
- selectionStart?: Nullable<number>;
11
9
  }
12
10
  export declare const AIActionsDropdown: FC<Props>;
13
11
  export {};
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js CHANGED
@@ -34,28 +34,36 @@ 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 { Button, Hint, Spinner, Toast, Tooltip } from '@skbkontur/react-ui';
37
+ import { Button, Hint, Spinner, Tooltip } from '@skbkontur/react-ui';
38
38
  import React, { useEffect, useRef, useState } from 'react';
39
- import { TooltipButtonsWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
39
+ import { DropdownCaptionWrapper, TooltipButtonsWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
40
40
  import { COPY_BUTTON_TEXT, ERROR_NOT_FOUND_TEXT } from './constants';
41
41
  import { Copy } from '../../../MarkdownIcons/Copy';
42
+ import { NatureFxSparkleA2 } from '../../../MarkdownIcons/NatureFxSparkleA2';
42
43
  import { MarkdownMenuItem } from '../../Markdown.styled';
43
44
  import { Guid } from '../../utils/guid';
44
45
  import { RequestStatus } from '../../utils/requestStatus';
45
46
  import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
46
47
  export var AIActionsDropdown = function (_a) {
47
- var selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, availableMethods = _a.availableMethods, api = _a.api;
48
- var _b = useState(), processedText = _b[0], setProcessedText = _b[1];
49
- var _c = useState(RequestStatus.Default), requestStatus = _c[0], setRequestStatus = _c[1];
48
+ var _b;
49
+ var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, availableMethods = _a.availableMethods, 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];
50
52
  var tooltipRef = useRef(null);
51
53
  var taskIdRef = useRef(new Guid());
54
+ var htmlTextArea = (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.node;
55
+ var selectionStart = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionStart;
56
+ var selectionEnd = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionEnd;
52
57
  useEffect(function () {
53
58
  handleCloseTooltip();
54
59
  }, [selectionStart, selectionEnd, api]);
55
60
  if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
56
61
  return null;
57
- var htmlTextArea = textareaRef.current.node;
58
- var content = (React.createElement(MarkdownDropdown, { hintText: "\u0418\u0418-\u043F\u043E\u043C\u043E\u0449\u043D\u0438\u043A", caption: "AI", menuWidth: 180, isPreviewMode: isPreviewMode, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
62
+ var value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
63
+ var isEmptySelected = selectionEnd === selectionStart;
64
+ var content = (React.createElement(MarkdownDropdown, { hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', caption: React.createElement(DropdownCaptionWrapper, null,
65
+ React.createElement(NatureFxSparkleA2, null),
66
+ " \u0418\u0418"), menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
59
67
  var method = _a.method, caption = _a.caption;
60
68
  return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
61
69
  })));
@@ -73,7 +81,7 @@ export var AIActionsDropdown = function (_a) {
73
81
  function handleProcessText(method) {
74
82
  var _a;
75
83
  return __awaiter(this, void 0, void 0, function () {
76
- var taskId, value, response, e_1;
84
+ var taskId, response, e_1;
77
85
  return __generator(this, function (_b) {
78
86
  switch (_b.label) {
79
87
  case 0:
@@ -81,7 +89,6 @@ export var AIActionsDropdown = function (_a) {
81
89
  (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
82
90
  taskId = taskIdRef.current.generate();
83
91
  setRequestStatus(RequestStatus.isFetching);
84
- value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
85
92
  return [4 /*yield*/, api(value, method)];
86
93
  case 1:
87
94
  response = _b.sent();
@@ -92,8 +99,7 @@ export var AIActionsDropdown = function (_a) {
92
99
  return [3 /*break*/, 3];
93
100
  case 2:
94
101
  e_1 = _b.sent();
95
- Toast.push('Ошибка обработки текста');
96
- return [3 /*break*/, 3];
102
+ return [2 /*return*/, Promise.reject(e_1)];
97
103
  case 3: return [2 /*return*/];
98
104
  }
99
105
  });
@@ -116,6 +122,10 @@ export var AIActionsDropdown = function (_a) {
116
122
  if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
117
123
  return null;
118
124
  textareaRef.current.focus();
125
+ var valueLength = value.length;
126
+ var spaceInStartCount = valueLength - value.trimStart().length;
127
+ var spaceInEndCount = valueLength - value.trimEnd().length;
128
+ htmlTextArea.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
119
129
  document.execCommand('insertText', false, processedText);
120
130
  handleCloseTooltip();
121
131
  }
package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
2
2
  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
@@ -5,4 +5,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
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
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
- var templateObject_1, templateObject_2;
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"])));
9
+ var templateObject_1, templateObject_2, templateObject_3;
package/src/Markdown/MarkdownActions/MarkdownActions.d.ts CHANGED
@@ -18,6 +18,7 @@ interface Props {
18
18
  fullscreen?: boolean;
19
19
  hasFilesApi?: boolean;
20
20
  hideOptions?: HideActionsOptions;
21
+ isFocused?: boolean;
21
22
  isSplitViewAvailable?: boolean;
22
23
  loadingFile?: boolean;
23
24
  selectionEnd?: Nullable<number>;
package/src/Markdown/MarkdownActions/MarkdownActions.js CHANGED
@@ -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", isPreviewMode: 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, { 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))
@@ -52,9 +52,9 @@ export var MarkdownActions = function (_a) {
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
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.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 })),
56
- !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!(availableAIMethods === null || availableAIMethods === void 0 ? void 0 : availableAIMethods.length) && !!AIApi && (React.createElement(AIActionsDropdown, { textareaRef: textAreaRef, isPreviewMode: isPreviewMode, selectionStart: selectionStart, selectionEnd: selectionEnd, availableMethods: availableAIMethods, api: AIApi }))),
55
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!(availableAIMethods === null || availableAIMethods === void 0 ? void 0 : availableAIMethods.length) && !!AIApi && (React.createElement(AIActionsDropdown, { textareaRef: textAreaRef, isPreviewMode: isPreviewMode, availableMethods: availableAIMethods, api: AIApi }))),
57
56
  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
58
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
59
59
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.screenMode) && !disableFullscreen && (React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : ' Развернуть', onClick: onClickFullscreen }))))));
60
60
  function renderViewModeButton() {
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { FC, PropsWithChildren } from 'react';
1
+ import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
2
2
  interface Props {
3
- caption: string;
3
+ caption: ReactNode;
4
+ disabled?: boolean;
4
5
  hintText?: string;
5
- isPreviewMode?: boolean;
6
+ icon?: ReactElement;
6
7
  menuWidth?: number;
7
8
  onOpen?: () => void;
8
9
  }
package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js CHANGED
@@ -2,11 +2,11 @@ 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 isPreviewMode = _a.isPreviewMode, 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;
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
8
  React.createElement(Hint, { text: hintText, pos: "top left", manual: isOpened, opened: !isOpened },
9
- React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: menuWidth !== null && menuWidth !== void 0 ? menuWidth : 300, caption: caption, onOpen: handleOpen, onClose: function () { return setIsOpened(false); } }, children))));
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();
12
12
  setIsOpened(true);
package/src/MarkdownIcons/NatureFxSparkleA2.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { FC } from 'react';
2
+ export declare const NatureFxSparkleA2: FC;
package/src/MarkdownIcons/NatureFxSparkleA2.js ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ export var NatureFxSparkleA2 = function () {
3
+ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
4
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.0413 1.49763C14.9148 0.934973 14.0776 0.935061 13.9512 1.49773C13.8878 1.77985 13.7684 2.24714 13.5864 2.72017C13.3999 3.20461 13.1678 3.64088 12.9029 3.90557C12.6384 4.16985 12.2027 4.40143 11.719 4.5875C11.2466 4.7692 10.7799 4.88837 10.4978 4.9517C9.93495 5.07806 9.93504 5.91564 10.4979 6.0419C10.7802 6.1052 11.2472 6.22439 11.7199 6.40617C12.204 6.59234 12.6399 6.82409 12.9044 7.08863C13.1689 7.35316 13.4007 7.78906 13.5869 8.27315C13.7686 8.74585 13.8878 9.21288 13.9511 9.49509C14.0774 10.058 14.915 10.0581 15.0413 9.4952C15.1047 9.21313 15.2238 8.74645 15.4055 8.27407C15.5916 7.79031 15.8232 7.35465 16.0875 7.09015C16.3521 6.82526 16.7884 6.59315 17.2729 6.40668C17.7459 6.2246 18.2132 6.10521 18.4953 6.04183C19.058 5.91544 19.0581 5.07826 18.4954 4.95176C18.2134 4.88837 17.7465 4.76899 17.2738 4.587C16.7897 4.40062 16.3536 4.16869 16.089 3.90404C15.8243 3.6394 15.5924 3.20335 15.406 2.71926C15.224 2.24654 15.1047 1.77959 15.0413 1.49763ZM14.4964 3.139C14.9555 4.30255 15.6905 5.03751 16.854 5.49666C15.6907 5.95548 14.9553 6.68969 14.4964 7.85299C14.0378 6.68993 13.3031 5.95528 12.14 5.49666C13.3033 5.03771 14.0376 4.30231 14.4964 3.139Z", fill: "currentColor" }),
5
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.55535 5.97566C7.42933 5.39847 6.56967 5.39855 6.44376 5.97577C6.3559 6.37855 6.17724 7.10496 5.89522 7.85362C5.60854 8.61465 5.23608 9.34063 4.78623 9.79012C4.33703 10.239 3.61201 10.6106 2.85198 10.8967C2.10429 11.1781 1.37878 11.3565 0.976004 11.4443C0.398567 11.5701 0.398646 12.4302 0.976106 12.556C1.37908 12.6438 2.10513 12.8221 2.85332 13.1037C3.61387 13.3899 4.33931 13.7618 4.78859 14.2111C5.23788 14.6604 5.60979 15.3858 5.89601 16.1464C6.17759 16.8946 6.35592 17.6206 6.44369 18.0236C6.56945 18.601 7.42955 18.6011 7.55542 18.0237C7.64322 17.6209 7.82156 16.8954 8.10299 16.1477C8.38907 15.3877 8.76071 14.6627 9.20956 14.2134C9.65905 13.7636 10.385 13.3911 11.1461 13.1045C11.8947 12.8224 12.6211 12.6438 13.0239 12.5559C13.6011 12.43 13.6012 11.5703 13.024 11.4443C12.6214 11.3564 11.8956 11.1778 11.1474 10.8959C10.3869 10.6094 9.66133 10.2372 9.21192 9.78776C8.76251 9.33836 8.39031 8.61279 8.10378 7.85228C7.8219 7.10412 7.64324 6.37824 7.55535 5.97566ZM6.99971 7.72905C7.32853 8.71941 7.75702 9.74708 8.50481 10.4949C9.25261 11.2427 10.2803 11.6712 11.2706 12C10.2793 12.329 9.25042 12.7578 8.50217 13.5066C7.75568 14.2537 7.32793 15.2799 6.99971 16.269C6.67134 15.2789 6.24323 14.2515 5.4957 13.504C4.74817 12.7564 3.72074 12.3283 2.73064 12C3.71974 11.6718 4.74597 11.244 5.49306 10.4975C6.2419 9.74927 6.67074 8.72041 6.99971 7.72905Z", fill: "currentColor" })));
6
+ };