facebook · zurfyx · Oct 27, 2023 · Sep 13, 2023 · Sep 13, 2023 · Sep 13, 2023
@@ -173,8 +173,8 @@ 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();

@@ -45,6 +45,7 @@ import {
   ElementNode,
   $isTabNode,
   $createTabNode,
+  $isTextNode,
 } from 'lexical';
 import {
   $isCodeHighlightNode,
@@ -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
@@ -285,10 +282,21 @@ 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;

@@ -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,
@@ -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 {
@@ -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) {
@@ -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;
-}
@@ -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
@@ -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"
@@ -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],
     });
   });
 

@@ -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>

@@ -860,8 +860,13 @@ test.describe('CopyAndPaste', () => {
 
   test('Pasting a decorator node on a blank line inserts before the line', async ({
     page,
+    isCollab,
     isPlainText,
   }) => {
+    test.fixme(
+      isCollab,
+      'Seems to be failing on collab, at least since PR 5002',
+    );
     test.skip(isPlainText);
 
     // copying and pasting the node is easier than creating the clipboard data
@@ -900,7 +905,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>
       `,
     );
   });

@@ -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
@@ -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>
       `,
     );
   });
@@ -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],
     });
   });
 

@@ -400,7 +400,7 @@ test.describe('Tables', () => {
         </table>
         <p><br /></p>
       `,
-      {ignoreClasses: true},
+      {ignoreClasses: true, ignoreInlineStyles: true},
     );
   });
 

@@ -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;
   }