remove duplicate MarkdownElement component

danilo-leal · Apr 26, 2024 · 953222d · 953222d
1 parent 341a6d2
commit 953222d
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 116 deletions.
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 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';
@@ -1728,12 +1728,7 @@ export default function DataTable() {
             },
           }}
         >
-          <HighlightedCode
-            copyButtonHidden
-            component={MarkdownElement}
-            code={code}
-            language="jsx"
-          />
+          <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
         </Box>
       }
     />

diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -5,7 +5,7 @@ import Button, { buttonClasses } from '@mui/material/Button';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import FlashCode from 'docs/src/components/animation/FlashCode';
@@ -184,12 +184,7 @@ export default function CoreShowcase() {
           >
             <Box sx={{ position: 'relative' }}>
               {startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
-              <HighlightedCode
-                copyButtonHidden
-                component={MarkdownElement}
-                code={componentCode}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden plainStyle code={componentCode} language="jsx" />
               <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </Box>

diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -17,7 +17,7 @@ import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import ROUTES from 'docs/src/route';
 
 // Switcher icons
@@ -181,7 +181,7 @@ export default function BaseUIComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarkdownElement}
+                  plainStyle
                   code={(() => {
                     const result = CODES[demo];
                     if (typeof result === 'function') {

diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -15,7 +15,6 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 import clsx from 'clsx';
@@ -307,12 +306,7 @@ export default function BaseUICustomization() {
             >
               <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
                 <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
+                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
                 </Box>
                 <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
               </Box>

diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -30,7 +30,7 @@ import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
 import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import ROUTES from 'docs/src/route';
 
@@ -305,12 +305,7 @@ export default function MaterialComponents() {
                   height: '100%',
                 }}
               >
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={CODES[demo]}
-                  language="jsx"
-                />
+                <HighlightedCode copyButtonHidden plainStyle code={CODES[demo]} language="jsx" />
               </Box>
               <Box
                 sx={(theme) => ({

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -14,7 +14,7 @@ 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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
 const code = `
@@ -315,12 +315,7 @@ export default function MaterialStyling() {
             >
               <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
                 <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
+                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
                 </Box>
                 <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
               </Box>

diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -12,7 +12,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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 <Card
@@ -128,12 +127,7 @@ export default function MaterialTheming() {
               )}
             </Frame.Demo>
             <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
-              <HighlightedCode
-                copyButtonHidden
-                component={MarkdownElement}
-                code={code}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
             </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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 <BarChart
@@ -54,7 +53,7 @@ export default function XChartsDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </Frame.Info>
     </Frame>
   );

diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
@@ -19,7 +19,7 @@ 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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import FlashCode from 'docs/src/components/animation/FlashCode';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
@@ -211,12 +211,7 @@ export default function XDataGrid() {
           >
             <Box sx={{ position: 'relative' }}>
               <Box sx={{ position: 'relative', zIndex: 1 }}>
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={code}
-                  language="jsx"
-                />
+                <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
               </Box>
               {demo && <FlashCode startLine={startLine[demo]} sx={{ mx: -2 }} />}
               <StylingInfo

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 { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { startOfWeek, endOfWeek, subDays } from 'date-fns';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const startDate = new Date();
 startDate.setDate(10);
@@ -187,7 +186,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const CustomContent = React.forwardRef(function CustomContent(
   props: TreeItemContentProps & { lastNestedChild?: boolean },
@@ -330,7 +329,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </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 { SxProps, styled } 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;
+  plainStyle?: boolean;
   sx?: SxProps;
 }
 
@@ -22,7 +43,9 @@ export const HighlightedCode = React.forwardRef<HTMLDivElement, HighlightedCodeP
       copyButtonProps,
       code,
       language,
-      component: Component = MarkdownElement,
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
+      preComponent: PreComponent = plainStyle ? 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>
     );