18874: Merge branch 'main' into 18874-merge-wb2
[arvados.git] / 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 {
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 );