Merge pull request #27749 from code-dot-org/replace-dangerouslySetInn…

…erHtml-in-NonMarkdownInstructions replace dangeroulsySetInnerHtml in NonMarkdownInstructions with UnsafeRenderedMarkdown
code-dot-org · Mar 29, 2019 · 511569d · 511569d
2 parents 92cf95e + 87f0176
commit 511569d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/apps/src/templates/instructions/NonMarkdownInstructions.jsx b/apps/src/templates/instructions/NonMarkdownInstructions.jsx
@@ -1,6 +1,6 @@
-/* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
 import React from 'react';
+import UnsafeRenderedMarkdown from '../UnsafeRenderedMarkdown';
 
 var styles = {
   main: {
@@ -12,22 +12,22 @@ var styles = {
 /**
  * Non-markdown version of our instructions, displayed in a dialog when our top
  * pane instructions are not enabled.
+ *
+ * Currently only used by NetSim levels
  */
 var NonMarkdownInstructions = function(props) {
   return (
     <div style={styles.main}>
       <p className="dialog-title">{props.puzzleTitle}</p>
       {props.shortInstructions && (
-        <p
-          className="instructions"
-          dangerouslySetInnerHTML={{__html: props.shortInstructions}}
-        />
+        <div className="instructions">
+          <UnsafeRenderedMarkdown markdown={props.shortInstructions} />
+        </div>
       )}
       {props.instructions2 && (
-        <p
-          className="instructions2"
-          dangerouslySetInnerHTML={{__html: props.instructions2}}
-        />
+        <div className="instructions2">
+          <UnsafeRenderedMarkdown markdown={props.instructions2} />
+        </div>
       )}
     </div>
   );

diff --git a/apps/test/unit/instructionsComponentsTest.js b/apps/test/unit/instructionsComponentsTest.js
@@ -52,14 +52,14 @@ describe('instructions components', () => {
           />
         </div>
       );
-      var element = dom.find('p');
-      expect(element.length).to.equal(2);
-      expect(element.first())
+      var elements = dom.childAt(0).children();
+      expect(elements.length).to.equal(2);
+      expect(elements.first())
         .text()
         .to.equal('title');
-      expect(element.last())
+      expect(elements.last())
         .text()
-        .to.equal('instructions');
+        .to.equal('instructions\n');
     });
 
     it('can have both instructions and instructions2', function() {
@@ -72,11 +72,11 @@ describe('instructions components', () => {
           />
         </div>
       );
-      var element = dom.find('p');
-      expect(element.length).to.equal(3);
-      expect(element.get(0).textContent).to.equal('title');
-      expect(element.get(1).textContent).to.equal('instructions');
-      expect(element.get(2).textContent).to.equal('instructions2');
+      var elements = dom.childAt(0).children();
+      expect(elements.length).to.equal(3);
+      expect(elements.get(0).textContent).to.equal('title');
+      expect(elements.get(1).textContent).to.equal('instructions\n');
+      expect(elements.get(2).textContent).to.equal('instructions2\n');
     });
   });
 });