fix: resolve the conflict coverage issue between Dumi style and xmarkdown

packages/x-markdown/src/plugins/HighlightCode/style/index.ts

@@ -21,13 +21,27 @@ const genHighlightCodeStyle: GenerateStyle<HighlightCodeToken> = (token) => {
         borderTopRightRadius: token.borderRadius,
       },
       '&-code': {
-        border: '1px solid',
-        borderColor: token.colorBorderCode,
         borderBottomRightRadius: token.borderRadius,
         borderBottomLeftRadius: token.borderRadius,
         borderTopLeftRadius: 0,
         borderTopRightRadius: 0,
-        background: 'transparent',
+        background: token.colorBgContainer,
+        border: `1px solid ${token.colorBgTitle}`,
+        borderTop: 'none',
+        paddingInline: token.paddingSM,
+        paddingBlock: token.paddingSM,
+        overflow: 'hidden',
+        'pre,code': {
+          whiteSpace: 'pre',
+          fontSize: token.fontSize,
+          fontFamily: token.fontFamilyCode,
+          lineHeight: 2,
+          borderRadius: 0,
+          border: 'none',
+        },
+        "code[class*='language-'],pre[class*='language-']": {
+          background: 'none',
+        },
       },
       [`&${componentCls}-rtl`]: {
         direction: 'rtl',

packages/x-markdown/src/plugins/Mermaid/style/index.ts

@@ -24,10 +24,10 @@ const genMermaidStyle: GenerateStyle<MermaidToken> = (token) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        border: '1px solid',
-        borderColor: token.colorBorderGraph,
-        borderTop: 0,
+        border: `1px solid ${token.colorBgTitle}`,
+        borderTop: 'none',
         padding: token.paddingSM,
+        background: token.colorBgContainer,
         overflow: 'auto',
         borderBottomRightRadius: token.borderRadius,
         borderBottomLeftRadius: token.borderRadius,
@@ -40,12 +40,26 @@ const genMermaidStyle: GenerateStyle<MermaidToken> = (token) => {
         height: 'auto',
       },
       '&-code': {
-        border: '1px solid',
-        borderColor: token.colorBorderCode,
         borderBottomRightRadius: token.borderRadius,
         borderBottomLeftRadius: token.borderRadius,
-        background: 'transparent',
-        borderTop: 0,
+        borderBottom: `1px solid ${token.colorBgTitle}`,
+        borderLeft: `1px solid ${token.colorBgTitle}`,
+        borderRight: `1px solid ${token.colorBgTitle}`,
+        background: token.colorBgContainer,
+        paddingInline: token.paddingSM,
+        paddingBlock: token.paddingSM,
+        overflow: 'hidden',
+        'pre,code': {
+          whiteSpace: 'pre',
+          fontSize: token.fontSize,
+          fontFamily: token.fontFamilyCode,
+          lineHeight: 2,
+          borderRadius: 0,
+          border: 'none',
+        },
+        "code[class*='language-'],pre[class*='language-']": {
+          background: 'none',
+        },
       },
       [`&${componentCls}-rtl`]: {
         direction: 'rtl',

packages/x/.dumi/theme/common/styles/Demo.tsx

@@ -1,4 +1,4 @@
-import { Global, css } from '@emotion/react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 import React from 'react';
 
@@ -19,7 +19,8 @@ const GlobalDemoStyles: React.FC = () => {
           vertical-align: top;
         }
 
-        .code-box {
+
+        .code-box{
           position: relative;
           display: inline-block;
           width: calc(100% - ${token.lineWidth * 2}px);
@@ -60,12 +61,12 @@ const GlobalDemoStyles: React.FC = () => {
               margin: 0.5em 0;
               padding: 6px 12px;
             }
-
             pre code {
               margin: 0;
               background: #f5f5f5;
             }
           }
+
 
           &:target {
             border: 1px solid ${token.colorPrimary};
@@ -311,7 +312,8 @@ const GlobalDemoStyles: React.FC = () => {
           }
 
           pre {
-            width: auto;
+          .not{.ant-x-markdown}{
+           width: auto;
             margin: 0;
 
             code {
@@ -322,6 +324,8 @@ const GlobalDemoStyles: React.FC = () => {
               font-size: ${token.fontSize}px;
             }
           }
+
+          }
 
           &-debug {
             border-color: ${token.purple3};

packages/x/.dumi/theme/common/styles/Highlight.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
+import React from 'react';
 
 export default () => {
   const token = useTheme();
@@ -13,8 +13,9 @@ export default () => {
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
-
-        pre code {
+  .code-box {
+    .not(.ant-x-markdown){
+            pre code {
           display: block;
           padding: ${token.padding}px ${token.paddingXL}px;
           color: ${token.colorText};
@@ -151,6 +152,10 @@ export default () => {
             cursor: help;
           }
         }
+    }
+  }
+
+
       `}
     />
   );

packages/x/components/locale/useLocale.ts

@@ -17,7 +17,6 @@ const useLocale = <C extends mergeLocaleComponentName = LocaleComponentName>(
   defaultLocale?: Locale[C] | (() => Locale[C]),
 ): readonly [NonNullable<Locale[C]>, string] => {
   const fullLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
-  console.log(fullLocale, 'fullLocale');
   const getLocale = React.useMemo<NonNullable<Locale[C]>>(() => {
     const locale =
       defaultLocale ||

packages/x/docs/x-markdown/demo/supersets/Mermaid/basic.tsx

@@ -1,7 +1,7 @@
 import { Bubble } from '@ant-design/x';
 import XMarkdown from '@ant-design/x-markdown';
 import Mermaid from '@ant-design/x-markdown/plugins/Mermaid';
-import { Flex, Button } from 'antd';
+import { Button, Flex } from 'antd';
 import React from 'react';
 
 const text = `
@@ -95,6 +95,11 @@ const App = () => {
 
       <Bubble
         content={text.slice(0, index)}
+        styles={{
+          content: {
+            width: 700,
+          },
+        }}
         contentRender={(content) => (
           <XMarkdown
             style={{ whiteSpace: 'normal' }}