X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/71b9264c1720e619f8cfcb297a7848ece420c61c..a39cc426fdcde42210966da888eb11634e3a321a:/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 c8fd6cdcec..95ae6d45b7 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,28 +2,57 @@
 //
 // 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>
@@ -34,5 +63,5 @@ export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
                     Close
                 </Button>
             </DialogActions>
-        </Dialog>
+        </Dialog>)
 );
\ No newline at end of file
