@skbkontur/markdown 2.4.0 → 2.4.2

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.js +14 -13
  3. package/src/Markdown/Markdown.styled.d.ts +3 -1
  4. package/src/Markdown/Markdown.styled.js +11 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.4.0",
3
+ "version": "2.4.2",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.js CHANGED
@@ -42,23 +42,24 @@ import { MarkdownViewer } from '../MarkdownViewer';
42
42
  import { ThemeProvider } from '../styles/styled-components';
43
43
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
44
44
  export var Markdown = function (props) {
45
- var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, _a = props.showShotKeys, showShotKeys = _a === void 0 ? true : _a, hideActionsOptions = props.hideActionsOptions, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
45
+ var _a;
46
+ var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, hideActionsOptions = props.hideActionsOptions, onChangeViewMode = props.onChangeViewMode, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
46
47
  var textareaRef = useRef(null);
47
- var _b = useState(), mention = _b[0], setMention = _b[1];
48
- var _c = useState(ViewMode.Edit), viewMode = _c[0], setViewMode = _c[1];
49
- var _d = useState(false), fullscreen = _d[0], setFullScreen = _d[1];
50
- var _e = useState(0), initialWidth = _e[0], setInitialWidth = _e[1];
51
- var _f = useState(), selectionStart = _f[0], setSelectionStart = _f[1];
52
- var _g = useState(), selectionEnd = _g[0], setSelectionEnd = _g[1];
48
+ var _c = useState(), mention = _c[0], setMention = _c[1];
49
+ var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
50
+ var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
51
+ var _f = useState(0), initialWidth = _f[0], setInitialWidth = _f[1];
52
+ var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
53
+ var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
53
54
  var guid = useRef(new Guid().generate()).current;
54
55
  var isEditMode = viewMode !== ViewMode.Preview;
55
56
  var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
56
- var _h = useResponsiveLayout({
57
+ var _j = useResponsiveLayout({
57
58
  customMediaQueries: {
58
59
  isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
59
60
  },
60
- }), isSplitViewAvailable = _h.isSplitViewAvailable, isMobile = _h.isMobile;
61
- var _j = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _j.getRootProps, isDragActive = _j.isDragActive, requestStatus = _j.requestStatus, open = _j.open, error = _j.error, onResetError = _j.onResetError;
61
+ }), isSplitViewAvailable = _j.isSplitViewAvailable, isMobile = _j.isMobile;
62
+ var _k = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _k.getRootProps, isDragActive = _k.isDragActive, requestStatus = _k.requestStatus, open = _k.open, error = _k.error, onResetError = _k.onResetError;
62
63
  var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
63
64
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
64
65
  useListenTextareaScroll(resetMention, textareaRef.current);
@@ -99,7 +100,7 @@ export var Markdown = function (props) {
99
100
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
100
101
  fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
101
102
  React.createElement(SplitViewEditContainer, null, renderEditContainer()),
102
- React.createElement(SplitViewPreviewContainer, { textareaWidth: textareaProps.width }, renderPreview()))),
103
+ React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_a = textareaProps.width) === null || _a === void 0 ? void 0 : _a.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
103
104
  viewMode === ViewMode.Edit && renderEditContainer(),
104
105
  viewMode === ViewMode.Preview && renderPreview(),
105
106
  isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
@@ -121,13 +122,13 @@ export var Markdown = function (props) {
121
122
  return (React.createElement(MarkdownEditorBlock, null,
122
123
  React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
123
124
  showMention && renderMentions(),
124
- React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
125
+ React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
125
126
  }
126
127
  function renderPreview() {
127
128
  var _a;
128
129
  if (!props.value && viewMode === ViewMode.Split)
129
130
  return React.createElement(EmptyPreview, null);
130
- return (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings, { width: width }), (markdownViewer === null || markdownViewer === void 0 ? void 0 : markdownViewer(props.value)) || (React.createElement(MarkdownViewer, { source: (_a = props.value) !== null && _a !== void 0 ? _a : '', downloadFileApi: api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl: fileApiUrl, profileUrl: profileUrl }))));
131
+ return (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings, { viewMode: viewMode, width: width }), (markdownViewer === null || markdownViewer === void 0 ? void 0 : markdownViewer(props.value)) || (React.createElement(MarkdownViewer, { source: (_a = props.value) !== null && _a !== void 0 ? _a : '', downloadFileApi: api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl: fileApiUrl, profileUrl: profileUrl }))));
131
132
  }
132
133
  function renderMentions() {
133
134
  var _a;
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -18,7 +18,9 @@ export declare const DroppablePlaceholder: import("styled-components").StyledCom
18
18
  export declare const MentionWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
19
19
  export declare const MarkdownPreview: import("styled-components").StyledComponent<"div", MarkdownTheme, {
20
20
  width?: Nullable<number | string>;
21
- } & HorizontalPaddings, never>;
21
+ } & HorizontalPaddings & {
22
+ viewMode: ViewMode;
23
+ }, never>;
22
24
  export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
23
25
  width?: Nullable<number | string>;
24
26
  } & HorizontalPaddings & {
package/src/Markdown/Markdown.styled.js CHANGED
@@ -38,9 +38,11 @@ export var Avatar = styled.img.attrs({ alt: '' })(templateObject_9 || (templateO
38
38
  export var UserWrapper = styled.div(templateObject_10 || (templateObject_10 = __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"])));
39
39
  export var DroppablePlaceholder = styled.div(templateObject_11 || (templateObject_11 = __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 : ''; });
40
40
  export var MentionWrapper = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
41
- export var MarkdownPreview = styled.div(templateObject_13 || (templateObject_13 = __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) {
41
+ export var MarkdownPreview = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 6px\n ", "px;\n ", "\n box-sizing: border-box;\n"], ["\n padding: 6px\n ", "px;\n ", "\n box-sizing: border-box;\n"])), function (_a) {
42
42
  var _b;
43
- var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
43
+ var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding, viewMode = _a.viewMode;
44
+ if (viewMode === ViewMode.Split)
45
+ return 0;
44
46
  return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
45
47
  }, function (p) { return p.width && "width: ".concat(getAllowedCssValue(p.width), ";"); });
46
48
  export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n padding: ", "\n ", " 0;\n margin-bottom: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n \n a {\n border: none !important;\n text-decoration: none !important;\n }\n"], ["\n padding: ", "\n ", " 0;\n margin-bottom: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n \n a {\n border: none !important;\n text-decoration: none !important;\n }\n"])), function (p) { return getMarkdownActionsPadding(!!p.fullscreenPadding, '16px'); }, function (p) { return getMarkdownActionsPadding(!!p.fullscreenPadding, p.fullscreenPadding); }, function (p) { return (p.fullscreen ? 12 : 4); }, function (p) { return p.width && "width: ".concat(getAllowedCssValue(p.width), ";"); }, function (_a) {
@@ -88,8 +90,9 @@ var borderlessTextareaVariables = {
88
90
  };
89
91
  export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless, isFullscreen) {
90
92
  var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
91
- var sidePagePaddingX = viewMode === ViewMode.Split ? '56px' : '0';
92
- var isFullscreenNotSplitMode = isFullscreen && viewMode !== ViewMode.Split;
93
+ var isSplitMode = viewMode === ViewMode.Split;
94
+ var sidePagePaddingX = isSplitMode ? '56px' : '0';
95
+ var isFullscreenNotSplitMode = isFullscreen && !isSplitMode;
93
96
  return ThemeFactory.create(__assign(__assign(__assign(__assign(__assign({}, extendThemeConfigWithSized({
94
97
  tabFontSize: elementsFontSize,
95
98
  tabPaddingY: '0',
@@ -101,13 +104,13 @@ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, pa
101
104
  menuItemPaddingY: '4px',
102
105
  menuItemPaddingX: '28px',
103
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
+ !isSplitMode &&
104
108
  extendThemeConfigWithSized({
105
109
  textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
106
- }))), ((borderless || isFullscreenNotSplitMode) && borderlessTextareaVariables)), (isFullscreen &&
107
- __assign({ sidePagePaddingLeft: sidePagePaddingX, sidePagePaddingRight: sidePagePaddingX, textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
108
- textareaMinHeight: FULLSCREEN_HEIGHT,
110
+ }))), ((borderless || (isFullscreen && viewMode === ViewMode.Edit)) && borderlessTextareaVariables)), (isFullscreen &&
111
+ __assign({ sidePagePaddingLeft: sidePagePaddingX, sidePagePaddingRight: sidePagePaddingX, textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized(__assign({ textareaMinHeight: FULLSCREEN_HEIGHT }, (isFullscreenNotSplitMode && {
109
112
  textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
110
113
  textareaPaddingY: '0',
111
- })))), reactUiTheme);
114
+ })))))), reactUiTheme);
112
115
  };
113
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;