Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lexical-html] Feature: support pasting empty block nodes #6392

Merged
merged 6 commits into from
Jul 12, 2024
Merged

[lexical-html] Feature: support pasting empty block nodes #6392

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b434ff2
convert
potatowagon Jul 11, 2024
a2b6091
.
potatowagon Jul 11, 2024
9e4c361
.
potatowagon Jul 11, 2024
bb29c53
.
potatowagon Jul 12, 2024
2b5a5e0
.
potatowagon Jul 12, 2024
65065c5
siblings must be inline nodes
potatowagon Jul 12, 2024
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
17 changes: 14 additions & 3 deletions packages/lexical-html/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,9 +294,16 @@ function $createNodesFromDOM(
}

if (currentLexicalNode == null) {
// If it hasn't been converted to a LexicalNode, we hoist its children
// up to the same level as it.
lexicalNodes = lexicalNodes.concat(childLexicalNodes);
if (childLexicalNodes.length > 0) {
// If it hasn't been converted to a LexicalNode, we hoist its children
// up to the same level as it.
lexicalNodes = lexicalNodes.concat(childLexicalNodes);
} else {
if (isBlockDomNode(node) && isDomNodeMiddleChild(node)) {
// Empty block dom node that hasnt been converted, we replace it with a linebreak if its a middle child
lexicalNodes = lexicalNodes.concat($createLineBreakNode());
}
}
} else {
if ($isElementNode(currentLexicalNode)) {
// If the current node is a ElementNode after conversion,
Expand Down Expand Up @@ -359,3 +366,7 @@ function $unwrapArtificalNodes(
node.remove();
}
}

function isDomNodeMiddleChild(node: Node): boolean {
return node.nextSibling != null && node.previousSibling != null;
}
28 changes: 28 additions & 0 deletions packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,6 +678,34 @@ describe('LexicalEventHelpers', () => {
],
name: 'two lines and br in spans',
},
{
expectedHTML:
'<ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></li><li value="2" class="editor-listitem"><br></li></ol>',
inputs: [pasteHTML('<ol><li>1<div></div>2</li><li></li></ol>')],
name: 'empty block node in li behaves like a line break',
},
{
expectedHTML:
'<p class="editor-paragraph"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></p>',
inputs: [pasteHTML('<div>1<div></div>2</div>')],
name: 'empty block node in div behaves like a line break',
},
{
expectedHTML:
'<p class="editor-paragraph"><span data-lexical-text="true">12</span></p>',
inputs: [pasteHTML('<div>1<text></text>2</div>')],
name: 'empty inline node does not behave like a line break',
},
{
expectedHTML:
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">b b</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">c</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">z</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">d e</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">fg</span></p>',
inputs: [
pasteHTML(
`<div>a<div>b b<div>c<div><div></div>z</div>d e</div>fg</div>`,
),
],
name: 'nested divs',
},
];

suite.forEach((testUnit, i) => {
Expand Down
19 changes: 0 additions & 19 deletions packages/lexical/src/__tests__/unit/HTMLCopyAndPaste.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,25 +51,6 @@ describe('HTMLCopyAndPaste tests', () => {
456
</div>`,
},
{
expectedHTML: `<p dir="ltr"><span data-lexical-text="true">a</span></p><p dir="ltr"><span data-lexical-text="true">b b</span></p><p dir="ltr"><span data-lexical-text="true">c</span></p><p dir="ltr"><span data-lexical-text="true">z </span></p><p dir="ltr"><span data-lexical-text="true">d e </span></p><p dir="ltr"><span data-lexical-text="true">fg</span></p>`,
name: 'nested divs',
pastedHTML: `<div>
a
<div>
b b
<div>
c
<div>
<div></div>
z
</div>
</div>
d e
</div>
fg
</div>`,
},
Comment on lines -54 to -72
Copy link
Contributor Author

@potatowagon potatowagon Jul 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

moved this to packages/lexical-utils/src/tests/unit/LexicalEventHelpers.test.tsx onPasteFromRichText

because an extra <br /> is introduced in this test setup which i cant repro on the playground or the onPasteFromRichText test env

Copy link
Contributor Author

Choose a reason for hiding this comment

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

codepen
Screenshot 2024-07-12 at 11 30 30 AM

lexical playground

Screenshot 2024-07-12 at 11 30 51 AM

{
expectedHTML: `<p dir="ltr"><span data-lexical-text="true">a b c d e</span></p><p dir="ltr"><span data-lexical-text="true">f g h</span></p>`,
name: 'multiple nested spans and divs',
Expand Down
Loading