fluent-react: Support HTML entities in translations

Fix #183.

Author: stasm

fluent-react/src/localized.js

@@ -5,6 +5,10 @@ import { isReactLocalization } from "./localization";
 import { parseMarkup } from "./markup";
 import VOID_ELEMENTS from "../vendor/voidElementTags";
 
+// Match the opening angle bracket (<) in HTML tags, and HTML entities like
+// &amp;, &#0038;, &#x0026;.
+const reMarkup = /<|&#?\w+;/;
+
 /*
  * Prepare props passed to `Localized` for formatting.
  */
@@ -127,9 +131,9 @@ export default class Localized extends Component {
       return cloneElement(elem, localizedProps);
     }
 
-    // If the message value doesn't contain any markup, insert it as the only
-    // child of the wrapped component.
-    if (!messageValue.includes("<")) {
+    // If the message value doesn't contain any markup nor any HTML entities,
+    // insert it as the only child of the wrapped component.
+    if (!reMarkup.test(messageValue)) {
       return cloneElement(elem, localizedProps, messageValue);
     }
 

fluent-react/test/localized_overlay_test.js

@@ -29,6 +29,50 @@ true = 0 < 3 is true.
     ));
   });
 
+  test('& in text', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+megaman = Jumping & Shooting
+`)
+
+    const wrapper = shallow(
+      <Localized id="megaman">
+        <div />
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.ok(wrapper.contains(
+      <div>
+        Jumping & Shooting
+      </div>
+    ));
+  });
+
+  test('HTML entity', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+two = First &middot; Second
+`)
+
+    const wrapper = shallow(
+      <Localized id="two">
+        <div />
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.ok(wrapper.contains(
+      <div>
+        First · Second
+      </div>
+    ));
+  });
+
   test('one element is matched', function() {
     const mcx = new MessageContext();
     const l10n = new ReactLocalization([mcx]);