@skbkontur/markdown 2.4.1 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/Markdown/Markdown.js

@@ -42,23 +42,24 @@ import { MarkdownViewer } from '../MarkdownViewer';
 import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
 export var Markdown = function (props) {
-    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"]);
+    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, _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"]);
     var textareaRef = useRef(null);
-    var _b = useState(), mention = _b[0], setMention = _b[1];
-    var _c = useState(ViewMode.Edit), viewMode = _c[0], setViewMode = _c[1];
-    var _d = useState(false), fullscreen = _d[0], setFullScreen = _d[1];
-    var _e = useState(0), initialWidth = _e[0], setInitialWidth = _e[1];
-    var _f = useState(), selectionStart = _f[0], setSelectionStart = _f[1];
-    var _g = useState(), selectionEnd = _g[0], setSelectionEnd = _g[1];
+    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 isEditMode = viewMode !== ViewMode.Preview;
     var width = fullscreen || !textareaProps.width ? '100%' : textareaProps.width;
-    var _h = useResponsiveLayout({
+    var _j = useResponsiveLayout({
         customMediaQueries: {
             isSplitViewAvailable: "(width >= ".concat(SPLIT_VIEW_THRESHOLD, ")"),
         },
-    }), isSplitViewAvailable = _h.isSplitViewAvailable, isMobile = _h.isMobile;
-    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;
+    }), 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);
     useListenTextareaScroll(resetMention, textareaRef.current);
@@ -99,7 +100,7 @@ export var Markdown = function (props) {
             isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
             fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
                 React.createElement(SplitViewEditContainer, null, renderEditContainer()),
-                React.createElement(SplitViewPreviewContainer, { textareaWidth: textareaProps.width }, renderPreview()))),
+                React.createElement(SplitViewPreviewContainer, { textareaWidth: ((_a = textareaProps.width) === null || _a === void 0 ? void 0 : _a.toString().includes('%')) ? initialWidth : textareaProps.width }, renderPreview()))),
             viewMode === ViewMode.Edit && renderEditContainer(),
             viewMode === ViewMode.Preview && renderPreview(),
             isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings)))));
@@ -121,20 +122,20 @@ export var Markdown = function (props) {
         return (React.createElement(MarkdownEditorBlock, null,
             React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
             showMention && renderMentions(),
-            React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
+            React.createElement(MarkdownEditor, __assign({}, textareaProps, { maxRows: fullscreen ? undefined : textareaProps.maxRows, width: width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
     }
     function renderPreview() {
         var _a;
         if (!props.value && viewMode === ViewMode.Split)
             return React.createElement(EmptyPreview, null);
-        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 }))));
+        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 }))));
     }
     function renderMentions() {
         var _a;
         if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
             var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
             var position = getCursorCoordinates(textareaNode, guid);
-            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
+            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
         }
     }
     function handleChangeViewMode(mode) {

package/src/Markdown/Markdown.styled.d.ts

@@ -18,7 +18,9 @@ export declare const DroppablePlaceholder: import("styled-components").StyledCom
 export declare const MentionWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownPreview: import("styled-components").StyledComponent<"div", MarkdownTheme, {
     width?: Nullable<number | string>;
-} & HorizontalPaddings, never>;
+} & HorizontalPaddings & {
+    viewMode: ViewMode;
+}, never>;
 export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
     width?: Nullable<number | string>;
 } & HorizontalPaddings & {

package/src/Markdown/Markdown.styled.js

@@ -38,9 +38,11 @@ export var Avatar = styled.img.attrs({ alt: '' })(templateObject_9 || (templateO
 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 ", "px;\n  ", "\n  box-sizing: border-box;\n"], ["\n  padding: 6px ", "px;\n  ", "\n  box-sizing: border-box;\n"])), function (_a) {
+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;
+    var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding, viewMode = _a.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) {
@@ -102,9 +104,10 @@ export var getMarkdownReactUiTheme = function (theme, viewMode, reactUiTheme, pa
         menuItemPaddingY: '4px',
         menuItemPaddingX: '28px',
     })), { 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 || isFullscreenNotSplitMode) && borderlessTextareaVariables)), (isFullscreen &&
+        }))), ((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',

package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.d.ts

@@ -1,7 +1,7 @@
 import { Menu } from '@skbkontur/react-ui/internal/Menu';
 import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
-import { Token, User } from '../types';
+import { Token } from '../types';
 export declare function mentionActions(event: ChangeEvent<HTMLTextAreaElement> | MouseEvent<HTMLTextAreaElement> | SyntheticEvent<HTMLTextAreaElement, Event>, setToken: (token?: Token) => void): void;
-export declare const useMenuKeyListener: (onUserSelect: (login: string, name: string) => void, users?: User[], menuRef?: RefObject<Menu>) => void;
+export declare const useMenuKeyListener: (onChangeHighlightedIndex: (step: number) => void, onSelectUser: () => void, menuRef?: RefObject<Menu>) => void;
 export declare const getMentionValue: (mention?: Token | null) => string;
 export declare function getAvatarUrl(sid: undefined | null | string): string;

package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.js

@@ -12,28 +12,30 @@ export function mentionActions(event, setToken) {
         setToken(undefined);
     }
 }
-export var useMenuKeyListener = function (onUserSelect, users, menuRef) {
+export var useMenuKeyListener = function (onChangeHighlightedIndex, onSelectUser, menuRef) {
     useEffect(function () {
         var keyListener = function (event) {
-            var _a;
             if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
                 if (ArrowsVertical.includes(event.key)) {
                     event.preventDefault();
-                    if (event.key === 'ArrowUp')
+                    if (event.key === 'ArrowUp') {
                         menuRef.current.up();
-                    if (event.key === 'ArrowDown')
+                        onChangeHighlightedIndex(-1);
+                    }
+                    if (event.key === 'ArrowDown') {
                         menuRef.current.down();
+                        onChangeHighlightedIndex(1);
+                    }
                 }
-                if (event.key === 'Enter' && (users === null || users === void 0 ? void 0 : users.length)) {
+                if (event.key === 'Enter') {
                     event.preventDefault();
-                    var selected = users[menuRef.current.state.highlightedIndex];
-                    onUserSelect((_a = selected.login) !== null && _a !== void 0 ? _a : '', selected.name);
+                    onSelectUser();
                 }
             }
         };
         window.addEventListener('keydown', keyListener);
         return function () { return window.removeEventListener('keydown', keyListener); };
-    }, [menuRef, onUserSelect, users]);
+    }, [menuRef, onSelectUser, onChangeHighlightedIndex]);
 };
 export var getMentionValue = function (mention) { var _a, _b; return (_b = (_a = mention === null || mention === void 0 ? void 0 : mention.value) === null || _a === void 0 ? void 0 : _a.replace('@', '')) !== null && _b !== void 0 ? _b : ''; };
 export function getAvatarUrl(sid) {

package/src/Markdown/MarkdownMention.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { User } from './types';
 interface Props {
     getUsersApi: (value: string) => Promise<User[]>;
-    onUserSelect: (login: string, name: string) => void;
+    onSelectUser: (login: string, name: string) => void;
     value: string;
     x: number;
     y: number;

package/src/Markdown/MarkdownMention.js

@@ -43,11 +43,14 @@ import { MARKDOWN_RENDER_CONTAINER, INPUT_DEBOUNCE_TIME } from './constants';
 import { getMarkdownMentionStyle, MentionMenuItem, UserDescriptions, UserWrapper, Avatar } from './Markdown.styled';
 import { getAvatarUrl, useMenuKeyListener } from './MarkdownHelpers/markdownMentionHelpers';
 export var MarkdownMention = function (_a) {
-    var value = _a.value, onUserSelect = _a.onUserSelect, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
-    var _b = useState(), users = _b[0], setUsers = _b[1];
+    var _b;
+    var value = _a.value, onSelectUser = _a.onSelectUser, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
+    var _c = useState(), users = _c[0], setUsers = _c[1];
+    var _d = useState(0), highlightedIndex = _d[0], setHighlightedIndex = _d[1];
     var menuRef = useRef(null);
     var markdownMentionsRef = useRef(document.getElementById(MARKDOWN_RENDER_CONTAINER));
     var timerRef = useRef(INPUT_DEBOUNCE_TIME);
+    var usersLength = (_b = users === null || users === void 0 ? void 0 : users.length) !== null && _b !== void 0 ? _b : 0;
     if (!markdownMentionsRef.current) {
         var container = document.createElement('div');
         container.id = MARKDOWN_RENDER_CONTAINER;
@@ -75,14 +78,35 @@ export var MarkdownMention = function (_a) {
             Toast.push('Ошибка в получении списка пользователей');
         }
     }, [getUsersApi, value]);
-    useMenuKeyListener(onUserSelect, users, menuRef);
-    if (!(users === null || users === void 0 ? void 0 : users.length))
+    useEffect(function () {
+        setHighlightedIndex(0);
+    }, [users]);
+    useMenuKeyListener(handleChangeHighlightedIndex, function () { return handleSelectUser(highlightedIndex); }, menuRef);
+    if (!usersLength)
         return null;
     return createPortal(React.createElement(ZIndex, { priority: "Toast", style: getMarkdownMentionStyle(x, y) },
-        React.createElement(Menu, { ref: menuRef, preventWindowScroll: true, hasShadow: true, maxHeight: 300, width: 320 }, users === null || users === void 0 ? void 0 : users.map(function (user) { return (React.createElement(MentionMenuItem, { key: user.id, onClick: function () { var _a; return onUserSelect((_a = user === null || user === void 0 ? void 0 : user.login) !== null && _a !== void 0 ? _a : '', user.name); } },
+        React.createElement(Menu, { ref: menuRef, preventWindowScroll: true, hasShadow: true, initialSelectedItemIndex: 0, maxHeight: 300, width: 320 }, users === null || users === void 0 ? void 0 : users.map(function (user, idx) { return (React.createElement(MentionMenuItem, { key: user.id, onClick: function () { return handleSelectUser(idx); } },
             React.createElement(UserWrapper, null,
                 React.createElement(Avatar, { height: 48, width: 48, src: getAvatarUrl(user.sid) }),
                 React.createElement("div", null,
                     React.createElement("div", null, user.name),
                     React.createElement(UserDescriptions, null, user === null || user === void 0 ? void 0 : user.teams.map(function (t) { return t.caption; }).join(', ')))))); }))), markdownMentionsRef.current);
+    function handleChangeHighlightedIndex(step) {
+        var usersLengthIndex = usersLength - 1;
+        if (step === -1 && !highlightedIndex)
+            setHighlightedIndex(usersLengthIndex);
+        else if (step === 1 && highlightedIndex === usersLengthIndex)
+            setHighlightedIndex(0);
+        else
+            setHighlightedIndex(highlightedIndex + step);
+    }
+    function handleSelectUser(idx) {
+        if (users) {
+            var selectedUser = users[idx];
+            if (selectedUser) {
+                var login = selectedUser.login, name_1 = selectedUser.name;
+                onSelectUser(login, name_1);
+            }
+        }
+    }
 };