#56 Style rich text annotations on dashboard

mitaai · Jan 21, 2021 · a31cd63 · a31cd63
1 parent 40e2688
commit a31cd63
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -5,10 +5,12 @@ import {
   Badge, Card, Col, ListGroup, Row, Tab, Tabs,
 } from 'react-bootstrap';
 import { format } from 'date-fns';
+import ReactHtmlParser from 'react-html-parser';
 import LoadingSpinner from '../../LoadingSpinner';
 import { getSharedAnnotations, getOwnAnnotations } from '../../../utils/annotationUtil';
 import { getGroupNameById } from '../../../utils/groupUtil';
 import { FirstNameLastInitial } from '../../../utils/nameUtil';
+import { fixIframes } from '../../../utils/parseUtil';
 
 const DashboardAnnotationList = ({
   session,
@@ -125,7 +127,7 @@ const DashboardAnnotationList = ({
                 </Row>
                 <Row>
                   <Col className="paragraph-ellipsis">
-                    {annotation.body.value}
+                    {ReactHtmlParser(annotation.body.value, { transform: fixIframes })}
                   </Col>
                 </Row>
                 <Row>

diff --git a/src/style/custom.scss b/src/style/custom.scss
@@ -238,6 +238,13 @@ ol.breadcrumb {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;  
   overflow: hidden;
+  max-height: 72px;
+  img, iframe {
+    max-width: 100%;
+  }
+  p {
+    margin: 0;
+  }
 }
 
 .ui.selection.dropdown,.ui.upward.selection.dropdown {