Skip to content
This repository was archived by the owner on Feb 6, 2023. It is now read-only.

Commit 37f2f2a

Browse files
Isaiah Solomonfacebook-github-bot
authored andcommitted
added highlighting (<mark> tag) to draft js html to content block converter
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
1 parent 585af35 commit 37f2f2a

6 files changed

+88
-0
lines changed

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1535,6 +1535,44 @@ Array [
15351535
]
15361536
`;
15371537

1538+
exports[`highlighted text should be recognized and considered styled characters 1`] = `
1539+
Array [
1540+
Immutable.Record {
1541+
"key": "key0",
1542+
"type": "unstyled",
1543+
"text": "test",
1544+
"characterList": Immutable.List [
1545+
Immutable.Record {
1546+
"style": Immutable.OrderedSet [
1547+
"HIGHLIGHT",
1548+
],
1549+
"entity": null,
1550+
},
1551+
Immutable.Record {
1552+
"style": Immutable.OrderedSet [
1553+
"HIGHLIGHT",
1554+
],
1555+
"entity": null,
1556+
},
1557+
Immutable.Record {
1558+
"style": Immutable.OrderedSet [
1559+
"HIGHLIGHT",
1560+
],
1561+
"entity": null,
1562+
},
1563+
Immutable.Record {
1564+
"style": Immutable.OrderedSet [
1565+
"HIGHLIGHT",
1566+
],
1567+
"entity": null,
1568+
},
1569+
],
1570+
"depth": 0,
1571+
"data": Immutable.Map {},
1572+
},
1573+
]
1574+
`;
1575+
15381576
exports[`img with data protocol should be correctly parsed 1`] = `"📷"`;
15391577

15401578
exports[`img with http protocol should have camera emoji content 1`] = `"📷"`;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2482,6 +2482,44 @@ lorem ipsum
24822482
]
24832483
`;
24842484

2485+
exports[`highlighted text should be recognized and considered styled characters 1`] = `
2486+
Array [
2487+
Immutable.Record {
2488+
"key": "key0",
2489+
"type": "unstyled",
2490+
"text": "test",
2491+
"characterList": Immutable.List [
2492+
Immutable.Record {
2493+
"style": Immutable.OrderedSet [
2494+
"HIGHLIGHT",
2495+
],
2496+
"entity": null,
2497+
},
2498+
Immutable.Record {
2499+
"style": Immutable.OrderedSet [
2500+
"HIGHLIGHT",
2501+
],
2502+
"entity": null,
2503+
},
2504+
Immutable.Record {
2505+
"style": Immutable.OrderedSet [
2506+
"HIGHLIGHT",
2507+
],
2508+
"entity": null,
2509+
},
2510+
Immutable.Record {
2511+
"style": Immutable.OrderedSet [
2512+
"HIGHLIGHT",
2513+
],
2514+
"entity": null,
2515+
},
2516+
],
2517+
"depth": 0,
2518+
"data": Immutable.Map {},
2519+
},
2520+
]
2521+
`;
2522+
24852523
exports[`img with data protocol should be correctly parsed 1`] = `"📷"`;
24862524

24872525
exports[`img with http protocol should have camera emoji content 1`] = `"📷"`;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,11 @@ test('img with role presentation should not be rendered', () => {
163163
expect(blocks.contentBlocks).toMatchSnapshot();
164164
});
165165

166+
test('highlighted text should be recognized and considered styled characters', () => {
167+
const blocks = convertFromHTMLToContentBlocks(`<mark>test</mark>`);
168+
expect(blocks.contentBlocks).toMatchSnapshot();
169+
});
170+
166171
test('converts nested html blocks when experimentalTreeDataSupport is enabled', () => {
167172
const html_string = `
168173
<blockquote>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,11 @@ test('img with role presentation should not be rendered', () => {
163163
expect(blocks.contentBlocks).toMatchSnapshot();
164164
});
165165

166+
test('highlighted text should be recognized and considered styled characters', () => {
167+
const blocks = convertFromHTMLToContentBlocks(`<mark>test</mark>`);
168+
expect(blocks.contentBlocks).toMatchSnapshot();
169+
});
170+
166171
test('converts nested html blocks when experimentalTreeDataSupport is enabled', () => {
167172
const html_string = `
168173
<blockquote>

src/model/encoding/convertFromHTMLToContentBlocks.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const inlineTags = {
8181
strike: 'STRIKETHROUGH',
8282
strong: 'BOLD',
8383
u: 'UNDERLINE',
84+
mark: 'HIGHLIGHT',
8485
};
8586

8687
const knownListItemDepthClasses = {

src/model/encoding/convertFromHTMLToContentBlocks2.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const HTMLTagToInlineStyleMap: Map<string, string> = Map({
6666
strike: 'STRIKETHROUGH',
6767
strong: 'BOLD',
6868
u: 'UNDERLINE',
69+
mark: 'HIGHLIGHT',
6970
});
7071

7172
type BlockTypeMap = Map<string, string | Array<string>>;

0 commit comments

Comments
 (0)