@skbkontur/markdown 1.11.3 → 1.12.2

package/index.d.ts

@@ -1,5 +1,5 @@
 export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
-export { MarkdownCombination } from './src/Markdown/MarkdownHelpers/MarkdownCombination';
+export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
 export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
 export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
 export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode } from '././src/Markdown/types';

package/index.js

@@ -1,5 +1,5 @@
 export { Markdown } from './src/Markdown/Markdown';
-export { MarkdownCombination } from './src/Markdown/MarkdownHelpers/MarkdownCombination';
+export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
 export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
 export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
 export { ViewMode } from '././src/Markdown/types';

package/package.json

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

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

@@ -15,14 +15,15 @@ export declare const MarkdownPreview: import("styled-components").StyledComponen
 export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
     width?: Nullable<number | string>;
 } & HorizontalPaddings, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
+    width?: Nullable<number | string>;
+} & HorizontalPaddings, never>;
 export declare const ActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownButtonWrapper: import("styled-components").StyledComponent<typeof Button, MarkdownTheme, {}, never>;
 export declare const MarkdownButtonIcon: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownDropdown: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownSymbolWrapper: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
 export declare const MarkdownMenuItem: import("styled-components").StyledComponent<typeof MenuItem, MarkdownTheme, {}, never>;
-export declare const HintContentWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownEditorBlock: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const getMarkdownMentionStyle: (x: number, y: number) => CSSProperties;
 export declare const UserDescriptions: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;

package/src/Markdown/Markdown.styled.js

@@ -24,33 +24,32 @@ export var Avatar = styled.img.attrs({ alt: '' })(templateObject_3 || (templateO
 export var UserWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"], ["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
 export var DroppablePlaceholder = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"])), function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : 8); }, function (p) { return (p.theme.themeMode === 'dark' ? 0.1 : 0.7); }, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.droppablePlaceholderBgImage) !== null && _b !== void 0 ? _b : ''; });
 export var MentionWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 6px ", "px;\n  ", "\n"], ["\n  padding: 6px ", "px;\n  ", "\n"])), function (_a) {
+export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 6px ", "px;\n  ", "\n  box-sizing: border-box;\n"], ["\n  padding: 6px ", "px;\n  ", "\n  box-sizing: border-box;\n"])), function (_a) {
     var _b;
     var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
     return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
 }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); });
-export var MarkdownActionsWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"], ["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"])), function (p) { return (p.fullscreenPadding ? '16px' : 0); }, function (p) { var _a; return (_a = p.fullscreenPadding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); }, function (_a) {
+export var MarkdownActionsWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  position: ", ";\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"], ["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  position: ", ";\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"])), function (p) { return (p.fullscreenPadding ? '16px' : 0); }, function (p) { var _a; return (_a = p.fullscreenPadding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return (p.fullscreenPadding ? 'sticky' : 'relative'); }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); }, function (_a) {
     var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
     if (panelPadding && !fullscreenPadding)
         return panelStyle({ theme: theme, panelPadding: panelPadding });
 });
-export var ButtonsWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"])));
+export var ButtonsWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"])), function (p) { return (p.fullscreenPadding ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
 export var ActionsWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
 export var MarkdownButtonWrapper = styled(Button)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"], ["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"])));
 export var MarkdownButtonIcon = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  height: 24px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: 24px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"])));
 export var MarkdownDropdown = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  button {\n    font-size: ", ";\n  }\n"], ["\n  button {\n    font-size: ", ";\n  }\n"])), function (p) { return p.theme.elementsFontSize; });
 export var MarkdownSymbolWrapper = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
 export var MarkdownMenuItem = styled(MenuItem)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding-left: 8px;\n  padding-right: 8px;\n  color: ", ";\n"], ["\n  padding-left: 8px;\n  padding-right: 8px;\n  color: ", ";\n"])), function (p) { return p.theme.colors.grayDefault; });
-export var HintContentWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"])));
-export var MarkdownEditorBlock = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var MarkdownEditorBlock = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 export var getMarkdownMentionStyle = function (x, y) { return ({
     position: 'absolute',
     top: y,
     left: x,
 }); };
-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"])));
+export var UserDescriptions = styled.div(templateObject_17 || (templateObject_17 = __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_18 || (templateObject_18 = __makeTemplateObject(["\n  padding: 4px 28px;\n"], ["\n  padding: 4px 28px;\n"])));
+export var VisuallyHidden = styled.span(templateObject_19 || (templateObject_19 = __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);
@@ -63,6 +62,13 @@ var extendThemeConfigWithSized = function (config) {
     });
     return finalConfig;
 };
+var borderlessTextareaVariables = {
+    textareaBorderColor: 'transparent',
+    textareaBorderColorFocus: 'transparent',
+    textareaBorderTopColor: 'transparent',
+    textareaBorderColorHover: 'transparent',
+    textareaShadow: 'none',
+};
 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(__assign(__assign({}, extendThemeConfigWithSized({
@@ -78,17 +84,11 @@ export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizon
     })), { 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 &&
-        {
-            textareaBorderColor: 'transparent',
-            textareaBorderColorFocus: 'transparent',
-            textareaBorderTopColor: 'transparent',
-            textareaShadow: 'none',
-        })), (fullScreenTextareaPadding &&
-        __assign({ sidePagePaddingLeft: '0', sidePagePaddingRight: '0', textareaBorderColor: 'transparent', textareaBorderColorFocus: 'transparent', textareaBorderTopColor: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
+        }))), (borderless && borderlessTextareaVariables)), (fullScreenTextareaPadding &&
+        __assign(__assign({ sidePagePaddingLeft: '0', sidePagePaddingRight: '0', textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
             textareaMinHeight: '85vh',
             textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
             textareaPaddingY: '0',
-        })))), reactUiTheme);
+        })), borderlessTextareaVariables))), 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;
+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;

package/src/Markdown/MarkdownActions.js

@@ -13,11 +13,11 @@ import { Dropdown } from '@skbkontur/react-ui';
 import React from 'react';
 import { COMMONMARK_HELP_URL } from './constants';
 import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
-import { MarkdownCombination } from './MarkdownHelpers/MarkdownCombination';
 import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
 import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from './MarkdownHelpItems';
 import { ViewMode } from './types';
+import { MarkdownCombination } from '../MarkdownCombination/MarkdownCombination';
 import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
 import { Collapse } from '../MarkdownIcons/Collapse';
 import { DocIcon } from '../MarkdownIcons/DocIcon';
@@ -28,7 +28,7 @@ export var MarkdownActions = function (_a) {
     var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi, hideHeadersSelect = _a.hideHeadersSelect, width = _a.width, showShortKeys = _a.showShortKeys;
     var isPreviewMode = viewMode === ViewMode.Preview;
     return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
-        React.createElement(ButtonsWrapper, null,
+        React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
             React.createElement(ActionsWrapper, null,
                 hideHeadersSelect || (React.createElement(MarkdownDropdown, null,
                     React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 280, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js

@@ -1,6 +1,6 @@
 import { Hint } from '@skbkontur/react-ui';
 import React from 'react';
-import { MarkdownCombination } from './MarkdownCombination';
+import { MarkdownCombination } from '../../MarkdownCombination/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, href = _a.href, showShortKey = _a.showShortKey;

package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js

@@ -77,14 +77,17 @@ export var useFullscreenHorizontalPadding = function (fullscreen, textareaWidth)
     useEffect(function () {
         if (fullscreen && textareaWidth) {
             var observable = document.body;
-            var handleChangeWidth_1 = function (width) { return setPadding((width - textareaWidth) / 2); };
+            var handleChangeWidth_1 = function (width) {
+                var newPadding = (width - textareaWidth) / 2;
+                setPadding(newPadding ? newPadding : undefined);
+            };
             handleChangeWidth_1(observable.clientWidth);
             var observer_1 = new ResizeObserver(function (entries) { return entries.forEach(function (e) { return handleChangeWidth_1(e.target.clientWidth); }); });
             observer_1.observe(observable);
             return function () { return observer_1.disconnect(); };
         }
         else {
-            setPadding(0);
+            setPadding(undefined);
         }
     }, [fullscreen, textareaWidth]);
     return padding;

package/src/{Markdown/MarkdownHelpers → MarkdownCombination}/MarkdownCombination.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { MarkdownFormat } from '../MarkdownFormat';
+import { MarkdownFormat } from '../Markdown/MarkdownFormat';
 interface Props {
     format: MarkdownFormat;
     text: ReactNode;

package/src/MarkdownCombination/MarkdownCombination.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { HintContentWrapper } from './MarkdownCombination.styled';
+import { markdownFormatToShortKeyLong, markdownFormatToShortKeyShort } from '../Markdown/MarkdownHelpItems';
+import { isMacintosh } from '../Markdown/utils/isMacintosh';
+import { ThemeProvider } from '../styles/styled-components';
+import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
+export var MarkdownCombination = function (_a) {
+    var format = _a.format, text = _a.text, showShortKey = _a.showShortKey;
+    var shortKeyLong = markdownFormatToShortKeyLong[format];
+    var shortKeyShort = markdownFormatToShortKeyShort[format];
+    var shortKey = shortKeyLong || shortKeyShort;
+    return (React.createElement(MarkdownThemeConsumer, null, function (theme) { return (React.createElement(ThemeProvider, { theme: theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME },
+        React.createElement(HintContentWrapper, null,
+            React.createElement("span", null, text),
+            showShortKey && !!shortKey && renderHint()))); }));
+    function renderHint() {
+        var ctrlKey = isMacintosh() ? '⌘' : 'CTRL';
+        var extraKey = shortKeyLong ? '+SHIFT' : '';
+        return (React.createElement("span", null,
+            ctrlKey,
+            extraKey,
+            "+",
+            shortKey));
+    }
+};

package/src/MarkdownCombination/MarkdownCombination.styled.d.ts

@@ -0,0 +1 @@
+export declare const HintContentWrapper: import("styled-components").StyledComponent<"div", import("../..").MarkdownTheme, {}, never>;

package/src/MarkdownCombination/MarkdownCombination.styled.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '../styles/styled-components';
+export var HintContentWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"])));
+var templateObject_1;

package/src/Markdown/MarkdownHelpers/MarkdownCombination.js

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