@skbkontur/markdown 2.1.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -97,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.styled.js

@@ -2,10 +2,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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
  */
-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: rgba(0, 0, 0, 0);\n  }\n"], ["\n  em-emoji-picker {\n    --font-family: inherit;\n    --shadow: unset;\n    --rgb-accent: ", ";\n    --color-border: rgba(0, 0, 0, 0);\n  }\n"])), function (p) { return p.theme.colors.brand; });
+/* 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.js

@@ -11,7 +11,10 @@ export var EmojiDropdown = function (_a) {
     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" }) },
+        return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: function (_a) {
+                var toggleMenu = _a.toggleMenu;
+                return (React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji", onClick: toggleMenu }));
+            } },
             React.createElement(EmojiPickerWrapper, null,
                 React.createElement(EmojiPicker, { data: data, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
     }));

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

package/src/Markdown/Markdown.js

@@ -42,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, 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, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions"]);
+    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];
@@ -78,7 +78,7 @@ export var Markdown = function (props) {
     };
     var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
         React.createElement(Wrapper, __assign({}, getRootProps()),
-            !(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: setViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
+            !(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))),
@@ -110,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.js

@@ -32,7 +32,7 @@ export var MarkdownActions = function (_a) {
         React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
             React.createElement(ActionsWrapper, null,
                 !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (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); } },
+                    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) {
                     if (isHiddenOptions(helper.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/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';