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