From 8ab46aa2e18c02a58e01786f1130a301191d35b9 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:46:38 -0300
Subject: [PATCH] remove the MarketingMarkdownElement and centralize styles in
 HighlightedCode

---
 docs/src/components/home/AdvancedShowcase.tsx |  8 +--
 docs/src/components/home/CoreShowcase.tsx     |  8 +--
 .../markdown/MarketingMarkdownElement.tsx     | 51 -------------------
 .../productBaseUI/BaseUIComponents.tsx        |  5 +-
 .../productBaseUI/BaseUICustomization.tsx     | 10 +---
 .../productMaterial/MaterialComponents.tsx    |  8 +--
 .../productMaterial/MaterialStyling.tsx       |  8 +--
 .../productMaterial/MaterialTheming.tsx       |  8 +--
 docs/src/components/productX/XChartsDemo.tsx  |  8 +--
 docs/src/components/productX/XDataGrid.tsx    |  8 +--
 .../components/productX/XDateRangeDemo.tsx    |  8 +--
 .../src/components/productX/XTreeViewDemo.tsx |  8 +--
 .../src/HighlightedCode/HighlightedCode.tsx   | 33 ++++++++++--
 13 files changed, 41 insertions(+), 130 deletions(-)
 delete mode 100644 docs/src/components/markdown/MarketingMarkdownElement.tsx

diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index b1ee7c380b6df2..dc23c250f5fdfb 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ShowcaseContainer, { CodeContainer } from 'docs/src/components/home/ShowcaseContainer';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
 import EditProgress from 'docs/src/components/x-grid/EditProgress';
@@ -1714,12 +1713,7 @@ export default function DataTable() {
       }
       code={
         <CodeContainer>
-          <HighlightedCode
-            copyButtonHidden
-            component={MarketingMarkdownElement}
-            code={code}
-            language="jsx"
-          />
+          <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
         </CodeContainer>
       }
     />
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 0d809c1eb7373d..686ed6314d3a5d 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -3,7 +3,6 @@ import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/style
 import Box from '@mui/material/Box';
 import Button, { buttonClasses } from '@mui/material/Button';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer, { CodeContainer } from 'docs/src/components/home/ShowcaseContainer';
 import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
@@ -167,12 +166,7 @@ export default function CoreShowcase() {
           <CodeContainer>
             <Box sx={{ position: 'relative' }}>
               {startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
-              <HighlightedCode
-                copyButtonHidden
-                component={MarketingMarkdownElement}
-                code={componentCode}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden code={componentCode} language="jsx" plainStyles />
               <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </CodeContainer>
diff --git a/docs/src/components/markdown/MarketingMarkdownElement.tsx b/docs/src/components/markdown/MarketingMarkdownElement.tsx
deleted file mode 100644
index bed2cc57b32a4e..00000000000000
--- a/docs/src/components/markdown/MarketingMarkdownElement.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-
-const Root = styled('div')(({ theme }) => ({
-  ...theme.typography.caption,
-  color: (theme.vars || theme).palette.text.primary,
-  '& pre': {
-    padding: 0,
-    margin: 0,
-    border: 0,
-    backgroundColor: 'transparent',
-    color: 'hsl(60deg 30% 96.08%)', // fallback color until Prism's theme is loaded
-    overflow: 'auto',
-    WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
-    maxWidth: 'calc(100vw - 32px)',
-    [theme.breakpoints.up('md')]: {
-      maxWidth: 'calc(100vw - 32px - 16px)',
-    },
-  },
-  '& code': {
-    // Avoid layout jump after hydration (style injected by Prism)
-    ...theme.typography.caption,
-    fontFamily: theme.typography.fontFamilyCode,
-    fontWeight: 400,
-    WebkitFontSmoothing: 'subpixel-antialiased',
-    // Reset for Safari
-    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
-  },
-}));
-
-type MarkdownElementProps = {
-  renderedMarkdown: string;
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>;
-
-const MarketingMarkdownElement = React.forwardRef<HTMLDivElement, MarkdownElementProps>(
-  function MarkdownElement(props, ref) {
-    const { className, renderedMarkdown, ...other } = props;
-    const more: Record<string, unknown> = {};
-
-    if (typeof renderedMarkdown === 'string') {
-      // workaround for https://github.com/facebook/react/issues/17170
-      // otherwise we could just set `dangerouslySetInnerHTML={undefined}`
-      more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
-    }
-
-    return <Root className={clsx('markdown-body', className)} {...more} {...other} ref={ref} />;
-  },
-);
-
-export default MarketingMarkdownElement;
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index bd958be428e5bc..45edd80af19bcd 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -10,7 +10,6 @@ import InputRoundedIcon from '@mui/icons-material/InputRounded';
 import MenuOpenRoundedIcon from '@mui/icons-material/MenuOpenRounded';
 import LinearScaleRoundedIcon from '@mui/icons-material/LinearScaleRounded';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
@@ -181,7 +180,8 @@ export default function BaseUIComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarketingMarkdownElement}
+                  language="jsx"
+                  plainStyles
                   code={(() => {
                     const result = CODES[demo];
                     if (typeof result === 'function') {
@@ -189,7 +189,6 @@ export default function BaseUIComponents() {
                     }
                     return result;
                   })()}
-                  language="jsx"
                 />
               </Box>
               <Box
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index ba5c610fccd5df..2e7b444a28d237 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -6,7 +6,6 @@ import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import SvgTwinkle from 'docs/src/icons/SvgTwinkle';
 import Section from 'docs/src/layouts/Section';
 import Highlighter from 'docs/src/components/action/Highlighter';
@@ -305,13 +304,8 @@ export default function BaseUICustomization() {
                 position: 'relative',
               }}
             >
-              <HighlightedCode
-                copyButtonHidden
-                component={MarketingMarkdownElement}
-                code={code}
-                language="jsx"
-              />
-              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
+              <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
+              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 2 }} />
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 2a42f935c8d751..3aec887b19cf2a 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -28,7 +28,6 @@ import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
@@ -344,12 +343,7 @@ export default function MaterialComponents() {
                   height: '100%',
                 }}
               >
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarketingMarkdownElement}
-                  code={CODES[demo]}
-                  language="jsx"
-                />
+                <HighlightedCode code={CODES[demo]} language="jsx" copyButtonHidden plainStyles />
               </Box>
             </Frame.Info>
           </Frame>
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index c6ba7f328f13e3..794b5ae680397a 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -13,7 +13,6 @@ import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import Frame from 'docs/src/components/action/Frame';
 import RealEstateCard from 'docs/src/components/showcase/RealEstateCard';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
@@ -314,12 +313,7 @@ export default function MaterialStyling() {
                 position: 'relative',
               }}
             >
-              <HighlightedCode
-                copyButtonHidden
-                component={MarketingMarkdownElement}
-                code={code}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
               <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 2 }} />
             </Frame.Info>
           </Frame>
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 432e88da4bc50a..6a1cd0ca96d9bb 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -11,7 +11,6 @@ import Highlighter from 'docs/src/components/action/Highlighter';
 import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import Frame from 'docs/src/components/action/Frame';
 import PlayerCard from 'docs/src/components/showcase/PlayerCard';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const code = `
@@ -128,12 +127,7 @@ export default function MaterialTheming() {
               )}
             </Frame.Demo>
             <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
-              <HighlightedCode
-                copyButtonHidden
-                component={MarketingMarkdownElement}
-                code={code}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
index c28527a0a63ff2..f07e06f096d236 100644
--- a/docs/src/components/productX/XChartsDemo.tsx
+++ b/docs/src/components/productX/XChartsDemo.tsx
@@ -4,7 +4,6 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import { blueberryTwilightPaletteLight } from '@mui/x-charts';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const code = `
 <BarChart
@@ -54,12 +53,7 @@ export default function XChartsDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode
-          copyButtonHidden
-          component={MarketingMarkdownElement}
-          code={code}
-          language="jsx"
-        />
+        <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index 232d81e070f06e..5062372b71e75c 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -21,7 +21,6 @@ import Frame from 'docs/src/components/action/Frame';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import ROUTES from 'docs/src/route';
 
 const DEMOS = ['Editing', 'Selection', 'Sorting', 'Pagination', 'Filtering'] as const;
@@ -202,12 +201,7 @@ export default function XDataGrid() {
               },
             }}
           >
-            <HighlightedCode
-              copyButtonHidden
-              component={MarketingMarkdownElement}
-              code={code}
-              language="jsx"
-            />
+            <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
             {demo && <FlashCode startLine={startLine[demo]} sx={{ mx: 2 }} />}
             <StylingInfo
               appeared={demo === DEMOS[3] || demo === DEMOS[4]}
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index 68dc1d19591e32..6492b7cd443241 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -12,7 +12,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { startOfWeek, endOfWeek, subDays } from 'date-fns';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const startDate = new Date();
 startDate.setDate(10);
@@ -187,12 +186,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode
-          copyButtonHidden
-          component={MarketingMarkdownElement}
-          code={code}
-          language="jsx"
-        />
+        <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index 942231f1669b6b..ccf15da6ae9224 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -19,7 +19,6 @@ import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
 import FourKOutlined from '@mui/icons-material/FourKOutlined';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const CustomContent = React.forwardRef(function CustomContent(
   props: TreeItemContentProps & { lastNestedChild?: boolean },
@@ -330,12 +329,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode
-          copyButtonHidden
-          component={MarketingMarkdownElement}
-          code={code}
-          language="jsx"
-        />
+        <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyles />
       </Frame.Info>
     </Frame>
   );
diff --git a/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
index dd2d43fd020849..be522336297f66 100644
--- a/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
+++ b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
@@ -2,16 +2,37 @@ import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
 import { ButtonProps } from '@mui/material/Button';
-import { SxProps } from '@mui/material/styles';
+import { styled, SxProps } from '@mui/material/styles';
 import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
 import { MarkdownElement } from '../MarkdownElement';
 
+const Pre = styled('pre')(({ theme }) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)', // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)',
+  },
+  '& code': {
+    // Avoid layout jump after hydration (style injected by Prism)
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased',
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  },
+}));
+
 export interface HighlightedCodeProps {
   code: string;
-  component?: React.ElementType;
   copyButtonHidden?: boolean;
   copyButtonProps?: ButtonProps;
   language: string;
+  parentComponent?: React.ElementType;
+  preComponent?: React.ElementType;
+  plainStyles?: boolean;
   sx?: SxProps;
 }
 
@@ -22,7 +43,9 @@ export const HighlightedCode = React.forwardRef<HTMLDivElement, HighlightedCodeP
       copyButtonProps,
       code,
       language,
-      component: Component = MarkdownElement,
+      plainStyles,
+      parentComponent: Component = plainStyles ? 'div' : MarkdownElement,
+      preComponent: PreComponent = plainStyles ? Pre : 'pre',
       ...other
     } = props;
     const renderedCode = React.useMemo(() => {
@@ -38,13 +61,13 @@ export const HighlightedCode = React.forwardRef<HTMLDivElement, HighlightedCodeP
               <CodeCopyButton code={code} {...copyButtonProps} />
             </NoSsr>
           )}
-          <pre>
+          <PreComponent>
             <code
               className={`language-${language}`}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: renderedCode }}
             />
-          </pre>
+          </PreComponent>
         </div>
       </Component>
     );