@skbkontur/markdown 2.6.2 → 2.7.0-alpha.0

package/src/Markdown/Markdown.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { SidePage, ThemeContext, useResponsiveLayout } from '@skbkontur/react-ui';
 import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
 import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
@@ -37,122 +15,122 @@ import { getCursorCoordinates, useFullscreenHorizontalPadding, useListenTextarea
 import { MarkdownMention } from './MarkdownMention';
 import { ViewMode } from './types';
 import { Guid } from './utils/guid';
+import { onInsertText } from './utils/onInsertText';
 import { RequestStatus } from './utils/requestStatus';
 import { MarkdownViewer } from '../MarkdownViewer';
 import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
-export var Markdown = function (props) {
-    var _a;
-    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, showActionHints = props.showActionHints, showShortKeys = props.showShortKeys, _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", "showActionHints", "showShortKeys", "showShotKeys", "hideActionsOptions", "onChangeViewMode"]);
-    var _c = useState(), mention = _c[0], setMention = _c[1];
-    var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
-    var _e = useState(false), fullscreen = _e[0], setFullScreen = _e[1];
-    var _f = useState(0), initialWidth = _f[0], setInitialWidth = _f[1];
-    var _g = useState(), selectionStart = _g[0], setSelectionStart = _g[1];
-    var _h = useState(), selectionEnd = _h[0], setSelectionEnd = _h[1];
-    var guid = useRef(new Guid().generate()).current;
-    var textareaRef = useRef(null);
-    var textareaNode = getTextareaNode();
-    var isEditMode = viewMode !== ViewMode.Preview;
-    var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
-    var _j = useResponsiveLayout({
+export const Markdown = props => {
+    const { panelHorizontalPadding, onClick, onChange, onSelect, markdownViewer, renderFilesValidation, fileApiUrl, profileUrl, api, borderless, showActionHints, showShortKeys, showShotKeys = true, hideActionsOptions, onChangeViewMode, ...textareaProps } = props;
+    const [mention, setMention] = useState();
+    const [viewMode, setViewMode] = useState(ViewMode.Edit);
+    const [fullscreen, setFullScreen] = useState(false);
+    const [initialWidth, setInitialWidth] = useState(0);
+    const [selectionStart, setSelectionStart] = useState();
+    const [selectionEnd, setSelectionEnd] = useState();
+    const guid = useRef(new Guid().generate()).current;
+    const textareaRef = useRef(null);
+    const textareaNode = getTextareaNode();
+    const isEditMode = viewMode !== ViewMode.Preview;
+    const width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
+    const { isSplitViewAvailable, isMobile } = useResponsiveLayout({
         customMediaQueries: {
-            isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
+            isSplitViewAvailable: `(width >= ${SPLIT_VIEW_THRESHOLD})`,
         },
-    }), isSplitViewAvailable = _j.isSplitViewAvailable, isMobile = _j.isMobile;
-    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;
-    var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
-    usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
+    });
+    const { getRootProps, getInputProps, isDragActive, requestStatus, open, error, onResetError } = useFileLogic(api?.fileUploadApi, api?.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode);
+    const { onSelectEmoji } = useEmojiLogic(textareaRef.current);
+    usePasteFromClipboard(textareaRef.current, api?.fileUploadApi, api?.fileDownloadApi, fileApiUrl);
     useListenTextareaScroll(resetMention, textareaRef.current);
-    var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
-    useLayoutEffect(function () {
-        var textareaNode = getTextareaNode();
+    const fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
+    useLayoutEffect(() => {
+        const textareaNode = getTextareaNode();
         if (textareaNode)
             setInitialWidth(textareaNode.clientWidth);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (fullscreen && isSplitViewAvailable)
             setViewMode(ViewMode.Split);
         else
-            setViewMode(function (prevMode) { return (prevMode === ViewMode.Split ? ViewMode.Edit : prevMode); });
+            setViewMode(prevMode => (prevMode === ViewMode.Split ? ViewMode.Edit : prevMode));
     }, [fullscreen, isSplitViewAvailable]);
-    useEffect(function () {
+    useEffect(() => {
         if (isMobile)
             setFullScreen(false);
     }, [isMobile]);
-    useEffect(function () {
+    useEffect(() => {
         if (fullscreen && isEditMode && textareaRef) {
-            var textareaNode_1 = getTextareaNode();
-            if (textareaNode_1 && !textareaNode_1.selectionStart && !textareaNode_1.selectionEnd) {
-                textareaNode_1.focus();
-                textareaNode_1.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
-                textareaNode_1.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+            const textareaNode = getTextareaNode();
+            if (textareaNode && !textareaNode.selectionStart && !textareaNode.selectionEnd) {
+                textareaNode.focus();
+                textareaNode.selectionStart = selectionStart ?? 0;
+                textareaNode.selectionEnd = selectionEnd ?? 0;
             }
         }
     }, [fullscreen, isEditMode, selectionEnd, selectionStart, textareaRef]);
-    useEffect(function () {
-        var handleSelectionChange = function () {
-            var textareaNode = getTextareaNode();
-            setSelectionStart(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionStart);
-            setSelectionEnd(textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.selectionEnd);
+    useEffect(() => {
+        const handleSelectionChange = () => {
+            const textareaNode = getTextareaNode();
+            setSelectionStart(textareaNode?.selectionStart);
+            setSelectionEnd(textareaNode?.selectionEnd);
         };
         document.addEventListener('selectionchange', handleSelectionChange);
-        return function () { return document.removeEventListener('selectionchange', handleSelectionChange); };
+        return () => document.removeEventListener('selectionchange', handleSelectionChange);
     }, []);
-    var horizontalPaddings = {
+    const horizontalPaddings = {
         panelPadding: panelHorizontalPadding,
         fullscreenPadding: fullscreenTextareaPadding,
     };
-    var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
-        React.createElement(Wrapper, __assign({}, getRootProps()),
-            !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showActionHints: showActionHints !== undefined ? showActionHints : showShotKeys, showShortKeys: showShortKeys !== undefined ? 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, AIApi: api === null || api === void 0 ? void 0 : api.AIApi, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
-            isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
+    const content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
+        React.createElement(Wrapper, { ...getRootProps() },
+            React.createElement("input", { ...getInputProps() }),
+            !hideActionsOptions?.allActions && (React.createElement(MarkdownActions, { showActionHints: showActionHints !== undefined ? showActionHints : showShotKeys, showShortKeys: showShortKeys !== undefined ? showShortKeys : showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!api?.fileDownloadApi && !!api?.fileUploadApi, isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, AIApi: api?.AIApi, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
+            isEditMode && error && api?.getUsersApi && renderFilesValidation?.(horizontalPaddings, onResetError),
             fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
                 React.createElement(SplitViewEditContainer, null, renderEditContainer()),
-                React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_a = textareaProps.width) === null || _a === void 0 ? void 0 : _a.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
+                React.createElement(SplitViewPreviewContainer, { textareaWidth: textareaProps.width?.toString().includes('%') ? initialWidth : textareaProps.width }, renderPreview()))),
             viewMode === ViewMode.Edit && renderEditContainer(),
             viewMode === ViewMode.Preview && renderPreview(),
-            isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
-    return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
-        var defaultTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
-        var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, viewMode, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless, fullscreen);
+            isDragActive && isEditMode && React.createElement(DroppablePlaceholder, { ...horizontalPaddings }))));
+    return (React.createElement(MarkdownThemeConsumer, null, theme => {
+        const defaultTheme = theme ?? DEFAULT_MARKDOWN_THEME;
+        const reactUiTheme = getMarkdownReactUiTheme(defaultTheme, viewMode, theme?.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding, borderless, fullscreen);
         return (React.createElement(ThemeProvider, { theme: defaultTheme },
             React.createElement(ThemeContext.Provider, { value: reactUiTheme }, fullscreen ? renderFullScreen() : content)));
     }));
     function renderFullScreen() {
-        return (React.createElement(SidePage, { disableAnimations: true, width: "100vw", onClose: function () { return setFullScreen(false); } },
+        return (React.createElement(SidePage, { disableAnimations: true, width: "100vw", onClose: () => setFullScreen(false) },
             React.createElement(HideBodyVerticalScroll, null),
             React.createElement(SidePage.Body, null,
                 React.createElement(SidePage.Container, null, viewMode === ViewMode.Split ? (React.createElement(FlexCenter, null,
                     React.createElement(SplitViewMaxWidth, null, content))) : (content)))));
     }
     function renderEditContainer() {
-        var showMention = !!mention && !!getMentionValue(mention);
+        const showMention = !!mention && !!getMentionValue(mention);
         return (React.createElement(MarkdownEditorBlock, null,
-            React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
+            React.createElement(MentionWrapper, { id: `${guid}${MENTION_WRAPPER_ID_POSTFIX}` }),
             showMention && renderMentions(),
-            React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelect, onClick: listenClick }))));
+            React.createElement(MarkdownEditor, { ...textareaProps, maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelect, onClick: listenClick })));
     }
     function renderPreview() {
-        var _a;
         if (!props.value && viewMode === ViewMode.Split)
             return React.createElement(EmptyPreview, null);
-        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 }))));
+        return (React.createElement(MarkdownPreview, { ...horizontalPaddings, viewMode: viewMode, width: width }, markdownViewer?.(props.value) || (React.createElement(MarkdownViewer, { source: props.value ?? '', downloadFileApi: api?.fileDownloadApi, fileApiUrl: fileApiUrl, profileUrl: profileUrl }))));
     }
     function renderMentions() {
-        if (textareaNode && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
-            var position = getCursorCoordinates(textareaNode, guid);
+        if (textareaNode && mention && api?.getUsersApi) {
+            const position = getCursorCoordinates(textareaNode, guid);
             return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
         }
     }
     function handleChangeViewMode(mode) {
         setViewMode(mode);
-        onChangeViewMode === null || onChangeViewMode === void 0 ? void 0 : onChangeViewMode(mode);
+        onChangeViewMode?.(mode);
     }
     function handleSelectUser(login, name) {
         if (textareaNode && mention) {
             textareaNode.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
-            document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
+            onInsertText(`[${name}](@${login})`);
             resetMention();
         }
     }
@@ -169,24 +147,23 @@ export var Markdown = function (props) {
         checkMention(event);
     }
     function checkMention(event) {
-        if (api === null || api === void 0 ? void 0 : api.getUsersApi)
+        if (api?.getUsersApi)
             mentionActions(event, setMention);
     }
     function resetStates() {
         resetMention();
         setSelectionStart(undefined);
         setSelectionEnd(undefined);
-        textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.setSelectionRange(0, 0);
+        textareaNode?.setSelectionRange(0, 0);
     }
     function resetMention() {
         setMention(undefined);
     }
     function handleClickFullscreen() {
-        setViewMode(function (prevState) { return (prevState !== ViewMode.Split && isSplitViewAvailable ? ViewMode.Split : ViewMode.Edit); });
+        setViewMode(prevState => (prevState !== ViewMode.Split && isSplitViewAvailable ? ViewMode.Split : ViewMode.Edit));
         setFullScreen(!fullscreen);
     }
     function getTextareaNode() {
-        var _a;
-        return (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+        return textareaRef?.current?.node;
     }
 };

package/src/Markdown/Markdown.styled.js

@@ -1,118 +1,279 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Button, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
 import { FULLSCREEN_HEIGHT } from './constants';
 import { ViewMode } from './types';
 import styled, { css } from '../styles/styled-components';
-var panelStyle = function (_a) {
-    var panelPadding = _a.panelPadding, theme = _a.theme;
-    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);
-};
+const panelStyle = ({ panelPadding, theme }) => css `
+  padding: 6px ${panelPadding ?? 0}px;
+  background-color: ${theme.colors.panelBg};
+  margin-bottom: 12px;
+`;
 function getAllowedCssValue(value) {
     return typeof value === 'number' ? value + 'px' : value;
 }
 function getMarkdownActionsPadding(isPadding, padding) {
     return isPadding ? getAllowedCssValue(padding) : 0;
 }
-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; });
-var scrollbarStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", ";\n  overflow-y: auto;\n"], ["\n  height: ", ";\n  overflow-y: auto;\n"])), FULLSCREEN_HEIGHT);
-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"])));
-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"])));
-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"])));
-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) { return (p.textareaWidth ? getAllowedCssValue(p.textareaWidth) : undefined); }, function (p) { return !p.textareaWidth && 'flex: 1 0 0'; });
-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"])));
-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; });
-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"])));
-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 : ''; });
-export var MentionWrapper = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-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) {
-    var _b;
-    var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding, viewMode = _a.viewMode;
+export const Wrapper = styled.div `
+  position: relative;
+
+  &:focus-visible {
+    outline: 1px solid ${p => p.theme.colors.brand};
+  }
+`;
+const scrollbarStyle = css `
+  height: ${FULLSCREEN_HEIGHT};
+  overflow-y: auto;
+`;
+export const FlexCenter = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+export const SplitViewMaxWidth = styled.div `
+  max-width: 1580px;
+  width: 100%;
+`;
+export const SplitViewContainer = styled.div `
+  display: flex;
+  gap: 32px;
+
+  @media (width >= 1980px) {
+    gap: 48px;
+  }
+`;
+export const SplitViewPreviewContainer = styled.div `
+  ${scrollbarStyle};
+
+  width: ${p => (p.textareaWidth ? getAllowedCssValue(p.textareaWidth) : undefined)};
+  ${p => !p.textareaWidth && 'flex: 1 0 0'};
+`;
+export const SplitViewEditContainer = styled.div `
+  width: 100%;
+  min-width: 420px;
+  flex: 1 0 0;
+`;
+export const Avatar = styled.img.attrs({ alt: '' }) `
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid ${props => props.theme.colors.grayDefault};
+  border-radius: 50%;
+  object-fit: cover;
+`;
+export const UserWrapper = styled.div `
+  width: 244px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+export const DroppablePlaceholder = styled.div `
+  position: absolute;
+  top: ${p => (p.panelPadding || p.fullscreenPadding ? 0 : -8)}px;
+  left: ${p => (p.panelPadding || p.fullscreenPadding ? 0 : -8)}px;
+  width: 100%;
+  height: 100%;
+  padding: ${p => (p.panelPadding || p.fullscreenPadding ? 0 : 8)}px;
+  border-radius: 8px;
+  z-index: 100;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
+    rgba(255, 255, 255, ${p => (p.theme.themeMode === 'dark' ? 0.1 : 0.7)});
+  background-image: ${p => p.theme?.droppablePlaceholderBgImage ?? ''};
+`;
+export const MentionWrapper = styled.div ``;
+export const MarkdownPreview = styled.div `
+  padding: 6px
+    ${({ panelPadding, fullscreenPadding, viewMode }) => {
     if (viewMode === ViewMode.Split)
         return 0;
-    return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
-}, function (p) { return p.width && "width: ".concat(getAllowedCssValue(p.width), ";"); });
-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) {
-    var theme = _a.theme, panelPadding = _a.panelPadding, fullscreen = _a.fullscreen;
+    return fullscreenPadding ?? panelPadding ?? 8;
+}}px;
+  ${p => p.width && `width: ${getAllowedCssValue(p.width)};`}
+  box-sizing: border-box;
+`;
+export const MarkdownActionsWrapper = styled.div `
+  padding: ${p => getMarkdownActionsPadding(!!p.fullscreenPadding, '16px')}
+    ${p => getMarkdownActionsPadding(!!p.fullscreenPadding, p.fullscreenPadding)} 0;
+  margin-bottom: ${p => (p.fullscreen ? 12 : 4)}px;
+  box-sizing: border-box;
+  ${p => p.width && `width: ${getAllowedCssValue(p.width)};`}
+  ${({ theme, panelPadding, fullscreen }) => {
     if (panelPadding && !fullscreen)
-        return panelStyle({ theme: theme, panelPadding: panelPadding });
-});
-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'); });
-export var ViewModeButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var ActionsRightWrapper = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var ActionsLeftWrapper = styled(ActionsRightWrapper)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  flex-wrap: wrap;\n"], ["\n  flex-wrap: wrap;\n"])));
-export var MarkdownButtonWrapper = styled(Button)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"], ["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"])));
-export var MarkdownButtonContentWrapper = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n"])));
-export var MarkdownButtonIcon = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  height: 22px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: 22px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"])));
-export var MarkdownSymbolWrapper = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (p) { return p.theme.colors.brand; });
-export var MarkdownMenuItem = styled(MenuItem)(templateObject_23 || (templateObject_23 = __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.text; });
-export var MarkdownEditorBlock = styled.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var getMarkdownMentionStyle = function (x, y) { return ({
+        return panelStyle({ theme, panelPadding });
+}}
+  
+  a {
+    border: none !important;
+    text-decoration: none !important;
+  }
+`;
+export const ButtonsWrapper = styled.div `
+  display: flex;
+  justify-content: space-between;
+  border-bottom: ${p => (p.fullscreen ? `1px solid ${p.theme.colors.grayDefault}` : 'none')};
+`;
+export const ViewModeButtonsWrapper = styled.div `
+  display: flex;
+`;
+export const ActionsRightWrapper = styled.div `
+  display: flex;
+`;
+export const ActionsLeftWrapper = styled(ActionsRightWrapper) `
+  flex-wrap: wrap;
+`;
+export const MarkdownButtonWrapper = styled(Button) `
+  button {
+    padding: 4px;
+    border: none;
+    box-sizing: border-box;
+  }
+`;
+export const MarkdownButtonContentWrapper = styled.div `
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+export const MarkdownButtonIcon = styled.div `
+  height: 22px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`;
+export const MarkdownSymbolWrapper = styled.span `
+  color: ${p => p.theme.colors.brand};
+  font-weight: 700;
+`;
+export const MarkdownMenuItem = styled(MenuItem) `
+  padding-left: 8px;
+  padding-right: 8px;
+  color: ${p => p.theme.colors.text};
+`;
+export const MarkdownEditorBlock = styled.div `
+  position: relative;
+`;
+export const getMarkdownMentionStyle = (x, y) => ({
     position: 'absolute',
     top: y,
     left: x,
-}); };
-export var UserDescriptions = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"], ["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"])));
-export var MentionMenuItem = styled(MenuItem)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  padding: 4px 28px;\n"], ["\n  padding: 4px 28px;\n"])));
-export var VisuallyHidden = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"])));
-export var EmptyPreviewContainer = styled.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  display: flex;\n  width: 407px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 407px;\n  flex-direction: column;\n"])));
-export var EmptyPreviewText = styled.span(templateObject_29 || (templateObject_29 = __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"])));
-export var EmptyPreviewIconWrapper = styled.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  margin-top: 16px;\n  margin-bottom: 32px;\n"], ["\n  margin-top: 16px;\n  margin-bottom: 32px;\n"])));
-var extendThemeConfigWithSized = function (config) {
-    var finalConfig = {};
-    var configKeys = Object.keys(config);
-    configKeys.forEach(function (key) {
+});
+export const UserDescriptions = styled.div `
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow: hidden;
+  margin-top: 4px;
+`;
+export const MentionMenuItem = styled(MenuItem) `
+  padding: 4px 28px;
+`;
+export const VisuallyHidden = styled.span `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+`;
+export const EmptyPreviewContainer = styled.div `
+  display: flex;
+  width: 407px;
+  flex-direction: column;
+`;
+export const EmptyPreviewText = styled.span `
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 48px;
+  color: #d6d6d6;
+`;
+export const EmptyPreviewIconWrapper = styled.div `
+  margin-top: 16px;
+  margin-bottom: 32px;
+`;
+const extendThemeConfigWithSized = (config) => {
+    const finalConfig = {};
+    const configKeys = Object.keys(config);
+    configKeys.forEach(key => {
         if (key !== 'prototype') {
-            finalConfig["".concat(key, "Small")] = config[key];
-            finalConfig["".concat(key, "Medium")] = config[key];
-            finalConfig["".concat(key, "Large")] = config[key];
+            finalConfig[`${key}Small`] = config[key];
+            finalConfig[`${key}Medium`] = config[key];
+            finalConfig[`${key}Large`] = config[key];
         }
     });
     return finalConfig;
 };
-var borderlessTextareaVariables = {
+const borderlessTextareaVariables = {
     textareaBorderColor: 'transparent',
     textareaBorderColorFocus: 'transparent',
     textareaBorderTopColor: 'transparent',
     textareaBorderColorHover: 'transparent',
     textareaShadow: 'none',
 };
-export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless, isFullscreen) {
-    var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
-    var isSplitMode = viewMode === ViewMode.Split;
-    var sidePagePaddingX = isSplitMode ? '56px' : '0';
-    var isFullscreenNotSplitMode = isFullscreen && !isSplitMode;
-    return ThemeFactory.create(__assign(__assign(__assign(__assign(__assign({}, extendThemeConfigWithSized({
-        tabFontSize: elementsFontSize,
-        tabPaddingY: '0',
-        tabPaddingX: '6px',
-        tabLineHeight: elementsLineHeight,
-        checkboxPaddingY: '0',
-        checkboxBoxSize: elementsFontSize,
-        menuItemFontSize: elementsFontSize,
-        menuItemPaddingY: '4px',
-        menuItemPaddingX: '28px',
-    })), { 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 &&
-        !isSplitMode &&
-        extendThemeConfigWithSized({
-            textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
-        }))), ((borderless || (isFullscreen && viewMode === ViewMode.Edit)) && borderlessTextareaVariables)), (isFullscreen &&
-        __assign({ sidePagePaddingLeft: sidePagePaddingX, sidePagePaddingRight: sidePagePaddingX, textareaBorderColorError: 'transparent', textareaBorderColorWarning: 'transparent', textareaShadow: 'none' }, extendThemeConfigWithSized(__assign({ textareaMinHeight: FULLSCREEN_HEIGHT }, (isFullscreenNotSplitMode && {
-            textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
-            textareaPaddingY: '0',
-        })))))), reactUiTheme);
+export const getMarkdownReactUiTheme = (theme, viewMode, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding, borderless, isFullscreen) => {
+    const { elementsFontSize, elementsLineHeight, themeMode, colors } = theme;
+    const isSplitMode = viewMode === ViewMode.Split;
+    const sidePagePaddingX = isSplitMode ? '56px' : '0';
+    const isFullscreenNotSplitMode = isFullscreen && !isSplitMode;
+    return ThemeFactory.create({
+        ...extendThemeConfigWithSized({
+            tabFontSize: elementsFontSize,
+            tabPaddingY: '0',
+            tabPaddingX: '6px',
+            tabLineHeight: elementsLineHeight,
+            checkboxPaddingY: '0',
+            checkboxBoxSize: elementsFontSize,
+            menuItemFontSize: elementsFontSize,
+            menuItemPaddingY: '4px',
+            menuItemPaddingX: '28px',
+        }),
+        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?.btnDefaultHoverBg : reactUiTheme?.btnDisabledBg,
+        btnFontSizeSmall: elementsFontSize,
+        checkboxBg: 'transparent',
+        checkboxHoverBg: 'transparent',
+        checkboxCheckedBg: 'transparent',
+        checkboxShadow: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxShadowHover: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxCheckedHoverShadow: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxCheckedShadow: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxCheckedActiveShadow: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxShadowActive: `0 0 0 1px ${colors.grayDefault}`,
+        checkboxCheckedColor: colors.grayDefault,
+        hintFontSize: elementsFontSize,
+        hintColor: colors.textInverse,
+        selectPaddingXSmall: '8px',
+        selectLineHeightSmall: '24px',
+        dropdownBorderWidth: '0',
+        ...(panelHorizontalPadding &&
+            !isSplitMode &&
+            extendThemeConfigWithSized({
+                textareaPaddingX: `${panelHorizontalPadding}px`,
+            })),
+        ...((borderless || (isFullscreen && viewMode === ViewMode.Edit)) && borderlessTextareaVariables),
+        ...(isFullscreen &&
+            {
+                sidePagePaddingLeft: sidePagePaddingX,
+                sidePagePaddingRight: sidePagePaddingX,
+                textareaBorderColorError: 'transparent',
+                textareaBorderColorWarning: 'transparent',
+                textareaShadow: 'none',
+                ...extendThemeConfigWithSized({
+                    textareaMinHeight: FULLSCREEN_HEIGHT,
+                    ...(isFullscreenNotSplitMode && {
+                        textareaPaddingX: `${fullScreenTextareaPadding}px`,
+                        textareaPaddingY: '0',
+                    }),
+                }),
+            }),
+    }, reactUiTheme);
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;