@skbkontur/markdown 1.0.3

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;
+    var isPreviewMode = viewMode === ViewMode.Preview;
+    return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings),
+        React.createElement(ButtonsWrapper, null,
+            React.createElement(ActionsWrapper, null,
+                React.createElement(MarkdownDropdown, null,
+                    React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 260, 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,13 @@
+import { Textarea, TextareaProps } from '@skbkontur/react-ui';
+import { ValidationInfo } from '@skbkontur/react-ui-validations';
+import { FC, RefObject } from 'react';
+export interface MarkdownEditorProps extends Omit<TextareaProps, 'rows' | 'maxRows' | 'disableAnimations' | 'extraRow'> {
+    disableAnimations?: boolean;
+    extraRow?: boolean;
+    maxRows?: number;
+    rows?: number;
+    textareaRef?: RefObject<Textarea>;
+    /** Стандартная валидация из react-ui-validations */
+    validationInfo?: ValidationInfo | null;
+}
+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, rest = __rest(props, ["resize", "width", "autoResize", "showLengthCounter", "textareaRef", "validationInfo"]);
+    var getInputProps = useDropzone().getInputProps;
+    return validationInfo !== undefined ? (React.createElement(ValidationWrapper, { validationInfo: validationInfo }, 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,25 @@
+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;
+    icon?: ReactNode;
+}
+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,219 @@
+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 { NumberedList } from '../MarkdownIcons/NumberedList';
+import { Table } from '../MarkdownIcons/Table';
+var newLinesRegexp = /([\n\r]+)/g;
+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);
+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: 'Жирный',
+    },
+    {
+        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: 'Курсив',
+    },
+    {
+        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: 'Зачеркнутый',
+    },
+    {
+        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: 'Ссылка',
+    },
+];
+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: 'Блок кода',
+    },
+    {
+        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: 300 },
+        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;

package/src/Markdown/MarkdownHelpers/markdownHelpers.js

@@ -0,0 +1,103 @@
+import { useEffect } from 'react';
+import { getPastedHtml } from './markdownTextareaHelpers';
+import { useFileLogic } from '../Files/Files.logic';
+import { MarkdownFormat } from '../MarkdownFormat';
+import { eventKeyCodeToMarkdownFormat, markdownHelpFiles, markdownHelpItems } from '../MarkdownHelpItems';
+var italic = MarkdownFormat.italic, bold = MarkdownFormat.bold, crossed = MarkdownFormat.crossed, codeBlock = MarkdownFormat.codeBlock, ref = MarkdownFormat.ref, file = MarkdownFormat.file, image = MarkdownFormat.image;
+var betweenTextFormats = [italic, bold, crossed, codeBlock, file, image];
+var specialFormats = [ref];
+export function setMarkdown(textareaNode, text, format, selectionStart, selectionEnd) {
+    var markdownHelpItem = markdownHelpItems.find(function (item) { return item.format === format; });
+    if (markdownHelpItem) {
+        var prevCommentPart = text.substring(selectionStart, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
+        var nextCommentPart = markdownHelpItem.wrapContent(prevCommentPart);
+        document.execCommand('insertText', false, nextCommentPart);
+        setTextareaCursor(format, prevCommentPart.length, nextCommentPart.length, textareaNode, Number(selectionEnd));
+    }
+}
+export function setMarkdownFiles(file, textarea, format, cursorPosition, fileApiUrl) {
+    var _a, _b;
+    var markdownHelpItem = markdownHelpFiles(fileApiUrl).find(function (item) { return item.format === format; });
+    if (markdownHelpItem) {
+        var textareaNode = textarea.node;
+        var currentCursorPosition = (_a = cursorPosition !== null && cursorPosition !== void 0 ? cursorPosition : textareaNode.selectionStart) !== null && _a !== void 0 ? _a : (_b = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.value) === null || _b === void 0 ? void 0 : _b.length;
+        var nextCommentPart = markdownHelpItem.wrapContent(file);
+        var newCursorPosition = currentCursorPosition + nextCommentPart.length;
+        textareaNode.selectionStart = currentCursorPosition;
+        textareaNode.focus();
+        document.execCommand('insertText', false, nextCommentPart);
+        textareaNode.selectionStart = newCursorPosition;
+        textareaNode.selectionEnd = newCursorPosition;
+    }
+}
+export function setMarkdownPastedHtml(text, textareaNode) {
+    var _a, _b;
+    var selectionStart = textareaNode.selectionStart;
+    var currentCursorPosition = (_b = selectionStart !== null && selectionStart !== void 0 ? selectionStart : (_a = textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    var newCursorPosition = currentCursorPosition + text.length;
+    textareaNode.selectionStart = currentCursorPosition;
+    textareaNode.focus();
+    document.execCommand('insertText', false, text);
+    textareaNode.selectionStart = newCursorPosition;
+    textareaNode.selectionEnd = newCursorPosition;
+}
+export function setTextareaCursor(format, prevCommentPartLength, nextCommentPartLength, textareaNode, selectionEnd) {
+    if (betweenTextFormats.includes(format)) {
+        var formatCenterPosition = (nextCommentPartLength - prevCommentPartLength) / 2;
+        textareaNode.selectionStart = selectionEnd + formatCenterPosition;
+        textareaNode.selectionEnd = selectionEnd + formatCenterPosition;
+    }
+    if (specialFormats.includes(format)) {
+        var nextCommentCursorPosition = nextCommentPartLength - 1;
+        textareaNode.selectionStart = selectionEnd - prevCommentPartLength + nextCommentCursorPosition;
+        textareaNode.selectionEnd = selectionEnd - prevCommentPartLength + nextCommentCursorPosition;
+    }
+}
+export function createMarkdownHelpKeyDownHandler(text, ref, callback) {
+    return function (event) {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+            return;
+        }
+        var textareaNode = ref.current.node;
+        var format = eventKeyCodeToMarkdownFormat[event.keyCode];
+        if (event.ctrlKey && event.altKey && format) {
+            var markdownHelpItem = markdownHelpItems.find(function (item) { return item.format === format; });
+            if (markdownHelpItem && textareaNode) {
+                event.stopPropagation();
+                event.preventDefault();
+                var _a = [textareaNode.selectionStart, textareaNode.selectionEnd], start = _a[0], end = _a[1];
+                var prevCommentPart = text.substring(start, end);
+                var nextCommentPart = markdownHelpItem.wrapContent(prevCommentPart);
+                document.execCommand('insertText', false, nextCommentPart);
+                setTextareaCursor(format, prevCommentPart.length, nextCommentPart.length, textareaNode, end);
+            }
+        }
+        callback && callback(event);
+    };
+}
+export var usePasteFromClipboard = function (textarea, uploadFileApi, downloadFileApi, fileApiUrl) {
+    var uploadFile = useFileLogic(uploadFileApi, downloadFileApi, fileApiUrl, textarea).uploadFile;
+    var textareaNode = textarea === null || textarea === void 0 ? void 0 : textarea.node;
+    useEffect(function () {
+        if (downloadFileApi && uploadFileApi) {
+            var handlePaste_1 = function (event) {
+                var _a, _b, _c, _d;
+                var files = (_a = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _a === void 0 ? void 0 : _a.files;
+                var html = (_d = (_c = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.getData('text/html')) === null || _c === void 0 ? void 0 : _c.replace("<meta charset='utf-8'>", '')) === null || _d === void 0 ? void 0 : _d.replace("<meta charset=\"utf-8\">", '');
+                if (files === null || files === void 0 ? void 0 : files.length) {
+                    event.preventDefault();
+                    void uploadFile(files[0]);
+                    return;
+                }
+                if (html) {
+                    getPastedHtml(html, event, textareaNode);
+                    return;
+                }
+            };
+            if (textareaNode) {
+                textareaNode.addEventListener('paste', handlePaste_1);
+            }
+            return function () { return textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.removeEventListener('paste', handlePaste_1); };
+        }
+    }, [downloadFileApi, textareaNode, uploadFile, uploadFileApi]);
+};

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

@@ -0,0 +1,7 @@
+import { Menu } from '@skbkontur/react-ui/internal/Menu';
+import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
+import { Token, User } from '../types';
+export declare function mentionActions(event: ChangeEvent<HTMLTextAreaElement> | MouseEvent<HTMLTextAreaElement> | SyntheticEvent<HTMLTextAreaElement, Event>, setToken: (token?: Token) => void): void;
+export declare const useMenuKeyListener: (onUserSelect: (login: string, name: string) => void, users?: User[], menuRef?: RefObject<Menu>) => void;
+export declare const getMentionValue: (mention?: Token | null) => string;
+export declare function getAvatarUrl(sid: undefined | null | string): string;