@skbkontur/markdown 2.4.2 → 2.4.4

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/Markdown/Markdown.js +1 -1
  3. package/src/Markdown/MarkdownHelpers/constants.d.ts +2 -0
  4. package/src/Markdown/MarkdownHelpers/constants.js +2 -0
  5. package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.d.ts +2 -2
  6. package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.js +14 -13
  7. package/src/Markdown/MarkdownMention.d.ts +1 -1
  8. package/src/Markdown/MarkdownMention.js +16 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "2.4.2",
3
+ "version": "2.4.4",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
package/src/Markdown/Markdown.js CHANGED
@@ -135,7 +135,7 @@ export var Markdown = function (props) {
135
135
  if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
136
136
  var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
137
137
  var position = getCursorCoordinates(textareaNode, guid);
138
- return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
138
+ return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
139
139
  }
140
140
  }
141
141
  function handleChangeViewMode(mode) {
package/src/Markdown/MarkdownHelpers/constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE = "[data-visual-state-hover]";
2
+ 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 ADDED
@@ -0,0 +1,2 @@
1
+ export var MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE = '[data-visual-state-hover]';
2
+ 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 CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Menu } from '@skbkontur/react-ui/internal/Menu';
2
2
  import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
3
- import { Token, User } from '../types';
3
+ import { Token } from '../types';
4
4
  export declare function mentionActions(event: ChangeEvent<HTMLTextAreaElement> | MouseEvent<HTMLTextAreaElement> | SyntheticEvent<HTMLTextAreaElement, Event>, setToken: (token?: Token) => void): void;
5
- export declare const useMenuKeyListener: (onUserSelect: (login: string, name: string) => void, users?: User[], menuRef?: RefObject<Menu>) => void;
5
+ export declare const useMenuKeyListener: (onSelectUser: (idx: number) => void, menuRef?: RefObject<Menu>) => void;
6
6
  export declare const getMentionValue: (mention?: Token | null) => string;
7
7
  export declare function getAvatarUrl(sid: undefined | null | string): string;
package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useEffect } from 'react';
2
+ import { EMPTY_AVATAR, MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE } from './constants';
2
3
  import { getTextareaTokens } from './markdownTextareaHelpers';
3
4
  var ArrowsVertical = ['ArrowUp', 'ArrowDown'];
4
5
  export function mentionActions(event, setToken) {
@@ -12,33 +13,33 @@ export function mentionActions(event, setToken) {
12
13
  setToken(undefined);
13
14
  }
14
15
  }
15
- export var useMenuKeyListener = function (onUserSelect, users, menuRef) {
16
+ export var useMenuKeyListener = function (onSelectUser, menuRef) {
16
17
  useEffect(function () {
17
18
  var keyListener = function (event) {
18
- var _a;
19
19
  if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
20
20
  if (ArrowsVertical.includes(event.key)) {
21
- event.preventDefault();
22
- if (event.key === 'ArrowUp')
21
+ if (event.key === 'ArrowUp') {
23
22
  menuRef.current.up();
24
- if (event.key === 'ArrowDown')
23
+ }
24
+ if (event.key === 'ArrowDown') {
25
25
  menuRef.current.down();
26
+ }
26
27
  }
27
- if (event.key === 'Enter' && (users === null || users === void 0 ? void 0 : users.length)) {
28
- event.preventDefault();
29
- var selected = users[menuRef.current.state.highlightedIndex];
30
- onUserSelect((_a = selected.login) !== null && _a !== void 0 ? _a : '', selected.name);
28
+ if (event.key === 'Enter') {
29
+ var hoveredElement = document.querySelector(MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE);
30
+ if (hoveredElement) {
31
+ onSelectUser(Number(hoveredElement.id || 0));
32
+ }
31
33
  }
32
34
  }
33
35
  };
34
36
  window.addEventListener('keydown', keyListener);
35
37
  return function () { return window.removeEventListener('keydown', keyListener); };
36
- }, [menuRef, onUserSelect, users]);
38
+ }, [menuRef, onSelectUser]);
37
39
  };
38
40
  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 : ''; };
39
41
  export function getAvatarUrl(sid) {
40
- if (!sid) {
41
- 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==';
42
- }
42
+ if (!sid)
43
+ return EMPTY_AVATAR;
43
44
  return "https://staff.skbkontur.ru/api/avatar/".concat(sid, "?size=s}");
44
45
  }
package/src/Markdown/MarkdownMention.d.ts CHANGED
@@ -2,7 +2,7 @@ import { FC } from 'react';
2
2
  import { User } from './types';
3
3
  interface Props {
4
4
  getUsersApi: (value: string) => Promise<User[]>;
5
- onUserSelect: (login: string, name: string) => void;
5
+ onSelectUser: (login: string, name: string) => void;
6
6
  value: string;
7
7
  x: number;
8
8
  y: number;
package/src/Markdown/MarkdownMention.js CHANGED
@@ -43,11 +43,13 @@ import { MARKDOWN_RENDER_CONTAINER, INPUT_DEBOUNCE_TIME } from './constants';
43
43
  import { getMarkdownMentionStyle, MentionMenuItem, UserDescriptions, UserWrapper, Avatar } from './Markdown.styled';
44
44
  import { getAvatarUrl, useMenuKeyListener } from './MarkdownHelpers/markdownMentionHelpers';
45
45
  export var MarkdownMention = function (_a) {
46
- var value = _a.value, onUserSelect = _a.onUserSelect, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
47
- var _b = useState(), users = _b[0], setUsers = _b[1];
46
+ var _b;
47
+ var value = _a.value, onSelectUser = _a.onSelectUser, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
48
+ var _c = useState(), users = _c[0], setUsers = _c[1];
48
49
  var menuRef = useRef(null);
49
50
  var markdownMentionsRef = useRef(document.getElementById(MARKDOWN_RENDER_CONTAINER));
50
51
  var timerRef = useRef(INPUT_DEBOUNCE_TIME);
52
+ var usersLength = (_b = users === null || users === void 0 ? void 0 : users.length) !== null && _b !== void 0 ? _b : 0;
51
53
  if (!markdownMentionsRef.current) {
52
54
  var container = document.createElement('div');
53
55
  container.id = MARKDOWN_RENDER_CONTAINER;
@@ -75,14 +77,23 @@ export var MarkdownMention = function (_a) {
75
77
  Toast.push('Ошибка в получении списка пользователей');
76
78
  }
77
79
  }, [getUsersApi, value]);
78
- useMenuKeyListener(onUserSelect, users, menuRef);
79
- if (!(users === null || users === void 0 ? void 0 : users.length))
80
+ useMenuKeyListener(handleSelectUser, menuRef);
81
+ if (!usersLength)
80
82
  return null;
81
83
  return createPortal(React.createElement(ZIndex, { priority: "Toast", style: getMarkdownMentionStyle(x, y) },
82
- 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); } },
84
+ 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); } },
83
85
  React.createElement(UserWrapper, null,
84
86
  React.createElement(Avatar, { height: 48, width: 48, src: getAvatarUrl(user.sid) }),
85
87
  React.createElement("div", null,
86
88
  React.createElement("div", null, user.name),
87
89
  React.createElement(UserDescriptions, null, user === null || user === void 0 ? void 0 : user.teams.map(function (t) { return t.caption; }).join(', ')))))); }))), markdownMentionsRef.current);
90
+ function handleSelectUser(idx) {
91
+ if (users) {
92
+ var selectedUser = users[idx];
93
+ if (selectedUser) {
94
+ var login = selectedUser.login, name_1 = selectedUser.name;
95
+ onSelectUser(login, name_1);
96
+ }
97
+ }
98
+ }
88
99
  };