remove the MarketingMarkdownElement and centralize styles in Highligh…

…tedCode
danilo-leal · Apr 24, 2024 · 8ab46aa · 8ab46aa
1 parent 265e225
commit 8ab46aa
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 130 deletions.
diff --git 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
@@ -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
diff --git 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,15 +180,15 @@ export default function BaseUIComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarketingMarkdownElement}
+                  language="jsx"
+                  plainStyles
                   code={(() => {
                     const result = CODES[demo];
                     if (typeof result === 'function') {
                       return result(styling);
                     }
                     return result;
                   })()}
-                  language="jsx"
                 />
               </Box>
               <Box

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     );