@skbkontur/markdown 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -46,6 +46,10 @@
     "react-dom": ">=16.9"
   },
   "devDependencies": {
+    "@babel/core": "7.18.0",
+    "@babel/plugin-syntax-jsx": "7.21.4",
+    "@babel/preset-env": "7.21.4",
+    "@babel/preset-typescript": "7.21.4",
     "@skbkontur/react-ui": "^4.14.0",
     "@skbkontur/react-ui-validations": "^1.12.0",
     "@storybook/addon-a11y": "6.5.16",

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/MarkdownHelpItems.d.ts

@@ -12,8 +12,13 @@ export interface MarkdownHelpItem {
     node: ReactNode;
     text: string;
     wrapContent: (content: string) => string;
+    checkLength?: number;
     icon?: ReactNode;
 }
+export declare function checkSpaceSymbol(text: string, checkedLength?: number): {
+    value: string;
+    spaces: string;
+};
 export declare const markdownHelpHeaders: MarkdownHelpItem[];
 export declare const markdownHelpText: MarkdownHelpItem[];
 export declare const markdownHelpLists: MarkdownHelpItem[];

package/src/Markdown/MarkdownHelpItems.js

@@ -18,6 +18,8 @@ import { List } from '../MarkdownIcons/List';
 import { NumberedList } from '../MarkdownIcons/NumberedList';
 import { Table } from '../MarkdownIcons/Table';
 var newLinesRegexp = /([\n\r]+)/g;
+var spacesMatchRegexp = /\s/gm;
+var spacesSplitRegexp = /(\s+)/;
 export var eventKeyCodeToMarkdownFormat = {
     50: MarkdownFormat.h2,
     51: MarkdownFormat.h3,
@@ -48,6 +50,18 @@ export var markdownFormatToShortKey = (_a = {},
     _a[MarkdownFormat.quote] = 'Q',
     _a[MarkdownFormat.image] = 'P',
     _a);
+export function checkSpaceSymbol(text, checkedLength) {
+    var latestSymbolPos = text.length - 1;
+    var latestSymbol = text.charAt(latestSymbolPos);
+    if (latestSymbol.match(spacesMatchRegexp) && checkedLength) {
+        var substringText = text.split('').reverse().join('').split(spacesSplitRegexp);
+        var spaces = substringText[1];
+        var textWithoutSpaces = substringText[2];
+        var reversed = textWithoutSpaces.split('').reverse().join('');
+        return { value: reversed, spaces: spaces };
+    }
+    return { value: text, spaces: '' };
+}
 export var markdownHelpHeaders = [
     {
         format: MarkdownFormat.h2,
@@ -84,6 +98,7 @@ export var markdownHelpText = [
         icon: React.createElement("strong", null, "B"),
         wrapContent: function (content) { return "**".concat(content, "**"); },
         text: 'Жирный',
+        checkLength: 2,
     },
     {
         format: MarkdownFormat.italic,
@@ -94,6 +109,7 @@ export var markdownHelpText = [
         icon: React.createElement("i", null, "I"),
         wrapContent: function (content) { return "*".concat(content, "*"); },
         text: 'Курсив',
+        checkLength: 1,
     },
     {
         format: MarkdownFormat.crossed,
@@ -106,6 +122,7 @@ export var markdownHelpText = [
             } }, "S")),
         wrapContent: function (content) { return "~~".concat(content, "~~"); },
         text: 'Зачеркнутый',
+        checkLength: 2,
     },
     {
         format: MarkdownFormat.ref,
@@ -119,6 +136,7 @@ export var markdownHelpText = [
         icon: React.createElement(AttachLink, null),
         wrapContent: function (content) { return "[".concat(content, "]()"); },
         text: 'Ссылка',
+        checkLength: 1,
     },
 ];
 export var markdownHelpLists = [
@@ -160,6 +178,7 @@ export var markdownHelpOther = [
         icon: React.createElement("span", null, '</>'),
         wrapContent: function (content) { return "`".concat(content, "`"); },
         text: 'Блок кода',
+        checkLength: 1,
     },
     {
         format: MarkdownFormat.quote,

package/src/Markdown/MarkdownHelpers/markdownHelpers.js

@@ -2,17 +2,19 @@ import { useEffect } from 'react';
 import { getPastedHtml } from './markdownTextareaHelpers';
 import { useFileLogic } from '../Files/Files.logic';
 import { MarkdownFormat } from '../MarkdownFormat';
-import { eventKeyCodeToMarkdownFormat, markdownHelpFiles, markdownHelpItems } from '../MarkdownHelpItems';
+import { checkSpaceSymbol, eventKeyCodeToMarkdownFormat, markdownHelpFiles, markdownHelpItems, } from '../MarkdownHelpItems';
 var italic = MarkdownFormat.italic, bold = MarkdownFormat.bold, crossed = MarkdownFormat.crossed, codeBlock = MarkdownFormat.codeBlock, ref = MarkdownFormat.ref, file = MarkdownFormat.file, image = MarkdownFormat.image;
 var betweenTextFormats = [italic, bold, crossed, codeBlock, file, image];
 var specialFormats = [ref];
 export function setMarkdown(textareaNode, text, format, selectionStart, selectionEnd) {
+    var _a;
     var markdownHelpItem = markdownHelpItems.find(function (item) { return item.format === format; });
     if (markdownHelpItem) {
         var prevCommentPart = text.substring(selectionStart, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : undefined);
-        var nextCommentPart = markdownHelpItem.wrapContent(prevCommentPart);
+        var _b = checkSpaceSymbol(prevCommentPart, markdownHelpItem.checkLength), value = _b.value, spaces = _b.spaces;
+        var nextCommentPart = markdownHelpItem.wrapContent(value) + spaces;
         document.execCommand('insertText', false, nextCommentPart);
-        setTextareaCursor(format, prevCommentPart.length, nextCommentPart.length, textareaNode, Number(selectionEnd));
+        setTextareaCursor(format, prevCommentPart.length, nextCommentPart.length, textareaNode, Number(selectionEnd) + ((_a = markdownHelpItem === null || markdownHelpItem === void 0 ? void 0 : markdownHelpItem.checkLength) !== null && _a !== void 0 ? _a : 0));
     }
 }
 export function setMarkdownFiles(file, textarea, format, cursorPosition, fileApiUrl) {