added highlighting (<mark> tag) to draft js html to content block con…

…verter

Summary:
Added mark tag as recognizable tag used for styling in HTML conversion.

We need this because we need a way to include a custom style for highlighted text (via `span`), which there currently seems to be no support for.

Reference to similar open source pull request with same change: 638f686

Reviewed By: claudiopro

Differential Revision: D13573448

fbshipit-source-id: a72716dd39870d9db8cc0b13d8fcbed683e49063

src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap

@@ -1535,6 +1535,44 @@ Array [
 ]
 `;
 
+exports[`highlighted text should be recognized and considered styled characters 1`] = `
+Array [
+  Immutable.Record {
+    "key": "key0",
+    "type": "unstyled",
+    "text": "test",
+    "characterList": Immutable.List [
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+    ],
+    "depth": 0,
+    "data": Immutable.Map {},
+  },
+]
+`;
+
 exports[`img with data protocol should be correctly parsed 1`] = `"📷"`;
 
 exports[`img with http protocol should have camera emoji content 1`] = `"📷"`;

src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks2-test.js.snap

@@ -2482,6 +2482,44 @@ lorem ipsum
 ]
 `;
 
+exports[`highlighted text should be recognized and considered styled characters 1`] = `
+Array [
+  Immutable.Record {
+    "key": "key0",
+    "type": "unstyled",
+    "text": "test",
+    "characterList": Immutable.List [
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+      Immutable.Record {
+        "style": Immutable.OrderedSet [
+          "HIGHLIGHT",
+        ],
+        "entity": null,
+      },
+    ],
+    "depth": 0,
+    "data": Immutable.Map {},
+  },
+]
+`;
+
 exports[`img with data protocol should be correctly parsed 1`] = `"📷"`;
 
 exports[`img with http protocol should have camera emoji content 1`] = `"📷"`;

src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js

@@ -163,6 +163,11 @@ test('img with role presentation should not be rendered', () => {
   expect(blocks.contentBlocks).toMatchSnapshot();
 });
 
+test('highlighted text should be recognized and considered styled characters', () => {
+  const blocks = convertFromHTMLToContentBlocks(`<mark>test</mark>`);
+  expect(blocks.contentBlocks).toMatchSnapshot();
+});
+
 test('converts nested html blocks when experimentalTreeDataSupport is enabled', () => {
   const html_string = `
     <blockquote>

src/model/encoding/__tests__/convertFromHTMLToContentBlocks2-test.js

@@ -163,6 +163,11 @@ test('img with role presentation should not be rendered', () => {
   expect(blocks.contentBlocks).toMatchSnapshot();
 });
 
+test('highlighted text should be recognized and considered styled characters', () => {
+  const blocks = convertFromHTMLToContentBlocks(`<mark>test</mark>`);
+  expect(blocks.contentBlocks).toMatchSnapshot();
+});
+
 test('converts nested html blocks when experimentalTreeDataSupport is enabled', () => {
   const html_string = `
     <blockquote>

src/model/encoding/convertFromHTMLToContentBlocks.js

@@ -81,6 +81,7 @@ const inlineTags = {
   strike: 'STRIKETHROUGH',
   strong: 'BOLD',
   u: 'UNDERLINE',
+  mark: 'HIGHLIGHT',
 };
 
 const knownListItemDepthClasses = {

src/model/encoding/convertFromHTMLToContentBlocks2.js

@@ -66,6 +66,7 @@ const HTMLTagToInlineStyleMap: Map<string, string> = Map({
   strike: 'STRIKETHROUGH',
   strong: 'BOLD',
   u: 'UNDERLINE',
+  mark: 'HIGHLIGHT',
 });
 
 type BlockTypeMap = Map<string, string | Array<string>>;