Ensure valid HTML in text (#1169)

* Ensure valid HTML in content. * Remove purposefully created bug for testing. * Added test that invalid html is stripped Co-authored-by: Morten Barklund <[email protected]>
GoogleForCreators · Apr 14, 2020 · cd60871 · cd60871
1 parent 819c409
commit cd60871
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/assets/src/edit-story/elements/text/test/util.js b/assets/src/edit-story/elements/text/test/util.js
@@ -17,7 +17,7 @@
 /**
  * Internal dependencies
  */
-import { generateFontFamily } from '../util';
+import { draftMarkupToContent, generateFontFamily } from '../util';
 
 describe('Text/util', () => {
   describe('Text/util/generateFontFamily', () => {
@@ -34,4 +34,30 @@ describe('Text/util', () => {
       );
     });
   });
+
+  describe('Text/util/draftMarkupToContent', () => {
+    it('should return valid HTML for content', () => {
+      const input = '<em>Hello World!';
+      expect(draftMarkupToContent(input, false)).toStrictEqual(
+        '<em>Hello World!</em>'
+      );
+
+      const nestedInput = '<em>Hello <strong>World, again!';
+      expect(draftMarkupToContent(nestedInput, false)).toStrictEqual(
+        '<em>Hello <strong>World, again!</strong></em>'
+      );
+
+      const invalidInput = '<em>Hello</strong> world<u font="> not';
+      expect(draftMarkupToContent(invalidInput, false)).toStrictEqual(
+        '<em>Hello world</em>'
+      );
+    });
+
+    it('should add <strong> wrapper when bold', () => {
+      const input = 'Hello World!';
+      expect(draftMarkupToContent(input, true)).toStrictEqual(
+        '<strong>Hello World!</strong>'
+      );
+    });
+  });
 });
diff --git a/assets/src/edit-story/elements/text/util.js b/assets/src/edit-story/elements/text/util.js
@@ -154,12 +154,18 @@ export const generateFontFamily = (fontFamily, fontFallback) => {
   return fontFamilyDisplay;
 };
 
+let contentBuffer = null;
 export const draftMarkupToContent = (content, bold) => {
   // @todo This logic is temporary and will change with selecting part + marking bold/italic/underline.
   if (bold) {
-    return `<strong>${content}</strong>`;
+    content = `<strong>${content}</strong>`;
   }
-  return content;
+  if (!contentBuffer) {
+    contentBuffer = document.createElement('template');
+  }
+  // Ensures the content is valid HTML.
+  contentBuffer.innerHTML = content;
+  return contentBuffer.innerHTML;
 };
 
 export const getHighlightLineheight = function (