@skbkontur/markdown 2.4.3 → 2.4.5
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.
- package/package.json +1 -1
- package/src/Markdown/MarkdownHelpers/constants.d.ts +2 -0
- package/src/Markdown/MarkdownHelpers/constants.js +2 -0
- package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.d.ts +1 -1
- package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.js +9 -10
- package/src/Markdown/MarkdownMention.js +2 -15
- package/src/MarkdownViewer/MarkdownViewer.styles.js +1 -1
package/package.json
CHANGED
|
@@ -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==";
|
|
@@ -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==';
|
|
@@ -2,6 +2,6 @@ import { Menu } from '@skbkontur/react-ui/internal/Menu';
|
|
|
2
2
|
import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
|
|
3
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: (
|
|
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;
|
|
@@ -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,35 +13,33 @@ export function mentionActions(event, setToken) {
|
|
|
12
13
|
setToken(undefined);
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
|
-
export var useMenuKeyListener = function (
|
|
16
|
+
export var useMenuKeyListener = function (onSelectUser, menuRef) {
|
|
16
17
|
useEffect(function () {
|
|
17
18
|
var keyListener = function (event) {
|
|
18
19
|
if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
|
|
19
20
|
if (ArrowsVertical.includes(event.key)) {
|
|
20
|
-
event.preventDefault();
|
|
21
21
|
if (event.key === 'ArrowUp') {
|
|
22
22
|
menuRef.current.up();
|
|
23
|
-
onChangeHighlightedIndex(-1);
|
|
24
23
|
}
|
|
25
24
|
if (event.key === 'ArrowDown') {
|
|
26
25
|
menuRef.current.down();
|
|
27
|
-
onChangeHighlightedIndex(1);
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
28
|
if (event.key === 'Enter') {
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
var hoveredElement = document.querySelector(MENU_ITEM_HOVERED_STATE_DATA_ATTRIBUTE);
|
|
30
|
+
if (hoveredElement) {
|
|
31
|
+
onSelectUser(Number(hoveredElement.id || 0));
|
|
32
|
+
}
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
window.addEventListener('keydown', keyListener);
|
|
37
37
|
return function () { return window.removeEventListener('keydown', keyListener); };
|
|
38
|
-
}, [menuRef, onSelectUser
|
|
38
|
+
}, [menuRef, onSelectUser]);
|
|
39
39
|
};
|
|
40
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 : ''; };
|
|
41
41
|
export function getAvatarUrl(sid) {
|
|
42
|
-
if (!sid)
|
|
43
|
-
return
|
|
44
|
-
}
|
|
42
|
+
if (!sid)
|
|
43
|
+
return EMPTY_AVATAR;
|
|
45
44
|
return "https://staff.skbkontur.ru/api/avatar/".concat(sid, "?size=s}");
|
|
46
45
|
}
|
|
@@ -46,7 +46,6 @@ export var MarkdownMention = function (_a) {
|
|
|
46
46
|
var _b;
|
|
47
47
|
var value = _a.value, onSelectUser = _a.onSelectUser, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
|
|
48
48
|
var _c = useState(), users = _c[0], setUsers = _c[1];
|
|
49
|
-
var _d = useState(0), highlightedIndex = _d[0], setHighlightedIndex = _d[1];
|
|
50
49
|
var menuRef = useRef(null);
|
|
51
50
|
var markdownMentionsRef = useRef(document.getElementById(MARKDOWN_RENDER_CONTAINER));
|
|
52
51
|
var timerRef = useRef(INPUT_DEBOUNCE_TIME);
|
|
@@ -78,28 +77,16 @@ export var MarkdownMention = function (_a) {
|
|
|
78
77
|
Toast.push('Ошибка в получении списка пользователей');
|
|
79
78
|
}
|
|
80
79
|
}, [getUsersApi, value]);
|
|
81
|
-
|
|
82
|
-
setHighlightedIndex(0);
|
|
83
|
-
}, [users]);
|
|
84
|
-
useMenuKeyListener(handleChangeHighlightedIndex, function () { return handleSelectUser(highlightedIndex); }, menuRef);
|
|
80
|
+
useMenuKeyListener(handleSelectUser, menuRef);
|
|
85
81
|
if (!usersLength)
|
|
86
82
|
return null;
|
|
87
83
|
return createPortal(React.createElement(ZIndex, { priority: "Toast", style: getMarkdownMentionStyle(x, y) },
|
|
88
|
-
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); } },
|
|
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); } },
|
|
89
85
|
React.createElement(UserWrapper, null,
|
|
90
86
|
React.createElement(Avatar, { height: 48, width: 48, src: getAvatarUrl(user.sid) }),
|
|
91
87
|
React.createElement("div", null,
|
|
92
88
|
React.createElement("div", null, user.name),
|
|
93
89
|
React.createElement(UserDescriptions, null, user === null || user === void 0 ? void 0 : user.teams.map(function (t) { return t.caption; }).join(', ')))))); }))), markdownMentionsRef.current);
|
|
94
|
-
function handleChangeHighlightedIndex(step) {
|
|
95
|
-
var usersLengthIndex = usersLength - 1;
|
|
96
|
-
if (step === -1 && !highlightedIndex)
|
|
97
|
-
setHighlightedIndex(usersLengthIndex);
|
|
98
|
-
else if (step === 1 && highlightedIndex === usersLengthIndex)
|
|
99
|
-
setHighlightedIndex(0);
|
|
100
|
-
else
|
|
101
|
-
setHighlightedIndex(highlightedIndex + step);
|
|
102
|
-
}
|
|
103
90
|
function handleSelectUser(idx) {
|
|
104
91
|
if (users) {
|
|
105
92
|
var selectedUser = users[idx];
|
|
@@ -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 position: relative;\n\n word-break: break-word;\n\n p,\n
|
|
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 hr,\n table,\n blockquote {\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: 36px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 32px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 28px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 24px;\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 blockquote {\n margin: 24px 0;\n padding-left: 16px;\n }\n\n hr {\n margin-top: 0;\n }\n\n code {\n display: inline-block;\n white-space: pre-wrap;\n padding: 4px;\n border-radius: 8px;\n border: 1px solid ", ";\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin: 8px 0 8px 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 hr,\n table,\n blockquote {\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: 36px;\n margin-bottom: 28px;\n }\n\n h2 {\n margin-top: 32px;\n margin-bottom: 24px;\n }\n\n h3 {\n margin-top: 28px;\n margin-bottom: 20px;\n }\n\n h4 {\n margin-top: 24px;\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 blockquote {\n margin: 24px 0;\n padding-left: 16px;\n }\n\n hr {\n margin-top: 0;\n }\n\n code {\n display: inline-block;\n white-space: pre-wrap;\n padding: 4px;\n border-radius: 8px;\n border: 1px solid ", ";\n }\n\n ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n margin: 8px 0 8px 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; }, 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; }, 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; });
|