@skbkontur/markdown 2.6.3 → 2.7.0-alpha.0

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

@@ -1,39 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { Button, Hint, Spinner, Toast, Tooltip } from '@skbkontur/react-ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { TooltipButtonsWrapper, TooltipContentWrapper, TooltipWrapper } from './AIActionsDropdown.styled';
@@ -43,34 +7,29 @@ import { NatureFxSparkleA2 } from '../../../MarkdownIcons/NatureFxSparkleA2';
 import { MarkdownMenuItem } from '../../Markdown.styled';
 import { MarkdownTids } from '../../MarkdownTids';
 import { Guid } from '../../utils/guid';
+import { onInsertText } from '../../utils/onInsertText';
 import { RequestStatus } from '../../utils/requestStatus';
 import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
-export var AIActionsDropdown = function (_a) {
-    var _b, _c, _d, _e;
-    var textareaRef = _a.textareaRef, isPreviewMode = _a.isPreviewMode, showActionHint = _a.showActionHint, api = _a.api;
-    var _f = useState(), processedText = _f[0], setProcessedText = _f[1];
-    var _g = useState(RequestStatus.Default), requestStatus = _g[0], setRequestStatus = _g[1];
-    var tooltipRef = useRef(null);
-    var taskIdRef = useRef(new Guid());
-    var availableMethods = api.availableMethods, onSendMessage = api.onSendMessage;
-    var htmlTextArea = (_b = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _b === void 0 ? void 0 : _b.node;
-    var selectionStart = (_c = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionStart) !== null && _c !== void 0 ? _c : 0;
-    var selectionEnd = (_d = htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.selectionEnd) !== null && _d !== void 0 ? _d : 0;
-    useEffect(function () {
+export const AIActionsDropdown = ({ textareaRef, isPreviewMode, showActionHint, api }) => {
+    const [processedText, setProcessedText] = useState();
+    const [requestStatus, setRequestStatus] = useState(RequestStatus.Default);
+    const tooltipRef = useRef(null);
+    const taskIdRef = useRef(new Guid());
+    const { availableMethods, onSendMessage } = api;
+    const htmlTextArea = textareaRef?.current?.node;
+    const selectionStart = htmlTextArea?.selectionStart ?? 0;
+    const selectionEnd = htmlTextArea?.selectionEnd ?? 0;
+    useEffect(() => {
         handleCloseTooltip();
     }, [selectionStart, selectionEnd]);
-    useEffect(function () {
-        var _a;
+    useEffect(() => {
         if (processedText)
-            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
+            tooltipRef.current?.show();
     }, [processedText]);
-    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 : '';
-    var isEmptySelected = selectionEnd === selectionStart;
+    const value = htmlTextArea?.value.substring(Number(selectionStart), selectionEnd ?? undefined) ?? '';
+    const isEmptySelected = selectionEnd === selectionStart;
     return (React.createElement(Tooltip, { key: processedText, ref: tooltipRef, pos: "top right", allowedPositions: ['top right', 'right middle', 'bottom right', 'bottom left'], trigger: "manual", render: renderTooltipContent },
-        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) {
-            var method = _a.method, caption = _a.caption;
-            return (React.createElement(MarkdownMenuItem, { key: method, onClick: function () { return handleProcessText(method); } }, caption));
-        }))));
+        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(({ method, caption }) => (React.createElement(MarkdownMenuItem, { key: method, onClick: () => 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" });
@@ -79,69 +38,44 @@ export var AIActionsDropdown = function (_a) {
             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), onMouseDown: function (e) { return e.preventDefault(); }, onClick: handleCopyText }))))));
+                    React.createElement(Button, { "aria-label": COPY_BUTTON_TEXT, icon: React.createElement(Copy, null), onMouseDown: e => e.preventDefault(), onClick: handleCopyText }))))));
     }
-    function handleProcessText(method) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var taskId, response, e_1;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        taskId = taskIdRef.current.generate();
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.show();
-                        setRequestStatus(RequestStatus.isFetching);
-                        return [4 /*yield*/, onSendMessage(value, method)];
-                    case 2:
-                        response = _b.sent();
-                        /*  Игнорируем ответ, если это не последний запрос Например, закрыли тултип и отправили новый запрос */
-                        if (response && taskId === taskIdRef.current.generated) {
-                            setRequestStatus(RequestStatus.isLoaded);
-                            setProcessedText(value.trim() === response ? ERRORS_NOT_FOUND_TEXT : response);
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        e_1 = _b.sent();
-                        if (taskId === taskIdRef.current.generated) {
-                            handleCloseTooltip();
-                            Toast.push('Ошибка обработки текста');
-                        }
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
+    async function handleProcessText(method) {
+        const taskId = taskIdRef.current.generate();
+        try {
+            tooltipRef?.current?.show();
+            setRequestStatus(RequestStatus.isFetching);
+            const response = await onSendMessage(value, method);
+            /*  Игнорируем ответ, если это не последний запрос Например, закрыли тултип и отправили новый запрос */
+            if (response && taskId === taskIdRef.current.generated) {
+                setRequestStatus(RequestStatus.isLoaded);
+                setProcessedText(value.trim() === response ? ERRORS_NOT_FOUND_TEXT : response);
+            }
+        }
+        catch (e) {
+            if (taskId === taskIdRef.current.generated) {
+                handleCloseTooltip();
+                Toast.push('Ошибка обработки текста');
+            }
+        }
     }
-    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*/];
-                }
-            });
-        });
+    async function handleCopyText() {
+        await navigator.clipboard.writeText(processedText || '');
+        handleCloseTooltip();
     }
     function handleSetText() {
-        if (!(textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current))
+        if (!textareaRef?.current)
             return null;
         textareaRef.current.focus();
-        var valueLength = value.length;
-        var spaceInStartCount = valueLength - value.trimStart().length;
-        var spaceInEndCount = valueLength - value.trimEnd().length;
-        htmlTextArea === null || htmlTextArea === void 0 ? void 0 : htmlTextArea.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
-        document.execCommand('insertText', false, processedText);
+        const valueLength = value.length;
+        const spaceInStartCount = valueLength - value.trimStart().length;
+        const spaceInEndCount = valueLength - value.trimEnd().length;
+        htmlTextArea?.setSelectionRange(selectionStart + spaceInStartCount, selectionEnd - spaceInEndCount);
+        onInsertText(processedText);
         handleCloseTooltip();
     }
     function handleCloseTooltip() {
-        var _a;
         setProcessedText(undefined);
-        (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        tooltipRef?.current?.hide();
     }
 };

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

@@ -1,9 +1,17 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 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"])));
-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"])));
-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"])));
-var templateObject_1, templateObject_2, templateObject_3;
+export const TooltipWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 300px;
+`;
+export const TooltipContentWrapper = styled.div `
+  max-height: 400px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+`;
+export const TooltipButtonsWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;

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

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

package/src/Markdown/MarkdownActions/MarkdownActions.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { AIActionsDropdown } from './AIActionsDropdown/AIActionsDropdown';
 import { MarkdownDropdown } from './MarkdownDropdown/MarkdownDropdown';
@@ -28,57 +17,55 @@ import { setMarkdown } from '../MarkdownHelpers/markdownHelpers';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from '../MarkdownHelpItems';
 import { MarkdownTids } from '../MarkdownTids';
 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, AIApi = _a.AIApi;
-    var isPreviewMode = viewMode === ViewMode.Preview;
-    return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
+export const MarkdownActions = ({ textAreaRef, selectionStart, selectionEnd, loadingFile, onOpenFileDialog, onClickFullscreen, fullscreen, viewMode, onChangeViewMode, horizontalPaddings, hasFilesApi, width, showActionHints, showShortKeys, hideOptions, onSelectEmoji, isSplitViewAvailable, disableFullscreen, AIApi, }) => {
+    const isPreviewMode = viewMode === ViewMode.Preview;
+    return (React.createElement(MarkdownActionsWrapper, { ...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, { 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); } },
-                    React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); }))),
-                markdownHelpText.map(function (helper, idx) {
+                !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((helper, idx) => (React.createElement(MarkdownMenuItem, { key: idx, "data-tid": helper.tid, onClick: (event) => handleMarkdownItemClick(event, helper.format) },
+                    React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node })))))),
+                markdownHelpText.map((helper, idx) => {
                     if (isHiddenOptions(helper.format))
                         return null;
-                    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); } }));
+                    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: event => handleMarkdownItemClick(event, helper.format) }));
                 }),
-                markdownHelpLists.map(function (helper, idx) {
+                markdownHelpLists.map((helper, idx) => {
                     if (isHiddenOptions(helper.format))
                         return null;
-                    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); } }));
+                    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: event => handleMarkdownItemClick(event, helper.format) }));
                 }),
-                markdownHelpOther.map(function (helper, idx) {
+                markdownHelpOther.map((helper, idx) => {
                     if (isHiddenOptions(helper.format))
                         return null;
-                    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); } }));
+                    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: event => handleMarkdownItemClick(event, helper.format) }));
                 }),
-                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 })),
-                !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
-                !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.AI) && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
+                hasFilesApi && !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 })),
+                !hideOptions?.emoji && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
+                !hideOptions?.AI && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
             React.createElement(ActionsRightWrapper, null,
-                !(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 })),
-                !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
-                !(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 }))))));
+                !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 })),
+                !hideOptions?.viewMode && renderViewModeButton(),
+                !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 }))))));
     function renderViewModeButton() {
         return (React.createElement(ViewModeButtonsWrapper, null,
-            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); } })),
-            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); } })),
-            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); } }))));
+            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: () => onChangeViewMode(ViewMode.Split) })),
+            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: () => onChangeViewMode(ViewMode.Edit) })),
+            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: () => onChangeViewMode(ViewMode.Preview) }))));
     }
     function handleMarkdownItemClick(event, format) {
-        var _a;
         if (!isNaN(Number(selectionStart)) && !isNaN(Number(selectionEnd))) {
             event.stopPropagation();
             event.preventDefault();
-            if (textAreaRef === null || textAreaRef === void 0 ? void 0 : textAreaRef.current) {
+            if (textAreaRef?.current) {
                 textAreaRef.current.focus();
-                var htmlTextArea = textAreaRef.current.node;
+                const htmlTextArea = textAreaRef.current.node;
                 htmlTextArea.selectionStart = Number(selectionStart);
                 htmlTextArea.selectionEnd = Number(selectionEnd);
-                setMarkdown(htmlTextArea, (_a = htmlTextArea.value) !== null && _a !== void 0 ? _a : '', format, Number(selectionStart), selectionEnd);
+                setMarkdown(htmlTextArea, htmlTextArea.value ?? '', format, Number(selectionStart), selectionEnd);
             }
         }
     }
     function isHiddenOptions(format) {
-        return hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions[format];
+        return hideOptions?.[format];
     }
 };

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

@@ -2,11 +2,7 @@ import { Dropdown } from '@skbkontur/react-ui';
 import React from 'react';
 import { Wrapper } from './MarkdownDropdown.styled';
 import { MarkdownFormatButton } from '../../MarkdownHelpers/MarkdownFormatButton';
-export var MarkdownDropdown = function (_a) {
-    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;
-    return (React.createElement(Wrapper, { onMouseDown: function (e) { return e.preventDefault(); } },
-        React.createElement(Dropdown, { disablePortal: true, disabled: disabled, caption: caption, menuWidth: menuWidth !== null && menuWidth !== void 0 ? menuWidth : 300, _renderButton: function (_a) {
-                var onClick = _a.onClick;
-                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(); } }));
-            }, onOpen: onOpen }, children)));
+export const MarkdownDropdown = ({ dataTid, icon, disabled, children, caption, onOpen, menuWidth, hintText, showActionHint, showHintWhenDisabled, hintPos, }) => {
+    return (React.createElement(Wrapper, { onMouseDown: e => e.preventDefault() },
+        React.createElement(Dropdown, { disablePortal: true, disabled: disabled, caption: caption, menuWidth: menuWidth ?? 300, _renderButton: ({ onClick }) => (React.createElement(MarkdownFormatButton, { showText: true, dataTid: dataTid, hintPos: hintPos, showActionHint: showActionHint, showHintWhenDisabled: showHintWhenDisabled, disabled: disabled, hintText: hintText, icon: icon, text: caption, onClick: () => onClick() })), onOpen: onOpen }, children)));
 };

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

@@ -1,7 +1,9 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from '../../../styles/styled-components';
-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; });
-var templateObject_1;
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: center;
+
+  button {
+    font-size: ${p => p.theme.elementsFontSize};
+  }
+`;

package/src/Markdown/MarkdownEditor.js

@@ -1,41 +1,19 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Textarea } from '@skbkontur/react-ui';
 import { ValidationWrapper } from '@skbkontur/react-ui-validations';
 import React from 'react';
 import { useDropzone } from 'react-dropzone';
 import { createMarkdownHelpKeyDownHandler } from './MarkdownHelpers/markdownHelpers';
-export var MarkdownEditor = function (props) {
-    var _a = props.resize, resize = _a === void 0 ? 'none' : _a, _b = props.width, width = _b === void 0 ? '100%' : _b, _c = props.autoResize, autoResize = _c === void 0 ? true : _c, _d = props.showLengthCounter, propsShowLengthCounter = _d === void 0 ? true : _d, textareaRef = props.textareaRef, validationInfo = props.validationInfo, renderMessage = props.renderMessage, withValidationWrapper = props.withValidationWrapper, rest = __rest(props, ["resize", "width", "autoResize", "showLengthCounter", "textareaRef", "validationInfo", "renderMessage", "withValidationWrapper"]);
-    var getInputProps = useDropzone().getInputProps;
+export const MarkdownEditor = props => {
+    const { resize = 'none', width = '100%', autoResize = true, showLengthCounter: propsShowLengthCounter = true, textareaRef, validationInfo, renderMessage, withValidationWrapper, ...rest } = props;
+    const { getInputProps } = useDropzone();
     return withValidationWrapper ? (React.createElement(ValidationWrapper, { validationInfo: validationInfo, renderMessage: renderMessage }, renderTextarea())) : (renderTextarea());
     function renderTextarea() {
-        return (React.createElement(Textarea, __assign({ ref: textareaRef, id: "MarkdownTextArea" }, rest, getInputProps, { resize: resize, width: width, showLengthCounter: showLengthCounter(), autoResize: autoResize, onKeyDown: createMarkdownHelpKeyDownHandler(props.value || '', textareaRef, props.onKeyDown) })));
+        return (React.createElement(Textarea, { ref: textareaRef, id: "MarkdownTextArea", ...rest, ...getInputProps, resize: resize, width: width, showLengthCounter: showLengthCounter(), autoResize: autoResize, onKeyDown: createMarkdownHelpKeyDownHandler(props.value || '', textareaRef, props.onKeyDown) }));
     }
     function showLengthCounter() {
         if (propsShowLengthCounter) {
-            var value = rest.value, maxLength = rest.maxLength;
-            return Number(maxLength) - Number(value === null || value === void 0 ? void 0 : value.length) <= 500;
+            const { value, maxLength } = rest;
+            return Number(maxLength) - Number(value?.length) <= 500;
         }
         return false;
     }