services/workbench2/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { WithDialogProps } from "store/dialog/with-dialog";
  12 import { withDialog } from 'store/dialog/with-dialog';
  13 import { RICH_TEXT_EDITOR_DIALOG_NAME } from "store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
  14 import RichTextEditor from 'react-rte';
  15
  16 type CssRules = 'rte';
  17
  18 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  19     rte: {
  20         fontFamily: 'Arial',
  21         '& a': {
  22             textDecoration: 'none',
  23             color: theme.palette.primary.main,
  24             '&:hover': {
  25                 cursor: 'pointer',
  26                 textDecoration: 'underline'
  27             }
  28         }
  29     },
  30
  31 });
  32
  33 export interface RichTextEditorDialogDataProps {
  34     title: string;
  35     text: string;
  36 }
  37
  38 export const RichTextEditorDialog = withStyles(styles)(withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
  39     (props: WithDialogProps<RichTextEditorDialogDataProps> & WithStyles<CssRules>) =>
  40         <Dialog open={props.open}
  41             onClose={props.closeDialog}
  42             fullWidth
  43             maxWidth='md'>
  44             <DialogTitle>{props.data.title}</DialogTitle>
  45             <DialogContent>
  46                 <RichTextEditor
  47                     className={props.classes.rte}
  48                     value={props.data.text ?
  49                         RichTextEditor.createValueFromString(props.data.text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'), 'html') : ''}
  50                     readOnly={true} />
  51             </DialogContent>
  52             <DialogActions>
  53                 <Button
  54                     variant='text'
  55                     color='primary'
  56                     onClick={props.closeDialog}>
  57                     Close
  58                 </Button>
  59             </DialogActions>
  60         </Dialog>)
  61 );