@skbkontur/markdown 2.4.7 → 2.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/Markdown/Markdown.styled.d.ts +4 -3
  3. package/src/Markdown/Markdown.styled.js +17 -16
  4. package/src/Markdown/MarkdownActions.js +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.4.7",
3
+ "version": "2.4.8",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -29,7 +29,8 @@ export declare const MarkdownActionsWrapper: import("styled-components").StyledC
29
29
  export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
30
30
  fullscreen?: boolean | undefined;
31
31
  }, never>;
32
- export declare const ActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
32
+ export declare const ActionsRightWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
33
+ export declare const ActionsLeftWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
33
34
  export declare const MarkdownButtonWrapper: import("styled-components").StyledComponent<typeof Button, MarkdownTheme, {}, never>;
34
35
  export declare const MarkdownButtonIcon: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
35
36
  export declare const MarkdownDropdown: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
@@ -743,8 +744,8 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, viewMode: V
743
744
  dropdownOutlineWidth?: string | undefined;
744
745
  dropdownLineHeightSmall?: string | undefined;
745
746
  dropdownFontSizeSmall?: string | undefined;
746
- dropdownPaddingXSmall?: string | undefined;
747
- dropdownPaddingYSmall?: string | undefined;
747
+ dropdownPaddingXSmall: string;
748
+ dropdownPaddingYSmall: string;
748
749
  dropdownIconSizeSmall?: string | undefined;
749
750
  dropdownLineHeightMedium?: string | undefined;
750
751
  dropdownFontSizeMedium?: string | undefined;
package/src/Markdown/Markdown.styled.js CHANGED
@@ -50,25 +50,26 @@ export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObj
50
50
  if (panelPadding && !fullscreen)
51
51
  return panelStyle({ theme: theme, panelPadding: panelPadding });
52
52
  });
53
- export var ButtonsWrapper = styled.div(templateObject_15 || (templateObject_15 = __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.fullscreen ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
54
- export var ActionsWrapper = styled.div(templateObject_16 || (templateObject_16 = __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"])));
55
- export var MarkdownButtonWrapper = styled(Button)(templateObject_17 || (templateObject_17 = __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"])));
56
- export var MarkdownButtonIcon = styled.div(templateObject_18 || (templateObject_18 = __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"])));
57
- export var MarkdownDropdown = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n button {\n font-size: ", ";\n }\n"], ["\n button {\n font-size: ", ";\n }\n"])), function (p) { return p.theme.elementsFontSize; });
58
- export var MarkdownSymbolWrapper = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
59
- export var MarkdownMenuItem = styled(MenuItem)(templateObject_21 || (templateObject_21 = __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; });
60
- export var MarkdownEditorBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
53
+ export var ButtonsWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n"])), function (p) { return (p.fullscreen ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
54
+ export var ActionsRightWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
55
+ export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n flex-wrap: wrap;\n"], ["\n flex-wrap: wrap;\n"])));
56
+ export var MarkdownButtonWrapper = styled(Button)(templateObject_18 || (templateObject_18 = __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"])));
57
+ export var MarkdownButtonIcon = styled.div(templateObject_19 || (templateObject_19 = __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"])));
58
+ export var MarkdownDropdown = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n align-items: end;\n padding-bottom: 1px;\n\n button {\n font-size: ", ";\n }\n"], ["\n display: flex;\n align-items: end;\n padding-bottom: 1px;\n\n button {\n font-size: ", ";\n }\n"])), function (p) { return p.theme.elementsFontSize; });
59
+ export var MarkdownSymbolWrapper = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
60
+ export var MarkdownMenuItem = styled(MenuItem)(templateObject_22 || (templateObject_22 = __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; });
61
+ export var MarkdownEditorBlock = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
61
62
  export var getMarkdownMentionStyle = function (x, y) { return ({
62
63
  position: 'absolute',
63
64
  top: y,
64
65
  left: x,
65
66
  }); };
66
- export var UserDescriptions = styled.div(templateObject_23 || (templateObject_23 = __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"])));
67
- export var MentionMenuItem = styled(MenuItem)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
68
- export var VisuallyHidden = styled.span(templateObject_25 || (templateObject_25 = __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"])));
69
- export var EmptyPreviewContainer = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n display: flex;\n width: 407px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 407px;\n flex-direction: column;\n"])));
70
- export var EmptyPreviewText = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"], ["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"])));
71
- export var EmptyPreviewIconWrapper = styled.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n margin-top: 16px;\n margin-bottom: 32px;\n"], ["\n margin-top: 16px;\n margin-bottom: 32px;\n"])));
67
+ export var UserDescriptions = styled.div(templateObject_24 || (templateObject_24 = __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"])));
68
+ export var MentionMenuItem = styled(MenuItem)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
69
+ export var VisuallyHidden = styled.span(templateObject_26 || (templateObject_26 = __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"])));
70
+ export var EmptyPreviewContainer = styled.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n width: 407px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 407px;\n flex-direction: column;\n"])));
71
+ export var EmptyPreviewText = styled.span(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"], ["\n font-weight: 700;\n font-size: 40px;\n line-height: 48px;\n color: #d6d6d6;\n"])));
72
+ export var EmptyPreviewIconWrapper = styled.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n margin-top: 16px;\n margin-bottom: 32px;\n"], ["\n margin-top: 16px;\n margin-bottom: 32px;\n"])));
72
73
  var extendThemeConfigWithSized = function (config) {
73
74
  var finalConfig = {};
74
75
  var configKeys = Object.keys(config);
@@ -103,7 +104,7 @@ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, pa
103
104
  menuItemFontSize: elementsFontSize,
104
105
  menuItemPaddingY: '4px',
105
106
  menuItemPaddingX: '28px',
106
- })), { 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: colors.textInverse, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }), (panelHorizontalPadding &&
107
+ })), { dropdownPaddingXSmall: '4px', dropdownPaddingYSmall: '4px', 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: colors.textInverse, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }), (panelHorizontalPadding &&
107
108
  !isSplitMode &&
108
109
  extendThemeConfigWithSized({
109
110
  textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
@@ -113,4 +114,4 @@ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, pa
113
114
  textareaPaddingY: '0',
114
115
  })))))), reactUiTheme);
115
116
  };
116
- 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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
117
+ 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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
package/src/Markdown/MarkdownActions.js CHANGED
@@ -13,7 +13,7 @@ import { Dropdown, Hint } from '@skbkontur/react-ui';
13
13
  import React from 'react';
14
14
  import { COMMONMARK_HELP_URL } from './constants';
15
15
  import { EmojiDropdown } from './Emoji/EmojiDropdown';
16
- import { ActionsWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownDropdown, MarkdownMenuItem, } from './Markdown.styled';
16
+ import { ActionsLeftWrapper, ActionsRightWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownDropdown, MarkdownMenuItem, } from './Markdown.styled';
17
17
  import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
18
18
  import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
19
19
  import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from './MarkdownHelpItems';
@@ -31,7 +31,7 @@ export var MarkdownActions = function (_a) {
31
31
  var isPreviewMode = viewMode === ViewMode.Preview;
32
32
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
33
33
  React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
34
- React.createElement(ActionsWrapper, null,
34
+ React.createElement(ActionsLeftWrapper, null,
35
35
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, null,
36
36
  React.createElement(Hint, { text: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", pos: "top left" },
37
37
  React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 300, caption: "H" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
@@ -54,7 +54,7 @@ export var MarkdownActions = function (_a) {
54
54
  hasFilesApi && !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.file) && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", showShortKey: showShortKeys, disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onOpenFileDialog })),
55
55
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
56
56
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.help) && (React.createElement(MarkdownFormatButton, { hintText: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", icon: React.createElement(DocIcon, null), text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", href: COMMONMARK_HELP_URL }))),
57
- React.createElement(ActionsWrapper, null,
57
+ React.createElement(ActionsRightWrapper, null,
58
58
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
59
59
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.screenMode) && !disableFullscreen && (React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : ' Развернуть', onClick: onClickFullscreen }))))));
60
60
  function renderViewModeButton() {