diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 7b0d46e4dfe..759d60cf2dd 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -109,7 +109,6 @@ "react-is": "^18.2.0", "react-router-dom": "~6.3.0", "react-split-pane": "^0.1.92", - "remark-gfm": "^3.0.1", "serialize-javascript": "^6.0.1", "ses": "^0.18.1", "sucrase": "^3.29.0", diff --git a/packages/toolpad-app/src/server/appTemplateDoms/images-demo.json b/packages/toolpad-app/src/server/appTemplateDoms/images-demo.json index 6881ed2f972..32db1aa4e4a 100644 --- a/packages/toolpad-app/src/server/appTemplateDoms/images-demo.json +++ b/packages/toolpad-app/src/server/appTemplateDoms/images-demo.json @@ -500,7 +500,7 @@ }, "options": { "type": "jsExpression", - "value": "allDogSubBreeds.error ? [] : allDogSubBreeds.data?.message[selectBreed.value]\n" + "value": "allDogSubBreeds.error ? [] : allDogSubBreeds.data?.message\n" }, "disabled": { "type": "jsExpression", diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 93424ea1323..bb4bcfe2f39 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -36,7 +36,7 @@ "@mui/x-data-grid-pro": "^5.17.24", "@mui/x-date-pickers": "^5.0.19", "dayjs": "^1.11.7", - "react-markdown": "^8.0.5" + "markdown-to-jsx": "^7.1.8" }, "devDependencies": { "react": "^18.2.0" diff --git a/packages/toolpad-components/src/Text.tsx b/packages/toolpad-components/src/Text.tsx index 9fa3bfd2691..893b7a142f6 100644 --- a/packages/toolpad-components/src/Text.tsx +++ b/packages/toolpad-components/src/Text.tsx @@ -8,10 +8,9 @@ import { styled, } from '@mui/material'; import { createComponent } from '@mui/toolpad-core'; -import remarkGfm from 'remark-gfm'; import { SX_PROP_HELPER_TEXT } from './constants'; -const ReactMarkdown = React.lazy(() => import('react-markdown')); +const Markdown = React.lazy(() => import('markdown-to-jsx')); type BaseProps = MuiLinkProps | MuiTypographyProps; interface TextProps extends Omit { @@ -35,14 +34,27 @@ const gutters = (marginTop: number, marginBottom: number) => ({ const MarkdownContainer = styled('div')(({ theme }) => ({ display: 'block', - [`&:empty::before`]: { content: '""', display: 'inline-block' }, - h1: { ...theme.typography.h1, ...gutters(16, 16) }, - h2: { ...theme.typography.h2, ...gutters(12, 12) }, - h3: { ...theme.typography.h3, ...gutters(12, 12) }, - h4: { ...theme.typography.h4, ...gutters(12, 12) }, - h5: { ...theme.typography.h5, ...gutters(4, 4) }, - h6: { ...theme.typography.h6, ...gutters(4, 4) }, - p: { margin: 0, marginBottom: 6 }, + maxWidth: '100%', + '&:empty::before, & > span:empty::before': { + content: '""', + display: 'inline-block', + }, + '& h1': { ...theme.typography.h1, ...gutters(16, 16) }, + '& h2': { ...theme.typography.h2, ...gutters(12, 12) }, + '& h3': { ...theme.typography.h3, ...gutters(12, 12) }, + '& h4': { ...theme.typography.h4, ...gutters(12, 12) }, + '& h5': { ...theme.typography.h5, ...gutters(4, 4) }, + '& h6': { ...theme.typography.h6, ...gutters(4, 4) }, + '& p': { margin: 0, marginBottom: 6 }, +})); + +const CodeContainer = styled('pre')(({ theme }) => ({ + backgroundColor: theme.palette.grey[200], + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(1), + overflow: 'auto', })); function Text({ value, markdown, href, loading, mode, sx, ...rest }: TextProps) { @@ -53,7 +65,25 @@ function Text({ value, markdown, href, loading, mode, sx, ...rest }: TextProps) ) : ( - {value} + '', + }} + > + {value} + ); @@ -64,7 +94,7 @@ function Text({ value, markdown, href, loading, mode, sx, ...rest }: TextProps)