X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/dab7bbaf5fdee0e4e56c0bbfe14da5ad42b5869d..c30fc0c76112671804c2bab41c561f1a6f381920:/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx

diff --git a/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx b/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
index 86422baf..95ae6d45 100644
--- a/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
+++ b/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
@@ -2,37 +2,66 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@material-ui/core";
-import { WithDialogProps } from "~/store/dialog/with-dialog";
-import { withDialog } from '~/store/dialog/with-dialog';
-import { RICH_TEXT_EDITOR_DIALOG_NAME } from "~/store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
+import React from "react";
+import {
+    Dialog, 
+    DialogTitle, 
+    DialogContent, 
+    DialogActions, 
+    Button,
+    StyleRulesCallback,
+    WithStyles,
+    withStyles
+} from "@material-ui/core";
+import { ArvadosTheme } from 'common/custom-theme';
+import { WithDialogProps } from "store/dialog/with-dialog";
+import { withDialog } from 'store/dialog/with-dialog';
+import { RICH_TEXT_EDITOR_DIALOG_NAME } from "store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
 import RichTextEditor from 'react-rte';
 
+type CssRules = 'rte';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    rte: {
+        fontFamily: 'Arial',
+        '& a': {
+            textDecoration: 'none',
+            color: theme.palette.primary.main,
+            '&:hover': {
+                cursor: 'pointer',
+                textDecoration: 'underline'
+            }
+        }
+    },
+
+});
+
 export interface RichTextEditorDialogDataProps {
     title: string;
     text: string;
 }
 
-export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
-    (props: WithDialogProps<RichTextEditorDialogDataProps>) =>
+export const RichTextEditorDialog = withStyles(styles)(withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
+    (props: WithDialogProps<RichTextEditorDialogDataProps> & WithStyles<CssRules>) =>
         <Dialog open={props.open}
             onClose={props.closeDialog}
             fullWidth
-            maxWidth='sm'>
+            maxWidth='md'>
             <DialogTitle>{props.data.title}</DialogTitle>
             <DialogContent>
-                <RichTextEditor 
-                    value={RichTextEditor.createValueFromString(props.data.text, 'html')}
+                <RichTextEditor
+                    className={props.classes.rte}
+                    value={props.data.text ?
+                        RichTextEditor.createValueFromString(props.data.text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'), 'html') : ''}
                     readOnly={true} />
             </DialogContent>
             <DialogActions>
                 <Button
-                    variant='flat'
+                    variant='text'
                     color='primary'
                     onClick={props.closeDialog}>
                     Close
                 </Button>
             </DialogActions>
-        </Dialog>
+        </Dialog>)
 );
\ No newline at end of file