@skbkontur/markdown 1.11.0 → 1.11.1

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 +4 -3
  3. package/src/Markdown/Markdown.styled.d.ts +3 -1
  4. package/src/Markdown/Markdown.styled.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "1.11.0",
3
+ "version": "1.11.1",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.js CHANGED
@@ -51,6 +51,7 @@ export var Markdown = function (props) {
51
51
  var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
52
52
  var guid = useRef(new Guid().generate()).current;
53
53
  var isEditMode = viewMode === ViewMode.Edit;
54
+ var width = fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width;
54
55
  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;
55
56
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
56
57
  useListenTextareaScroll(resetMention, textareaRef.current);
@@ -75,11 +76,11 @@ export var Markdown = function (props) {
75
76
  };
76
77
  var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
77
78
  React.createElement(Wrapper, __assign({}, getRootProps()),
78
- !hideMarkdownActions && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, hideHeadersSelect: hideHeadersSelect, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen })),
79
+ !hideMarkdownActions && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, hideHeadersSelect: hideHeadersSelect, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen })),
79
80
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
80
81
  isEditMode && renderEditContainer(),
81
82
  isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
82
- !isEditMode && (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings), (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 }))))));
83
+ !isEditMode && (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 }))))));
83
84
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
84
85
  var defaultTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
85
86
  var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless);
@@ -97,7 +98,7 @@ export var Markdown = function (props) {
97
98
  return (React.createElement(MarkdownEditorBlock, null,
98
99
  React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
99
100
  showMention && renderMentions(),
100
- React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
101
+ React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
101
102
  }
102
103
  function renderMentions() {
103
104
  var _a;
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -9,7 +9,9 @@ export declare const Avatar: import("styled-components").StyledComponent<"img",
9
9
  export declare const UserWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
10
10
  export declare const DroppablePlaceholder: import("styled-components").StyledComponent<"div", MarkdownTheme, HorizontalPaddings, never>;
11
11
  export declare const MentionWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
12
- export declare const MarkdownPreview: import("styled-components").StyledComponent<"div", MarkdownTheme, HorizontalPaddings, never>;
12
+ export declare const MarkdownPreview: import("styled-components").StyledComponent<"div", MarkdownTheme, {
13
+ width?: Nullable<number | string>;
14
+ } & HorizontalPaddings, never>;
13
15
  export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
14
16
  width?: Nullable<number | string>;
15
17
  } & HorizontalPaddings, never>;
package/src/Markdown/Markdown.styled.js CHANGED
@@ -24,11 +24,11 @@ export var Avatar = styled.img.attrs({ alt: '' })(templateObject_3 || (templateO
24
24
  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"])));
25
25
  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 : ''; });
26
26
  export var MentionWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
27
- export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 6px ", "px;\n"], ["\n padding: 6px ", "px;\n"])), function (_a) {
27
+ export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 6px ", "px;\n ", "\n"], ["\n padding: 6px ", "px;\n ", "\n"])), function (_a) {
28
28
  var _b;
29
29
  var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
30
30
  return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
31
- });
31
+ }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); });
32
32
  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) {
33
33
  var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
34
34
  if (panelPadding && !fullscreenPadding)