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 { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@material-ui/core";
   7 import { WithDialogProps } from "~/store/dialog/with-dialog";
   8 import { withDialog } from '~/store/dialog/with-dialog';
   9 import { RICH_TEXT_EDITOR_DIALOG_NAME } from "~/store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
  10 import RichTextEditor from 'react-rte';
  11
  12 export interface RichTextEditorDialogDataProps {
  13     title: string;
  14     text: string;
  15 }
  16
  17 export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
  18     (props: WithDialogProps<RichTextEditorDialogDataProps>) =>
  19         <Dialog open={props.open}
  20             onClose={props.closeDialog}
  21             fullWidth
  22             maxWidth='sm'>
  23             <DialogTitle>{props.data.title}</DialogTitle>
  24             <DialogContent>
  25                 <RichTextEditor
  26                     value={RichTextEditor.createValueFromString(props.data.text, 'html')}
  27                     readOnly={true} />
  28             </DialogContent>
  29             <DialogActions>
  30                 <Button
  31                     variant='flat'
  32                     color='primary'
  33                     onClick={props.closeDialog}>
  34                     Close
  35                 </Button>
  36             </DialogActions>
  37         </Dialog>
  38 );