diff --git a/src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap b/src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap index 1ea59dd0ce..2b31d7151f 100644 --- a/src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap +++ b/src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap @@ -1139,6 +1139,314 @@ Array [ ] `; +exports[`Should recognize preformatted blocks 1`] = ` +Array [ + Object { + "characterList": Array [ + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + ], + "data": Object {}, + "depth": 0, + "key": "key0", + "text": "following some pre some_code_stuff", + "type": "unstyled", + }, +] +`; + +exports[`Should recognize preformatted blocks mixed other styles 1`] = ` +Array [ + Object { + "characterList": Array [ + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [], + }, + Object { + "entity": null, + "style": Array [ + "BOLD", + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "BOLD", + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "BOLD", + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "BOLD", + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + Object { + "entity": null, + "style": Array [ + "CODE", + ], + }, + ], + "data": Object {}, + "depth": 0, + "key": "key0", + "text": "example bold and code", + "type": "unstyled", + }, +] +`; + exports[`Should recognized and *not* override html structure when having known draft-js classname with nesting enabled 1`] = ` Array [ Object { diff --git a/src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js b/src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js index f1c542c91a..f321fdf32b 100644 --- a/src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js +++ b/src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js @@ -564,3 +564,21 @@ test('Should import two blockquotes without extra line breaks', () => { experimentalTreeDataSupport: false, }); }); + +test('Should recognize preformatted blocks', () => { + const html_string = ` + following some pre some_code_stuff + `; + assertConvertFromHTMLToContentBlocks(html_string, { + experimentalTreeDataSupport: false, + }); +}); + +test('Should recognize preformatted blocks mixed other styles', () => { + const html_string = ` + example bold and code + `; + assertConvertFromHTMLToContentBlocks(html_string, { + experimentalTreeDataSupport: false, + }); +}); diff --git a/src/model/encoding/convertFromHTMLToContentBlocks.js b/src/model/encoding/convertFromHTMLToContentBlocks.js index b3049f6902..44b2cee159 100644 --- a/src/model/encoding/convertFromHTMLToContentBlocks.js +++ b/src/model/encoding/convertFromHTMLToContentBlocks.js @@ -128,6 +128,17 @@ const buildBlockTypeMap = ( return Map(blockTypeMap); }; +const detectInlineStyle = (node: Node): string | null => { + if (isHTMLElement(node)) { + const element: HTMLElement = (node: any); + // Currently only used to detect preformatted inline code + if (element.style.fontFamily.includes('monospace')) { + return 'CODE'; + } + } + return null; +}; + /** * If we're pasting from one DraftEditor to another we can check to see if * existing list item depth classes are being used and preserve this style @@ -497,6 +508,10 @@ class ContentBlocksBuilder { newStyle = newStyle.add(HTMLTagToRawInlineStyleMap.get(nodeName)); } newStyle = styleFromNodeAttributes(node, newStyle); + const inlineStyle = detectInlineStyle(node); + if (inlineStyle != null) { + newStyle = newStyle.add(inlineStyle); + } blockConfigs.push( ...this._toBlockConfigs(Array.from(node.childNodes), newStyle), );