@skbkontur/markdown 1.5.0 → 1.6.0

package/index.d.ts

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

package/index.js

@@ -0,0 +1,6 @@
+export { Markdown } from './src/Markdown/Markdown';
+export { MarkdownCombination } from './src/Markdown/MarkdownHelpers/MarkdownCombination';
+export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
+export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
+export { ViewMode } from '././src/Markdown/types';
+export { MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';

package/package.json

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

package/src/Markdown/Files/Files.logic.d.ts

@@ -0,0 +1,13 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { Nullable, RefItem } from '../types';
+import { RequestStatus } from '../utils/requestStatus';
+export declare const useFileLogic: (fileUploadApi?: ((file: File) => Promise<RefItem>) | undefined, fileDownloadApi?: ((id: string) => Promise<File>) | undefined, fileApiUrl?: string, textarea?: Nullable<Textarea>, cursorPosition?: number | null, disabled?: boolean) => {
+    requestStatus: RequestStatus;
+    error: boolean;
+    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
+    isDragActive: boolean;
+    open: () => void;
+    uploadFile: (file: File) => Promise<void>;
+    downloadFile: (id: string) => Promise<void>;
+    onResetError: () => void;
+};

package/src/Markdown/Files/Files.logic.js

@@ -0,0 +1,123 @@
+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 { Toast } from '@skbkontur/react-ui';
+import { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { MarkdownFormat } from '../MarkdownFormat';
+import { setMarkdownFiles } from '../MarkdownHelpers/markdownHelpers';
+import { RequestStatus } from '../utils/requestStatus';
+import { saveFile } from '../utils/saveFile';
+var PARENTHESES_REGEXP = /[()[\]]/gm;
+export var useFileLogic = function (fileUploadApi, fileDownloadApi, fileApiUrl, textarea, cursorPosition, disabled) {
+    var _a = useDropzone({
+        multiple: false,
+        noClick: true,
+        disabled: disabled || !fileUploadApi || !fileDownloadApi,
+        onDrop: function (files) { return void uploadFile(files[0]); },
+    }), getRootProps = _a.getRootProps, isDragActive = _a.isDragActive, open = _a.open;
+    var _b = useState(RequestStatus.Default), requestStatus = _b[0], setRequestStatus = _b[1];
+    var _c = useState(false), error = _c[0], setError = _c[1];
+    function uploadFile(file) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, isImage, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!fileUploadApi) return [3 /*break*/, 4];
+                        if (file.size / Math.pow(1024, 2) >= 10) {
+                            setError(true);
+                            return [2 /*return*/];
+                        }
+                        setRequestStatus(RequestStatus.isFetching);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        setError(false);
+                        return [4 /*yield*/, fileUploadApi(new File([file], file.name.replace(PARENTHESES_REGEXP, '')))];
+                    case 2:
+                        response = _a.sent();
+                        isImage = file.type.includes('image');
+                        if (response && textarea) {
+                            setMarkdownFiles(response, textarea, isImage ? MarkdownFormat.image : MarkdownFormat.file, cursorPosition, fileApiUrl);
+                        }
+                        setRequestStatus(RequestStatus.isLoaded);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        Toast.push('Ошибка загрузки файла');
+                        setRequestStatus(RequestStatus.isFailed);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function downloadFile(id) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, e_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!fileDownloadApi) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, fileDownloadApi(id)];
+                    case 2:
+                        response = _a.sent();
+                        saveFile(response);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_2 = _a.sent();
+                        Toast.push('Ошибка скачивания файла');
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return {
+        requestStatus: requestStatus,
+        error: error,
+        getRootProps: getRootProps,
+        isDragActive: isDragActive,
+        open: open,
+        uploadFile: uploadFile,
+        downloadFile: downloadFile,
+        onResetError: function () { return setError(false); },
+    };
+};

package/src/Markdown/Markdown.creevey.d.ts

@@ -0,0 +1 @@
+export {};

package/src/Markdown/Markdown.creevey.js

@@ -0,0 +1,169 @@
+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 { story, kind, test } from 'creevey';
+kind('Markdown', function () {
+    story('WithActions', function (_a) {
+        var setStoryParameters = _a.setStoryParameters;
+        setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
+        test('withPreview', function () {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var buttons, idle, preview;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
+                        case 1:
+                            buttons = _c.sent();
+                            return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
+                        case 2:
+                            idle = _c.sent();
+                            return [4 /*yield*/, this.browser
+                                    .actions()
+                                    .click(buttons[buttons.length - 2])
+                                    .perform()];
+                        case 3:
+                            _c.sent();
+                            return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
+                        case 4:
+                            preview = _c.sent();
+                            return [4 /*yield*/, this.expect({ idle: idle, preview: preview }).to.matchImages()];
+                        case 5:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        });
+    });
+    story('Editable', function (_a) {
+        var setStoryParameters = _a.setStoryParameters;
+        setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
+        test('markdownTests', function () {
+            var _a, _b, _c, _d, _e;
+            return __awaiter(this, void 0, void 0, function () {
+                var textarea, buttons, openedDropdown, newButtons, h1FromButton, h1FromKeyboard, boldFromButton, boldFromKeyboard;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0: return [4 /*yield*/, this.browser.findElement({ tagName: 'textarea' })];
+                        case 1:
+                            textarea = _f.sent();
+                            return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
+                        case 2:
+                            buttons = _f.sent();
+                            return [4 /*yield*/, this.browser.actions().click(textarea).perform()];
+                        case 3:
+                            _f.sent();
+                            return [4 /*yield*/, this.browser.actions().sendKeys('Заголовок').keyDown(this.keys.CONTROL).sendKeys('a').perform()];
+                        case 4:
+                            _f.sent();
+                            return [4 /*yield*/, this.browser.actions().click(buttons[0]).perform()];
+                        case 5:
+                            _f.sent();
+                            return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
+                        case 6:
+                            openedDropdown = _f.sent();
+                            return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
+                        case 7:
+                            newButtons = _f.sent();
+                            return [4 /*yield*/, this.browser.actions().click(newButtons[1]).perform()];
+                        case 8:
+                            _f.sent();
+                            return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
+                        case 9:
+                            h1FromButton = _f.sent();
+                            return [4 /*yield*/, this.browser
+                                    .actions()
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .sendKeys('Заголовок')
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .keyDown(this.keys.CONTROL)
+                                    .keyDown(this.keys.ALT)
+                                    .sendKeys('1')
+                                    .perform()];
+                        case 10:
+                            _f.sent();
+                            return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
+                        case 11:
+                            h1FromKeyboard = _f.sent();
+                            return [4 /*yield*/, this.browser
+                                    .actions()
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .sendKeys('Жирный')
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .click(buttons[1])
+                                    .perform()];
+                        case 12:
+                            _f.sent();
+                            return [4 /*yield*/, ((_d = this.captureElement) === null || _d === void 0 ? void 0 : _d.takeScreenshot())];
+                        case 13:
+                            boldFromButton = _f.sent();
+                            return [4 /*yield*/, this.browser
+                                    .actions()
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .sendKeys('Жирный')
+                                    .keyDown(this.keys.CONTROL)
+                                    .sendKeys('a')
+                                    .keyDown(this.keys.CONTROL)
+                                    .keyDown(this.keys.ALT)
+                                    .sendKeys('b')
+                                    .perform()];
+                        case 14:
+                            _f.sent();
+                            return [4 /*yield*/, ((_e = this.captureElement) === null || _e === void 0 ? void 0 : _e.takeScreenshot())];
+                        case 15:
+                            boldFromKeyboard = _f.sent();
+                            return [4 /*yield*/, this.expect({
+                                    openedDropdown: openedDropdown,
+                                    h1FromButton: h1FromButton,
+                                    h1FromKeyboard: h1FromKeyboard,
+                                    boldFromButton: boldFromButton,
+                                    boldFromKeyboard: boldFromKeyboard,
+                                }).to.matchImages()];
+                        case 16:
+                            _f.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        });
+    });
+});

package/src/Markdown/Markdown.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { MarkdownEditorProps } from './MarkdownEditor';
+import { HorizontalPaddings, MarkdownApi } from './types';
+export interface MarkdownProps extends MarkdownEditorProps {
+    /** Методы апи для загрузки/скачивания файлов и меншена */
+    api?: MarkdownApi;
+    /** Режим прозрачной рамки у Textarea */
+    borderless?: boolean;
+    /** Url апи для файлов  */
+    fileApiUrl?: string;
+    /** Скрыть селект выбора размера текста */
+    hideHeadersSelect?: boolean;
+    /** Скрыть панель действий (кнопки помощи форматирования текста) */
+    hideMarkdownActions?: boolean;
+    /** Превьювер мардауна, по умолчанию используется MarkdownViewer */
+    markdownViewer?: (value: string) => ReactNode;
+    /** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
+    panelHorizontalPadding?: number;
+    /** Url для профиля сотрудника  */
+    profileUrl?: string;
+    /** Render валидации файла, если она нужна, максимальный размер файла = 10mb */
+    renderFilesValidation?: (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode;
+}
+export declare const Markdown: FC<MarkdownProps>;

package/src/Markdown/Markdown.js

@@ -0,0 +1,148 @@
+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 { SidePage, ThemeContext } from '@skbkontur/react-ui';
+import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
+import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import Foco from 'react-foco/lib';
+import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
+import { useFileLogic } from './Files/Files.logic';
+import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
+import { MarkdownActions } from './MarkdownActions';
+import { MarkdownEditor } from './MarkdownEditor';
+import { usePasteFromClipboard } from './MarkdownHelpers/markdownHelpers';
+import { getMentionValue, mentionActions } from './MarkdownHelpers/markdownMentionHelpers';
+import { getCursorCoordinates, useFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
+import { MarkdownMention } from './MarkdownMention';
+import { ViewMode } from './types';
+import { Guid } from './utils/guid';
+import { RequestStatus } from './utils/requestStatus';
+import { MarkdownViewer } from '../MarkdownViewer';
+import { ThemeProvider } from '../styles/styled-components';
+import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
+export var Markdown = function (props) {
+    var _a;
+    var panelHorizontalPadding = props.panelHorizontalPadding, hideMarkdownActions = props.hideMarkdownActions, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, hideHeadersSelect = props.hideHeadersSelect, borderless = props.borderless, textareaProps = __rest(props, ["panelHorizontalPadding", "hideMarkdownActions", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "hideHeadersSelect", "borderless"]);
+    var textareaRef = useRef(null);
+    var _b = useState(), mention = _b[0], setMention = _b[1];
+    var _c = useState(ViewMode.Edit), viewMode = _c[0], setViewMode = _c[1];
+    var _d = useState(false), fullscreen = _d[0], setFullScreen = _d[1];
+    var _e = useState(0), initialWidth = _e[0], setInitialWidth = _e[1];
+    var _f = useState(), selectionStart = _f[0], setSelectionStart = _f[1];
+    var _g = useState(), selectionEnd = _g[0], setSelectionEnd = _g[1];
+    var guid = useRef(new Guid().generate()).current;
+    var isEditMode = viewMode === ViewMode.Edit;
+    var _h = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _h.getRootProps, isDragActive = _h.isDragActive, requestStatus = _h.requestStatus, open = _h.open, error = _h.error, onResetError = _h.onResetError;
+    usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
+    useListenTextareaScroll(resetMention, textareaRef.current);
+    useLayoutEffect(function () {
+        var _a;
+        var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+        setInitialWidth(textareaNode.getBoundingClientRect().width);
+    }, []);
+    useEffect(function () {
+        var _a;
+        if (fullscreen && isEditMode) {
+            var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+            textareaNode.focus();
+            textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
+            textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+        }
+    }, [fullscreen, isEditMode, selectionEnd, selectionStart]);
+    var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, initialWidth);
+    var horizontalPaddings = {
+        panelPadding: panelHorizontalPadding,
+        fullscreenPadding: fullscreenTextareaPadding,
+    };
+    var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
+        React.createElement(Wrapper, __assign({}, getRootProps()),
+            !hideMarkdownActions && (React.createElement(MarkdownActions, { textAreaRef: textareaRef, width: fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, hideHeadersSelect: hideHeadersSelect, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen })),
+            isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
+            isEditMode && renderEditContainer(),
+            isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
+        !isEditMode && (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings), (markdownViewer === null || markdownViewer === void 0 ? void 0 : markdownViewer(props.value)) || (React.createElement(MarkdownViewer, { source: (_a = props.value) !== null && _a !== void 0 ? _a : '', downloadFileApi: api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl: fileApiUrl, profileUrl: profileUrl }))))));
+    return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
+        var defaultTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
+        var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless);
+        return (React.createElement(ThemeProvider, { theme: defaultTheme },
+            React.createElement(ThemeContext.Provider, { value: reactUiTheme }, fullscreen ? renderFullScreen() : content)));
+    }));
+    function renderFullScreen() {
+        return (React.createElement(SidePage, { disableAnimations: true, width: "100vw", onClose: function () { return setFullScreen(false); } },
+            React.createElement(HideBodyVerticalScroll, null),
+            React.createElement(SidePage.Body, null,
+                React.createElement(SidePage.Container, null, content))));
+    }
+    function renderEditContainer() {
+        var showMention = !!mention && !!getMentionValue(mention);
+        return (React.createElement(MarkdownEditorBlock, null,
+            React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
+            showMention && renderMentions(),
+            React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
+    }
+    function renderMentions() {
+        var _a;
+        if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
+            var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+            var position = getCursorCoordinates(textareaNode, guid);
+            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
+        }
+    }
+    function handleSelectUser(login, name) {
+        if (textareaRef.current && mention) {
+            var htmlTextArea = textareaRef.current;
+            htmlTextArea.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
+            document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
+            resetMention();
+        }
+    }
+    function listenSelection(event) {
+        var _a = event.currentTarget, textSelectionStart = _a.selectionStart, textSelectionEnd = _a.selectionEnd;
+        setSelectionStart(textSelectionStart);
+        setSelectionEnd(textSelectionEnd);
+        onSelect && onSelect(event);
+        checkMention(event);
+    }
+    function listenChange(event) {
+        onChange && onChange(event);
+        checkMention(event);
+    }
+    function listenClick(event) {
+        onClick && onClick(event);
+        checkMention(event);
+    }
+    function checkMention(event) {
+        if (api === null || api === void 0 ? void 0 : api.getUsersApi)
+            mentionActions(event, setMention);
+    }
+    function resetStates() {
+        resetMention();
+        setSelectionStart(undefined);
+        setSelectionEnd(undefined);
+    }
+    function resetMention() {
+        setMention(undefined);
+    }
+    function handleClickFullscreen() {
+        setFullScreen(!fullscreen);
+    }
+};