Skip to content

Commit

Permalink
Fix insertNodes and insertParagraph (#5002)
Browse files Browse the repository at this point in the history 
Co-authored-by: EgonBolton <[email protected]>
  • Loading branch information
@GermanJablo
GermanJablo and GermanJablo authored Oct 27, 2023
1 parent dbb0813 commit f15a175
Show file tree
Hide file tree
Showing 15 changed files with 287 additions and 653 deletions.
6 changes: 4 additions & 2 deletions packages/lexical-clipboard/src/clipboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,10 @@ export function $insertDataTransferForRichText(
if (text != null) {
if ($isRangeSelection(selection)) {
const parts = text.split(/(\r?\n|\t)/);
const partsLength = parts.length;
for (let i = 0; i < partsLength; i++) {
if (parts.at(-1) === '') {
parts.pop();
}
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
if (part === '\n' || part === '\r\n') {
selection.insertParagraph();
Expand Down
30 changes: 21 additions & 9 deletions packages/lexical-code/src/CodeNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
ElementNode,
$isTabNode,
$createTabNode,
$isTextNode,
} from 'lexical';
import {
$isCodeHighlightNode,
Expand Down Expand Up @@ -254,14 +255,10 @@ export class CodeNode extends ElementNode {
// If the selection is within the codeblock, find all leading tabs and
// spaces of the current line. Create a new line that has all those
// tabs and spaces, such that leading indentation is preserved.
const anchor = selection.anchor;
const focus = selection.focus;
const {anchor, focus} = selection;
const firstPoint = anchor.isBefore(focus) ? anchor : focus;
const firstSelectionNode = firstPoint.getNode();
if (
$isCodeHighlightNode(firstSelectionNode) ||
$isTabNode(firstSelectionNode)
) {
if ($isTextNode(firstSelectionNode)) {
let node = getFirstCodeNodeOfLine(firstSelectionNode);
const insertNodes = [];
// eslint-disable-next-line no-constant-condition
Expand All @@ -285,11 +282,26 @@ export class CodeNode extends ElementNode {
break;
}
}
if (insertNodes.length > 0) {
selection.insertNodes([$createLineBreakNode(), ...insertNodes]);
return insertNodes[insertNodes.length - 1];
const split = firstSelectionNode.splitText(anchor.offset)[0];
const x = anchor.offset === 0 ? 0 : 1;
const index = split.getIndexWithinParent() + x;
const codeNode = firstSelectionNode.getParentOrThrow();
const nodesToInsert = [$createLineBreakNode(), ...insertNodes];
codeNode.splice(index, 0, nodesToInsert);
const last = insertNodes.at(-1);
if (last) {
last.select();
} else if (anchor.offset === 0) {
split.selectPrevious();
} else {
split.getNextSibling()!.selectNext(0, 0);
}
}
if ($isCodeNode(firstSelectionNode)) {
const {offset} = selection.anchor;
firstSelectionNode.splice(offset, 0, [$createLineBreakNode()]);
firstSelectionNode.select(offset + 1, offset + 1);
}

return null;
}
Expand Down
50 changes: 14 additions & 36 deletions packages/lexical-link/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@ import type {
SerializedElementNode,
} from 'lexical';

import {addClassNamesToElement, isHTMLAnchorElement} from '@lexical/utils';
import {
$getAncestor,
addClassNamesToElement,
isHTMLAnchorElement,
} from '@lexical/utils';
import {
$applyNodeReplacement,
$getSelection,
Expand Down Expand Up @@ -224,23 +228,16 @@ export class LinkNode extends ElementNode {
}

insertNewAfter(
selection: RangeSelection,
_: RangeSelection,
restoreSelection = true,
): null | ElementNode {
const element = this.getParentOrThrow().insertNewAfter(
selection,
restoreSelection,
);
if ($isElementNode(element)) {
const linkNode = $createLinkNode(this.__url, {
rel: this.__rel,
target: this.__target,
title: this.__title,
});
element.append(linkNode);
return linkNode;
}
return null;
const linkNode = $createLinkNode(this.__url, {
rel: this.__rel,
target: this.__target,
title: this.__title,
});
this.insertAfter(linkNode, restoreSelection);
return linkNode;
}

canInsertTextBefore(): false {
Expand Down Expand Up @@ -450,9 +447,7 @@ export function toggleLink(
const firstNode = nodes[0];
// if the first node is a LinkNode or if its
// parent is a LinkNode, we update the URL, target and rel.
const linkNode = $isLinkNode(firstNode)
? firstNode
: $getLinkAncestor(firstNode);
const linkNode = $getAncestor(firstNode, $isLinkNode);
if (linkNode !== null) {
linkNode.setURL(url);
if (target !== undefined) {
Expand Down Expand Up @@ -534,20 +529,3 @@ export function toggleLink(
});
}
}

function $getLinkAncestor(node: LexicalNode): null | LexicalNode {
return $getAncestor(node, $isLinkNode);
}

function $getAncestor<NodeType extends LexicalNode = LexicalNode>(
node: LexicalNode,
predicate: (ancestor: LexicalNode) => ancestor is NodeType,
): null | LexicalNode {
let parent: null | LexicalNode = node;
while (
parent !== null &&
(parent = parent.getParent()) !== null &&
!predicate(parent)
);
return parent;
}
6 changes: 2 additions & 4 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ test.describe('HTML CopyAndPaste', () => {
await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<div
Expand All @@ -229,7 +228,6 @@ test.describe('HTML CopyAndPaste', () => {
await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
Expand All @@ -241,9 +239,9 @@ test.describe('HTML CopyAndPaste', () => {
);
await assertSelection(page, {
anchorOffset: 16,
anchorPath: [2, 0, 0],
anchorPath: [1, 0, 0],
focusOffset: 16,
focusPath: [2, 0, 0],
focusPath: [1, 0, 0],
});
});

Expand Down
18 changes: 7 additions & 11 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,27 +390,23 @@ test.describe('HTML Lists CopyAndPaste', () => {
dir="ltr">
<span data-lexical-text="true">one</span>
</li>
</ul>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<ul class="PlaygroundEditorTheme__ul">
<li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
dir="ltr"
value="1">
<span data-lexical-text="true">two</span>
</li>
</ul>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<div
class="PlaygroundEditorTheme__blockCursor"
contenteditable="false"
data-lexical-cursor="true"></div>
<ul class="PlaygroundEditorTheme__ul">
<li
value="1"
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">three</span>
</li>
<li
value="2"
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">four</span>
Expand Down
7 changes: 6 additions & 1 deletion packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -860,8 +860,10 @@ test.describe('CopyAndPaste', () => {

test('Pasting a decorator node on a blank line inserts before the line', async ({
page,
isCollab,
isPlainText,
}) => {
test.fixme(); // TODO: flaky
test.skip(isPlainText);

// copying and pasting the node is easier than creating the clipboard data
Expand Down Expand Up @@ -900,7 +902,10 @@ test.describe('CopyAndPaste', () => {
width="560"></iframe>
</div>
</div>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<div
class="PlaygroundEditorTheme__blockCursor"
contenteditable="false"
data-lexical-cursor="true"></div>
`,
);
});
Expand Down
34 changes: 19 additions & 15 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ListsCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,13 +262,13 @@ test.describe('Lists CopyAndPaste', () => {
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">three</span>
<span data-lexical-text="true">two</span>
</li>
<li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">two</span>
<span data-lexical-text="true">three</span>
</li>
</ul>
<p
Expand Down Expand Up @@ -504,40 +504,44 @@ test.describe('Lists CopyAndPaste', () => {
<span data-lexical-text="true">five</span>
</li>
</ul>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">12one</span>
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">12</span>
</p>
<ul class="PlaygroundEditorTheme__ul">
<li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">two</span>
<span data-lexical-text="true">one</span>
</li>
<li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">three</span>
<span data-lexical-text="true">two</span>
</li>
<li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">four</span>
<span data-lexical-text="true">three</span>
</li>
<li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">five</span>
<span data-lexical-text="true">four</span>
</li>
<li value="5" class="PlaygroundEditorTheme__listItem">
<span data-lexical-text="true">45</span>
<li
value="5"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">five</span>
</li>
</ul>
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">45</span>
</p>
`,
);
});
Expand Down Expand Up @@ -600,13 +604,13 @@ test.describe('Lists CopyAndPaste', () => {

await assertHTML(
page,
'<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">one</span></li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">two</span></li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">three</span></li><li value="4" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">fourthree</span></li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">four</span></li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">five</span></li></ul>',
'<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">one</span></li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">two</span></li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">three</span></li><li value="4" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">four</span></li><li class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr" value="5"><span data-lexical-text="true">three</span></li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">four</span></li><li value="7" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">five</span></li></ul>',
);
await assertSelection(page, {
anchorOffset: 4,
anchorPath: [0, 4, 0, 0],
anchorPath: [0, 5, 0, 0],
focusOffset: 4,
focusPath: [0, 4, 0, 0],
focusPath: [0, 5, 0, 0],
});
});

Expand Down
2 changes: 1 addition & 1 deletion packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@ test.describe('Tables', () => {
</table>
<p><br /></p>
`,
{ignoreClasses: true},
{ignoreClasses: true, ignoreInlineStyles: true},
);
});

Expand Down
9 changes: 6 additions & 3 deletions packages/lexical-rich-text/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,12 +354,15 @@ export class HeadingNode extends ElementNode {
): ParagraphNode | HeadingNode {
const anchorOffet = selection ? selection.anchor.offset : 0;
const newElement =
anchorOffet > 0 && anchorOffet < this.getTextContentSize()
? $createHeadingNode(this.getTag())
: $createParagraphNode();
anchorOffet === this.getTextContentSize() || !selection
? $createParagraphNode()
: $createHeadingNode(this.getTag());
const direction = this.getDirection();
newElement.setDirection(direction);
this.insertAfter(newElement, restoreSelection);
if (anchorOffet === 0 && !this.isEmpty() && selection) {
this.replace($createParagraphNode(), restoreSelection);
}
return newElement;
}

Expand Down
Loading

2 comments on commit f15a175

@vercel
Copy link

@vercel vercel bot commented on f15a175 Oct 27, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

lexical – ./packages/lexical-website

lexical-fbopensource.vercel.app
lexical-git-main-fbopensource.vercel.app
lexical.dev
lexicaljs.com
www.lexical.dev
lexicaljs.org

@vercel
Copy link

@vercel vercel bot commented on f15a175 Oct 27, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

lexical-playground – ./packages/lexical-playground

lexical-playground.vercel.app
playground.lexical.dev
lexical-playground-fbopensource.vercel.app
lexical-playground-git-main-fbopensource.vercel.app

Please sign in to comment.