[code-infra] Move the HighlightedCode component to @mui/docs

[Janpot]

https://www.notion.so/mui-org/base-ui-Stable-release-outline-3f2197f1885747bdb3f384b30697a337
Moving components to @mui/docs:

• MarkdownElement
• HighlightedCode
• CopyButton and related context/hooks

[mui-bot]

Netlify deploy preview

https://deploy-preview-41859--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 19d7243

[alexfauquette]

Looks good. The X migration should not be an issue: mui/mui-x#12757

@bharatkashyap Just a heads up since this PR could interfere with your #40901 by moving the MarkdownElement

[bharatkashyap]

@bharatkashyap Just a heads up since this PR could interfere with your #40901 by moving the MarkdownElement

Yes, I noticed that. I can resolve conflicts once this is merged

[alexfauquette]

I added a commit to add diff from #39603 the PR I merged before reviewing this one

[mnajdova]

@Janpot there are two MarkdownElement component in the repository, some wrong imports were changed (@danilo-leal is fixing this in #42011, so we are good on core side). Have you checked which imports were the X and Toolpad repo using before? Just making sure we didn't move the wrong component. I advised @danilo-leal to rename the other component, but it would be great to check this before the change propagates everywhere. The components in question are:

• https://github.com/mui/material-ui/blob/next/docs/src/modules/components/MarkdownElement.js
• https://github.com/mui/material-ui/blob/next/docs/src/components/markdown/MarkdownElement.tsx

[alexfauquette]

On the X side, we have import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; so for us, it should be ok

[danilo-leal]

Heads-up on that: on my PR that Marija linked above, I'm changing this component's name to MarketingMarkdownElement. After this PR, there was no other component using the MarkdownElement component coming from the src/components/markdown directory in the Material UI repo, so I figured it'd be better to scope it down to marketing pages only. So, if there's anywhere in the MUI X repo that uses that one, it might be better to use the component coming from the @mui/docs package? I'll look it up to see what are the use cases.

[alexfauquette]

Yes, as soon as the core do a release, I will update the X repo to get the latest @mui/docs

[Janpot]

I'm removing the one that I found in Toolpad.
Just in terms of abstraction, why do we need two of these? Do they do different things? i.e. why does marketing need a different markdownelement?

[danilo-leal]

Uhm, yeah. There might be a better way to structure the HighlightedCode component so that all the specific/different styling things I'd like to apply on the pre element for the marketing showcase sections (such as no border, padding, margin, and smaller font-size), are directly added from that component, instead of being passed through another one?

[Janpot]

I think the main thing that I found not ergonomic is the height + overflow + border radius. It also feels like the wrong element is the scroll container

• Some use cases need auto-height, size with the content
• Some need a fixed or max height + overflow
  • Some of these are use directly and need their corners clipped + nice borders
  • Others are used in e.g. tabs, or demo container that comes with its own border + clipping

Corners fighting with scrollbars 🙂

[mnajdova]

I propose we go step by step:

1. Fix only the wrong imports in MUI Core in one PR, we can with this track back the changes later if needed - this should only fix the regression in Core
2. Add more props in the MarkdownElement to support the use-cases we need on the marketing pages - as a non-breaking change, so that other products don't need to do anything and remove the duplicated component
3. Improve the component later - namely the things Jan mentioned above

[danilo-leal]

That makes sense! In the meantime, I recorded this quick Loom just to walk through what I was thinking as a solution to remove the MarketingMarkdownElement component I'm introducing in that website fix PR of mine (#42011).

We don't need to tackle it immediately, but if this makes sense, I'm happy to do it! It's also not tackling the stuff you mentioned @Janpot just yet. It's just a way to consolidate custom pre styling into the HighlightedCode component.

[mnajdova]

@danilo-leal that makes sense, I would suggest renaming the prop to plain to explain more the difference, as we may use this in other places in the future too. Let's move the discussion to the other relevant PR, as we seem to agree on what needs to be done :)

[Janpot]

For the record, I'm just pointing out some rough edges I ran into when integrating HighlightedCode. These are not blockers or urgent changes. I just wanted to share.
Thanks for addressing the regression I introduced in @mui/docs. Fixing this has priority.