X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/7d1fded42f510a082f4274531de2b7f591919bdb..227ffcbd2efe8cccd4a9025344b09632630cff14:/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 c8fd6cdc..90ecbcd5 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
@@ -3,27 +3,56 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@material-ui/core";
+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