@skbkontur/markdown 2.4.3 → 2.4.4

package/package.json

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

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

@@ -0,0 +1,2 @@
+export declare const MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE = "[data-visual-state-hover]";
+export declare const EMPTY_AVATAR = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANTSURBVFhH7Zg/aBNRHMebXEv+CFKxSusgBAcXRdDJWnA4qAVdRMzgIogScCldmj8dQighoRgh/hnataCSSXRyCA7BQS0OdVGHgrGCOqQiUmNiEr+v960Ycum9dy9m8gPH789d775573fv/a4D/9HEQ6tFLpcL1Gq1Cx6Px9dsNj/CvonFYu9hW7zENdoCk8mk1+/3ZyBmlqktWq3WOkwB+TzElq2sOq4Ezs/PHzIMY9br9U5CyBhEDCHttc52UMU1sXg8nmeshEErTTabnYCwEo5xhMMQNwi70w8dxDVTpmkaxWLxKXPSKI1gPp/3bW5uvsMDDzIlDUaxhR9lRqNRJZHdpsWWarV6xo04Af7OgxcoxVAaJYF4wEm6bplYWFgYpS+FkkAwRusKMYqNRuMEQymUBKKG6Gmxl1YK1SneoKvDD1oppAVieREvxx4r0mIUi/tu+o6ojOAKSugyfdfgHrcCgcBdho5ICSwUCmJB32dF+ojdh64jUgLD4XADN/3GUBuMYoWuI9JTjJu+oNsLpO+lIvA2jHb7BDawFi7Td0RaIPbQR1hmpjDVaaaUECWC4zrEjc/NzX1m2hHldmtxcXGoUqmsY0T3MyUFxN1Hy3WJoTTSI7hNJBKpw6j2dk3sQjfpK6EsUBAMBnMwL63IGYzeDZTICkMlXAmcnp7+iVo6iwe/ZaoruOYe2rQ4Q2W0vknE9gcBr1GP3bau0tramrm0tCTKwhWuRnAb8TEEcV8Y2rGqI06gJZD8orVjp3NSaAlkd9y1v8P0H0bnIj6qXOOqBkW7hI7kKtwEDqcGdBVlkAyFQo/Fns6cNNICIWoEy4uJUTmH4zweuounpMDfiA/5Bzie4D4lsRJsnXBgR4GizcJbeBHuNTzgNEQpf0d34TuOh9g67yQSiedWyp6uAjOZzDGYZYg6amX+DfjhBb/fH5mZmfnKVBu2AtPp9BHDMJ7BlW7NdYDIV1jMT6VSqSpTf7B9i7Fvio6lL+IEmKXjPp/vCsM2OgSyvTetqH9gUCbpttEhsFwuH1B9Q3uEba13CKzX6yN0+wrqcJhuG3Y1qPTl30NqtG10CEQtBOn2FZSV7Zdeh0Asnq62vx7wibYNuynuxf9flEENfqD7FwMDvwH9BxCkLLaB+AAAAABJRU5ErkJggg==";

package/src/Markdown/MarkdownHelpers/constants.js

@@ -0,0 +1,2 @@
+export var MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE = '[data-visual-state-hover]';
+export var EMPTY_AVATAR = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANTSURBVFhH7Zg/aBNRHMebXEv+CFKxSusgBAcXRdDJWnA4qAVdRMzgIogScCldmj8dQighoRgh/hnataCSSXRyCA7BQS0OdVGHgrGCOqQiUmNiEr+v960Ycum9dy9m8gPH789d775573fv/a4D/9HEQ6tFLpcL1Gq1Cx6Px9dsNj/CvonFYu9hW7zENdoCk8mk1+/3ZyBmlqktWq3WOkwB+TzElq2sOq4Ezs/PHzIMY9br9U5CyBhEDCHttc52UMU1sXg8nmeshEErTTabnYCwEo5xhMMQNwi70w8dxDVTpmkaxWLxKXPSKI1gPp/3bW5uvsMDDzIlDUaxhR9lRqNRJZHdpsWWarV6xo04Af7OgxcoxVAaJYF4wEm6bplYWFgYpS+FkkAwRusKMYqNRuMEQymUBKKG6Gmxl1YK1SneoKvDD1oppAVieREvxx4r0mIUi/tu+o6ojOAKSugyfdfgHrcCgcBdho5ICSwUCmJB32dF+ojdh64jUgLD4XADN/3GUBuMYoWuI9JTjJu+oNsLpO+lIvA2jHb7BDawFi7Td0RaIPbQR1hmpjDVaaaUECWC4zrEjc/NzX1m2hHldmtxcXGoUqmsY0T3MyUFxN1Hy3WJoTTSI7hNJBKpw6j2dk3sQjfpK6EsUBAMBnMwL63IGYzeDZTICkMlXAmcnp7+iVo6iwe/ZaoruOYe2rQ4Q2W0vknE9gcBr1GP3bau0tramrm0tCTKwhWuRnAb8TEEcV8Y2rGqI06gJZD8orVjp3NSaAlkd9y1v8P0H0bnIj6qXOOqBkW7hI7kKtwEDqcGdBVlkAyFQo/Fns6cNNICIWoEy4uJUTmH4zweuounpMDfiA/5Bzie4D4lsRJsnXBgR4GizcJbeBHuNTzgNEQpf0d34TuOh9g67yQSiedWyp6uAjOZzDGYZYg6amX+DfjhBb/fH5mZmfnKVBu2AtPp9BHDMJ7BlW7NdYDIV1jMT6VSqSpTf7B9i7Fvio6lL+IEmKXjPp/vCsM2OgSyvTetqH9gUCbpttEhsFwuH1B9Q3uEba13CKzX6yN0+wrqcJhuG3Y1qPTl30NqtG10CEQtBOn2FZSV7Zdeh0Asnq62vx7wibYNuynuxf9flEENfqD7FwMDvwH9BxCkLLaB+AAAAABJRU5ErkJggg==';

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

@@ -2,6 +2,6 @@ import { Menu } from '@skbkontur/react-ui/internal/Menu';
 import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
 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: (onChangeHighlightedIndex: (step: number) => void, onSelectUser: () => void, menuRef?: RefObject<Menu>) => void;
+export declare const useMenuKeyListener: (onSelectUser: (idx: number) => 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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { EMPTY_AVATAR, MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE } from './constants';
 import { getTextareaTokens } from './markdownTextareaHelpers';
 var ArrowsVertical = ['ArrowUp', 'ArrowDown'];
 export function mentionActions(event, setToken) {
@@ -12,35 +13,33 @@ export function mentionActions(event, setToken) {
         setToken(undefined);
     }
 }
-export var useMenuKeyListener = function (onChangeHighlightedIndex, onSelectUser, menuRef) {
+export var useMenuKeyListener = function (onSelectUser, menuRef) {
     useEffect(function () {
         var keyListener = function (event) {
             if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
                 if (ArrowsVertical.includes(event.key)) {
-                    event.preventDefault();
                     if (event.key === 'ArrowUp') {
                         menuRef.current.up();
-                        onChangeHighlightedIndex(-1);
                     }
                     if (event.key === 'ArrowDown') {
                         menuRef.current.down();
-                        onChangeHighlightedIndex(1);
                     }
                 }
                 if (event.key === 'Enter') {
-                    event.preventDefault();
-                    onSelectUser();
+                    var hoveredElement = document.querySelector(MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE);
+                    if (hoveredElement) {
+                        onSelectUser(Number(hoveredElement.id || 0));
+                    }
                 }
             }
         };
         window.addEventListener('keydown', keyListener);
         return function () { return window.removeEventListener('keydown', keyListener); };
-    }, [menuRef, onSelectUser, onChangeHighlightedIndex]);
+    }, [menuRef, onSelectUser]);
 };
 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) {
-    if (!sid) {
-        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANTSURBVFhH7Zg/aBNRHMebXEv+CFKxSusgBAcXRdDJWnA4qAVdRMzgIogScCldmj8dQighoRgh/hnataCSSXRyCA7BQS0OdVGHgrGCOqQiUmNiEr+v960Ycum9dy9m8gPH789d775573fv/a4D/9HEQ6tFLpcL1Gq1Cx6Px9dsNj/CvonFYu9hW7zENdoCk8mk1+/3ZyBmlqktWq3WOkwB+TzElq2sOq4Ezs/PHzIMY9br9U5CyBhEDCHttc52UMU1sXg8nmeshEErTTabnYCwEo5xhMMQNwi70w8dxDVTpmkaxWLxKXPSKI1gPp/3bW5uvsMDDzIlDUaxhR9lRqNRJZHdpsWWarV6xo04Af7OgxcoxVAaJYF4wEm6bplYWFgYpS+FkkAwRusKMYqNRuMEQymUBKKG6Gmxl1YK1SneoKvDD1oppAVieREvxx4r0mIUi/tu+o6ojOAKSugyfdfgHrcCgcBdho5ICSwUCmJB32dF+ojdh64jUgLD4XADN/3GUBuMYoWuI9JTjJu+oNsLpO+lIvA2jHb7BDawFi7Td0RaIPbQR1hmpjDVaaaUECWC4zrEjc/NzX1m2hHldmtxcXGoUqmsY0T3MyUFxN1Hy3WJoTTSI7hNJBKpw6j2dk3sQjfpK6EsUBAMBnMwL63IGYzeDZTICkMlXAmcnp7+iVo6iwe/ZaoruOYe2rQ4Q2W0vknE9gcBr1GP3bau0tramrm0tCTKwhWuRnAb8TEEcV8Y2rGqI06gJZD8orVjp3NSaAlkd9y1v8P0H0bnIj6qXOOqBkW7hI7kKtwEDqcGdBVlkAyFQo/Fns6cNNICIWoEy4uJUTmH4zweuounpMDfiA/5Bzie4D4lsRJsnXBgR4GizcJbeBHuNTzgNEQpf0d34TuOh9g67yQSiedWyp6uAjOZzDGYZYg6amX+DfjhBb/fH5mZmfnKVBu2AtPp9BHDMJ7BlW7NdYDIV1jMT6VSqSpTf7B9i7Fvio6lL+IEmKXjPp/vCsM2OgSyvTetqH9gUCbpttEhsFwuH1B9Q3uEba13CKzX6yN0+wrqcJhuG3Y1qPTl30NqtG10CEQtBOn2FZSV7Zdeh0Asnq62vx7wibYNuynuxf9flEENfqD7FwMDvwH9BxCkLLaB+AAAAABJRU5ErkJggg==';
-    }
+    if (!sid)
+        return EMPTY_AVATAR;
     return "https://staff.skbkontur.ru/api/avatar/".concat(sid, "?size=s}");
 }

package/src/Markdown/MarkdownMention.js

@@ -46,7 +46,6 @@ export var MarkdownMention = function (_a) {
     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);
@@ -78,28 +77,16 @@ export var MarkdownMention = function (_a) {
             Toast.push('Ошибка в получении списка пользователей');
         }
     }, [getUsersApi, value]);
-    useEffect(function () {
-        setHighlightedIndex(0);
-    }, [users]);
-    useMenuKeyListener(handleChangeHighlightedIndex, function () { return handleSelectUser(highlightedIndex); }, menuRef);
+    useMenuKeyListener(handleSelectUser, 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, 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(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, id: "".concat(idx), 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];