Use markdown to style sentence

Author: bethanyaconnor

i18n/oceans.json

@@ -64,6 +64,7 @@
     "mostImportantParts": "These were the most important fish parts:",
     "clickIndividualFish": "Click individual fish to see their information.",
     "mostImportantPartsInDetermining": "These were the most important fish parts in determining whether this fish was",
+    "mostImportantPartsInDeterminingFullSentence": "These were the most important fish parts in determining whether this fish was “*{word}*“ or “**{notWord}**“.",
     "or": "or",
     "newWord": "New Word",
     "finish": "Finish",

package.json

@@ -39,6 +39,7 @@
     "react-dom": "~15.4.0"
   },
   "devDependencies": {
+    "@code-dot-org/redactable-markdown": "^0.4.0",
     "@tensorflow-models/knn-classifier": "~1.1.0",
     "@tensorflow-models/mobilenet": "^2.0.4",
     "@tensorflow/tfjs": "^1.3.1",
@@ -79,6 +80,9 @@
     "react-addons-test-utils": "~15.4.0",
     "react-dom": "~15.4.0",
     "react-test-renderer": "~15.4.0",
+    "rehype-react": "^4.0.1",
+    "remark-parse": "^7.0.2",
+    "remark-rehype": "^5.0.0",
     "sinon": "^7.5.0",
     "style-loader": "^1.0.0",
     "svm": "uponthesun/svmjs",

src/oceans/ui.css

@@ -0,0 +1,15 @@
+#pondTextMarkdown p {
+  margin: 0
+}
+
+#pondTextMarkdown strong {
+  color: #eb5757;
+  font-weight: normal;
+}
+
+#pondTextMarkdown em {
+  color: #56c568;
+  font-style: normal;
+}
+
+

src/oceans/ui.jsx

@@ -32,6 +32,8 @@ import {
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import I18n from './i18n';
+import Markdown from '@ml/utils/Markdown';
+import './ui.css';
 
 const styles = {
   body: {
@@ -390,7 +392,7 @@ const styles = {
     pointerEvents: 'none'
   },
   pondPanelPreText: {
-    marginBottom: '5%'
+    marginBottom: '5%',
   },
   pondPanelRow: {
     position: 'relative',
@@ -1180,18 +1182,18 @@ class PondPanel extends React.Component {
           >
             {state.pondExplainFishSummary && (
               <div>
-                <div style={styles.pondPanelPreText}>
-                  {I18n.t('mostImportantPartsInDetermining')}
-                  {' “'}
-                  <span style={{color: colors.green}}>
-                    {state.word.toLowerCase()}
-                  </span>
-                  {'”'} {I18n.t('or')}
-                  {' “'}
-                  <span style={{color: colors.red}}>
-                    {I18n.t('notWord', {word: state.word}).toLowerCase()}
-                  </span>
-                  {'”'}.
+                <div style={styles.pondPanelPreText} id='pondTextMarkdown'>
+                  <Markdown
+                    markdown={I18n.t(
+                      'mostImportantPartsInDeterminingFullSentence',
+                      {
+                        word: state.word.toLowerCase(),
+                        notWord: I18n.t('notWord', {
+                          word: state.word
+                        }).toLowerCase()
+                      }
+                    )}
+                  />
                 </div>
                 {state.pondExplainFishSummary.slice(0, 4).map((f, i) => (
                   <div key={i}>

src/utils/Markdown.jsx

@@ -0,0 +1,26 @@
+/**
+ * Implementation of this Markdown component is based off of the implementation
+ * of SafeMarkdown in the main code-dot-org repo.
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import remarkRehype from 'remark-rehype';
+import rehypeReact from 'rehype-react';
+import Parser from '@code-dot-org/redactable-markdown';
+
+const markdownProcessor = Parser.create()
+  .getParser()
+  .use(remarkRehype)
+  .use(rehypeReact, {createElement: React.createElement});
+
+export default class Markdown extends React.Component {
+  static propTypes = {
+    markdown: PropTypes.string.isRequired
+  };
+
+  render() {
+    return markdownProcessor.processSync(this.props.markdown).contents;
+  }
+}