go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/web/rpcexplorer/src/components/doc.tsx (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import Box from '@mui/material/Box';
    16  import Divider from '@mui/material/Divider';
    17  import Link from '@mui/material/Link';
    18  import Typography from '@mui/material/Typography';
    19  
    20  import ReactMarkdown from 'react-markdown';
    21  
    22  // Mapping of elements emitted by react-markdown into MUI typography ones for
    23  // consistent style. There are probably some gaps here.
    24  /* eslint-disable @typescript-eslint/no-explicit-any */
    25  const components = {
    26    a: Link,
    27    h1: (props: any) => <>
    28      <Typography component='h1' variant='subtitle1' {...props} />
    29      <Divider sx={{ mb: 2 }} />
    30    </>,
    31    h2: (props: any) => <>
    32      <Typography component='h2' variant='subtitle1' {...props} />
    33      <Divider light={true} sx={{ mb: 2 }} />
    34    </>,
    35    h3: (props: any) => <>
    36      <Typography component='h3' variant='subtitle2' {...props} />
    37      <Divider light={true} sx={{ mb: 2 }} />
    38    </>,
    39    h4: (props: any) => <>
    40      <Typography component='h4' variant='caption' {...props} />
    41      <Divider light={true} sx={{ mb: 2 }} />
    42    </>,
    43    p: (props: any) => <Typography variant='body2' paragraph={true} {...props} />,
    44    li: (props: any) => <Typography component='li' variant='body2' {...props} />,
    45  };
    46  /* eslint-enable @typescript-eslint/no-explicit-any */
    47  
    48  
    49  export interface Props {
    50    markdown: string;
    51  }
    52  
    53  export const Doc = ({ markdown }: Props) => {
    54    if (!markdown) {
    55      return <></>;
    56    }
    57    return (
    58      <Box ml={2} mr={2} mt={2}>
    59        <ReactMarkdown skipHtml={true} components={components}>
    60          {markdown}
    61        </ReactMarkdown>
    62      </Box>
    63    );
    64  };
    65  
    66  
    67  export default Doc;