@skbkontur/markdown 2.0.0 → 2.2.0

package/README.md

@@ -15,48 +15,49 @@
 ### [Примеры использования](https://stackblitz.com/edit/skbkontur-markdown?file=src%2FApp.tsx)
 
 ### Markdown
+
 #### Props
 
-| prop                    | type                         | default | description |
-|-------------------------|------------------------------|-------|-----------------------------------------------------|
-| api?                    | MarkdownApi                  | undefined | Методы апи для загрузки/скачивания файлов и меншена |
-| fileApiUrl?             | string                       | undefined | Url апи для файлов |
-| profileUrl?             | string                       | undefined | Url для профиля сотрудника |
-| hideMarkdownActions?    | boolean                      | undefined | Скрыть панель действий (кнопки помощи форматирования текста) |
-| markdownViewer?         | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
-| panelHorizontalPadding? | number                      | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
-| renderFilesValidation?  | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode                      | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
+| prop                    | type                                                                      | default   | description                                                                         |
+| ----------------------- | ------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- |
+| api?                    | MarkdownApi                                                               | undefined | Методы апи для загрузки/скачивания файлов и меншена                                 |
+| fileApiUrl?             | string                                                                    | undefined | Url апи для файлов                                                                  |
+| profileUrl?             | string                                                                    | undefined | Url для профиля сотрудника                                                          |
+| markdownViewer?         | (value: string) => ReactNode                                              | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer                        |
+| panelHorizontalPadding? | number                                                                    | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
+| renderFilesValidation?  | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb            |
+| hideActionsOptions      | object (HideActionsOptions)                                               | undefined | Скрыть отдельные кнопки на панели действий                                          |
 
 #### MarkdownApi
 
-| prop             | type                         | default   | description |
-|------------------|------------------------------|-----------|-----------------------------------------------------|
-| fileDownloadApi? |(id: string) => Promise<File>| undefined |Метод для загрузки файла|
-| fileUploadApi?   |(file: File) => Promise<RefItem>| undefined |Метод для скачивания файла|
-| getUsersApi?     |(query: string) => Promise<User[]>| undefined |Метод для получения списка пользователей|
+| prop             | type                               | default   | description                              |
+| ---------------- | ---------------------------------- | --------- | ---------------------------------------- |
+| fileDownloadApi? | (id: string) => Promise<File>      | undefined | Метод для загрузки файла                 |
+| fileUploadApi?   | (file: File) => Promise<RefItem>   | undefined | Метод для скачивания файла               |
+| getUsersApi?     | (query: string) => Promise<User[]> | undefined | Метод для получения списка пользователей |
 
 #### HorizontalPaddings
 
-| prop               | type                               | default   |
-|--------------------|------------------------------------|-----------|
+| prop               | type   | default   |
+| ------------------ | ------ | --------- |
 | fullscreenPadding? | number | undefined |
-| panelPadding?      | nmber | undefined |
+| panelPadding?      | nmber  | undefined |
 
 #### MarkdownTheme
 
-| prop | type                        | description                                                                                                        |
-| ---- |-----------------------------|--------------------------------------------------------------------------------------------------------------------|
-| colors |ColorScheme | Цветовая схема                                                                                                     |
-| elementsFontSize |string| font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
-| elementsLineHeight |string| line-height переменных темы react-ui: tabLineHeight                                                                |
-| themeMode |string| Темный/светлый режим темы                                                                                          |
-| droppablePlaceholderBgImage |string| Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag               |
-| reactUiTheme |string| Тема react-ui                                                                                                      |
+| prop                        | type        | description                                                                                                        |
+| --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
+| colors                      | ColorScheme | Цветовая схема                                                                                                     |
+| elementsFontSize            | string      | font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
+| elementsLineHeight          | string      | line-height переменных темы react-ui: tabLineHeight                                                                |
+| themeMode                   | string      | Темный/светлый режим темы                                                                                          |
+| droppablePlaceholderBgImage | string      | Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag               |
+| reactUiTheme                | string      | Тема react-ui                                                                                                      |
 
 #### ColorScheme
 
 | prop           | type   | description                                                            |
-|----------------|--------|------------------------------------------------------------------------|
+| -------------- | ------ | ---------------------------------------------------------------------- |
 | brand          | string | Цвет сервиса                                                           |
 | disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor                 |
 | grayDefault    | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |

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 } from '././src/Markdown/types';
+export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, } from '././src/Markdown/types';
 export { ThemeMode, ColorScheme } from './src/styles/types';
 export { MarkdownTheme, MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';

package/index.js

@@ -2,5 +2,5 @@ export { Markdown } 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 { ViewMode } from '././src/Markdown/types';
+export { ViewMode, } from '././src/Markdown/types';
 export { MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -10,9 +10,12 @@
   "license": "UNLICENSED",
   "author": "tsypilov",
   "dependencies": {
+    "@emoji-mart/data": "1.2.1",
+    "@emoji-mart/react": "1.1.1",
     "@types/styled-components": "5.1.26",
     "@types/turndown": "^5.0.1",
     "@types/uuid": "^9.0.1",
+    "emoji-mart": "5.6.0",
     "react-dropzone": "^14.2.3",
     "react-foco": "^1.3.1",
     "react-markdown": "^8.0.7",
@@ -94,14 +97,13 @@
     "jest-teamcity-reporter": "0.9.0",
     "lerna": "5.0.0",
     "lint-staged": "12.3.4",
+    "postcss-styled-syntax": "0.5.0",
     "prettier": "2.2.1",
     "react": "17",
     "react-dom": "17",
     "storybook": "8.2.8",
-    "stylelint": "13.13.1",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
+    "stylelint": "15.11.0",
+    "stylelint-config-standard": "34.0.0",
     "typescript": "4.9.4",
     "vite": "5.4.11"
   },

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

@@ -0,0 +1,15 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { Nullable } from '../types';
+/** FIXME: разобраться как достать тип EmojiData из либы emoji-mart */
+export interface EmojiData {
+    emoticons: string[];
+    id: string;
+    keywords: string[];
+    name: string;
+    native: string;
+    shortcodes: string;
+    unified: string;
+}
+export declare const useEmojiLogic: (textarea: Nullable<Textarea>) => {
+    onSelectEmoji: (emoji: EmojiData) => void;
+};

package/src/Markdown/Emoji/Emoji.logic.js

@@ -0,0 +1,12 @@
+import { setMarkdownPastedHtml } from '../MarkdownHelpers/markdownHelpers';
+export var useEmojiLogic = function (textarea) {
+    var onSelectEmoji = function (emoji) {
+        if (textarea) {
+            var textareaNode = textarea.node;
+            setMarkdownPastedHtml(emoji.native, textareaNode);
+        }
+    };
+    return {
+        onSelectEmoji: onSelectEmoji,
+    };
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Все доступные переменные для кастомизации стилей можно посмотреть здесь:
+ * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
+ */
+export declare const EmojiPickerWrapper: import("styled-components").StyledComponent<"div", import("../../..").MarkdownTheme, {}, never>;

package/src/Markdown/Emoji/Emoji.styled.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { getColor } from './helpers';
+import styled from '../../styles/styled-components';
+/**
+ * Все доступные переменные для кастомизации стилей можно посмотреть здесь:
+ * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
+ */
+/* stylelint-disable function-name-case */
+export var EmojiPickerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  em-emoji-picker {\n    --font-family: inherit;\n    --shadow: unset;\n    --rgb-accent: ", ";\n    --color-border: ", ";\n    --rgb-background: ", ";\n    --rgb-input: ", ";\n    --rgb-color: ", ";\n\n    max-height: 300px;\n  }\n"], ["\n  em-emoji-picker {\n    --font-family: inherit;\n    --shadow: unset;\n    --rgb-accent: ", ";\n    --color-border: ", ";\n    --rgb-background: ", ";\n    --rgb-input: ", ";\n    --rgb-color: ", ";\n\n    max-height: 300px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return getColor(theme.colors.brand);
+}, function (_a) {
+    var theme = _a.theme;
+    return getColor(theme.colors.grayDefault);
+}, function (_a) {
+    var theme = _a.theme;
+    return getColor(theme.colors.emojiPickerBackgroundRGBColor);
+}, function (_a) {
+    var theme = _a.theme;
+    return getColor(theme.colors.emojiPickerBackgroundRGBColor);
+}, function (_a) {
+    var theme = _a.theme;
+    return getColor(theme.colors.text);
+});
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EmojiData } from './Emoji.logic';
+interface Props {
+    isPreviewMode: boolean;
+    onSelect: (emoji: EmojiData) => void;
+    showShortKey: boolean;
+}
+export declare const EmojiDropdown: React.FC<Props>;
+export {};

package/src/Markdown/Emoji/EmojiDropdown.js

@@ -0,0 +1,23 @@
+import data from '@emoji-mart/data';
+import EmojiPicker from '@emoji-mart/react';
+import { DropdownMenu } from '@skbkontur/react-ui';
+import React, { useRef } from 'react';
+import { EmojiPickerWrapper } from './Emoji.styled';
+import { EmojiFace } from '../../MarkdownIcons/EmojiFace';
+import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/theme';
+import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
+export var EmojiDropdown = function (_a) {
+    var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect;
+    var dropdownMenuRef = useRef(null);
+    return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
+        var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
+        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji" }) },
+            React.createElement(EmojiPickerWrapper, null,
+                React.createElement(EmojiPicker, { data: data, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
+    }));
+    function handleSelectEmoji(data) {
+        var _a;
+        onSelect(data);
+        (_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+};

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

@@ -0,0 +1 @@
+export declare const getColor: (color: string) => string;

package/src/Markdown/Emoji/helpers.js

@@ -0,0 +1,4 @@
+var RGB_KEY = 'rgb';
+var regExp = /\((.*)\)/;
+var rgbDefaultWhite = '255, 255, 255';
+export var getColor = function (color) { var _a, _b; return color.startsWith(RGB_KEY) ? (_b = (_a = color.match(regExp)) === null || _a === void 0 ? void 0 : _a.pop()) !== null && _b !== void 0 ? _b : rgbDefaultWhite : "from ".concat(color, " r g b / 1"); };

package/src/Markdown/Markdown.creevey.js

@@ -73,38 +73,38 @@ kind('Markdown', function () {
         var setStoryParameters = _a.setStoryParameters;
         setStoryParameters({ skip: !!process.env.STORYBOOK_TEAMCITY_VERSION });
         test('markdownTests', function () {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             return __awaiter(this, void 0, void 0, function () {
-                var textarea, buttons, openedDropdown, newButtons, h1FromButton, h1FromKeyboard, boldFromButton, boldFromKeyboard;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var textarea, buttons, openedDropdown, newButtons, h1FromButton, h1FromKeyboard, boldFromButton, boldFromKeyboard, openedEmojiPicker;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0: return [4 /*yield*/, this.browser.findElement({ tagName: 'textarea' })];
                         case 1:
-                            textarea = _f.sent();
+                            textarea = _g.sent();
                             return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
                         case 2:
-                            buttons = _f.sent();
+                            buttons = _g.sent();
                             return [4 /*yield*/, this.browser.actions().click(textarea).perform()];
                         case 3:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, this.browser.actions().sendKeys('Заголовок').keyDown(this.keys.CONTROL).sendKeys('a').perform()];
                         case 4:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, this.browser.actions().click(buttons[0]).perform()];
                         case 5:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, ((_a = this.captureElement) === null || _a === void 0 ? void 0 : _a.takeScreenshot())];
                         case 6:
-                            openedDropdown = _f.sent();
+                            openedDropdown = _g.sent();
                             return [4 /*yield*/, this.browser.findElements({ css: 'button[class*="react-ui"]' })];
                         case 7:
-                            newButtons = _f.sent();
+                            newButtons = _g.sent();
                             return [4 /*yield*/, this.browser.actions().click(newButtons[1]).perform()];
                         case 8:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, ((_b = this.captureElement) === null || _b === void 0 ? void 0 : _b.takeScreenshot())];
                         case 9:
-                            h1FromButton = _f.sent();
+                            h1FromButton = _g.sent();
                             return [4 /*yield*/, this.browser
                                     .actions()
                                     .keyDown(this.keys.CONTROL)
@@ -117,10 +117,10 @@ kind('Markdown', function () {
                                     .sendKeys('1')
                                     .perform()];
                         case 10:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, ((_c = this.captureElement) === null || _c === void 0 ? void 0 : _c.takeScreenshot())];
                         case 11:
-                            h1FromKeyboard = _f.sent();
+                            h1FromKeyboard = _g.sent();
                             return [4 /*yield*/, this.browser
                                     .actions()
                                     .keyDown(this.keys.CONTROL)
@@ -131,10 +131,10 @@ kind('Markdown', function () {
                                     .click(buttons[1])
                                     .perform()];
                         case 12:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, ((_d = this.captureElement) === null || _d === void 0 ? void 0 : _d.takeScreenshot())];
                         case 13:
-                            boldFromButton = _f.sent();
+                            boldFromButton = _g.sent();
                             return [4 /*yield*/, this.browser
                                     .actions()
                                     .keyDown(this.keys.CONTROL)
@@ -147,19 +147,26 @@ kind('Markdown', function () {
                                     .sendKeys('b')
                                     .perform()];
                         case 14:
-                            _f.sent();
+                            _g.sent();
                             return [4 /*yield*/, ((_e = this.captureElement) === null || _e === void 0 ? void 0 : _e.takeScreenshot())];
                         case 15:
-                            boldFromKeyboard = _f.sent();
+                            boldFromKeyboard = _g.sent();
+                            return [4 /*yield*/, this.browser.actions().click(buttons[12]).perform()];
+                        case 16:
+                            _g.sent();
+                            return [4 /*yield*/, ((_f = this.captureElement) === null || _f === void 0 ? void 0 : _f.takeScreenshot())];
+                        case 17:
+                            openedEmojiPicker = _g.sent();
                             return [4 /*yield*/, this.expect({
                                     openedDropdown: openedDropdown,
                                     h1FromButton: h1FromButton,
                                     h1FromKeyboard: h1FromKeyboard,
                                     boldFromButton: boldFromButton,
                                     boldFromKeyboard: boldFromKeyboard,
+                                    openedEmojiPicker: openedEmojiPicker,
                                 }).to.matchImages()];
-                        case 16:
-                            _f.sent();
+                        case 18:
+                            _g.sent();
                             return [2 /*return*/];
                     }
                 });

package/src/Markdown/Markdown.d.ts

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

package/src/Markdown/Markdown.js

@@ -25,6 +25,7 @@ import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVer
 import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import Foco from 'react-foco/lib';
 import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
+import { useEmojiLogic } from './Emoji/Emoji.logic';
 import { useFileLogic } from './Files/Files.logic';
 import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
 import { MarkdownActions } from './MarkdownActions';
@@ -41,7 +42,7 @@ import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
 export var Markdown = function (props) {
     var _a;
-    var panelHorizontalPadding = props.panelHorizontalPadding, hideMarkdownActions = props.hideMarkdownActions, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, hideHeadersSelect = props.hideHeadersSelect, borderless = props.borderless, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, textareaProps = __rest(props, ["panelHorizontalPadding", "hideMarkdownActions", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "hideHeadersSelect", "borderless", "showShotKeys"]);
+    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 _c = useState(), mention = _c[0], setMention = _c[1];
     var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
@@ -53,6 +54,7 @@ export var Markdown = function (props) {
     var isEditMode = viewMode === ViewMode.Edit;
     var width = fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width;
     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;
+    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);
     useLayoutEffect(function () {
@@ -76,7 +78,7 @@ export var Markdown = function (props) {
     };
     var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
         React.createElement(Wrapper, __assign({}, getRootProps()),
-            !hideMarkdownActions && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, hideHeadersSelect: hideHeadersSelect, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen })),
+            !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
             isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
             isEditMode && renderEditContainer(),
             isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
@@ -108,6 +110,10 @@ export var Markdown = function (props) {
             return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
         }
     }
+    function handleChangeViewMode(mode) {
+        setViewMode(mode);
+        onChangeViewMode === null || onChangeViewMode === void 0 ? void 0 : onChangeViewMode(mode);
+    }
     function handleSelectUser(login, name) {
         if (textareaRef.current && mention) {
             var htmlTextArea = textareaRef.current;

package/src/Markdown/Markdown.styled.js

@@ -81,7 +81,7 @@ export var getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizon
         menuItemFontSize: elementsFontSize,
         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: themeMode === 'light' ? colors.white : colors.grayDefault, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px', dropdownBorderWidth: '0' }), (panelHorizontalPadding &&
+    })), { 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 &&
         extendThemeConfigWithSized({
             textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
         }))), (borderless && borderlessTextareaVariables)), (fullScreenTextareaPadding &&

package/src/Markdown/MarkdownActions.d.ts

@@ -1,17 +1,19 @@
 import { Textarea } from '@skbkontur/react-ui';
 import { FC, RefObject } from 'react';
-import { HorizontalPaddings, Nullable, ViewMode } from './types';
+import { EmojiData } from './Emoji/Emoji.logic';
+import { HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from './types';
 interface Props {
     horizontalPaddings: HorizontalPaddings;
     onChangeViewMode: (viewMode: ViewMode) => void;
     onClickFullscreen: () => void;
     onOpenFileDialog: () => void;
+    onSelectEmoji: (emoji: EmojiData) => void;
     showShortKeys: boolean;
     textAreaRef: RefObject<Textarea>;
     viewMode: ViewMode;
     fullscreen?: boolean;
     hasFilesApi?: boolean;
-    hideHeadersSelect?: boolean;
+    hideOptions?: HideActionsOptions;
     loadingFile?: boolean;
     selectionEnd?: Nullable<number>;
     selectionStart?: Nullable<number>;

package/src/Markdown/MarkdownActions.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { Dropdown } from '@skbkontur/react-ui';
 import React from 'react';
 import { COMMONMARK_HELP_URL } from './constants';
+import { EmojiDropdown } from './Emoji/EmojiDropdown';
 import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
 import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
 import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
@@ -25,18 +26,31 @@ import { Expand } from '../MarkdownIcons/Expand';
 import { EyeOpen } from '../MarkdownIcons/EyeOpen';
 import { ToolPencil } from '../MarkdownIcons/ToolPencil';
 export var MarkdownActions = function (_a) {
-    var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi, hideHeadersSelect = _a.hideHeadersSelect, width = _a.width, showShortKeys = _a.showShortKeys;
+    var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi, width = _a.width, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji;
     var isPreviewMode = viewMode === ViewMode.Preview;
     return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
         React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
             React.createElement(ActionsWrapper, null,
-                hideHeadersSelect || (React.createElement(MarkdownDropdown, null,
-                    React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 280, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
+                !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, null,
+                    React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 300, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
                         React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); })))),
-                markdownHelpText.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
-                markdownHelpLists.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
-                markdownHelpOther.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
-                hasFilesApi && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", 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 })),
+                markdownHelpText.map(function (helper, idx) {
+                    if (isHiddenOptions(helper.format))
+                        return null;
+                    return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
+                }),
+                markdownHelpLists.map(function (helper, idx) {
+                    if (isHiddenOptions(helper.format))
+                        return null;
+                    return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
+                }),
+                markdownHelpOther.map(function (helper, idx) {
+                    if (isHiddenOptions(helper.format))
+                        return null;
+                    return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
+                }),
+                hasFilesApi && !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.file) && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", 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 === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
                 React.createElement(MarkdownFormatButton, { 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 })),
             React.createElement(ActionsWrapper, null,
                 renderViewModeButton(),
@@ -65,4 +79,7 @@ export var MarkdownActions = function (_a) {
             }
         }
     }
+    function isHiddenOptions(format) {
+        return hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions[format];
+    }
 };

package/src/Markdown/MarkdownMention.js

@@ -79,7 +79,7 @@ export var MarkdownMention = function (_a) {
     if (!(users === null || users === void 0 ? void 0 : users.length))
         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: 300 }, 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, 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(UserWrapper, null,
                 React.createElement(Avatar, { height: 48, width: 48, src: getAvatarUrl(user.sid) }),
                 React.createElement("div", null,

package/src/Markdown/types.d.ts

@@ -1,4 +1,5 @@
 import { THEME_2022 } from '@skbkontur/react-ui';
+import { MarkdownFormat } from './MarkdownFormat';
 export declare enum ViewMode {
     Preview = "Preview",
     Edit = "Edit"
@@ -37,3 +38,4 @@ export interface TestCase<V, E> {
     values: V;
 }
 export type ReactUIThemeType = Partial<typeof THEME_2022>;
+export type HideActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'allActions', boolean>>;

package/src/MarkdownIcons/EmojiFace.d.ts

@@ -0,0 +1 @@
+export declare const EmojiFace: () => JSX.Element;

package/src/MarkdownIcons/EmojiFace.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export var EmojiFace = function () { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" },
+    React.createElement("g", { clipPath: "url(#a)" },
+        React.createElement("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", clipPath: "url(#b)" },
+            React.createElement("path", { d: "M2 8a6 6 0 1 1 12 0M14 8A6 6 0 1 1 2 8M5.667 6v.667M10.333 6v.667" }),
+            React.createElement("path", { d: "M10.333 9.792s-.876.875-2.334.875-2.333-.875-2.333-.875" }))),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "a" },
+            React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" })),
+        React.createElement("clipPath", { id: "b" },
+            React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" }))))); };

package/src/styles/theme.d.ts

@@ -10,6 +10,7 @@ export interface MarkdownTheme {
     reactUiTheme?: typeof THEME_2022;
 }
 export declare const DEFAULT_MARKDOWN_THEME: MarkdownTheme;
+export declare const DEFAULT_MARKDOWN_DARK_THEME: MarkdownTheme;
 export declare const MarkdownThemeContext: import("react").Context<MarkdownTheme>;
 export declare const MarkdownThemeProvider: import("react").Provider<MarkdownTheme>;
 export declare const MarkdownThemeConsumer: import("react").Consumer<MarkdownTheme>;

package/src/styles/theme.js

@@ -1,17 +1,34 @@
 import { createContext } from 'react';
 export var DEFAULT_MARKDOWN_THEME = {
     colors: {
-        white: '#fff',
+        text: '#222',
         brand: '#e76f57',
         grayDefault: '#858585',
         disabledButton: '#adadad',
         panelBg: '#d6d6d6',
         link: '#51adff',
+        textInverse: '#fff',
+        emojiPickerBackgroundRGBColor: 'rgb(255,255,255, 0)',
     },
     elementsFontSize: '16px',
     elementsLineHeight: '24px',
     themeMode: 'light',
 };
+export var DEFAULT_MARKDOWN_DARK_THEME = {
+    colors: {
+        text: '#fff',
+        brand: '#e76f57',
+        grayDefault: '#858585',
+        disabledButton: '#adadad',
+        panelBg: '#d6d6d6',
+        link: '#51adff',
+        textInverse: '#222',
+        emojiPickerBackgroundRGBColor: 'rgb(0,0,0,0)',
+    },
+    elementsFontSize: '16px',
+    elementsLineHeight: '24px',
+    themeMode: 'dark',
+};
 export var MarkdownThemeContext = createContext(DEFAULT_MARKDOWN_THEME);
 export var MarkdownThemeProvider = MarkdownThemeContext.Provider;
 export var MarkdownThemeConsumer = MarkdownThemeContext.Consumer;

package/src/styles/types.d.ts

@@ -1,9 +1,11 @@
 export interface ColorScheme {
     brand: string;
     disabledButton: string;
+    emojiPickerBackgroundRGBColor: string;
     grayDefault: string;
     link: string;
     panelBg: string;
-    white: string;
+    text: string;
+    textInverse: string;
 }
 export type ThemeMode = 'dark' | 'light';