@skbkontur/markdown 1.7.0 → 1.9.0

package/package.json

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

package/src/Markdown/Markdown.styled.d.ts

@@ -711,12 +711,12 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
     menuItemLineHeightSmall?: string | undefined;
     menuItemLineHeightMedium?: string | undefined;
     menuItemLineHeightLarge?: string | undefined;
-    menuItemFontSize: string;
+    menuItemFontSize?: string | undefined;
     menuItemFontSizeSmall?: string | undefined;
     menuItemFontSizeMedium?: string | undefined;
     menuItemFontSizeLarge?: string | undefined;
-    menuItemPaddingX: string;
-    menuItemPaddingY: string;
+    menuItemPaddingX?: string | undefined;
+    menuItemPaddingY?: string | undefined;
     menuItemPaddingXSmall?: string | undefined;
     menuItemPaddingYSmall?: string | undefined;
     menuItemPaddingXMedium?: string | undefined;
@@ -957,12 +957,12 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
     checkboxLineHeightSmall?: string | undefined;
     checkboxLineHeightMedium?: string | undefined;
     checkboxLineHeightLarge?: string | undefined;
-    checkboxBoxSize: string;
+    checkboxBoxSize?: string | undefined;
     checkboxBoxSizeSmall?: string | undefined;
     checkboxBoxSizeMedium?: string | undefined;
     checkboxBoxSizeLarge?: string | undefined;
     checkboxCaptionGap?: string | undefined;
-    checkboxPaddingY: string;
+    checkboxPaddingY?: string | undefined;
     checkboxPaddingYSmall?: string | undefined;
     checkboxPaddingYMedium?: string | undefined;
     checkboxPaddingYLarge?: string | undefined;
@@ -1087,20 +1087,20 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
     radioCircleOffsetY?: string | undefined;
     radioCheckedDisabledBulletBg?: string | undefined;
     radioGroupLegacyItemGap?: string | undefined;
-    tabFontSize: string;
+    tabFontSize?: string | undefined;
     tabFontSizeSmall?: string | undefined;
     tabFontSizeMedium?: string | undefined;
     tabFontSizeLarge?: string | undefined;
-    tabLineHeight: string;
+    tabLineHeight?: string | undefined;
     tabLineHeightSmall?: string | undefined;
     tabLineHeightMedium?: string | undefined;
     tabLineHeightLarge?: string | undefined;
-    tabPaddingX: string;
+    tabPaddingX?: string | undefined;
     tabPaddingXSmall?: string | undefined;
     tabPaddingXMedium?: string | undefined;
     tabPaddingXLarge?: string | undefined;
     tabsMarginX?: string | undefined;
-    tabPaddingY: string;
+    tabPaddingY?: string | undefined;
     tabPaddingYSmall?: string | undefined;
     tabPaddingYMedium?: string | undefined;
     tabPaddingYLarge?: string | undefined;

package/src/Markdown/Markdown.styled.js

@@ -51,26 +51,44 @@ export var getMarkdownMentionStyle = function (x, y) { return ({
 export var UserDescriptions = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"], ["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"])));
 export var MentionMenuItem = styled(MenuItem)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  padding: 4px 28px;\n"], ["\n  padding: 4px 28px;\n"])));
 export var VisuallyHidden = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"])));
+var extendThemeConfigWithSized = function (config) {
+    var finalConfig = {};
+    var configKeys = Object.keys(config);
+    configKeys.forEach(function (key) {
+        if (key !== 'prototype') {
+            finalConfig["".concat(key, "Small")] = config[key];
+            finalConfig["".concat(key, "Medium")] = config[key];
+            finalConfig["".concat(key, "Large")] = config[key];
+        }
+    });
+    return finalConfig;
+};
 export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless) {
     var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
-    return ThemeFactory.create(__assign(__assign(__assign({ tabFontSize: elementsFontSize, tabPaddingY: '0', tabPaddingX: '6px', tabColorHover: 'transparent', tabColorFocus: 'transparent', tabLineHeight: elementsLineHeight, tabBorderWidth: '0', selectBorderWidth: '0', btnDefaultBg: 'transparent', btnDefaultActiveBorderColor: 'transparent', btnDisabledBg: 'transparent', btnDisabledBorderColor: 'transparent', btnDisabledTextColor: colors.disabledButton, btnDefaultHoverBg: themeMode === 'light' ? reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDefaultHoverBg : reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDisabledBg, btnFontSizeSmall: elementsFontSize, checkboxPaddingY: '0', checkboxBg: 'transparent', checkboxHoverBg: 'transparent', checkboxCheckedBg: 'transparent', checkboxShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowHover: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedHoverShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedActiveShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowActive: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedColor: colors.grayDefault, checkboxBoxSize: elementsFontSize, menuItemFontSize: elementsFontSize, menuItemPaddingY: '4px', menuItemPaddingX: '28px', hintFontSize: elementsFontSize, hintColor: themeMode === 'light' ? colors.white : colors.grayDefault, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }, (panelHorizontalPadding &&
-        {
+    return ThemeFactory.create(__assign(__assign(__assign(__assign(__assign({}, extendThemeConfigWithSized({
+        tabFontSize: elementsFontSize,
+        tabPaddingY: '0',
+        tabPaddingX: '6px',
+        tabLineHeight: elementsLineHeight,
+        checkboxPaddingY: '0',
+        checkboxBoxSize: elementsFontSize,
+        menuItemFontSize: elementsFontSize,
+        menuItemPaddingY: '4px',
+        menuItemPaddingX: '28px',
+    })), { tabColorHover: 'transparent', tabColorFocus: 'transparent', tabBorderWidth: '0', selectBorderWidth: '0', btnDefaultBg: 'transparent', btnDefaultActiveBorderColor: 'transparent', btnDisabledBg: 'transparent', btnDisabledBorderColor: 'transparent', btnDisabledTextColor: colors.disabledButton, btnDefaultHoverBg: themeMode === 'light' ? reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDefaultHoverBg : reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDisabledBg, btnFontSizeSmall: elementsFontSize, checkboxBg: 'transparent', checkboxHoverBg: 'transparent', checkboxCheckedBg: 'transparent', checkboxShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowHover: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedHoverShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedActiveShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowActive: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedColor: colors.grayDefault, hintFontSize: elementsFontSize, hintColor: themeMode === 'light' ? colors.white : colors.grayDefault, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }), (panelHorizontalPadding &&
+        extendThemeConfigWithSized({
             textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
-        })), (borderless &&
+        }))), (borderless &&
         {
             textareaBorderColor: 'transparent',
             textareaBorderColorFocus: 'transparent',
             textareaBorderTopColor: 'transparent',
             textareaShadow: 'none',
         })), (fullScreenTextareaPadding &&
-        {
+        __assign({ textareaBorderColor: 'transparent', textareaBorderColorFocus: 'transparent', textareaBorderTopColor: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
             textareaMinHeight: '85vh',
-            textareaBorderColor: 'transparent',
-            textareaBorderColorFocus: 'transparent',
-            textareaBorderTopColor: 'transparent',
-            textareaShadow: 'none',
             textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
-            textareaPaddingY: "0",
-        })), reactUiTheme);
+            textareaPaddingY: '0',
+        })))), reactUiTheme);
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

package/src/Markdown/MarkdownHelpItems.d.ts

@@ -4,7 +4,10 @@ import { RefItem } from './types';
 export declare const eventKeyCodeToMarkdownFormat: {
     [key: number]: MarkdownFormat;
 };
-export declare const markdownFormatToShortKey: Partial<{
+export declare const markdownFormatToShortKeyLong: Partial<{
+    [key in MarkdownFormat]: string;
+}>;
+export declare const markdownFormatToShortKeyShort: Partial<{
     [key in MarkdownFormat]: string;
 }>;
 export interface MarkdownHelpItem {

package/src/Markdown/MarkdownHelpItems.js

@@ -7,7 +7,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var _a;
+var _a, _b;
 import React from 'react';
 import { MarkdownSymbolWrapper } from './Markdown.styled';
 import { MarkdownFormat } from './MarkdownFormat';
@@ -27,30 +27,32 @@ export var eventKeyCodeToMarkdownFormat = {
     52: MarkdownFormat.h4,
     66: MarkdownFormat.bold,
     73: MarkdownFormat.italic,
-    82: MarkdownFormat.crossed,
-    85: MarkdownFormat.ref,
+    83: MarkdownFormat.crossed,
+    75: MarkdownFormat.ref,
     76: MarkdownFormat.list,
     68: MarkdownFormat.checkedList,
     78: MarkdownFormat.numberedList,
-    69: MarkdownFormat.codeBlock,
+    67: MarkdownFormat.codeBlock,
     81: MarkdownFormat.quote,
     80: MarkdownFormat.image,
 };
-export var markdownFormatToShortKey = (_a = {},
+export var markdownFormatToShortKeyLong = (_a = {},
     _a[MarkdownFormat.h2] = '2',
     _a[MarkdownFormat.h3] = '3',
     _a[MarkdownFormat.h4] = '4',
-    _a[MarkdownFormat.bold] = 'B',
-    _a[MarkdownFormat.italic] = 'I',
-    _a[MarkdownFormat.crossed] = 'R',
-    _a[MarkdownFormat.ref] = 'U',
+    _a[MarkdownFormat.crossed] = 'S',
     _a[MarkdownFormat.list] = 'L',
     _a[MarkdownFormat.checkedList] = 'D',
     _a[MarkdownFormat.numberedList] = 'N',
-    _a[MarkdownFormat.codeBlock] = 'E',
+    _a[MarkdownFormat.codeBlock] = 'C',
     _a[MarkdownFormat.quote] = 'Q',
     _a[MarkdownFormat.image] = 'P',
     _a);
+export var markdownFormatToShortKeyShort = (_b = {},
+    _b[MarkdownFormat.bold] = 'B',
+    _b[MarkdownFormat.italic] = 'I',
+    _b[MarkdownFormat.ref] = 'K',
+    _b);
 function reverseString(text) {
     return text.split('').reverse().join('');
 }

package/src/Markdown/MarkdownHelpers/MarkdownCombination.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import { HintContentWrapper } from '../Markdown.styled';
-import { markdownFormatToShortKey } from '../MarkdownHelpItems';
+import { markdownFormatToShortKeyLong, markdownFormatToShortKeyShort } from '../MarkdownHelpItems';
 import { isMacintosh } from '../utils/isMacintosh';
 export var MarkdownCombination = function (_a) {
     var format = _a.format, text = _a.text;
-    var shortKey = markdownFormatToShortKey[format];
+    var shortKeyLong = markdownFormatToShortKeyLong[format];
+    var shortKeyShort = markdownFormatToShortKeyShort[format];
+    var shortKey = shortKeyLong || shortKeyShort;
     return (React.createElement(HintContentWrapper, null,
         React.createElement("span", null, text),
-        !!shortKey && (React.createElement("span", null,
-            "CTRL+",
-            isMacintosh() ? '⌥' : 'ALT',
+        !!shortKey && renderHint()));
+    function renderHint() {
+        var ctrlKey = isMacintosh() ? '⌘' : 'CTRL';
+        var extraKey = shortKeyLong ? '+SHIFT' : '';
+        return (React.createElement("span", null,
+            ctrlKey,
+            extraKey,
             "+",
-            markdownFormatToShortKey[format]))));
+            shortKey));
+    }
 };

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js

@@ -4,7 +4,7 @@ import { MarkdownCombination } from './MarkdownCombination';
 import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
 export var MarkdownFormatButton = function (_a) {
     var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text;
-    return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 340 },
+    return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 360 },
         React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
             React.createElement(MarkdownButtonIcon, null, icon),
             React.createElement(VisuallyHidden, null, text))));

package/src/Markdown/MarkdownHelpers/markdownHelpers.js

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { getPastedHtml } from './markdownTextareaHelpers';
 import { useFileLogic } from '../Files/Files.logic';
 import { MarkdownFormat } from '../MarkdownFormat';
-import { checkSpaceSymbol, eventKeyCodeToMarkdownFormat, markdownHelpFiles, markdownHelpItems, } from '../MarkdownHelpItems';
+import { checkSpaceSymbol, eventKeyCodeToMarkdownFormat, markdownFormatToShortKeyLong, 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];
@@ -59,12 +59,12 @@ export function setTextareaCursor(format, prevCommentPartLength, nextCommentPart
 }
 export function createMarkdownHelpKeyDownHandler(text, ref, callback) {
     return function (event) {
-        if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
             return;
-        }
         var textareaNode = ref.current.node;
         var format = eventKeyCodeToMarkdownFormat[event.keyCode];
-        if (event.ctrlKey && event.altKey && format) {
+        var isLong = markdownFormatToShortKeyLong[format];
+        if ((event.metaKey || event.ctrlKey) && (isLong ? event.shiftKey : true) && format) {
             var markdownHelpItem = markdownHelpItems.find(function (item) { return item.format === format; });
             if (markdownHelpItem && textareaNode) {
                 event.stopPropagation();