@skbkontur/markdown 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -10,6 +10,7 @@
   "license": "UNLICENSED",
   "author": "tsypilov",
   "dependencies": {
+    "@types/styled-components": "5.1.26",
     "@types/turndown": "^5.0.1",
     "@types/uuid": "^9.0.1",
     "react-dropzone": "^14.2.3",
@@ -19,7 +20,7 @@
     "rehype-sanitize": "5.0.1",
     "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
-    "styled-components": "6.1.1",
+    "styled-components": "5.3.11",
     "turndown": "^7.1.2",
     "turndown-plugin-gfm": "^1.0.2",
     "uuid": "^9.0.0"
@@ -28,10 +29,11 @@
     "push": "git push --follow-tag",
     "bump": "lerna version",
     "build": "yarn tsc",
+    "clean": "tsc --build -clean",
     "lint-staged": "lint-staged",
     "lint": "eslint --ext=ts,tsx src && yarn stylelint",
     "lint:fix": "eslint --ext=.ts,tsx src --fix",
-    "stylelint": "stylelint \"src/**/*.{tsx,ts}\"",
+    "stylelint": "stylelint \"src/**/*.styled.{tsx,ts}\"",
     "prepare": "husky install .husky",
     "storybook": "start-storybook -p 6007 -s public",
     "build-storybook": "build-storybook --quiet",
@@ -92,14 +94,14 @@
     "jest-environment-jsdom": "29.5.0",
     "jest-teamcity-reporter": "0.9.0",
     "lerna": "5.0.0",
-    "lint-staged": "^12.3.4",
-    "postcss": "8",
-    "postcss-styled-syntax": "0.5.0",
+    "lint-staged": "12.3.4",
     "prettier": "2.2.1",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "stylelint": "15.11.0",
-    "stylelint-config-standard": "34.0.0",
+    "stylelint": "13.13.1",
+    "stylelint-config-standard": "22.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
     "typescript": "4.9.4"
   },
   "files": [

package/index.d.ts

@@ -1,11 +0,0 @@
-import { MarkdownThemeConsumerType, MarkdownThemeProviderType } from './src/styles/types';
-declare const MarkdownThemeProvider: MarkdownThemeProviderType;
-declare const MarkdownThemeConsumer: MarkdownThemeConsumerType;
-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 { MarkdownTheme } from './src/styles/theme';
-export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode } from '././src/Markdown/types';
-export { ThemeMode, ColorScheme } from './src/styles/types';
-export { MarkdownThemeProvider, MarkdownThemeConsumer };

package/index.js

@@ -1,9 +0,0 @@
-import { ThemeProvider, ThemeConsumer } from 'styled-components';
-var MarkdownThemeProvider = ThemeProvider;
-var MarkdownThemeConsumer = ThemeConsumer;
-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 };

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

@@ -1,13 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

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

package/src/Markdown/Markdown.creevey.js

@@ -1,169 +0,0 @@
-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

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

package/src/Markdown/Markdown.js

@@ -1,148 +0,0 @@
-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 { ThemeConsumer, ThemeProvider } from 'styled-components';
-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, getFullscreenHorizontalPadding, 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 { DEFAULT_MARKDOWN_THEME } 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, textareaProps = __rest(props, ["panelHorizontalPadding", "hideMarkdownActions", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "hideHeadersSelect"]);
-    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 = getFullscreenHorizontalPadding(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, 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(ThemeConsumer, 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);
-        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);
-    }
-};