@skbkontur/markdown 1.5.0 → 1.6.0

package/src/Markdown/Markdown.styled.js

@@ -0,0 +1,76 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { Button, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
+import styled, { css } from '../styles/styled-components';
+var panelStyle = function (_a) {
+    var panelPadding = _a.panelPadding, theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 6px ", "px;\n  background-color: ", ";\n  margin-bottom: 12px;\n"], ["\n  padding: 6px ", "px;\n  background-color: ", ";\n  margin-bottom: 12px;\n"])), panelPadding !== null && panelPadding !== void 0 ? panelPadding : 0, theme.colors.panelBg);
+};
+export var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  &:focus-visible {\n    outline: 1px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  &:focus-visible {\n    outline: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.brand; });
+export var Avatar = styled.img.attrs({ alt: '' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  object-fit: cover;\n"])), function (props) { return props.theme.colors.grayDefault; });
+export var UserWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"], ["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
+export var DroppablePlaceholder = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"])), function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : 8); }, function (p) { return (p.theme.themeMode === 'dark' ? 0.1 : 0.7); }, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.droppablePlaceholderBgImage) !== null && _b !== void 0 ? _b : ''; });
+export var MentionWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 6px ", "px;\n"], ["\n  padding: 6px ", "px;\n"])), function (_a) {
+    var _b;
+    var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
+    return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
+});
+export var MarkdownActionsWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n\n  ", "\n"], ["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n\n  ", "\n"])), function (p) { return (p.fullscreenPadding ? '16px' : 0); }, function (p) { var _a; return (_a = p.fullscreenPadding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); }, function (_a) {
+    var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
+    if (panelPadding && !fullscreenPadding)
+        return panelStyle({ theme: theme, panelPadding: panelPadding });
+});
+export var ButtonsWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"])));
+export var ActionsWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+export var MarkdownButtonWrapper = styled(Button)(templateObject_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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 MarkdownDropdown = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  button {\n    font-size: ", ";\n  }\n"], ["\n  button {\n    font-size: ", ";\n  }\n"])), function (p) { return p.theme.elementsFontSize; });
+export var MarkdownSymbolWrapper = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
+export var MarkdownMenuItem = styled(MenuItem)(templateObject_15 || (templateObject_15 = __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 HintContentWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"])));
+export var MarkdownEditorBlock = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var getMarkdownMentionStyle = function (x, y) { return ({
+    position: 'absolute',
+    top: y,
+    left: x,
+}); };
+export var UserDescriptions = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"], ["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"])));
+export var MentionMenuItem = styled(MenuItem)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  padding: 4px 28px;\n"], ["\n  padding: 4px 28px;\n"])));
+export var VisuallyHidden = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"])));
+export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless) {
+    var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
+    return ThemeFactory.create(__assign(__assign(__assign({ tabFontSize: elementsFontSize, tabPaddingY: '0', tabPaddingX: '6px', tabColorHover: 'transparent', tabColorFocus: 'transparent', tabLineHeight: elementsLineHeight, tabBorderWidth: '0', selectBorderWidth: '0', btnDefaultBg: 'transparent', btnDefaultActiveBorderColor: 'transparent', btnDisabledBg: 'transparent', btnDisabledBorderColor: 'transparent', btnDisabledTextColor: colors.disabledButton, btnDefaultHoverBg: themeMode === 'light' ? reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDefaultHoverBg : reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDisabledBg, btnFontSizeSmall: elementsFontSize, checkboxPaddingY: '0', checkboxBg: 'transparent', checkboxHoverBg: 'transparent', checkboxCheckedBg: 'transparent', checkboxShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowHover: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedHoverShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedActiveShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowActive: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedColor: colors.grayDefault, checkboxBoxSize: elementsFontSize, menuItemFontSize: elementsFontSize, menuItemPaddingY: '4px', menuItemPaddingX: '28px', hintFontSize: elementsFontSize, hintColor: themeMode === 'light' ? colors.white : colors.grayDefault, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }, (panelHorizontalPadding &&
+        {
+            textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
+        })), (borderless &&
+        {
+            textareaBorderColor: 'transparent',
+            textareaBorderColorFocus: 'transparent',
+            textareaBorderTopColor: 'transparent',
+            textareaShadow: 'none',
+        })), (fullScreenTextareaPadding &&
+        {
+            textareaMinHeight: '85vh',
+            textareaBorderColor: 'transparent',
+            textareaBorderColorFocus: 'transparent',
+            textareaBorderTopColor: 'transparent',
+            textareaShadow: 'none',
+            textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
+            textareaPaddingY: "0",
+        })), reactUiTheme);
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

package/src/Markdown/MarkdownActions.d.ts

@@ -0,0 +1,20 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { FC, RefObject } from 'react';
+import { HorizontalPaddings, Nullable, ViewMode } from './types';
+interface Props {
+    horizontalPaddings: HorizontalPaddings;
+    onChangeViewMode: (viewMode: ViewMode) => void;
+    onClickFullscreen: () => void;
+    onOpenFileDialog: () => void;
+    textAreaRef: RefObject<Textarea>;
+    viewMode: ViewMode;
+    fullscreen?: boolean;
+    hasFilesApi?: boolean;
+    hideHeadersSelect?: boolean;
+    loadingFile?: boolean;
+    selectionEnd?: Nullable<number>;
+    selectionStart?: Nullable<number>;
+    width?: Nullable<number | string>;
+}
+export declare const MarkdownActions: FC<Props>;
+export {};

package/src/Markdown/MarkdownActions.js

@@ -0,0 +1,64 @@
+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 { Dropdown } from '@skbkontur/react-ui';
+import React from 'react';
+import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
+import { MarkdownCombination } from './MarkdownHelpers/MarkdownCombination';
+import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
+import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
+import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from './MarkdownHelpItems';
+import { ViewMode } from './types';
+import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
+import { Collapse } from '../MarkdownIcons/Collapse';
+import { Expand } from '../MarkdownIcons/Expand';
+import { EyeOpen } from '../MarkdownIcons/EyeOpen';
+import { ToolPencil } from '../MarkdownIcons/ToolPencil';
+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, hideHeadersSelect = _a.hideHeadersSelect, width = _a.width;
+    var isPreviewMode = viewMode === ViewMode.Preview;
+    return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
+        React.createElement(ButtonsWrapper, null,
+            React.createElement(ActionsWrapper, null,
+                hideHeadersSelect || (React.createElement(MarkdownDropdown, null,
+                    React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 280, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
+                        React.createElement(MarkdownCombination, { format: helper.format, text: helper.node }))); })))),
+                markdownHelpText.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
+                markdownHelpLists.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
+                markdownHelpOther.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
+                hasFilesApi && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", 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 }))),
+            React.createElement(ActionsWrapper, null,
+                renderViewModeButton(),
+                React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : 'Развернуть', onClick: onClickFullscreen })))));
+    function renderViewModeButton() {
+        var buttonProps = {
+            hintText: isPreviewMode ? 'Вернуться в редактор' : 'Превью',
+            icon: isPreviewMode ? React.createElement(ToolPencil, null) : React.createElement(EyeOpen, null),
+            onClick: function () { return onChangeViewMode(isPreviewMode ? ViewMode.Edit : ViewMode.Preview); },
+            text: isPreviewMode ? 'Вернуться в редактор' : 'Превью',
+        };
+        return React.createElement(MarkdownFormatButton, __assign({}, buttonProps));
+    }
+    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) {
+                textAreaRef.current.focus();
+                var 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);
+            }
+        }
+    }
+};

package/src/Markdown/MarkdownEditor.d.ts

@@ -0,0 +1,16 @@
+import { Textarea, TextareaProps } from '@skbkontur/react-ui';
+import { ValidationInfo, RenderErrorMessage } from '@skbkontur/react-ui-validations';
+import { FC, RefObject } from 'react';
+import { Nullable } from './types';
+export interface MarkdownEditorProps extends Omit<TextareaProps, 'rows' | 'maxRows' | 'disableAnimations' | 'extraRow'> {
+    disableAnimations?: boolean;
+    extraRow?: boolean;
+    maxRows?: number;
+    /** Рендер сообщения валидации react-ui-validations */
+    renderMessage?: Nullable<RenderErrorMessage>;
+    rows?: number;
+    textareaRef?: RefObject<Textarea>;
+    /** Стандартная валидация из react-ui-validations */
+    validationInfo?: Nullable<ValidationInfo>;
+}
+export declare const MarkdownEditor: FC<MarkdownEditorProps>;

package/src/Markdown/MarkdownEditor.js

@@ -0,0 +1,42 @@
+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, rest = __rest(props, ["resize", "width", "autoResize", "showLengthCounter", "textareaRef", "validationInfo", "renderMessage"]);
+    var getInputProps = useDropzone().getInputProps;
+    return validationInfo ? (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) })));
+    }
+    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;
+        }
+        return false;
+    }
+};

package/src/Markdown/MarkdownFormat.d.ts

@@ -0,0 +1,18 @@
+export declare enum MarkdownFormat {
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4",
+    bold = "bold",
+    italic = "italic",
+    crossed = "crossed",
+    ref = "ref",
+    quote = "quote",
+    codeBlock = "codeBlock",
+    code = "code",
+    list = "list",
+    checkedList = "checkedList",
+    numberedList = "numberedList",
+    table = "table",
+    file = "file",
+    image = "image"
+}

package/src/Markdown/MarkdownFormat.js

@@ -0,0 +1,19 @@
+export var MarkdownFormat;
+(function (MarkdownFormat) {
+    MarkdownFormat["h2"] = "h2";
+    MarkdownFormat["h3"] = "h3";
+    MarkdownFormat["h4"] = "h4";
+    MarkdownFormat["bold"] = "bold";
+    MarkdownFormat["italic"] = "italic";
+    MarkdownFormat["crossed"] = "crossed";
+    MarkdownFormat["ref"] = "ref";
+    MarkdownFormat["quote"] = "quote";
+    MarkdownFormat["codeBlock"] = "codeBlock";
+    MarkdownFormat["code"] = "code";
+    MarkdownFormat["list"] = "list";
+    MarkdownFormat["checkedList"] = "checkedList";
+    MarkdownFormat["numberedList"] = "numberedList";
+    MarkdownFormat["table"] = "table";
+    MarkdownFormat["file"] = "file";
+    MarkdownFormat["image"] = "image";
+})(MarkdownFormat || (MarkdownFormat = {}));

package/src/Markdown/MarkdownHelpItems.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { MarkdownFormat } from './MarkdownFormat';
+import { RefItem } from './types';
+export declare const eventKeyCodeToMarkdownFormat: {
+    [key: number]: MarkdownFormat;
+};
+export declare const markdownFormatToShortKey: Partial<{
+    [key in MarkdownFormat]: string;
+}>;
+export interface MarkdownHelpItem {
+    format: MarkdownFormat;
+    node: ReactNode;
+    text: string;
+    wrapContent: (content: string) => string;
+    checkLength?: number;
+    icon?: ReactNode;
+}
+export declare function checkSpaceSymbol(text: string, checkedLength?: number): {
+    value: string;
+    spaces: string;
+};
+export declare const markdownHelpHeaders: MarkdownHelpItem[];
+export declare const markdownHelpText: MarkdownHelpItem[];
+export declare const markdownHelpLists: MarkdownHelpItem[];
+export declare const markdownHelpOther: MarkdownHelpItem[];
+export interface MarkdownHelpFileItem extends Omit<MarkdownHelpItem, 'wrapContent'> {
+    wrapContent: (file: RefItem) => string;
+}
+export declare const markdownHelpFiles: (fileApiUrl?: string) => MarkdownHelpFileItem[];
+export declare const markdownHelpItems: MarkdownHelpItem[];

package/src/Markdown/MarkdownHelpItems.js

@@ -0,0 +1,243 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var _a;
+import React from 'react';
+import { MarkdownSymbolWrapper } from './Markdown.styled';
+import { MarkdownFormat } from './MarkdownFormat';
+import { AttachLink } from '../MarkdownIcons/AttachLink';
+import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
+import { CheckedList } from '../MarkdownIcons/CheckedList';
+import { List } from '../MarkdownIcons/List';
+import { I } from '../MarkdownIcons/MarkdownIcons.styled';
+import { NumberedList } from '../MarkdownIcons/NumberedList';
+import { Table } from '../MarkdownIcons/Table';
+var newLinesRegexp = /([\n\r]+)/g;
+var spacesMatchRegexp = /\s/gm;
+var spacesSplitRegexp = /(\s+)/;
+export var eventKeyCodeToMarkdownFormat = {
+    50: MarkdownFormat.h2,
+    51: MarkdownFormat.h3,
+    52: MarkdownFormat.h4,
+    66: MarkdownFormat.bold,
+    73: MarkdownFormat.italic,
+    82: MarkdownFormat.crossed,
+    85: MarkdownFormat.ref,
+    76: MarkdownFormat.list,
+    68: MarkdownFormat.checkedList,
+    78: MarkdownFormat.numberedList,
+    69: MarkdownFormat.codeBlock,
+    81: MarkdownFormat.quote,
+    80: MarkdownFormat.image,
+};
+export var markdownFormatToShortKey = (_a = {},
+    _a[MarkdownFormat.h2] = '2',
+    _a[MarkdownFormat.h3] = '3',
+    _a[MarkdownFormat.h4] = '4',
+    _a[MarkdownFormat.bold] = 'B',
+    _a[MarkdownFormat.italic] = 'I',
+    _a[MarkdownFormat.crossed] = 'R',
+    _a[MarkdownFormat.ref] = 'U',
+    _a[MarkdownFormat.list] = 'L',
+    _a[MarkdownFormat.checkedList] = 'D',
+    _a[MarkdownFormat.numberedList] = 'N',
+    _a[MarkdownFormat.codeBlock] = 'E',
+    _a[MarkdownFormat.quote] = 'Q',
+    _a[MarkdownFormat.image] = 'P',
+    _a);
+function reverseString(text) {
+    return text.split('').reverse().join('');
+}
+export function checkSpaceSymbol(text, checkedLength) {
+    var latestSymbolPos = text.length - 1;
+    var latestSymbol = text.charAt(latestSymbolPos);
+    if (latestSymbol.match(spacesMatchRegexp) && checkedLength) {
+        var substringText = reverseString(text).split(spacesSplitRegexp);
+        var spaces = substringText[1];
+        var remainingText = substringText.slice(2);
+        var textWithoutSpaces = remainingText.join('');
+        var reversed = reverseString(textWithoutSpaces);
+        return { value: reversed, spaces: reverseString(spaces) };
+    }
+    return { value: text, spaces: '' };
+}
+export var markdownHelpHeaders = [
+    {
+        format: MarkdownFormat.h2,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "##"),
+            " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2")),
+        wrapContent: function (content) { return "## ".concat(content); },
+        text: 'Заголовок 2',
+    },
+    {
+        format: MarkdownFormat.h3,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "###"),
+            " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3")),
+        wrapContent: function (content) { return "### ".concat(content); },
+        text: 'Заголовок 3',
+    },
+    {
+        format: MarkdownFormat.h4,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "####"),
+            " \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 4")),
+        wrapContent: function (content) { return "#### ".concat(content); },
+        text: 'Заголовок 4',
+    },
+];
+export var markdownHelpText = [
+    {
+        format: MarkdownFormat.bold,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "**"),
+            "\u0416\u0438\u0440\u043D\u044B\u0439",
+            React.createElement(MarkdownSymbolWrapper, null, "**"))),
+        icon: React.createElement("strong", null, "B"),
+        wrapContent: function (content) { return "**".concat(content, "**"); },
+        text: 'Жирный',
+        checkLength: 2,
+    },
+    {
+        format: MarkdownFormat.italic,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "*"),
+            "\u041A\u0443\u0440\u0441\u0438\u0432",
+            React.createElement(MarkdownSymbolWrapper, null, "*"))),
+        icon: React.createElement(I, null, "I"),
+        wrapContent: function (content) { return "*".concat(content, "*"); },
+        text: 'Курсив',
+        checkLength: 1,
+    },
+    {
+        format: MarkdownFormat.crossed,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "~~"),
+            "\u0417\u0430\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439",
+            React.createElement(MarkdownSymbolWrapper, null, "~~"))),
+        icon: (React.createElement("span", { style: {
+                textDecoration: 'line-through',
+            } }, "S")),
+        wrapContent: function (content) { return "~~".concat(content, "~~"); },
+        text: 'Зачеркнутый',
+        checkLength: 2,
+    },
+    {
+        format: MarkdownFormat.ref,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "["),
+            "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0441\u0441\u044B\u043B\u043A\u0438",
+            React.createElement(MarkdownSymbolWrapper, null, "]"),
+            React.createElement(MarkdownSymbolWrapper, null, "("),
+            "\u0421\u0441\u044B\u043B\u043A\u0430",
+            React.createElement(MarkdownSymbolWrapper, null, ")"))),
+        icon: React.createElement(AttachLink, null),
+        wrapContent: function (content) { return "[".concat(content, "]()"); },
+        text: 'Ссылка',
+        checkLength: 1,
+    },
+];
+export var markdownHelpLists = [
+    {
+        format: MarkdownFormat.list,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "*"),
+            " \u0421\u043F\u0438\u0441\u043E\u043A")),
+        icon: React.createElement(List, null),
+        wrapContent: function (content) { return getList(content, '*'); },
+        text: 'Список',
+    },
+    {
+        format: MarkdownFormat.checkedList,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "* [x]"),
+            " \u0421\u043F\u0438\u0441\u043E\u043A - \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u043E")),
+        icon: React.createElement(CheckedList, null),
+        wrapContent: function (content) { return getList(content, '* [x]'); },
+        text: 'Список - выполнено',
+    },
+    {
+        format: MarkdownFormat.numberedList,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "1. "),
+            " \u0421\u043F\u0438\u0441\u043E\u043A - \u043D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439")),
+        icon: React.createElement(NumberedList, null),
+        wrapContent: function (content) { return getList(content, 1); },
+        text: 'Список - нумерованный',
+    },
+];
+export var markdownHelpOther = [
+    {
+        format: MarkdownFormat.codeBlock,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null, "`"),
+            "\u0411\u043B\u043E\u043A \u043A\u043E\u0434\u0430",
+            React.createElement(MarkdownSymbolWrapper, null, "`"))),
+        icon: React.createElement("span", null, '</>'),
+        wrapContent: function (content) { return "`".concat(content, "`"); },
+        text: 'Блок кода',
+        checkLength: 1,
+    },
+    {
+        format: MarkdownFormat.quote,
+        node: (React.createElement(React.Fragment, null,
+            React.createElement(MarkdownSymbolWrapper, null,
+                '>',
+                " "),
+            " \u0426\u0438\u0442\u0430\u0442\u0430")),
+        icon: '>',
+        wrapContent: function (content) { return "> ".concat(content); },
+        text: 'Цитата',
+    },
+    {
+        format: MarkdownFormat.table,
+        node: 'Таблица',
+        icon: React.createElement(Table, null),
+        wrapContent: function () { return "| \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A | \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A |\n| ------ | ------ |\n| \u042F\u0447\u0435\u0439\u043A\u0430 | \u042F\u0447\u0435\u0439\u043A\u0430 |\n| \u042F\u0447\u0435\u0439\u043A\u0430 | \u042F\u0447\u0435\u0439\u043A\u0430 |"; },
+        text: 'Таблица',
+    },
+];
+export var markdownHelpFiles = function (fileApiUrl) {
+    if (!fileApiUrl)
+        return [];
+    return [
+        {
+            format: MarkdownFormat.image,
+            node: '',
+            icon: React.createElement("span", null),
+            wrapContent: function (file) { return "![img](".concat(fileApiUrl).concat(file.id, ")"); },
+            text: 'Картинка',
+        },
+        {
+            format: MarkdownFormat.file,
+            node: '',
+            icon: React.createElement(AttachPaperclip, null),
+            wrapContent: function (file) { return "[".concat(file.caption, "](").concat(fileApiUrl).concat(file.id, ")"); },
+            text: 'Файл',
+        },
+    ];
+};
+export var markdownHelpItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], markdownHelpHeaders, true), markdownHelpText, true), markdownHelpLists, true), markdownHelpOther, true);
+function getList(value, symbol) {
+    var splitValueWithNewLines = value.split(newLinesRegexp);
+    var numberList = [];
+    return splitValueWithNewLines
+        .map(function (v, idx) {
+        if (!newLinesRegexp.test(v)) {
+            if (typeof symbol === 'number') {
+                numberList.push(idx);
+                return "".concat(numberList.length, ". ").concat(v);
+            }
+            return "".concat(symbol, " ").concat(v);
+        }
+        return v;
+    })
+        .join('');
+}

package/src/Markdown/MarkdownHelpers/MarkdownButton.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode, SyntheticEvent } from 'react';
+export interface MarkdownButtonProps {
+    hintText: ReactNode;
+    icon: ReactNode;
+    onClick: (event: SyntheticEvent) => void;
+    text: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+export declare const MarkdownButton: FC<MarkdownButtonProps>;

package/src/Markdown/MarkdownHelpers/MarkdownButton.js

@@ -0,0 +1,10 @@
+import { Hint } from '@skbkontur/react-ui';
+import React from 'react';
+import { MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
+export var MarkdownButton = function (_a) {
+    var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, isLoading = _a.isLoading, disabled = _a.disabled, text = _a.text;
+    return (React.createElement(Hint, { pos: "top center", manual: disabled, text: hintText, maxWidth: 300 },
+        React.createElement(MarkdownButtonWrapper, { borderless: true, loading: isLoading, disabled: disabled, onClick: onClick },
+            icon,
+            React.createElement(VisuallyHidden, null, text))));
+};

package/src/Markdown/MarkdownHelpers/MarkdownCombination.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { MarkdownFormat } from '../MarkdownFormat';
+interface Props {
+    format: MarkdownFormat;
+    text: ReactNode;
+}
+export declare const MarkdownCombination: FC<Props>;
+export {};

package/src/Markdown/MarkdownHelpers/MarkdownCombination.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HintContentWrapper } from '../Markdown.styled';
+import { markdownFormatToShortKey } from '../MarkdownHelpItems';
+import { isMacintosh } from '../utils/isMacintosh';
+export var MarkdownCombination = function (_a) {
+    var format = _a.format, text = _a.text;
+    var shortKey = markdownFormatToShortKey[format];
+    return (React.createElement(HintContentWrapper, null,
+        React.createElement("span", null, text),
+        !!shortKey && (React.createElement("span", null,
+            "CTRL+",
+            isMacintosh() ? '⌥' : 'ALT',
+            "+",
+            markdownFormatToShortKey[format]))));
+};

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { MarkdownButtonProps } from './MarkdownButton';
+import { MarkdownFormat } from '../MarkdownFormat';
+interface Props extends MarkdownButtonProps {
+    format?: MarkdownFormat;
+}
+export declare const MarkdownFormatButton: FC<Props>;
+export {};

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js

@@ -0,0 +1,11 @@
+import { Hint } from '@skbkontur/react-ui';
+import React from 'react';
+import { MarkdownCombination } from './MarkdownCombination';
+import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
+export var MarkdownFormatButton = function (_a) {
+    var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text;
+    return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 340 },
+        React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
+            React.createElement(MarkdownButtonIcon, null, icon),
+            React.createElement(VisuallyHidden, null, text))));
+};

package/src/Markdown/MarkdownHelpers/markdownHelpers.d.ts

@@ -0,0 +1,10 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
+import { MarkdownFormat } from '../MarkdownFormat';
+import { Nullable, RefItem } from '../types';
+export declare function setMarkdown(textareaNode: HTMLTextAreaElement, text: string, format: MarkdownFormat, selectionStart: number, selectionEnd?: number | null): void;
+export declare function setMarkdownFiles(file: RefItem, textarea: Textarea, format: MarkdownFormat, cursorPosition?: number | null, fileApiUrl?: string): void;
+export declare function setMarkdownPastedHtml(text: string, textareaNode: HTMLTextAreaElement): void;
+export declare function setTextareaCursor(format: MarkdownFormat, prevCommentPartLength: number, nextCommentPartLength: number, textareaNode: HTMLTextAreaElement, selectionEnd: number): void;
+export declare function createMarkdownHelpKeyDownHandler(text: string, ref?: RefObject<Textarea> | null, callback?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void): (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+export declare const usePasteFromClipboard: (textarea: Nullable<Textarea>, uploadFileApi?: ((file: File) => Promise<RefItem>) | undefined, downloadFileApi?: ((id: string) => Promise<File>) | undefined, fileApiUrl?: string) => void;