@skbkontur/markdown 2.6.3 → 2.7.0-alpha.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.6.3",
+  "version": "2.7.0-alpha.0",
+  "packageManager": "yarn@4.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "repository": "https://github.com/skbkontur/markdown",
-  "private": false,
   "license": "UNLICENSED",
   "author": "tsypilov",
   "dependencies": {

package/src/Markdown/Emoji/Emoji.logic.js

@@ -1,12 +1,12 @@
 import { setMarkdownPastedHtml } from '../MarkdownHelpers/markdownHelpers';
-export var useEmojiLogic = function (textarea) {
-    var onSelectEmoji = function (emoji) {
+export const useEmojiLogic = (textarea) => {
+    const onSelectEmoji = (emoji) => {
         if (textarea) {
-            var textareaNode = textarea.node;
+            const textareaNode = textarea.node;
             setMarkdownPastedHtml(emoji.native, textareaNode);
         }
     };
     return {
-        onSelectEmoji: onSelectEmoji,
+        onSelectEmoji,
     };
 };

package/src/Markdown/Emoji/Emoji.styled.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { getColor } from './helpers';
 import styled from '../../styles/styled-components';
 /**
@@ -9,20 +5,17 @@ import styled from '../../styles/styled-components';
  * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
  */
 /* stylelint-disable function-name-case */
-export var EmojiPickerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  em-emoji-picker {\n    --font-family: inherit;\n    --shadow: unset;\n    --rgb-accent: ", ";\n    --color-border: ", ";\n    --rgb-background: ", ";\n    --rgb-input: ", ";\n    --rgb-color: ", ";\n\n    max-height: 300px;\n    width: 100%;\n  }\n"], ["\n  em-emoji-picker {\n    --font-family: inherit;\n    --shadow: unset;\n    --rgb-accent: ", ";\n    --color-border: ", ";\n    --rgb-background: ", ";\n    --rgb-input: ", ";\n    --rgb-color: ", ";\n\n    max-height: 300px;\n    width: 100%;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return getColor(theme.colors.brand);
-}, function (_a) {
-    var theme = _a.theme;
-    return getColor(theme.colors.grayDefault);
-}, function (_a) {
-    var theme = _a.theme;
-    return getColor(theme.colors.emojiPickerBackgroundRGBColor);
-}, function (_a) {
-    var theme = _a.theme;
-    return getColor(theme.colors.emojiPickerBackgroundRGBColor);
-}, function (_a) {
-    var theme = _a.theme;
-    return getColor(theme.colors.text);
-});
-var templateObject_1;
+export const EmojiPickerWrapper = styled.div `
+  em-emoji-picker {
+    --font-family: inherit;
+    --shadow: unset;
+    --rgb-accent: ${({ theme }) => getColor(theme.colors.brand)};
+    --color-border: ${({ theme }) => getColor(theme.colors.grayDefault)};
+    --rgb-background: ${({ theme }) => getColor(theme.colors.emojiPickerBackgroundRGBColor)};
+    --rgb-input: ${({ theme }) => getColor(theme.colors.emojiPickerBackgroundRGBColor)};
+    --rgb-color: ${({ theme }) => getColor(theme.colors.text)};
+
+    max-height: 300px;
+    width: 100%;
+  }
+`;

package/src/Markdown/Emoji/EmojiDropdown.js

@@ -9,21 +9,16 @@ import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/them
 import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
 import { MarkdownTids } from '../MarkdownTids';
 emojiLocale.search = 'Поиск на английском';
-export var EmojiDropdown = function (_a) {
-    var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect, showActionHint = _a.showActionHint;
-    var dropdownMenuRef = useRef(null);
-    return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
-        var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
-        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: function (_a) {
-                var toggleMenu = _a.toggleMenu;
-                return (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.Emoji, showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
-            }, menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
+export const EmojiDropdown = ({ isPreviewMode, showShortKey, onSelect, showActionHint }) => {
+    const dropdownMenuRef = useRef(null);
+    return (React.createElement(MarkdownThemeConsumer, null, theme => {
+        const currentTheme = theme ?? DEFAULT_MARKDOWN_THEME;
+        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: ({ toggleMenu }) => (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.Emoji, showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu })), menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
             React.createElement(EmojiPickerWrapper, null,
                 React.createElement(EmojiPicker, { dynamicWidth: true, data: data, i18n: emojiLocale, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
     }));
     function handleSelectEmoji(data) {
-        var _a;
         onSelect(data);
-        (_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        dropdownMenuRef.current?.close();
     }
 };

package/src/Markdown/Emoji/helpers.js

@@ -1,4 +1,4 @@
-var RGB_KEY = 'rgb';
-var regExp = /\((.*)\)/;
-var rgbDefaultWhite = '255, 255, 255';
-export var getColor = function (color) { var _a, _b; return color.startsWith(RGB_KEY) ? (_b = (_a = color.match(regExp)) === null || _a === void 0 ? void 0 : _a.pop()) !== null && _b !== void 0 ? _b : rgbDefaultWhite : "from ".concat(color, " r g b / 1"); };
+const RGB_KEY = 'rgb';
+const regExp = /\((.*)\)/;
+const rgbDefaultWhite = '255, 255, 255';
+export const getColor = (color) => color.startsWith(RGB_KEY) ? color.match(regExp)?.pop() ?? rgbDefaultWhite : `from ${color} r g b / 1`;

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

@@ -1,39 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { Toast } from '@skbkontur/react-ui';
 import { useState } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -41,84 +5,58 @@ 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({
+const PARENTHESES_REGEXP = /[()[\]]/gm;
+export const useFileLogic = (fileUploadApi, fileDownloadApi, fileApiUrl, textarea, cursorPosition, disabled) => {
+    const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
         multiple: false,
         noClick: true,
         disabled: disabled || !fileUploadApi || !fileDownloadApi,
-        onDrop: function (files) { return void uploadFile(files[0]); },
-    }), getRootProps = _a.getRootProps, getInputProps = _a.getInputProps, 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*/];
+        onDrop: files => void uploadFile(files[0]),
+    });
+    const [requestStatus, setRequestStatus] = useState(RequestStatus.Default);
+    const [error, setError] = useState(false);
+    async function uploadFile(file) {
+        if (fileUploadApi) {
+            if (file.size / Math.pow(1024, 2) >= 10) {
+                setError(true);
+                return;
+            }
+            setRequestStatus(RequestStatus.isFetching);
+            try {
+                setError(false);
+                const response = await fileUploadApi(new File([file], file.name.replace(PARENTHESES_REGEXP, '')));
+                const isImage = file.type.includes('image');
+                if (response && textarea) {
+                    setMarkdownFiles(response, textarea, isImage ? MarkdownFormat.image : MarkdownFormat.file, cursorPosition, fileApiUrl);
                 }
-            });
-        });
+                setRequestStatus(RequestStatus.isLoaded);
+            }
+            catch (e) {
+                Toast.push('Ошибка загрузки файла');
+                setRequestStatus(RequestStatus.isFailed);
+            }
+        }
     }
-    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*/];
-                }
-            });
-        });
+    async function downloadFile(id) {
+        if (fileDownloadApi) {
+            try {
+                const response = await fileDownloadApi(id);
+                saveFile(response);
+            }
+            catch (e) {
+                Toast.push('Ошибка скачивания файла');
+            }
+        }
     }
     return {
-        requestStatus: requestStatus,
-        error: error,
-        getRootProps: getRootProps,
-        getInputProps: getInputProps,
-        isDragActive: isDragActive,
-        open: open,
-        uploadFile: uploadFile,
-        downloadFile: downloadFile,
-        onResetError: function () { return setError(false); },
+        requestStatus,
+        error,
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        open,
+        uploadFile,
+        downloadFile,
+        onResetError: () => setError(false),
     };
 };

package/src/Markdown/Markdown.creevey.js

@@ -1,234 +1,86 @@
-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 { delay } from '@skbkontur/react-ui/lib/utils';
 import { story, kind, test } from 'creevey';
 import { MarkdownTids } from './MarkdownTids';
-var getByTid = function (tid) { return "[data-tid=\"".concat(tid, "\"]"); };
-kind('Markdown', function () {
-    story('CustomWidth', function (_a) {
-        var setStoryParameters = _a.setStoryParameters;
+const getByTid = (tid) => `[data-tid="${tid}"]`;
+kind('Markdown', () => {
+    story('CustomWidth', ({ setStoryParameters }) => {
         setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
-        test('withPreview', function (context) { return __awaiter(void 0, void 0, void 0, function () {
-            var previewButton, idle, preview;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 1:
-                        idle = _a.sent();
-                        return [4 /*yield*/, previewButton.click()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 3:
-                        preview = _a.sent();
-                        return [4 /*yield*/, context.matchImages({ idle: idle, preview: preview })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        test('withFullscreen', function (context) { return __awaiter(void 0, void 0, void 0, function () {
-            var fullscreenButton, previewButton, editButton, fullscreenSplit, fullscreenPreview, fullscreenEdit;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        fullscreenButton = context.webdriver.locator(getByTid(MarkdownTids.FullscreenToggle));
-                        previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
-                        editButton = context.webdriver.locator(getByTid(MarkdownTids.EditView));
-                        return [4 /*yield*/, fullscreenButton.click()];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 2:
-                        fullscreenSplit = _a.sent();
-                        return [4 /*yield*/, previewButton.click()];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 4:
-                        fullscreenPreview = _a.sent();
-                        return [4 /*yield*/, editButton.click()];
-                    case 5:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 6:
-                        fullscreenEdit = _a.sent();
-                        return [4 /*yield*/, context.matchImages({
-                                fullscreenSplit: fullscreenSplit,
-                                fullscreenPreview: fullscreenPreview,
-                                fullscreenEdit: fullscreenEdit,
-                            })];
-                    case 7:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
+        test('withPreview', async (context) => {
+            const previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
+            const idle = await context.takeScreenshot();
+            await previewButton.click();
+            const preview = await context.takeScreenshot();
+            await context.matchImages({ idle, preview });
+        });
+        test('withFullscreen', async (context) => {
+            const fullscreenButton = context.webdriver.locator(getByTid(MarkdownTids.FullscreenToggle));
+            const previewButton = context.webdriver.locator(getByTid(MarkdownTids.PreviewView));
+            const editButton = context.webdriver.locator(getByTid(MarkdownTids.EditView));
+            await fullscreenButton.click();
+            const fullscreenSplit = await context.takeScreenshot();
+            await previewButton.click();
+            const fullscreenPreview = await context.takeScreenshot();
+            await editButton.click();
+            const fullscreenEdit = await context.takeScreenshot();
+            await context.matchImages({
+                fullscreenSplit,
+                fullscreenPreview,
+                fullscreenEdit,
             });
-        }); });
+        });
     });
-    for (var _i = 0, _a = ['WithoutHints', 'WithActionHint', 'WithShortKeyHint', 'WithActionAndShortKeyHints']; _i < _a.length; _i++) {
-        var storyName = _a[_i];
-        story(storyName, function (_a) {
-            var setStoryParameters = _a.setStoryParameters;
+    for (const storyName of ['WithoutHints', 'WithActionHint', 'WithShortKeyHint', 'WithActionAndShortKeyHints']) {
+        story(storyName, ({ setStoryParameters }) => {
             setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
-            test('hint', function (context) { return __awaiter(void 0, void 0, void 0, function () {
-                var boldButton, hint;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
-                            return [4 /*yield*/, boldButton.hover()];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, delay(500)];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, context.takeScreenshot()];
-                        case 3:
-                            hint = _a.sent();
-                            return [4 /*yield*/, context.matchImages({ hint: hint })];
-                        case 4:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
+            test('hint', async (context) => {
+                const boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
+                await boldButton.hover();
+                await delay(500);
+                const hint = await context.takeScreenshot();
+                await context.matchImages({ hint });
+            });
         });
     }
-    story('Editable', function (_a) {
-        var setStoryParameters = _a.setStoryParameters;
+    story('Editable', ({ setStoryParameters }) => {
         setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
-        test('markdownTests', function (context) { return __awaiter(void 0, void 0, void 0, function () {
-            var textarea, headingDropdown, headingH2, boldButton, emojiButton, openedDropdown, h2FromButton, h2FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        textarea = context.webdriver.locator('textarea').nth(0);
-                        headingDropdown = context.webdriver.locator(getByTid(MarkdownTids.HeadingDropdown));
-                        headingH2 = context.webdriver.locator(getByTid(MarkdownTids.HeadingH2));
-                        boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
-                        emojiButton = context.webdriver.locator(getByTid(MarkdownTids.Emoji));
-                        return [4 /*yield*/, textarea.click()];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.type('Заголовок')];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, headingDropdown.click()];
-                    case 4:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 5:
-                        openedDropdown = _a.sent();
-                        return [4 /*yield*/, headingH2.click()];
-                    case 6:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 7:
-                        h2FromButton = _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 8:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.type('Заголовок')];
-                    case 9:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 10:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+Shift+2')];
-                    case 11:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 12:
-                        h2FromKeyboard = _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 13:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.type('Жирный')];
-                    case 14:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 15:
-                        _a.sent();
-                        return [4 /*yield*/, boldButton.click()];
-                    case 16:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 17:
-                        boldFromButton = _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 18:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.type('Жирный')];
-                    case 19:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+A')];
-                    case 20:
-                        _a.sent();
-                        return [4 /*yield*/, textarea.press('Control+B')];
-                    case 21:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 22:
-                        boldFromKeyboard = _a.sent();
-                        return [4 /*yield*/, emojiButton.click()];
-                    case 23:
-                        _a.sent();
-                        return [4 /*yield*/, context.takeScreenshot()];
-                    case 24:
-                        openedEmojiPicker = _a.sent();
-                        return [4 /*yield*/, context.matchImages({
-                                openedDropdown: openedDropdown,
-                                h2FromButton: h2FromButton,
-                                h2FromKeyboard: h2FromKeyboard,
-                                boldFromButton: boldFromButton,
-                                boldFromKeyboard: boldFromKeyboard,
-                                openedEmojiPicker: openedEmojiPicker,
-                            })];
-                    case 25:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
+        test('markdownTests', async (context) => {
+            const textarea = context.webdriver.locator('textarea').nth(0);
+            const headingDropdown = context.webdriver.locator(getByTid(MarkdownTids.HeadingDropdown));
+            const headingH2 = context.webdriver.locator(getByTid(MarkdownTids.HeadingH2));
+            const boldButton = context.webdriver.locator(getByTid(MarkdownTids.Bold));
+            const emojiButton = context.webdriver.locator(getByTid(MarkdownTids.Emoji));
+            await textarea.click();
+            await textarea.type('Заголовок');
+            await textarea.press('Control+A');
+            await headingDropdown.click();
+            const openedDropdown = await context.takeScreenshot();
+            await headingH2.click();
+            const h2FromButton = await context.takeScreenshot();
+            await textarea.press('Control+A');
+            await textarea.type('Заголовок');
+            await textarea.press('Control+A');
+            await textarea.press('Control+Shift+2');
+            const h2FromKeyboard = await context.takeScreenshot();
+            await textarea.press('Control+A');
+            await textarea.type('Жирный');
+            await textarea.press('Control+A');
+            await boldButton.click();
+            const boldFromButton = await context.takeScreenshot();
+            await textarea.press('Control+A');
+            await textarea.type('Жирный');
+            await textarea.press('Control+A');
+            await textarea.press('Control+B');
+            const boldFromKeyboard = await context.takeScreenshot();
+            await emojiButton.click();
+            const openedEmojiPicker = await context.takeScreenshot();
+            await context.matchImages({
+                openedDropdown,
+                h2FromButton,
+                h2FromKeyboard,
+                boldFromButton,
+                boldFromKeyboard,
+                openedEmojiPicker,
             });
-        }); });
+        });
     });
 });