@skbkontur/markdown 2.2.10 → 2.3.0

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 (21) hide show
  1. package/package.json +1 -1
  2. package/src/Markdown/Markdown.creevey.js +101 -1
  3. package/src/Markdown/Markdown.js +45 -20
  4. package/src/Markdown/Markdown.styled.d.ts +12 -2
  5. package/src/Markdown/Markdown.styled.js +36 -23
  6. package/src/Markdown/MarkdownActions.d.ts +2 -0
  7. package/src/Markdown/MarkdownActions.js +7 -10
  8. package/src/Markdown/MarkdownHelpers/EmptyPreview.d.ts +1 -0
  9. package/src/Markdown/MarkdownHelpers/EmptyPreview.js +10 -0
  10. package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.d.ts +2 -2
  11. package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js +14 -14
  12. package/src/Markdown/constants.d.ts +2 -0
  13. package/src/Markdown/constants.js +2 -0
  14. package/src/Markdown/types.d.ts +2 -1
  15. package/src/Markdown/types.js +1 -0
  16. package/src/MarkdownIcons/EmptyPrviewArrow.d.ts +1 -0
  17. package/src/MarkdownIcons/EmptyPrviewArrow.js +9 -0
  18. package/src/MarkdownIcons/SplitView.d.ts +1 -0
  19. package/src/MarkdownIcons/SplitView.js +5 -0
  20. package/src/MarkdownIcons/ToolPencil.js +1 -1
  21. package/src/MarkdownViewer/MarkdownViewer.styles.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.2.10",
3
+ "version": "2.3.0",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.creevey.js CHANGED
@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
36
36
  };
37
37
  import { story, kind, test } from 'creevey';
38
38
  kind('Markdown', function () {
39
- story('WithActions', function (_a) {
39
+ story('MediumSize', function (_a) {
40
40
  var setStoryParameters = _a.setStoryParameters;
41
41
  setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
42
42
  test('withPreview', function () {
@@ -68,6 +68,56 @@ kind('Markdown', function () {
68
68
  });
69
69
  });
70
70
  });
71
+ test('withFullscreen', function () {
72
+ var _a, _b, _c;
73
+ return __awaiter(this, void 0, void 0, function () {
74
+ var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
75
+ return __generator(this, function (_d) {
76
+ switch (_d.label) {
77
+ case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
78
+ case 1:
79
+ buttons = _d.sent();
80
+ return [4 /*yield*/, this.browser
81
+ .actions()
82
+ .click(buttons[buttons.length - 1])
83
+ .perform()];
84
+ case 2:
85
+ _d.sent();
86
+ return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
87
+ case 3:
88
+ fullscreenSplit = _d.sent();
89
+ return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
90
+ case 4:
91
+ buttons = _d.sent();
92
+ return [4 /*yield*/, this.browser
93
+ .actions()
94
+ .click(buttons[buttons.length - 2])
95
+ .perform()];
96
+ case 5:
97
+ _d.sent();
98
+ return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
99
+ case 6:
100
+ fullscreenPreview = _d.sent();
101
+ return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
102
+ case 7:
103
+ buttons = _d.sent();
104
+ return [4 /*yield*/, this.browser
105
+ .actions()
106
+ .click(buttons[buttons.length - 2])
107
+ .perform()];
108
+ case 8:
109
+ _d.sent();
110
+ return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
111
+ case 9:
112
+ fullscreenEdit = _d.sent();
113
+ return [4 /*yield*/, this.expect({ fullscreenSplit: fullscreenSplit, fullscreenPreview: fullscreenPreview, fullscreenEdit: fullscreenEdit }).to.matchImages()];
114
+ case 10:
115
+ _d.sent();
116
+ return [2 /*return*/];
117
+ }
118
+ });
119
+ });
120
+ });
71
121
  });
72
122
  story('Editable', function (_a) {
73
123
  var setStoryParameters = _a.setStoryParameters;
@@ -172,5 +222,55 @@ kind('Markdown', function () {
172
222
  });
173
223
  });
174
224
  });
225
+ test('withFullscreen', function () {
226
+ var _a, _b, _c;
227
+ return __awaiter(this, void 0, void 0, function () {
228
+ var buttons, fullscreenSplit, fullscreenPreview, fullscreenEdit;
229
+ return __generator(this, function (_d) {
230
+ switch (_d.label) {
231
+ case 0: return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
232
+ case 1:
233
+ buttons = _d.sent();
234
+ return [4 /*yield*/, this.browser
235
+ .actions()
236
+ .click(buttons[buttons.length - 1])
237
+ .perform()];
238
+ case 2:
239
+ _d.sent();
240
+ return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
241
+ case 3:
242
+ fullscreenSplit = _d.sent();
243
+ return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
244
+ case 4:
245
+ buttons = _d.sent();
246
+ return [4 /*yield*/, this.browser
247
+ .actions()
248
+ .click(buttons[buttons.length - 2])
249
+ .perform()];
250
+ case 5:
251
+ _d.sent();
252
+ return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
253
+ case 6:
254
+ fullscreenPreview = _d.sent();
255
+ return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
256
+ case 7:
257
+ buttons = _d.sent();
258
+ return [4 /*yield*/, this.browser
259
+ .actions()
260
+ .click(buttons[buttons.length - 2])
261
+ .perform()];
262
+ case 8:
263
+ _d.sent();
264
+ return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
265
+ case 9:
266
+ fullscreenEdit = _d.sent();
267
+ return [4 /*yield*/, this.expect({ fullscreenSplit: fullscreenSplit, fullscreenPreview: fullscreenPreview, fullscreenEdit: fullscreenEdit }).to.matchImages()];
268
+ case 10:
269
+ _d.sent();
270
+ return [2 /*return*/];
271
+ }
272
+ });
273
+ });
274
+ });
175
275
  });
176
276
  });
package/src/Markdown/Markdown.js CHANGED
@@ -20,16 +20,17 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { SidePage, ThemeContext } from '@skbkontur/react-ui';
23
+ import { SidePage, ThemeContext, useResponsiveLayout } from '@skbkontur/react-ui';
24
24
  import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
25
25
  import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
26
26
  import Foco from 'react-foco/lib';
27
- import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
27
+ import { MENTION_WRAPPER_ID_POSTFIX, SPLIT_VIEW_THRESHOLD } from './constants';
28
28
  import { useEmojiLogic } from './Emoji/Emoji.logic';
29
29
  import { useFileLogic } from './Files/Files.logic';
30
- import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
30
+ import { DroppablePlaceholder, FlexCenter, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, SplitViewContainer, SplitViewEditContainer, SplitViewMaxWidth, SplitViewPreviewContainer, Wrapper, } from './Markdown.styled';
31
31
  import { MarkdownActions } from './MarkdownActions';
32
32
  import { MarkdownEditor } from './MarkdownEditor';
33
+ import { EmptyPreview } from './MarkdownHelpers/EmptyPreview';
33
34
  import { usePasteFromClipboard } from './MarkdownHelpers/markdownHelpers';
34
35
  import { getMentionValue, mentionActions } from './MarkdownHelpers/markdownMentionHelpers';
35
36
  import { getCursorCoordinates, useFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
@@ -41,18 +42,22 @@ import { MarkdownViewer } from '../MarkdownViewer';
41
42
  import { ThemeProvider } from '../styles/styled-components';
42
43
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
43
44
  export var Markdown = function (props) {
44
- var _a;
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, _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"]);
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"]);
46
46
  var textareaRef = useRef(null);
47
- var _c = useState(), mention = _c[0], setMention = _c[1];
48
- var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
49
- var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
50
- var _f = useState(0), initialWidth = _f[0], setInitialWidth = _f[1];
51
- var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
52
- var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
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];
53
53
  var guid = useRef(new Guid().generate()).current;
54
- var isEditMode = viewMode === ViewMode.Edit;
55
- var width = fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width;
54
+ var isEditMode = viewMode !== ViewMode.Preview;
55
+ var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
56
+ var _h = useResponsiveLayout({
57
+ customMediaQueries: {
58
+ isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
59
+ },
60
+ }), isSplitViewAvailable = _h.isSplitViewAvailable, isMobile = _h.isMobile;
56
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;
57
62
  var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
58
63
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
@@ -62,6 +67,16 @@ export var Markdown = function (props) {
62
67
  var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
63
68
  setInitialWidth(textareaNode.clientWidth);
64
69
  }, []);
70
+ useEffect(function () {
71
+ if (fullscreen && isSplitViewAvailable)
72
+ setViewMode(ViewMode.Split);
73
+ else
74
+ setViewMode(function (prevMode) { return (prevMode === ViewMode.Split ? ViewMode.Edit : prevMode); });
75
+ }, [fullscreen, isSplitViewAvailable]);
76
+ useEffect(function () {
77
+ if (isMobile)
78
+ setFullScreen(false);
79
+ }, [isMobile]);
65
80
  useEffect(function () {
66
81
  var _a;
67
82
  if (fullscreen && isEditMode) {
@@ -71,21 +86,24 @@ export var Markdown = function (props) {
71
86
  textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
72
87
  }
73
88
  }, [fullscreen, isEditMode, selectionEnd, selectionStart]);
74
- var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, initialWidth);
89
+ var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
75
90
  var horizontalPaddings = {
76
91
  panelPadding: panelHorizontalPadding,
77
92
  fullscreenPadding: fullscreenTextareaPadding,
78
93
  };
79
94
  var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
80
95
  React.createElement(Wrapper, __assign({}, getRootProps()),
81
- !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
96
+ !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
82
97
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
83
- isEditMode && renderEditContainer(),
84
- isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
85
- !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 }))))));
98
+ fullscreen && viewMode === ViewMode.Split && (React.createElement(SplitViewContainer, null,
99
+ React.createElement(SplitViewEditContainer, null, renderEditContainer()),
100
+ React.createElement(SplitViewPreviewContainer, { textareaWidth: textareaProps.width }, renderPreview()))),
101
+ viewMode === ViewMode.Edit && renderEditContainer(),
102
+ viewMode === ViewMode.Preview && renderPreview(),
103
+ isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
86
104
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
87
105
  var defaultTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
88
- var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless);
106
+ var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, viewMode, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless, fullscreen);
89
107
  return (React.createElement(ThemeProvider, { theme: defaultTheme },
90
108
  React.createElement(ThemeContext.Provider, { value: reactUiTheme }, fullscreen ? renderFullScreen() : content)));
91
109
  }));
@@ -93,7 +111,8 @@ export var Markdown = function (props) {
93
111
  return (React.createElement(SidePage, { disableAnimations: true, width: "100vw", onClose: function () { return setFullScreen(false); } },
94
112
  React.createElement(HideBodyVerticalScroll, null),
95
113
  React.createElement(SidePage.Body, null,
96
- React.createElement(SidePage.Container, null, content))));
114
+ React.createElement(SidePage.Container, null, viewMode === ViewMode.Split ? (React.createElement(FlexCenter, null,
115
+ React.createElement(SplitViewMaxWidth, null, content))) : (content)))));
97
116
  }
98
117
  function renderEditContainer() {
99
118
  var showMention = !!mention && !!getMentionValue(mention);
@@ -102,6 +121,12 @@ export var Markdown = function (props) {
102
121
  showMention && renderMentions(),
103
122
  React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
104
123
  }
124
+ function renderPreview() {
125
+ var _a;
126
+ if (!props.value && viewMode === ViewMode.Split)
127
+ return React.createElement(EmptyPreview, null);
128
+ 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 }))));
129
+ }
105
130
  function renderMentions() {
106
131
  var _a;
107
132
  if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -1,8 +1,15 @@
1
1
  import { Button, MenuItem, THEME_2022 } from '@skbkontur/react-ui';
2
2
  import { CSSProperties } from 'react';
3
- import { HorizontalPaddings, Nullable } from './types';
3
+ import { HorizontalPaddings, Nullable, ViewMode } from './types';
4
4
  import { MarkdownTheme } from '../styles/theme';
5
5
  export declare const Wrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
6
+ export declare const FlexCenter: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
7
+ export declare const SplitViewMaxWidth: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
8
+ export declare const SplitViewContainer: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
9
+ export declare const SplitViewPreviewContainer: import("styled-components").StyledComponent<"div", MarkdownTheme, {
10
+ textareaWidth?: React.CSSProperties['width'];
11
+ }, never>;
12
+ export declare const SplitViewEditContainer: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
6
13
  export declare const Avatar: import("styled-components").StyledComponent<"img", MarkdownTheme, {
7
14
  alt: "";
8
15
  }, "alt">;
@@ -29,7 +36,10 @@ export declare const getMarkdownMentionStyle: (x: number, y: number) => CSSPrope
29
36
  export declare const UserDescriptions: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
30
37
  export declare const MentionMenuItem: import("styled-components").StyledComponent<typeof MenuItem, MarkdownTheme, {}, never>;
31
38
  export declare const VisuallyHidden: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
32
- export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiTheme?: typeof THEME_2022, panelHorizontalPadding?: number, fullScreenTextareaPadding?: number, borderless?: boolean) => Readonly<Readonly<typeof import("@skbkontur/react-ui/cjs/internal/themes/DefaultTheme").DefaultTheme> & {
39
+ export declare const EmptyPreviewContainer: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
40
+ export declare const EmptyPreviewText: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
41
+ export declare const EmptyPreviewIconWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
42
+ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, viewMode: ViewMode, reactUiTheme?: typeof THEME_2022, panelHorizontalPadding?: number, fullScreenTextareaPadding?: number, borderless?: boolean, isFullscreen?: boolean) => Readonly<Readonly<typeof import("@skbkontur/react-ui/cjs/internal/themes/DefaultTheme").DefaultTheme> & {
33
43
  prototype?: import("@skbkontur/react-ui/cjs/internal/themes/DefaultTheme").DefaultTheme | undefined;
34
44
  fontFamilyCompensationBaseline?: string | undefined;
35
45
  labGrotesqueBaselineCompensation?: string | undefined;
package/src/Markdown/Markdown.styled.js CHANGED
@@ -14,42 +14,53 @@ var __assign = (this && this.__assign) || function () {
14
14
  return __assign.apply(this, arguments);
15
15
  };
16
16
  import { Button, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
17
+ import { FULLSCREEN_HEIGHT } from './constants';
18
+ import { ViewMode } from './types';
17
19
  import styled, { css } from '../styles/styled-components';
18
20
  var panelStyle = function (_a) {
19
21
  var panelPadding = _a.panelPadding, theme = _a.theme;
20
22
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 6px ", "px;\n background-color: ", ";\n margin-bottom: 12px;\n"], ["\n padding: 6px ", "px;\n background-color: ", ";\n margin-bottom: 12px;\n"])), panelPadding !== null && panelPadding !== void 0 ? panelPadding : 0, theme.colors.panelBg);
21
23
  };
22
24
  export var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n &:focus-visible {\n outline: 1px solid ", ";\n }\n"], ["\n position: relative;\n\n &:focus-visible {\n outline: 1px solid ", ";\n }\n"])), function (p) { return p.theme.colors.brand; });
23
- export var Avatar = styled.img.attrs({ alt: '' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: 50%;\n object-fit: cover;\n"], ["\n flex-shrink: 0;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: 50%;\n object-fit: cover;\n"])), function (props) { return props.theme.colors.grayDefault; });
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
- 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
- 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 box-sizing: border-box;\n"], ["\n padding: 6px ", "px;\n ", "\n box-sizing: border-box;\n"])), function (_a) {
25
+ var scrollbarStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: ", ";\n overflow-y: auto;\n"], ["\n height: ", ";\n overflow-y: auto;\n"])), FULLSCREEN_HEIGHT);
26
+ export var FlexCenter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n"], ["\n display: flex;\n justify-content: center;\n"])));
27
+ export var SplitViewMaxWidth = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n max-width: 1580px;\n width: 100%;\n"], ["\n max-width: 1580px;\n width: 100%;\n"])));
28
+ export var SplitViewContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n gap: 32px;\n\n @media (width >= 1980px) {\n gap: '48px';\n }\n"], ["\n display: flex;\n gap: 32px;\n\n @media (width >= 1980px) {\n gap: '48px';\n }\n"])));
29
+ export var SplitViewPreviewContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n ", ";\n"], ["\n ", "\n\n width: ", ";\n ", ";\n"])), scrollbarStyle, function (p) { var _a; return (_a = p.textareaWidth) !== null && _a !== void 0 ? _a : undefined; }, function (p) { return !p.textareaWidth && 'flex: 1 0 0'; });
30
+ export var SplitViewEditContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 100%;\n min-width: 420px;\n flex: 1 0 0;\n"], ["\n width: 100%;\n min-width: 420px;\n flex: 1 0 0;\n"])));
31
+ export var Avatar = styled.img.attrs({ alt: '' })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex-shrink: 0;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: 50%;\n object-fit: cover;\n"], ["\n flex-shrink: 0;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: 50%;\n object-fit: cover;\n"])), function (props) { return props.theme.colors.grayDefault; });
32
+ 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"])));
33
+ 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 : ''; });
34
+ export var MentionWrapper = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
35
+ 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) {
28
36
  var _b;
29
37
  var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
30
38
  return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
31
39
  }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); });
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) {
40
+ export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObject_14 = __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
41
  var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
34
42
  if (panelPadding && !fullscreenPadding)
35
43
  return panelStyle({ theme: theme, panelPadding: panelPadding });
36
44
  });
37
- 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'); });
38
- 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"])));
39
- 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"])));
40
- 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"])));
41
- 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; });
42
- export var MarkdownSymbolWrapper = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
43
- 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; });
44
- export var MarkdownEditorBlock = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
45
+ 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.fullscreenPadding ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
46
+ 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"])));
47
+ 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"])));
48
+ 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"])));
49
+ 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; });
50
+ export var MarkdownSymbolWrapper = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
51
+ 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; });
52
+ export var MarkdownEditorBlock = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
45
53
  export var getMarkdownMentionStyle = function (x, y) { return ({
46
54
  position: 'absolute',
47
55
  top: y,
48
56
  left: x,
49
57
  }); };
50
- 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"])));
51
- export var MentionMenuItem = styled(MenuItem)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
52
- 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"])));
58
+ 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"])));
59
+ export var MentionMenuItem = styled(MenuItem)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n padding: 4px 28px;\n"], ["\n padding: 4px 28px;\n"])));
60
+ 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"])));
61
+ 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"])));
62
+ 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"])));
63
+ 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"])));
53
64
  var extendThemeConfigWithSized = function (config) {
54
65
  var finalConfig = {};
55
66
  var configKeys = Object.keys(config);
@@ -69,8 +80,10 @@ var borderlessTextareaVariables = {
69
80
  textareaBorderColorHover: 'transparent',
70
81
  textareaShadow: 'none',
71
82
  };
72
- export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless) {
83
+ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless, isFullscreen) {
73
84
  var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
85
+ var sidePagePaddingX = viewMode === ViewMode.Split ? '56px' : '0';
86
+ var isFullscreenNotSplitMode = isFullscreen && viewMode !== ViewMode.Split;
74
87
  return ThemeFactory.create(__assign(__assign(__assign(__assign(__assign({}, extendThemeConfigWithSized({
75
88
  tabFontSize: elementsFontSize,
76
89
  tabPaddingY: '0',
@@ -84,11 +97,11 @@ export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizon
84
97
  })), { 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 &&
85
98
  extendThemeConfigWithSized({
86
99
  textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
87
- }))), (borderless && borderlessTextareaVariables)), (fullScreenTextareaPadding &&
88
- __assign(__assign({ sidePagePaddingLeft: '0', sidePagePaddingRight: '0', textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
89
- textareaMinHeight: '85vh',
100
+ }))), ((borderless || isFullscreenNotSplitMode) && borderlessTextareaVariables)), (isFullscreen &&
101
+ __assign({ sidePagePaddingLeft: sidePagePaddingX, sidePagePaddingRight: sidePagePaddingX, textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized({
102
+ textareaMinHeight: FULLSCREEN_HEIGHT,
90
103
  textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
91
104
  textareaPaddingY: '0',
92
- })), borderlessTextareaVariables))), reactUiTheme);
105
+ })))), reactUiTheme);
93
106
  };
94
- 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;
107
+ 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;
package/src/Markdown/MarkdownActions.d.ts CHANGED
@@ -11,9 +11,11 @@ interface Props {
11
11
  showShortKeys: boolean;
12
12
  textAreaRef: RefObject<Textarea>;
13
13
  viewMode: ViewMode;
14
+ disableFullscreen?: boolean;
14
15
  fullscreen?: boolean;
15
16
  hasFilesApi?: boolean;
16
17
  hideOptions?: HideActionsOptions;
18
+ isSplitViewAvailable?: boolean;
17
19
  loadingFile?: boolean;
18
20
  selectionEnd?: Nullable<number>;
19
21
  selectionStart?: Nullable<number>;
package/src/Markdown/MarkdownActions.js CHANGED
@@ -24,9 +24,10 @@ import { Collapse } from '../MarkdownIcons/Collapse';
24
24
  import { DocIcon } from '../MarkdownIcons/DocIcon';
25
25
  import { Expand } from '../MarkdownIcons/Expand';
26
26
  import { EyeOpen } from '../MarkdownIcons/EyeOpen';
27
+ import { SplitView } from '../MarkdownIcons/SplitView';
27
28
  import { ToolPencil } from '../MarkdownIcons/ToolPencil';
28
29
  export var MarkdownActions = function (_a) {
29
- 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, width = _a.width, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji;
30
+ 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, width = _a.width, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji, isSplitViewAvailable = _a.isSplitViewAvailable, disableFullscreen = _a.disableFullscreen;
30
31
  var isPreviewMode = viewMode === ViewMode.Preview;
31
32
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
32
33
  React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
@@ -55,16 +56,12 @@ export var MarkdownActions = function (_a) {
55
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 }))),
56
57
  React.createElement(ActionsWrapper, null,
57
58
  !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.viewMode) && renderViewModeButton(),
58
- !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.screenMode) && (React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : ' Развернуть', onClick: onClickFullscreen }))))));
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 }))))));
59
60
  function renderViewModeButton() {
60
- var buttonProps = {
61
- hintText: isPreviewMode ? 'Вернуться в редактор' : 'Превью',
62
- icon: isPreviewMode ? React.createElement(ToolPencil, null) : React.createElement(EyeOpen, null),
63
- onClick: function () { return onChangeViewMode(isPreviewMode ? ViewMode.Edit : ViewMode.Preview); },
64
- text: isPreviewMode ? 'Вернуться в редактор' : 'Превью',
65
- showShortKey: showShortKeys,
66
- };
67
- return React.createElement(MarkdownFormatButton, __assign({}, buttonProps));
61
+ return (React.createElement("div", null,
62
+ viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { icon: React.createElement(SplitView, null), hintText: "\u0421\u043F\u043B\u0438\u0442", text: "\u0421\u043F\u043B\u0438\u0442", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Split); } })),
63
+ viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { icon: React.createElement(ToolPencil, null), hintText: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", text: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Edit); } })),
64
+ viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { icon: React.createElement(EyeOpen, null), hintText: "\u041F\u0440\u0435\u0432\u044C\u044E", text: "\u041F\u0440\u0435\u0432\u044C\u044E", showShortKey: showShortKeys, onClick: function () { return onChangeViewMode(ViewMode.Preview); } }))));
68
65
  }
69
66
  function handleMarkdownItemClick(event, format) {
70
67
  var _a;
package/src/Markdown/MarkdownHelpers/EmptyPreview.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const EmptyPreview: () => JSX.Element;
package/src/Markdown/MarkdownHelpers/EmptyPreview.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { EmptyPreviewArrow } from '../../MarkdownIcons/EmptyPrviewArrow';
3
+ import { EmptyPreviewContainer, EmptyPreviewIconWrapper, EmptyPreviewText } from '../Markdown.styled';
4
+ export var EmptyPreview = function () {
5
+ return (React.createElement(EmptyPreviewContainer, null,
6
+ React.createElement(EmptyPreviewText, null, "\u041D\u0430\u0447\u043D\u0438 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442 \u0432 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0435 "),
7
+ React.createElement(EmptyPreviewIconWrapper, null,
8
+ React.createElement(EmptyPreviewArrow, null)),
9
+ React.createElement(EmptyPreviewText, null, "\u0438 \u0443\u0432\u0438\u0434\u0438\u0448\u044C \u0435\u0433\u043E \u043F\u0440\u0435\u0432\u044C\u044E \u0437\u0434\u0435\u0441\u044C")));
10
+ };
package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Textarea } from '@skbkontur/react-ui';
2
- import { Token } from '../types';
2
+ import { Token, ViewMode } from '../types';
3
3
  export declare const textareaTokensRegExp: RegExp;
4
4
  export declare const getTextareaTokens: (value: string) => Token[];
5
5
  export declare const getCursorCoordinates: (textArea: HTMLTextAreaElement, id: string) => {
@@ -7,5 +7,5 @@ export declare const getCursorCoordinates: (textArea: HTMLTextAreaElement, id: s
7
7
  y: number;
8
8
  };
9
9
  export declare const useListenTextareaScroll: (setMention: (value: undefined) => void, textarea?: Textarea | null) => void;
10
- export declare const useFullscreenHorizontalPadding: (fullscreen: boolean, textareaWidth?: number) => number | undefined;
10
+ export declare const useFullscreenHorizontalPadding: (fullscreen: boolean, viewMode: ViewMode, textareaWidth?: number) => number | undefined;
11
11
  export declare const getPastedHtml: (html: string, event: ClipboardEvent, textArea: HTMLTextAreaElement) => void;
package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useCallback, useEffect, useState } from 'react';
2
2
  import { setMarkdownPastedHtml } from './markdownHelpers';
3
3
  import { MENTION_WRAPPER_ID_POSTFIX } from '../constants';
4
+ import { ViewMode } from '../types';
4
5
  import { turndownService } from '../utils/htmlToMd';
5
6
  export var textareaTokensRegExp = /(\[[\w\s\dА-Яа-яЁёЙй]+]\(@[\w\d]+\)|[@А-Яа-яЁёЙйA-Za-z]+)/g;
6
7
  export var getTextareaTokens = function (value) {
@@ -70,24 +71,23 @@ export var useListenTextareaScroll = function (setMention, textarea) {
70
71
  return window.removeEventListener('scroll', resetMention);
71
72
  }, [resetMention]);
72
73
  };
73
- export var useFullscreenHorizontalPadding = function (fullscreen, textareaWidth) {
74
+ export var useFullscreenHorizontalPadding = function (fullscreen, viewMode, textareaWidth) {
74
75
  var _a = useState(), padding = _a[0], setPadding = _a[1];
75
76
  useEffect(function () {
76
- if (fullscreen && textareaWidth) {
77
- var observable = document.body;
78
- var handleChangeWidth_1 = function (width) {
79
- var newPadding = (width - textareaWidth) / 2;
80
- setPadding(newPadding ? newPadding : undefined);
81
- };
82
- handleChangeWidth_1(observable.clientWidth);
83
- var observer_1 = new ResizeObserver(function (entries) { return entries.forEach(function (e) { return handleChangeWidth_1(e.target.clientWidth); }); });
84
- observer_1.observe(observable);
85
- return function () { return observer_1.disconnect(); };
86
- }
87
- else {
77
+ if (!fullscreen || !textareaWidth || viewMode === ViewMode.Split) {
88
78
  setPadding(undefined);
79
+ return;
89
80
  }
90
- }, [fullscreen, textareaWidth]);
81
+ var observable = document.body;
82
+ var handleChangeWidth = function (width) {
83
+ var newPadding = (width - textareaWidth) / 2;
84
+ setPadding(newPadding ? newPadding : undefined);
85
+ };
86
+ handleChangeWidth(observable.clientWidth);
87
+ var observer = new ResizeObserver(function (entries) { return entries.forEach(function (e) { return handleChangeWidth(e.target.clientWidth); }); });
88
+ observer.observe(observable);
89
+ return function () { return observer.disconnect(); };
90
+ }, [fullscreen, textareaWidth, viewMode]);
91
91
  return padding;
92
92
  };
93
93
  export var getPastedHtml = function (html, event, textArea) {
package/src/Markdown/constants.d.ts CHANGED
@@ -2,3 +2,5 @@ export declare const MENTION_WRAPPER_ID_POSTFIX = "_MentionWrapper";
2
2
  export declare const INPUT_DEBOUNCE_TIME = 500;
3
3
  export declare const MARKDOWN_RENDER_CONTAINER = "markdownRenderContainer";
4
4
  export declare const COMMONMARK_HELP_URL = "https://commonmark.org/help/";
5
+ export declare const FULLSCREEN_HEIGHT = "85vh";
6
+ export declare const SPLIT_VIEW_THRESHOLD = "1024px";
package/src/Markdown/constants.js CHANGED
@@ -2,3 +2,5 @@ export var MENTION_WRAPPER_ID_POSTFIX = '_MentionWrapper';
2
2
  export var INPUT_DEBOUNCE_TIME = 500;
3
3
  export var MARKDOWN_RENDER_CONTAINER = 'markdownRenderContainer';
4
4
  export var COMMONMARK_HELP_URL = 'https://commonmark.org/help/';
5
+ export var FULLSCREEN_HEIGHT = '85vh';
6
+ export var SPLIT_VIEW_THRESHOLD = '1024px';
package/src/Markdown/types.d.ts CHANGED
@@ -2,7 +2,8 @@ import { THEME_2022 } from '@skbkontur/react-ui';
2
2
  import { MarkdownFormat } from './MarkdownFormat';
3
3
  export declare enum ViewMode {
4
4
  Preview = "Preview",
5
- Edit = "Edit"
5
+ Edit = "Edit",
6
+ Split = "Split"
6
7
  }
7
8
  export interface Token {
8
9
  positions: number[];
package/src/Markdown/types.js CHANGED
@@ -2,4 +2,5 @@ export var ViewMode;
2
2
  (function (ViewMode) {
3
3
  ViewMode["Preview"] = "Preview";
4
4
  ViewMode["Edit"] = "Edit";
5
+ ViewMode["Split"] = "Split";
5
6
  })(ViewMode || (ViewMode = {}));
package/src/MarkdownIcons/EmptyPrviewArrow.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const EmptyPreviewArrow: () => JSX.Element;
package/src/MarkdownIcons/EmptyPrviewArrow.js ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export var EmptyPreviewArrow = function () {
3
+ return (React.createElement("svg", { width: "168", height: "75", viewBox: "0 0 168 75", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
4
+ React.createElement("g", { clipPath: "url(#clip0_1285_7898)" },
5
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M165.895 36.3127L17.9208 36.3127C17.0839 36.3127 16.8233 35.0174 17.5708 34.6409C29.688 28.5387 38.3755 15.9524 38.3755 1.43775C38.3755 0.816423 37.8718 0.312746 37.2505 0.312746C36.6291 0.312746 36.1255 0.816423 36.1255 1.43775C36.1255 20.3931 20.2942 35.8898 2.00179 36.3042C1.75179 36.2989 1.5013 36.2963 1.25046 36.2963C0.629136 36.2963 0.125458 36.7999 0.125458 37.4213C0.125458 37.424 0.125489 37.4268 0.125489 37.4295C0.125489 37.4322 0.125458 37.435 0.125458 37.4377C0.125458 38.0591 0.629136 38.5627 1.25046 38.5627C1.5013 38.5627 1.75176 38.5601 2.00176 38.5548C20.2941 38.9692 36.1255 54.4659 36.1255 73.4213C36.1255 74.0426 36.6291 74.5463 37.2505 74.5463C37.8718 74.5463 38.3755 74.0426 38.3755 73.4213C38.3755 58.918 29.7016 46.34 17.5993 40.2325C16.8526 39.8556 17.1134 38.5627 17.9498 38.5627L165.895 38.5627C166.516 38.5627 167.02 38.0591 167.02 37.4377C167.02 36.8164 166.516 36.3127 165.895 36.3127Z", fill: "#D6D6D6" })),
6
+ React.createElement("defs", null,
7
+ React.createElement("clipPath", { id: "clip0_1285_7898" },
8
+ React.createElement("rect", { width: "168", height: "75", fill: "white" })))));
9
+ };
package/src/MarkdownIcons/SplitView.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const SplitView: () => JSX.Element;
package/src/MarkdownIcons/SplitView.js ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ export var SplitView = function () {
3
+ return (React.createElement("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
4
+ React.createElement("path", { d: "M6.09375 13.891H2.49951C1.67108 13.891 0.999512 13.2195 0.999512 12.391L0.999512 3.5445C0.999512 2.71607 1.67108 2.0445 2.49951 2.0445L6.09404 2.0445M9.09404 0.923096L9.09407 15.0124M12.0944 13.891H15.6886C16.517 13.891 17.1886 13.2195 17.1886 12.391V3.5445C17.1886 2.71607 16.517 2.0445 15.6886 2.0445L12.0941 2.0445", stroke: "currentColor", strokeLinecap: "round" })));
5
+ };
package/src/MarkdownIcons/ToolPencil.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- export var ToolPencil = function () { return (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
2
+ export var ToolPencil = function () { return (React.createElement("svg", { width: "20", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
3
3
  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.4755 0.43885C11.8897 -0.146935 10.94 -0.146934 10.3542 0.438852L0.43934 10.3537C0.158035 10.635 0 11.0165 0 11.4144V13.5001C0 13.7763 0.223858 14.0001 0.5 14.0001H2.58579C2.98361 14.0001 3.36514 13.8421 3.64645 13.5608L13.5613 3.64595C14.1471 3.06017 14.1471 2.11042 13.5613 1.52463L12.4755 0.43885ZM11.0613 1.14596C11.2566 0.950696 11.5731 0.950696 11.7684 1.14596L12.8542 2.23174C13.0495 2.427 13.0495 2.74358 12.8542 2.93885L11.75 4.04305L9.9571 2.25016L11.0613 1.14596ZM9.25 2.95726L1.14645 11.0608C1.05268 11.1546 1 11.2818 1 11.4144V13.0001H2.58579C2.71839 13.0001 2.84557 12.9475 2.93934 12.8537L11.0429 4.75015L9.25 2.95726Z", fill: "currentColor" }))); };
package/src/MarkdownViewer/MarkdownViewer.styles.js CHANGED
@@ -6,7 +6,7 @@ import { Checkbox } from '@skbkontur/react-ui';
6
6
  import styled, { css } from '../styles/styled-components';
7
7
  var baseVisuallyHiddenStyle = css(templateObject_1 || (templateObject_1 = __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"])));
8
8
  export var CheckBoxWrapper = styled(Checkbox)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
9
- export var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n overflow-wrap: break-word;\n word-wrap: break-word;\n\n word-break: break-word;\n\n p,\n table,\n blockquote,\n .math {\n margin-bottom: 16px;\n }\n\n ul > li > ", ", ul > li > p > ", " {\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 0;\n }\n\n ul,\n ol,\n li {\n p {\n margin: 0;\n }\n }\n\n h1 {\n margin-top: 28px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 16px;\n }\n\n img {\n max-width: 100%;\n }\n\n button {\n text-align: left;\n color: ", ";\n }\n\n table {\n background: transparent;\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\n }\n\n & > *:first-child {\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n\n & > *:last-child {\n margin-bottom: 0 !important;\n padding-bottom: 0 !important;\n }\n"], ["\n overflow-wrap: break-word;\n word-wrap: break-word;\n\n word-break: break-word;\n\n p,\n table,\n blockquote,\n .math {\n margin-bottom: 16px;\n }\n\n ul > li > ", ", ul > li > p > ", " {\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 0;\n }\n\n ul,\n ol,\n li {\n p {\n margin: 0;\n }\n }\n\n h1 {\n margin-top: 28px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 16px;\n }\n\n img {\n max-width: 100%;\n }\n\n button {\n text-align: left;\n color: ", ";\n }\n\n table {\n background: transparent;\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\n }\n\n & > *:first-child {\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n\n & > *:last-child {\n margin-bottom: 0 !important;\n padding-bottom: 0 !important;\n }\n"])), CheckBoxWrapper, CheckBoxWrapper, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.link; }, baseVisuallyHiddenStyle);
9
+ export var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n overflow-wrap: break-word;\n word-wrap: break-word;\n position: relative;\n\n word-break: break-word;\n\n p,\n table,\n blockquote,\n .math {\n margin-bottom: 16px;\n }\n\n ul > li > ", ", ul > li > p > ", " {\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 0;\n }\n\n ul,\n ol,\n li {\n p {\n margin: 0;\n }\n }\n\n h1 {\n margin-top: 28px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 16px;\n }\n\n img {\n max-width: 100%;\n }\n\n button {\n text-align: left;\n color: ", ";\n }\n\n table {\n background: transparent;\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\n }\n\n & > *:first-child {\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n\n & > *:last-child {\n margin-bottom: 0 !important;\n padding-bottom: 0 !important;\n }\n"], ["\n overflow-wrap: break-word;\n word-wrap: break-word;\n position: relative;\n\n word-break: break-word;\n\n p,\n table,\n blockquote,\n .math {\n margin-bottom: 16px;\n }\n\n ul > li > ", ", ul > li > p > ", " {\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 0;\n }\n\n ul,\n ol,\n li {\n p {\n margin: 0;\n }\n }\n\n h1 {\n margin-top: 28px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 16px;\n }\n\n img {\n max-width: 100%;\n }\n\n button {\n text-align: left;\n color: ", ";\n }\n\n table {\n background: transparent;\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\n }\n\n & > *:first-child {\n margin-top: 0 !important;\n padding-top: 0 !important;\n }\n\n & > *:last-child {\n margin-bottom: 0 !important;\n padding-bottom: 0 !important;\n }\n"])), CheckBoxWrapper, CheckBoxWrapper, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.link; }, baseVisuallyHiddenStyle);
10
10
  export var ListItem = styled.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n list-style: none;\n margin-left: 0 !important;\n padding-inline-start: 20px;\n position: relative;\n"], ["\n list-style: none;\n margin-left: 0 !important;\n padding-inline-start: 20px;\n position: relative;\n"])));
11
11
  export var Paragraph = styled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
12
12
  export var BlockQuote = styled.blockquote(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0;\n padding-left: 8px;\n border-left: 4px solid ", ";\n"], ["\n margin: 0;\n padding-left: 8px;\n border-left: 4px solid ", ";\n"])), function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.grayDefault; });