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

[wip] Preserve list indentation from one DraftEditor to another on paste #1605

Closed
wants to merge 4 commits into from
Closed

[wip] Preserve list indentation from one DraftEditor to another on paste #1605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a21d987
On paste from another Draft editor preserve list indentation
GordyD Jan 8, 2018
b505a5e
Add snapshot tests and linting changes
GordyD Jan 8, 2018
700562a
Do not set depth if experimentalTreeDataSupport flag is true
GordyD Jan 11, 2018
691bdb0
Update snapshot tests - with tree support enabled nesting will not cu…
GordyD Jan 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
360 changes: 360 additions & 0 deletions src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,365 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Should import recognised draft li depths 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 [],
},
],
"data": Object {},
"depth": 0,
"key": "key0",
"text": "depth0",
"type": "unordered-list-item",
},
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 [],
},
],
"data": Object {},
"depth": 1,
"key": "key2",
"text": "depth1",
"type": "unordered-list-item",
},
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 [],
},
],
"data": Object {},
"depth": 2,
"key": "key4",
"text": "depth2",
"type": "unordered-list-item",
},
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 [],
},
],
"data": Object {},
"depth": 3,
"key": "key6",
"text": "depth3",
"type": "unordered-list-item",
},
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 [],
},
],
"data": Object {},
"depth": 4,
"key": "key8",
"text": "depth4",
"type": "unordered-list-item",
},
]
`;

exports[`Should import recognised draft li depths when nesting enabled 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 [],
},
],
"children": Array [],
"data": Object {},
"depth": 0,
"key": "key0",
"nextSibling": "key1",
"parent": null,
"prevSibling": null,
"text": "depth0",
"type": "unordered-list-item",
},
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 [],
},
],
"children": Array [],
"data": Object {},
"depth": 0,
"key": "key1",
"nextSibling": "key2",
"parent": null,
"prevSibling": "key0",
"text": "depth1",
"type": "unordered-list-item",
},
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 [],
},
],
"children": Array [],
"data": Object {},
"depth": 0,
"key": "key2",
"nextSibling": "key3",
"parent": null,
"prevSibling": "key1",
"text": "depth2",
"type": "unordered-list-item",
},
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 [],
},
],
"children": Array [],
"data": Object {},
"depth": 0,
"key": "key3",
"nextSibling": "key4",
"parent": null,
"prevSibling": "key2",
"text": "depth3",
"type": "unordered-list-item",
},
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 [],
},
],
"children": Array [],
"data": Object {},
"depth": 0,
"key": "key4",
"nextSibling": null,
"parent": null,
"prevSibling": "key3",
"text": "depth4",
"type": "unordered-list-item",
},
]
`;

exports[`Should not create empty container blocks around ol and their list items 1`] = `
Array [
Object {
Expand Down
30 changes: 30 additions & 0 deletions src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,3 +279,33 @@ test('Should preserve entities for whitespace-only content', () => {
experimentalTreeDataSupport: false,
});
});

test('Should import recognised draft li depths', () => {
const html_string = `
<ul>
<li class="public-DraftStyleDefault-depth0">depth0</li>
<li class="public-DraftStyleDefault-depth1">depth1</li>
<li class="public-DraftStyleDefault-depth2">depth2</li>
<li class="public-DraftStyleDefault-depth3">depth3</li>
<li class="public-DraftStyleDefault-depth4">depth4</li>
</ul>
`;
assertConvertFromHTMLToContentBlocks(html_string, {
experimentalTreeDataSupport: false,
});
});

test('Should import recognised draft li depths when nesting enabled', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is almost right - but I have one concern.

With "nesting enabled", the new features should create a block map where the "depth" property is not used, and instead we have true nesting set up using 'children' and 'parent' properties on the blocks.

See https://github.com/facebook/draft-js/blob/master/src/model/encoding/__tests__/__snapshots__/convertFromHTMLToContentBlocks-test.js.snap#L303 for an example.

It looks like with this change, we default to using the 'depth' property again for nesting, even with the 'nesting' flag enabled, when those classes are present.

I think we should add a conditional for your check that sets the 'depth' and disable it when the nesting flag is true.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok - thanks for the pointer. So in the instance that nesting is true should there be an alternative way to handle converting the li indentation?

const html_string = `
<ul>
<li class="public-DraftStyleDefault-depth0">depth0</li>
<li class="public-DraftStyleDefault-depth1">depth1</li>
<li class="public-DraftStyleDefault-depth2">depth2</li>
<li class="public-DraftStyleDefault-depth3">depth3</li>
<li class="public-DraftStyleDefault-depth4">depth4</li>
</ul>
`;
assertConvertFromHTMLToContentBlocks(html_string, {
experimentalTreeDataSupport: true,
});
});
Loading