@skbkontur/markdown 2.5.8-alpha.1 → 2.5.8-alpha.10

package/index.d.ts

@@ -2,6 +2,6 @@ export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
 export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
 export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
 export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
-export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, AIMethod, } from '././src/Markdown/types';
+export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, AIMethod, AIApi, } from '././src/Markdown/types';
 export { ThemeMode, ColorScheme } from './src/styles/types';
 export { MarkdownTheme, MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.5.8-alpha.1",
+  "version": "2.5.8-alpha.10",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/Markdown/Markdown.d.ts

@@ -1,11 +1,9 @@
 import { FC, ReactNode } from 'react';
 import { MarkdownEditorProps } from './MarkdownEditor';
-import { AIMethod, HideActionsOptions, HorizontalPaddings, MarkdownApi, ViewMode } from './types';
+import { HideActionsOptions, HorizontalPaddings, MarkdownApi, ViewMode } from './types';
 export interface MarkdownProps extends MarkdownEditorProps {
     /** Методы апи для загрузки/скачивания файлов, меншена, ИИ */
     api?: MarkdownApi;
-    /** Доступные методы ИИ апи */
-    availableAIMethods?: AIMethod[];
     /** Режим прозрачной рамки у Textarea */
     borderless?: boolean;
     /** Url апи для файлов  */

package/src/Markdown/Markdown.js

@@ -43,8 +43,7 @@ import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
 export var Markdown = function (props) {
     var _a;
-    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"]);
-    var textareaRef = useRef(null);
+    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"]);
     var _c = useState(), mention = _c[0], setMention = _c[1];
     var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
     var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
@@ -52,6 +51,8 @@ export var Markdown = function (props) {
     var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
     var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
     var guid = useRef(new Guid().generate()).current;
+    var textareaRef = useRef(null);
+    var textareaNode = getTextareaNode();
     var isEditMode = viewMode !== ViewMode.Preview;
     var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
     var _j = useResponsiveLayout({
@@ -65,9 +66,9 @@ export var Markdown = function (props) {
     useListenTextareaScroll(resetMention, textareaRef.current);
     var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
     useLayoutEffect(function () {
-        var _a;
-        var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
-        setInitialWidth(textareaNode.clientWidth);
+        var textareaNode = getTextareaNode();
+        if (textareaNode)
+            setInitialWidth(textareaNode.clientWidth);
     }, []);
     useEffect(function () {
         if (fullscreen && isSplitViewAvailable)
@@ -80,23 +81,31 @@ export var Markdown = function (props) {
             setFullScreen(false);
     }, [isMobile]);
     useEffect(function () {
-        var _a;
         if (fullscreen && isEditMode && textareaRef) {
-            var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
-            if (textareaNode) {
-                textareaNode.focus();
-                textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
-                textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+            var textareaNode_1 = getTextareaNode();
+            if (textareaNode_1) {
+                textareaNode_1.focus();
+                textareaNode_1.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
+                textareaNode_1.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
             }
         }
     }, [fullscreen, isEditMode, selectionEnd, selectionStart, textareaRef]);
+    useEffect(function () {
+        var handleSelectionChange = function () {
+            var textareaNode = getTextareaNode();
+            setSelectionStart(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart);
+            setSelectionEnd(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionEnd);
+        };
+        document.addEventListener('selectionchange', handleSelectionChange);
+        return function () { return document.removeEventListener('selectionchange', handleSelectionChange); };
+    }, []);
     var horizontalPaddings = {
         panelPadding: panelHorizontalPadding,
         fullscreenPadding: fullscreenTextareaPadding,
     };
     var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
         React.createElement(Wrapper, __assign({}, getRootProps()),
-            !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showActionHints: showActionHints !== undefined ? showActionHints : showShotKeys, showShortKeys: showShortKeys !== undefined ? showShortKeys : showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, availableAIMethods: availableAIMethods, AIApi: api === null || api === void 0 ? void 0 : api.AIApi, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
+            !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showActionHints: showActionHints !== undefined ? showActionHints : showShotKeys, showShortKeys: showShortKeys !== undefined ? showShortKeys : showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, AIApi: api === null || api === void 0 ? void 0 : api.AIApi, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
             isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
             fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
                 React.createElement(SplitViewEditContainer, null, renderEditContainer()),
@@ -122,7 +131,7 @@ export var Markdown = function (props) {
         return (React.createElement(MarkdownEditorBlock, null,
             React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
             showMention && renderMentions(),
-            React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
+            React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelect, onClick: listenClick }))));
     }
     function renderPreview() {
         var _a;
@@ -131,9 +140,7 @@ export var Markdown = function (props) {
         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 }))));
     }
     function renderMentions() {
-        var _a;
-        if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
-            var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+        if (textareaNode && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
             var position = getCursorCoordinates(textareaNode, guid);
             return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
         }
@@ -143,18 +150,13 @@ export var Markdown = function (props) {
         onChangeViewMode === null || onChangeViewMode === void 0 ? void 0 : onChangeViewMode(mode);
     }
     function handleSelectUser(login, name) {
-        if (textareaRef.current && mention) {
-            var htmlTextArea = textareaRef.current;
-            htmlTextArea.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
+        if (textareaNode && mention) {
+            textareaNode.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
             document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
             resetMention();
         }
     }
-    function listenSelection(event) {
-        var _a = event.currentTarget, textSelectionStart = _a.selectionStart, textSelectionEnd = _a.selectionEnd;
-        console.log('textSelectionStart', textSelectionStart);
-        setSelectionStart(textSelectionStart);
-        setSelectionEnd(textSelectionEnd);
+    function listenSelect(event) {
         onSelect && onSelect(event);
         checkMention(event);
     }
@@ -174,6 +176,7 @@ export var Markdown = function (props) {
         resetMention();
         setSelectionStart(undefined);
         setSelectionEnd(undefined);
+        textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.setSelectionRange(0, 0);
     }
     function resetMention() {
         setMention(undefined);
@@ -182,4 +185,8 @@ export var Markdown = function (props) {
         setViewMode(function (prevState) { return (prevState !== ViewMode.Split && isSplitViewAvailable ? ViewMode.Split : ViewMode.Edit); });
         setFullScreen(!fullscreen);
     }
+    function getTextareaNode() {
+        var _a;
+        return (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+    }
 };

package/src/Markdown/Markdown.styled.js

@@ -56,7 +56,7 @@ export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_17 ||
 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"])));
 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"])));
 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; });
-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; });
+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; });
 export var MarkdownEditorBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 export var getMarkdownMentionStyle = function (x, y) { return ({
     position: 'absolute',

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts

@@ -1,13 +1,10 @@
 import { Textarea } from '@skbkontur/react-ui';
 import { FC, RefObject } from 'react';
-import { AIMethod, Nullable } from '../../types';
+import { AIApi } from '../../types';
 interface Props {
-    api: (query: string, type: string) => Promise<string>;
-    availableMethods: AIMethod[];
+    api: AIApi;
     textareaRef: RefObject<Textarea>;
     isPreviewMode?: boolean;
-    selectionEnd?: Nullable<number>;
-    selectionStart?: Nullable<number>;
 }
 export declare const AIActionsDropdown: FC<Props>;
 export {};

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js

@@ -34,41 +34,55 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { Button, Spinner, Toast, Tooltip } from '@skbkontur/react-ui';
+import { Button, Hint, Spinner, Toast, Tooltip } from '@skbkontur/react-ui';
 import React, { useEffect, useRef, useState } from 'react';
-import { TooltipWrapper } from './AIActionsDropdown.styled';
+import { DropdownCaptionWrapper, TooltipButtonsWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
+import { COPY_BUTTON_TEXT, ERRORS_NOT_FOUND_TEXT } from './constants';
+import { Copy } from '../../../MarkdownIcons/Copy';
+import { NatureFxSparkleA2 } from '../../../MarkdownIcons/NatureFxSparkleA2';
 import { MarkdownMenuItem } from '../../Markdown.styled';
 import { Guid } from '../../utils/guid';
 import { RequestStatus } from '../../utils/requestStatus';
 import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
 export var AIActionsDropdown = function (_a) {
-    var selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, availableMethods = _a.availableMethods, api = _a.api;
-    var _b = useState(), processedText = _b[0], setProcessedText = _b[1];
-    var _c = useState(RequestStatus.Default), requestStatus = _c[0], setRequestStatus = _c[1];
+    var _b;
+    var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, api = _a.api;
+    var _c = useState(), processedText = _c[0], setProcessedText = _c[1];
+    var _d = useState(RequestStatus.Default), requestStatus = _d[0], setRequestStatus = _d[1];
     var tooltipRef = useRef(null);
     var taskIdRef = useRef(new Guid());
+    var availableMethods = api.availableMethods, onSendMessage = api.onSendMessage;
+    var htmlTextArea = (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.node;
+    var selectionStart = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionStart;
+    var selectionEnd = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionEnd;
     useEffect(function () {
         handleCloseTooltip();
-    }, [selectionStart, selectionEnd, api]);
+    }, [selectionStart, selectionEnd]);
     if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
         return null;
-    var htmlTextArea = textareaRef.current.node;
-    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) {
-        var method = _a.method, caption = _a.caption;
-        return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
-    })));
-    return (React.createElement(Tooltip, { ref: tooltipRef, trigger: "manual", render: renderTooltipContent, onClose: handleCloseTooltip }, content));
+    var value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
+    var isEmptySelected = selectionEnd === selectionStart;
+    return (React.createElement(Tooltip, { ref: tooltipRef, pos: "top right", allowedPositions: ['top right', 'right middle', 'bottom right'], trigger: "manual", render: renderTooltipContent, onClose: handleCloseTooltip },
+        React.createElement(MarkdownDropdown, { hintText: isEmptySelected ? 'Выдели текст' : 'ИИ-помощник', caption: React.createElement(DropdownCaptionWrapper, null,
+                React.createElement(NatureFxSparkleA2, null),
+                " \u0418\u0418"), menuWidth: 180, disabled: isPreviewMode || isEmptySelected, onOpen: handleCloseTooltip }, availableMethods.map(function (_a) {
+            var method = _a.method, caption = _a.caption;
+            return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
+        }))));
     function renderTooltipContent() {
         if (requestStatus === RequestStatus.isFetching)
             return React.createElement(Spinner, { caption: "\u041E\u0431\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0435\u043C", type: "mini" });
         return (React.createElement(TooltipWrapper, null,
             React.createElement("div", null, processedText),
-            React.createElement(Button, { onClick: handleSetText }, "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442")));
+            processedText !== ERRORS_NOT_FOUND_TEXT && (React.createElement(TooltipButtonsWrapper, null,
+                React.createElement(Button, { onClick: handleSetText }, "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442"),
+                React.createElement(Hint, { text: COPY_BUTTON_TEXT },
+                    React.createElement(Button, { "aria-label": COPY_BUTTON_TEXT, icon: React.createElement(Copy, null), onClick: handleCopyText }))))));
     }
     function handleProcessText(method) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var taskId, value, response, e_1;
+            var taskId, response, e_1;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -76,17 +90,17 @@ export var AIActionsDropdown = function (_a) {
                         (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
                         taskId = taskIdRef.current.generate();
                         setRequestStatus(RequestStatus.isFetching);
-                        value = htmlTextArea.value.substring(Number(selectionStart), selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
-                        return [4 /*yield*/, api(value, method)];
+                        return [4 /*yield*/, onSendMessage(value, method)];
                     case 1:
                         response = _b.sent();
                         if (response && taskId === taskIdRef.current.generated) {
                             setRequestStatus(RequestStatus.isLoaded);
-                            setProcessedText(response);
+                            setProcessedText(value === response ? ERRORS_NOT_FOUND_TEXT : response);
                         }
                         return [3 /*break*/, 3];
                     case 2:
                         e_1 = _b.sent();
+                        handleCloseTooltip();
                         Toast.push('Ошибка обработки текста');
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
@@ -94,10 +108,27 @@ export var AIActionsDropdown = function (_a) {
             });
         });
     }
+    function handleCopyText() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, navigator.clipboard.writeText(processedText || '')];
+                    case 1:
+                        _a.sent();
+                        handleCloseTooltip();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
     function handleSetText() {
         if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
             return null;
         textareaRef.current.focus();
+        var valueLength = value.length;
+        var spaceInStartCount = valueLength - value.trimStart().length;
+        var spaceInEndCount = valueLength - value.trimEnd().length;
+        htmlTextArea.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
         document.execCommand('insertText', false, processedText);
         handleCloseTooltip();
     }

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.d.ts

@@ -1 +1,3 @@
 export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
+export declare const TooltipButtonsWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;
+export declare const DropdownCaptionWrapper: import("styled-components").StyledComponent<"div", import("../../../..").MarkdownTheme, {}, never>;

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.styled.js

@@ -4,4 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '../../../styles/styled-components';
 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"])));
-var templateObject_1;
+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"])));
+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"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ERRORS_NOT_FOUND_TEXT = "\u041E\u0448\u0438\u0431\u043E\u043A \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
+export declare const COPY_BUTTON_TEXT = "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C";

package/src/Markdown/MarkdownActions/AIActionsDropdown/constants.js

@@ -0,0 +1,2 @@
+export var ERRORS_NOT_FOUND_TEXT = 'Ошибок не найдено';
+export var COPY_BUTTON_TEXT = 'Скопировать';

package/src/Markdown/MarkdownActions/MarkdownActions.d.ts

@@ -1,7 +1,7 @@
 import { Textarea } from '@skbkontur/react-ui';
 import { FC, RefObject } from 'react';
 import { EmojiData } from '../Emoji/Emoji.logic';
-import { AIMethod, HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from '../types';
+import { AIApi, HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from '../types';
 interface Props {
     horizontalPaddings: HorizontalPaddings;
     onChangeViewMode: (viewMode: ViewMode) => void;
@@ -12,12 +12,12 @@ interface Props {
     showShortKeys: boolean;
     textAreaRef: RefObject<Textarea>;
     viewMode: ViewMode;
-    AIApi?: (query: string, method: string) => Promise<string>;
-    availableAIMethods?: AIMethod[];
+    AIApi?: AIApi;
     disableFullscreen?: boolean;
     fullscreen?: boolean;
     hasFilesApi?: boolean;
     hideOptions?: HideActionsOptions;
+    isFocused?: boolean;
     isSplitViewAvailable?: boolean;
     loadingFile?: boolean;
     selectionEnd?: Nullable<number>;

package/src/Markdown/MarkdownActions/MarkdownActions.js

@@ -28,12 +28,12 @@ import { setMarkdown } from '../MarkdownHelpers/markdownHelpers';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from '../MarkdownHelpItems';
 import { ViewMode } from '../types';
 export var MarkdownActions = function (_a) {
-    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, availableAIMethods = _a.availableAIMethods, AIApi = _a.AIApi;
+    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;
     var isPreviewMode = viewMode === ViewMode.Preview;
     return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
         React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
             React.createElement(ActionsLeftWrapper, null,
-                !(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); } },
+                !(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); } },
                     React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); }))),
                 markdownHelpText.map(function (helper, idx) {
                     if (isHiddenOptions(helper.format))
@@ -52,9 +52,9 @@ export var MarkdownActions = function (_a) {
                 }),
                 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 })),
                 !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
-                !(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 })),
-                !(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 }))),
+                !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!AIApi && (React.createElement(AIActionsDropdown, { textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
             React.createElement(ActionsRightWrapper, null,
+                !(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 })),
                 !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
                 !(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 }))))));
     function renderViewModeButton() {

package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.d.ts

@@ -1,8 +1,9 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 interface Props {
-    caption: string;
+    caption: ReactNode;
+    disabled?: boolean;
     hintText?: string;
-    isPreviewMode?: boolean;
+    icon?: ReactElement;
     menuWidth?: number;
     onOpen?: () => void;
 }

package/src/Markdown/MarkdownActions/MarkdownDropdown/MarkdownDropdown.js

@@ -2,11 +2,11 @@ import { Dropdown, Hint } from '@skbkontur/react-ui';
 import React, { useState } from 'react';
 import { Wrapper } from './MarkdownDropdown.styled';
 export var MarkdownDropdown = function (_a) {
-    var isPreviewMode = _a.isPreviewMode, children = _a.children, caption = _a.caption, onOpen = _a.onOpen, menuWidth = _a.menuWidth, hintText = _a.hintText;
+    var icon = _a.icon, disabled = _a.disabled, children = _a.children, caption = _a.caption, onOpen = _a.onOpen, menuWidth = _a.menuWidth, hintText = _a.hintText;
     var _b = useState(false), isOpened = _b[0], setIsOpened = _b[1];
     return (React.createElement(Wrapper, { onMouseDown: function (e) { return e.preventDefault(); } },
         React.createElement(Hint, { text: hintText, pos: "top left", manual: isOpened, opened: !isOpened },
-            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))));
+            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))));
     function handleOpen() {
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         setIsOpened(true);

package/src/Markdown/types.d.ts

@@ -25,9 +25,19 @@ export interface User {
     teams: RefItem[];
     sid?: string;
 }
-export interface MarkdownApi {
+export interface AIMethod {
+    caption: string;
+    method: string;
+}
+export interface AIApi {
+    /** Доступные методы ИИ апи */
+    availableMethods: AIMethod[];
     /** Метод для обработки текста с помощью ИИ */
-    AIApi?: (query: string, method: string) => Promise<string>;
+    onSendMessage: (query: string, method: string) => Promise<Nullable<string>>;
+}
+export interface MarkdownApi {
+    /** Апи для взаимодействия с ИИ */
+    AIApi?: AIApi;
     /** Метод для загрузки файла */
     fileDownloadApi?: (id: string) => Promise<File>;
     /** Метод для скачивания файла */
@@ -42,7 +52,3 @@ export interface TestCase<V, E> {
 }
 export type ReactUIThemeType = Partial<typeof THEME_2022>;
 export type HideActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'viewMode' | 'screenMode' | 'help' | 'allActions' | 'AI', boolean>>;
-export interface AIMethod {
-    caption: string;
-    method: string;
-}

package/src/MarkdownIcons/Copy.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Copy: FC;

package/src/MarkdownIcons/Copy.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var Copy = function () {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 2C5.34315 2 4 3.34315 4 5V15C4 16.6569 5.34315 18 7 18H13C14.6569 18 16 16.6569 16 15V5C16 3.34315 14.6569 2 13 2H7ZM5 5C5 3.89543 5.89543 3 7 3H13C14.1046 3 15 3.89543 15 5V15C15 16.1046 14.1046 17 13 17H7C5.89543 17 5 16.1046 5 15V5Z", fill: "currentColor" }),
+        React.createElement("path", { d: "M18 8.5C18 8.22386 17.7761 8 17.5 8C17.2239 8 17 8.22386 17 8.5V15.5C17 17.433 15.433 19 13.5 19H8.5C8.22386 19 8 19.2239 8 19.5C8 19.7761 8.22386 20 8.5 20H13.5C15.9853 20 18 17.9853 18 15.5V8.5Z", fill: "currentColor" })));
+};

package/src/MarkdownIcons/NatureFxSparkleA2.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NatureFxSparkleA2: FC;

package/src/MarkdownIcons/NatureFxSparkleA2.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var NatureFxSparkleA2 = function () {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+        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" }),
+        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" })));
+};