Merge pull request #354 from code-dot-org/add-markdown-support

Add markdown support for strings

Author: bethanyaconnor

i18n/oceans.json

@@ -63,8 +63,7 @@
     "run": "Run",
     "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",
-    "or": "or",
+    "mostImportantPartsDescription": "These were the most important fish parts in determining whether this fish was “*{word}*” or “**{notWord}**”.",
     "newWord": "New Word",
     "finish": "Finish",
     "trainMore": "Train More",

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",

public/index.html

@@ -48,6 +48,19 @@
       button {
         padding: 1.5% 3%;
       }
+      
+      #pondTextMarkdown p {
+        margin: 0
+      }
+      #pondTextMarkdown strong {
+        color: #eb5757;
+        font-weight: normal;
+      }
+      #pondTextMarkdown em {
+        color: #56c568;
+        font-style: normal;
+      }
+
 
       /*
        * Primary aim is to fit the width up to 0.9 of the screen width.

src/oceans/ui.jsx

@@ -32,6 +32,7 @@ import {
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import I18n from './i18n';
+import Markdown from '@ml/utils/Markdown';
 
 const styles = {
   body: {
@@ -1180,18 +1181,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(
+                      'mostImportantPartsDescription',
+                      {
+                        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;
+  }
+}