Add ThemeConsumer in MarkdownCombination

index.ts

@@ -1,5 +1,5 @@
 export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
-export { MarkdownCombination } from './src/Markdown/MarkdownHelpers/MarkdownCombination';
+export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
 export {
   markdownHelpItems,
   markdownHelpFiles,

src/Markdown/Markdown.styled.ts

@@ -128,14 +128,6 @@ export const MarkdownMenuItem = styled(MenuItem)`
   color: ${p => p.theme.colors.grayDefault};
 `;
 
-export const HintContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  width: 100%;
-`;
-
 export const MarkdownEditorBlock = styled.div`
   position: relative;
 `;

src/Markdown/MarkdownActions.tsx

@@ -10,12 +10,12 @@ import {
   MarkdownActionsWrapper,
 } from './Markdown.styled';
 import { MarkdownFormat } from './MarkdownFormat';
-import { MarkdownCombination } from './MarkdownHelpers/MarkdownCombination';
 import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
 import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
 import { MarkdownButtonProps } from './MarkdownHelpers/types';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from './MarkdownHelpItems';
 import { HorizontalPaddings, Nullable, ViewMode } from './types';
+import { MarkdownCombination } from '../MarkdownCombination/MarkdownCombination';
 import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
 import { Collapse } from '../MarkdownIcons/Collapse';
 import { DocIcon } from '../MarkdownIcons/DocIcon';

src/Markdown/MarkdownHelpers/MarkdownFormatButton.tsx

@@ -1,8 +1,8 @@
 import { Hint } from '@skbkontur/react-ui';
 import React, { FC } from 'react';
 
-import { MarkdownCombination } from './MarkdownCombination';
 import { MarkdownButtonProps } from './types';
+import { MarkdownCombination } from '../../MarkdownCombination/MarkdownCombination';
 import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
 import { MarkdownFormat } from '../MarkdownFormat';
 

src/MarkdownCombination/MarkdownCombination.styled.ts

@@ -0,0 +1,9 @@
+import styled from '../styles/styled-components';
+
+export const HintContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+`;

src/Markdown/MarkdownHelpers/MarkdownCombination.tsx → src/MarkdownCombination/MarkdownCombination.tsx

@@ -1,9 +1,11 @@
 import React, { FC, ReactNode } from 'react';
 
-import { HintContentWrapper } from '../Markdown.styled';
-import { MarkdownFormat } from '../MarkdownFormat';
-import { markdownFormatToShortKeyLong, markdownFormatToShortKeyShort } from '../MarkdownHelpItems';
-import { isMacintosh } from '../utils/isMacintosh';
+import { HintContentWrapper } from './MarkdownCombination.styled';
+import { MarkdownFormat } from '../Markdown/MarkdownFormat';
+import { markdownFormatToShortKeyLong, markdownFormatToShortKeyShort } from '../Markdown/MarkdownHelpItems';
+import { isMacintosh } from '../Markdown/utils/isMacintosh';
+import { ThemeProvider } from '../styles/styled-components';
+import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
 
 interface Props {
   format: MarkdownFormat;
@@ -17,10 +19,16 @@ export const MarkdownCombination: FC<Props> = ({ format, text, showShortKey }) =
   const shortKey = shortKeyLong || shortKeyShort;
 
   return (
-    <HintContentWrapper>
-      <span>{text}</span>
-      {showShortKey && !!shortKey && renderHint()}
-    </HintContentWrapper>
+    <MarkdownThemeConsumer>
+      {theme => (
+        <ThemeProvider theme={theme ?? DEFAULT_MARKDOWN_THEME}>
+          <HintContentWrapper>
+            <span>{text}</span>
+            {showShortKey && !!shortKey && renderHint()}
+          </HintContentWrapper>
+        </ThemeProvider>
+      )}
+    </MarkdownThemeConsumer>
   );
 
   function renderHint() {