@skbkontur/markdown 2.7.0-alpha.3 → 2.7.0-alpha.6

package/index.d.ts

@@ -2,6 +2,6 @@ export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
 export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
 export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
 export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
-export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, AIMethod, AIApi, } from '././src/Markdown/types';
+export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, ActionsOptions, AIMethod, AIApi, TrackEventCategory, } from '././src/Markdown/types';
 export { ThemeMode, ColorScheme } from './src/styles/types';
 export { MarkdownTheme, MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.7.0-alpha.3",
+  "version": "2.7.0-alpha.6",
   "packageManager": "yarn@4.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/src/Markdown/Emoji/EmojiDropdown.d.ts

@@ -5,6 +5,7 @@ interface Props {
     onSelect: (emoji: EmojiData) => void;
     showActionHint: boolean;
     showShortKey: boolean;
+    onTrackEvent?: () => void;
 }
 export declare const EmojiDropdown: React.FC<Props>;
 export {};

package/src/Markdown/Emoji/EmojiDropdown.js

@@ -9,11 +9,14 @@ import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/them
 import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
 import { MarkdownTids } from '../MarkdownTids';
 emojiLocale.search = 'Поиск на английском';
-export const EmojiDropdown = ({ isPreviewMode, showShortKey, onSelect, showActionHint }) => {
+export const EmojiDropdown = ({ isPreviewMode, showShortKey, onSelect, showActionHint, onTrackEvent, }) => {
     const dropdownMenuRef = useRef(null);
     return (React.createElement(MarkdownThemeConsumer, null, theme => {
         const currentTheme = theme ?? DEFAULT_MARKDOWN_THEME;
-        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: ({ toggleMenu }) => (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.Emoji, showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu })), menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
+        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: ({ toggleMenu }) => (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.Emoji, showShortKey: showShortKey, showActionHint: showActionHint, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: () => {
+                    onTrackEvent?.();
+                    toggleMenu();
+                } })), menuWidth: 300, positions: ['bottom right', 'bottom left', 'top right', 'top right'] },
             React.createElement(EmojiPickerWrapper, null,
                 React.createElement(EmojiPicker, { dynamicWidth: true, data: data, i18n: emojiLocale, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
     }));

package/src/Markdown/Markdown.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { MarkdownEditorProps } from './MarkdownEditor';
-import { HideActionsOptions, HorizontalPaddings, MarkdownApi, ViewMode } from './types';
+import { ActionsOptions, TrackEventCategory, HorizontalPaddings, MarkdownApi, ViewMode } from './types';
 export interface MarkdownProps extends MarkdownEditorProps {
     /** Методы апи для загрузки/скачивания файлов, меншена, ИИ */
     api?: MarkdownApi;
@@ -9,11 +9,13 @@ export interface MarkdownProps extends MarkdownEditorProps {
     /** Url апи для файлов  */
     fileApiUrl?: string;
     /** Скрывать выборочно опции */
-    hideActionsOptions?: HideActionsOptions;
+    hideActionsOptions?: ActionsOptions;
     /** Превьювер мардауна, по умолчанию используется MarkdownViewer */
     markdownViewer?: (value: string) => ReactNode;
     /** Колбек, срабатывает на изменение режима редактирования или просмотра */
     onChangeViewMode?: (mode: ViewMode) => void;
+    /** Колбек для отправки метрик */
+    onTrackEvent?: (category: TrackEventCategory, action: 'click' | 'hotkey', label?: string) => void;
     /** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
     panelHorizontalPadding?: number;
     /** Url для профиля сотрудника  */

package/src/Markdown/Markdown.js

@@ -13,7 +13,7 @@ import { usePasteFromClipboard } from './MarkdownHelpers/markdownHelpers';
 import { getMentionValue, mentionActions } from './MarkdownHelpers/markdownMentionHelpers';
 import { getCursorCoordinates, useFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
 import { MarkdownMention } from './MarkdownMention';
-import { ViewMode } from './types';
+import { ViewMode, } from './types';
 import { Guid } from './utils/guid';
 import { onInsertText } from './utils/onInsertText';
 import { RequestStatus } from './utils/requestStatus';
@@ -21,7 +21,7 @@ import { MarkdownViewer } from '../MarkdownViewer';
 import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
 export const Markdown = props => {
-    const { panelHorizontalPadding, onClick, onChange, onSelect, markdownViewer, renderFilesValidation, fileApiUrl, profileUrl, api, borderless, showActionHints, showShortKeys, showShotKeys = true, hideActionsOptions, onChangeViewMode, ...textareaProps } = props;
+    const { panelHorizontalPadding, onClick, onChange, onSelect, markdownViewer, renderFilesValidation, fileApiUrl, profileUrl, api, borderless, showActionHints, showShortKeys, showShotKeys = true, hideActionsOptions, onChangeViewMode, onTrackEvent, ...textareaProps } = props;
     const [mention, setMention] = useState();
     const [viewMode, setViewMode] = useState(ViewMode.Edit);
     const [fullscreen, setFullScreen] = useState(false);
@@ -84,7 +84,7 @@ export const Markdown = props => {
     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 })),
+            !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, onTrackEvent: onTrackEvent, 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()),
@@ -110,7 +110,7 @@ export const Markdown = props => {
         return (React.createElement(MarkdownEditorBlock, null,
             React.createElement(MentionWrapper, { id: `${guid}${MENTION_WRAPPER_ID_POSTFIX}` }),
             showMention && renderMentions(),
-            React.createElement(MarkdownEditor, { ...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, onTrackEvent: onTrackEvent })));
     }
     function renderPreview() {
         if (!props.value && viewMode === ViewMode.Split)

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.d.ts

@@ -6,6 +6,7 @@ interface Props {
     showActionHint: boolean;
     textareaRef: RefObject<Textarea>;
     isPreviewMode?: boolean;
+    onTrackEvent?: (label: string) => void;
 }
 export declare const AIActionsDropdown: FC<Props>;
 export {};

package/src/Markdown/MarkdownActions/AIActionsDropdown/AIActionsDropdown.js

@@ -10,7 +10,7 @@ import { Guid } from '../../utils/guid';
 import { onInsertText } from '../../utils/onInsertText';
 import { RequestStatus } from '../../utils/requestStatus';
 import { MarkdownDropdown } from '../MarkdownDropdown/MarkdownDropdown';
-export const AIActionsDropdown = ({ textareaRef, isPreviewMode, showActionHint, api }) => {
+export const AIActionsDropdown = ({ textareaRef, isPreviewMode, showActionHint, api, onTrackEvent }) => {
     const [processedText, setProcessedText] = useState();
     const [requestStatus, setRequestStatus] = useState(RequestStatus.Default);
     const tooltipRef = useRef(null);
@@ -41,6 +41,7 @@ export const AIActionsDropdown = ({ textareaRef, isPreviewMode, showActionHint,
                     React.createElement(Button, { "aria-label": COPY_BUTTON_TEXT, icon: React.createElement(Copy, null), onMouseDown: e => e.preventDefault(), onClick: handleCopyText }))))));
     }
     async function handleProcessText(method) {
+        onTrackEvent?.(method);
         const taskId = taskIdRef.current.generate();
         try {
             tooltipRef?.current?.show();
@@ -60,10 +61,12 @@ export const AIActionsDropdown = ({ textareaRef, isPreviewMode, showActionHint,
         }
     }
     async function handleCopyText() {
+        onTrackEvent?.('copyText');
         await navigator.clipboard.writeText(processedText || '');
         handleCloseTooltip();
     }
     function handleSetText() {
+        onTrackEvent?.('setText');
         if (!textareaRef?.current)
             return null;
         textareaRef.current.focus();

package/src/Markdown/MarkdownActions/MarkdownActions.d.ts

@@ -1,7 +1,7 @@
 import { Textarea } from '@skbkontur/react-ui';
 import { FC, RefObject } from 'react';
 import { EmojiData } from '../Emoji/Emoji.logic';
-import { AIApi, HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from '../types';
+import { AIApi, ActionsOptions, TrackEventCategory, HorizontalPaddings, Nullable, ViewMode } from '../types';
 interface Props {
     horizontalPaddings: HorizontalPaddings;
     onChangeViewMode: (viewMode: ViewMode) => void;
@@ -16,10 +16,11 @@ interface Props {
     disableFullscreen?: boolean;
     fullscreen?: boolean;
     hasFilesApi?: boolean;
-    hideOptions?: HideActionsOptions;
+    hideOptions?: ActionsOptions;
     isFocused?: boolean;
     isSplitViewAvailable?: boolean;
     loadingFile?: boolean;
+    onTrackEvent?: (category: TrackEventCategory, action: 'click' | 'hotkey', label?: string) => void;
     selectionEnd?: Nullable<number>;
     selectionStart?: Nullable<number>;
     width?: Nullable<number | string>;

package/src/Markdown/MarkdownActions/MarkdownActions.js

@@ -12,12 +12,13 @@ import { ToolPencil } from '../../MarkdownIcons/ToolPencil';
 import { COMMONMARK_HELP_URL } from '../constants';
 import { EmojiDropdown } from '../Emoji/EmojiDropdown';
 import { ActionsLeftWrapper, ActionsRightWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownMenuItem, ViewModeButtonsWrapper, } from '../Markdown.styled';
+import { MarkdownFormat } from '../MarkdownFormat';
 import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
 import { setMarkdown } from '../MarkdownHelpers/markdownHelpers';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from '../MarkdownHelpItems';
 import { MarkdownTids } from '../MarkdownTids';
 import { ViewMode } from '../types';
-export const MarkdownActions = ({ textAreaRef, selectionStart, selectionEnd, loadingFile, onOpenFileDialog, onClickFullscreen, fullscreen, viewMode, onChangeViewMode, horizontalPaddings, hasFilesApi, width, showActionHints, showShortKeys, hideOptions, onSelectEmoji, isSplitViewAvailable, disableFullscreen, AIApi, }) => {
+export const MarkdownActions = ({ textAreaRef, selectionStart, selectionEnd, loadingFile, onOpenFileDialog, onClickFullscreen, fullscreen, viewMode, onChangeViewMode, horizontalPaddings, hasFilesApi, width, showActionHints, showShortKeys, hideOptions, onTrackEvent, onSelectEmoji, isSplitViewAvailable, disableFullscreen, AIApi, }) => {
     const isPreviewMode = viewMode === ViewMode.Preview;
     return (React.createElement(MarkdownActionsWrapper, { ...horizontalPaddings, width: width, fullscreen: fullscreen },
         React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
@@ -39,20 +40,27 @@ export const MarkdownActions = ({ textAreaRef, selectionStart, selectionEnd, loa
                         return null;
                     return (React.createElement(MarkdownFormatButton, { key: idx, showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, dataTid: helper.tid, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: event => handleMarkdownItemClick(event, helper.format) }));
                 }),
-                hasFilesApi && !hideOptions?.file && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.AttachFile, hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onOpenFileDialog })),
-                !hideOptions?.emoji && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
-                !hideOptions?.AI && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi }))),
+                hasFilesApi && !hideOptions?.file && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.AttachFile, hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", showActionHint: showActionHints, showShortKey: showShortKeys, disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: () => {
+                        handleTrackClick(MarkdownFormat.file);
+                        onOpenFileDialog();
+                    } })),
+                !hideOptions?.emoji && (React.createElement(EmojiDropdown, { showActionHint: showActionHints, showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onTrackEvent: () => handleTrackClick('emoji'), onSelect: onSelectEmoji })),
+                !hideOptions?.AI && !!AIApi && (React.createElement(AIActionsDropdown, { showActionHint: showActionHints, textareaRef: textAreaRef, isPreviewMode: isPreviewMode, api: AIApi, onTrackEvent: label => handleTrackClick('AI', label) }))),
             React.createElement(ActionsRightWrapper, null,
-                !hideOptions?.help && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.Help, hintText: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", icon: React.createElement(DocIcon, null), text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", href: COMMONMARK_HELP_URL })),
+                !hideOptions?.help && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.Help, hintText: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", icon: React.createElement(DocIcon, null), text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", href: COMMONMARK_HELP_URL, onClick: () => handleTrackClick('help') })),
                 !hideOptions?.viewMode && renderViewModeButton(),
-                !hideOptions?.screenMode && !disableFullscreen && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.FullscreenToggle, hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : '  Развернуть', onClick: onClickFullscreen }))))));
+                !hideOptions?.screenMode && !disableFullscreen && (React.createElement(MarkdownFormatButton, { showActionHint: showActionHints, dataTid: MarkdownTids.FullscreenToggle, hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : '  Развернуть', onClick: () => {
+                        handleTrackClick('screenMode');
+                        onClickFullscreen();
+                    } }))))));
     function renderViewModeButton() {
         return (React.createElement(ViewModeButtonsWrapper, null,
-            viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.SplitView, icon: React.createElement(SplitView, null), hintText: "\u0421\u043F\u043B\u0438\u0442", text: "\u0421\u043F\u043B\u0438\u0442", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => onChangeViewMode(ViewMode.Split) })),
-            viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.EditView, icon: React.createElement(ToolPencil, null), hintText: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", text: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => onChangeViewMode(ViewMode.Edit) })),
-            viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.PreviewView, icon: React.createElement(EyeOpen, null), hintText: "\u041F\u0440\u0435\u0432\u044C\u044E", text: "\u041F\u0440\u0435\u0432\u044C\u044E", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => onChangeViewMode(ViewMode.Preview) }))));
+            viewMode !== ViewMode.Split && fullscreen && isSplitViewAvailable && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.SplitView, icon: React.createElement(SplitView, null), hintText: "\u0421\u043F\u043B\u0438\u0442", text: "\u0421\u043F\u043B\u0438\u0442", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => handleChangeViewMode(ViewMode.Split) })),
+            viewMode !== ViewMode.Edit && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.EditView, icon: React.createElement(ToolPencil, null), hintText: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", text: "\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => handleChangeViewMode(ViewMode.Edit) })),
+            viewMode !== ViewMode.Preview && (React.createElement(MarkdownFormatButton, { dataTid: MarkdownTids.PreviewView, icon: React.createElement(EyeOpen, null), hintText: "\u041F\u0440\u0435\u0432\u044C\u044E", text: "\u041F\u0440\u0435\u0432\u044C\u044E", showActionHint: showActionHints, showShortKey: showShortKeys, onClick: () => handleChangeViewMode(ViewMode.Preview) }))));
     }
     function handleMarkdownItemClick(event, format) {
+        handleTrackClick(format);
         if (!isNaN(Number(selectionStart)) && !isNaN(Number(selectionEnd))) {
             event.stopPropagation();
             event.preventDefault();
@@ -68,4 +76,11 @@ export const MarkdownActions = ({ textAreaRef, selectionStart, selectionEnd, loa
     function isHiddenOptions(format) {
         return hideOptions?.[format];
     }
+    function handleChangeViewMode(mode) {
+        handleTrackClick('viewMode', mode);
+        onChangeViewMode(mode);
+    }
+    function handleTrackClick(category, label) {
+        onTrackEvent?.(category, 'click', label);
+    }
 };

package/src/Markdown/MarkdownEditor.d.ts

@@ -1,11 +1,12 @@
 import { Textarea, TextareaProps } from '@skbkontur/react-ui';
 import { ValidationInfo, RenderErrorMessage } from '@skbkontur/react-ui-validations';
 import { FC, RefObject } from 'react';
-import { Nullable } from './types';
+import { TrackEventCategory, Nullable } from './types';
 export interface MarkdownEditorProps extends Omit<TextareaProps, 'rows' | 'maxRows' | 'disableAnimations' | 'extraRow'> {
     disableAnimations?: boolean;
     extraRow?: boolean;
     maxRows?: number;
+    onTrackEvent?: (category: TrackEventCategory, action: 'click' | 'hotkey', label?: string) => void;
     /** Рендер сообщения валидации react-ui-validations */
     renderMessage?: Nullable<RenderErrorMessage>;
     rows?: number;

package/src/Markdown/MarkdownEditor.js

@@ -4,11 +4,11 @@ import React from 'react';
 import { useDropzone } from 'react-dropzone';
 import { createMarkdownHelpKeyDownHandler } from './MarkdownHelpers/markdownHelpers';
 export const MarkdownEditor = props => {
-    const { resize = 'none', width = '100%', autoResize = true, showLengthCounter: propsShowLengthCounter = true, textareaRef, validationInfo, renderMessage, withValidationWrapper, ...rest } = props;
+    const { resize = 'none', width = '100%', autoResize = true, showLengthCounter: propsShowLengthCounter = true, textareaRef, validationInfo, renderMessage, withValidationWrapper, onTrackEvent, ...rest } = props;
     const { getInputProps } = useDropzone();
     return withValidationWrapper ? (React.createElement(ValidationWrapper, { validationInfo: validationInfo, renderMessage: renderMessage }, renderTextarea())) : (renderTextarea());
     function renderTextarea() {
-        return (React.createElement(Textarea, { ref: textareaRef, id: "MarkdownTextArea", ...rest, ...getInputProps, resize: resize, width: width, showLengthCounter: showLengthCounter(), autoResize: autoResize, onKeyDown: createMarkdownHelpKeyDownHandler(props.value || '', textareaRef, props.onKeyDown) }));
+        return (React.createElement(Textarea, { ref: textareaRef, id: "MarkdownTextArea", ...rest, ...getInputProps, resize: resize, width: width, showLengthCounter: showLengthCounter(), autoResize: autoResize, onKeyDown: createMarkdownHelpKeyDownHandler(props.value || '', textareaRef, props.onKeyDown, (category, label) => onTrackEvent?.(category, 'hotkey', label)) }));
     }
     function showLengthCounter() {
         if (propsShowLengthCounter) {

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

@@ -1,11 +1,11 @@
 import { Textarea } from '@skbkontur/react-ui';
 import { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
 import { MarkdownFormat } from '../MarkdownFormat';
-import { Nullable, RefItem } from '../types';
+import { TrackEventCategory, Nullable, RefItem } from '../types';
 export { handleMarkdownListEnter } from './markdownListEnterHelpers';
 export declare function setMarkdown(textareaNode: HTMLTextAreaElement, text: string, format: MarkdownFormat, selectionStart: number, selectionEnd?: number | null): void;
 export declare function setMarkdownFiles(file: RefItem, textarea: Textarea, format: MarkdownFormat, cursorPosition?: number | null, fileApiUrl?: string): void;
 export declare function setMarkdownPastedHtml(text: string, textareaNode: HTMLTextAreaElement): void;
 export declare function setTextareaCursor(format: MarkdownFormat, prevCommentPartLength: number, nextCommentPartLength: number, textareaNode: HTMLTextAreaElement, selectionEnd: number): void;
-export declare function createMarkdownHelpKeyDownHandler(text: string, ref?: RefObject<Textarea> | null, callback?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void): (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+export declare function createMarkdownHelpKeyDownHandler(text: string, ref?: RefObject<Textarea> | null, callback?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void, onTrackHotkey?: (category: TrackEventCategory, label?: string) => void): (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
 export declare const usePasteFromClipboard: (textarea: Nullable<Textarea>, uploadFileApi?: ((file: File) => Promise<RefItem>) | undefined, downloadFileApi?: ((id: string) => Promise<File>) | undefined, fileApiUrl?: string) => void;

package/src/Markdown/MarkdownHelpers/markdownHelpers.js

@@ -57,7 +57,7 @@ export function setTextareaCursor(format, prevCommentPartLength, nextCommentPart
         textareaNode.selectionEnd = selectionEnd - prevCommentPartLength + nextCommentCursorPosition;
     }
 }
-export function createMarkdownHelpKeyDownHandler(text, ref, callback) {
+export function createMarkdownHelpKeyDownHandler(text, ref, callback, onTrackHotkey) {
     return (event) => {
         if (!ref?.current)
             return;
@@ -74,9 +74,10 @@ export function createMarkdownHelpKeyDownHandler(text, ref, callback) {
                 const nextCommentPart = markdownHelpItem.wrapContent(prevCommentPart);
                 onInsertText(nextCommentPart);
                 setTextareaCursor(format, prevCommentPart.length, nextCommentPart.length, textareaNode, end);
+                onTrackHotkey?.(format);
             }
         }
-        handleMarkdownListEnter(event, textareaNode);
+        handleMarkdownListEnter(event, textareaNode, label => onTrackHotkey?.('continueList', label));
         callback?.(event);
     };
 }

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

@@ -1,2 +1,3 @@
 import { KeyboardEvent as ReactKeyboardEvent } from 'react';
-export declare function handleMarkdownListEnter(event: ReactKeyboardEvent<HTMLTextAreaElement>, textareaNode: HTMLTextAreaElement): boolean | void;
+import { MarkdownFormat } from '../MarkdownFormat';
+export declare function handleMarkdownListEnter(event: ReactKeyboardEvent<HTMLTextAreaElement>, textareaNode: HTMLTextAreaElement, onTrackEvent?: (label: MarkdownFormat) => void): boolean | void;

package/src/Markdown/MarkdownHelpers/markdownListEnterHelpers.js

@@ -1,3 +1,4 @@
+import { MarkdownFormat } from '../MarkdownFormat';
 import { onInsertText } from '../utils/onInsertText';
 /**
  * RegExp для парсинга markdown-like list item.
@@ -16,7 +17,7 @@ import { onInsertText } from '../utils/onInsertText';
  * - text: текст элемента списка, может быть пустым.
  */
 const listItemRegExp = /^(?<spacesBeforeMarker> *)(?:(?<orderedListNumber>\d+)(?<orderedListDelimiter>[.)])|(?<unorderedListMarker>[*+-])(?: +(?<checkboxListMarker>\[[ xX]]))?)(?: +(?<text>.*)|$)$/;
-export function handleMarkdownListEnter(event, textareaNode) {
+export function handleMarkdownListEnter(event, textareaNode, onTrackEvent) {
     const { selectionStart, selectionEnd, value } = textareaNode;
     const isOnlyDownEnter = event.key === 'Enter' && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey;
     if (!isOnlyDownEnter || selectionStart !== selectionEnd)
@@ -42,6 +43,7 @@ export function handleMarkdownListEnter(event, textareaNode) {
         return document.execCommand('delete');
     }
     if (orderedListNumber && orderedListDelimiter) {
+        onTrackEvent?.(MarkdownFormat.numberedList);
         const nextOrderedListNumber = Number(orderedListNumber) + 1;
         const newLine = `\n${spacesBeforeMarker}${nextOrderedListNumber}${orderedListDelimiter} `;
         const { isChanged, listEndIndex, renumberedList } = getRenumberedListLines(value, currentLineEndIndex, spacesBeforeMarker, orderedListDelimiter, nextOrderedListNumber + 1);
@@ -54,10 +56,14 @@ export function handleMarkdownListEnter(event, textareaNode) {
         }
         return onInsertText(newLine);
     }
-    if (checkboxListMarker)
+    if (checkboxListMarker) {
+        onTrackEvent?.(MarkdownFormat.checkedList);
         return onInsertText(`\n${spacesBeforeMarker}${unorderedListMarker} ${checkboxListMarker} `);
-    if (unorderedListMarker)
+    }
+    if (unorderedListMarker) {
+        onTrackEvent?.(MarkdownFormat.list);
         return onInsertText(`\n${spacesBeforeMarker}${unorderedListMarker} `);
+    }
 }
 function getCurrentLineEndIndex(text, cursorPosition) {
     /* Ищем ближайший перенос строки после курсора */

package/src/Markdown/types.d.ts

@@ -51,4 +51,5 @@ export interface TestCase<V, E> {
     values: V;
 }
 export type ReactUIThemeType = Partial<typeof THEME_2022>;
-export type HideActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'viewMode' | 'screenMode' | 'help' | 'allActions' | 'AI', boolean>>;
+export type ActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'viewMode' | 'screenMode' | 'help' | 'allActions' | 'AI', boolean>>;
+export type TrackEventCategory = keyof ActionsOptions | 'continueList';