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

Commit

Permalink
Fix draft-js pasted inline styles
Browse files Browse the repository at this point in the history 
Summary:
Inline styles were not being parsed correctly for code styles, because snippets copied from other posts only use HTML fontFamily properties to make them different.

This diff adds some code to detect those code snippets.

Differential Revision: D21662325

fbshipit-source-id: 75ffee4a91af7036033eeaaa4985111d02dd9443
  • Loading branch information
@facebook-github-bot
Giulio Jiang authored and facebook-github-bot committed May 26, 2020
1 parent 45bb6b5 commit 92176ab
Show file tree
Hide file tree
Showing 3 changed files with 341 additions and 0 deletions.
308 changes: 308 additions & 0 deletions src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
18 changes: 18 additions & 0 deletions src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,3 +564,21 @@ test('Should import two blockquotes without extra line breaks', () => {
experimentalTreeDataSupport: false,
});
});

test('Should recognize preformatted blocks', () => {
const html_string = `
<meta charset='utf-8'><span style="font-family: system-ui, -apple-system, system-ui, &quot;.SFNSText-Regular&quot;, sans-serif; font-variant-ligatures: normal; white-space: pre-wrap; display: inline !important;">following some pre </span><span style="font-family: Menlo, Consolas, Monaco, monospace; white-space: pre-line;">some_code_stuff</span>
`;
assertConvertFromHTMLToContentBlocks(html_string, {
experimentalTreeDataSupport: false,
});
});

test('Should recognize preformatted blocks mixed other styles', () => {
const html_string = `
<meta charset='utf-8'><span style="font-family: system-ui, -apple-system, system-ui, &quot;.SFNSText-Regular&quot;, sans-serif; font-size: 14px; font-weight: 400; white-space: pre-wrap; display: inline !important;">example </span><span style="font-weight: 600; font-family: Menlo, Consolas, Monaco, monospace; white-space: pre-line;">bold</span><span style="font-family: Menlo, Consolas, Monaco, monospace; white-space: pre-line; font-weight: 400;"> and code</span>
`;
assertConvertFromHTMLToContentBlocks(html_string, {
experimentalTreeDataSupport: false,
});
});
15 changes: 15 additions & 0 deletions src/model/encoding/convertFromHTMLToContentBlocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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),
);
Expand Down

0 comments on commit 92176ab

Please sign in to comment.