@lexical/selection 0.4.1 → 0.5.1-next.0

package/LexicalSelection.dev.js

@@ -8,220 +8,164 @@
 
 var lexical = require('lexical');
 
-/** @module @lexical/selection */
-const cssToStyles = new Map();
-function $cloneWithProperties(node) {
-  const latest = node.getLatest();
-  const constructor = latest.constructor; // @ts-expect-error
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const CSS_TO_STYLES = new Map();
 
-  const clone = constructor.clone(latest);
-  clone.__parent = latest.__parent;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function $cloneGridSelectionContent(selection) {
+  const nodeMap = selection.getNodes().map(node => {
+    const nodeKey = node.getKey();
+    const clone = $cloneWithProperties(node);
+    return [nodeKey, clone];
+  });
+  return {
+    nodeMap,
+    range: [selection.gridKey]
+  };
+}
 
-  if (lexical.$isElementNode(latest) && lexical.$isElementNode(clone)) {
-    clone.__children = Array.from(latest.__children);
-    clone.__format = latest.__format;
-    clone.__indent = latest.__indent;
-    clone.__dir = latest.__dir;
-  } else if (lexical.$isTextNode(latest) && lexical.$isTextNode(clone)) {
-    clone.__format = latest.__format;
-    clone.__style = latest.__style;
-    clone.__mode = latest.__mode;
-    clone.__detail = latest.__detail;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function $cloneNodeSelectionContent(selection) {
+  {
+    throw Error(`TODO`);
   }
-
-  return clone;
 }
 
-function $getIndexFromPossibleClone(node, parent, nodeMap) {
-  const parentClone = nodeMap.get(parent.getKey());
-
-  if (lexical.$isElementNode(parentClone)) {
-    return parentClone.__children.indexOf(node.getKey());
-  }
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 
-  return node.getIndexWithinParent();
-}
+function getDOMTextNode(element) {
+  let node = element;
 
-function $getParentAvoidingExcludedElements(node) {
-  let parent = node.getParent();
+  while (node != null) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node;
+    }
 
-  while (parent !== null && parent.excludeFromCopy('clone')) {
-    parent = parent.getParent();
+    node = node.firstChild;
   }
 
-  return parent;
+  return null;
 }
 
-function $copyLeafNodeBranchToRoot(leaf, startingOffset, endingOffset, isLeftSide, range, nodeMap) {
-  let node = leaf;
-  let offset = startingOffset;
-
-  while (node !== null) {
-    const parent = $getParentAvoidingExcludedElements(node);
-
-    if (parent === null) {
-      break;
-    }
+function getDOMIndexWithinParent(node) {
+  const parent = node.parentNode;
 
-    if (!lexical.$isElementNode(node) || !node.excludeFromCopy('clone')) {
-      const key = node.getKey();
-      let clone = nodeMap.get(key);
-      const needsClone = clone === undefined;
+  if (parent == null) {
+    throw new Error('Should never happen');
+  }
 
-      if (needsClone) {
-        clone = $cloneWithProperties(node);
-        nodeMap.set(key, clone);
-      }
+  return [parent, Array.from(parent.childNodes).indexOf(node)];
+}
 
-      if (lexical.$isTextNode(clone) && !clone.isSegmented() && !clone.isToken()) {
-        clone.__text = clone.__text.slice(isLeftSide ? offset : 0, isLeftSide ? endingOffset : offset);
-      } else if (lexical.$isElementNode(clone)) {
-        clone.__children = clone.__children.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : (offset || 0) + 1);
-      }
+function createDOMRange(editor, anchorNode, _anchorOffset, focusNode, _focusOffset) {
+  const anchorKey = anchorNode.getKey();
+  const focusKey = focusNode.getKey();
+  const range = document.createRange();
+  let anchorDOM = editor.getElementByKey(anchorKey);
+  let focusDOM = editor.getElementByKey(focusKey);
+  let anchorOffset = _anchorOffset;
+  let focusOffset = _focusOffset;
 
-      if (lexical.$isRootNode(parent)) {
-        if (needsClone) {
-          // We only want to collect a range of top level nodes.
-          // So if the parent is the root, we know this is a top level.
-          range.push(key);
-        }
+  if (lexical.$isTextNode(anchorNode)) {
+    anchorDOM = getDOMTextNode(anchorDOM);
+  }
 
-        break;
-      }
-    }
+  if (lexical.$isTextNode(focusNode)) {
+    focusDOM = getDOMTextNode(focusDOM);
+  }
 
-    offset = $getIndexFromPossibleClone(node, parent, nodeMap);
-    node = parent;
+  if (anchorNode === undefined || focusNode === undefined || anchorDOM === null || focusDOM === null) {
+    return null;
   }
-}
 
-function errGetLatestOnClone() {
-  {
-    throw Error(`getLatest() on clone node`);
+  if (anchorDOM.nodeName === 'BR') {
+    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM);
   }
-}
 
-function $cloneContents(selection) {
-  const clone = $cloneContentsImpl(selection);
+  if (focusDOM.nodeName === 'BR') {
+    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM);
+  }
 
-  {
-    const nodeMap = clone.nodeMap;
+  const firstChild = anchorDOM.firstChild;
 
-    for (let i = 0; i < nodeMap.length; i++) {
-      const node = nodeMap[i][1];
+  if (anchorDOM === focusDOM && firstChild != null && firstChild.nodeName === 'BR' && anchorOffset === 0 && focusOffset === 0) {
+    focusOffset = 1;
+  }
 
-      if (node.getLatest === errGetLatestOnClone) {
-        continue;
-      }
+  try {
+    range.setStart(anchorDOM, anchorOffset);
+    range.setEnd(focusDOM, focusOffset);
+  } catch (e) {
+    return null;
+  }
 
-      Object.setPrototypeOf(node, Object.create(Object.getPrototypeOf(node), {
-        getLatest: {
-          configurable: true,
-          enumerable: true,
-          value: errGetLatestOnClone,
-          writable: true
-        }
-      }));
-    }
+  if (range.collapsed && (anchorOffset !== focusOffset || anchorKey !== focusKey)) {
+    // Range is backwards, we need to reverse it
+    range.setStart(focusDOM, focusOffset);
+    range.setEnd(anchorDOM, anchorOffset);
   }
 
-  return clone;
+  return range;
 }
+function createRectsFromDOMRange(editor, range) {
+  const rootElement = editor.getRootElement();
 
-function $cloneContentsImpl(selection) {
-  if (lexical.$isRangeSelection(selection)) {
-    const anchor = selection.anchor;
-    const focus = selection.focus;
-    const [anchorOffset, focusOffset] = selection.getCharacterOffsets();
-    const nodes = selection.getNodes();
-
-    if (nodes.length === 0) {
-      return {
-        nodeMap: [],
-        range: []
-      };
-    } // Check if we can use the parent of the nodes, if the
-    // parent can't be empty, then it's important that we
-    // also copy that element node along with its children.
-
-
-    let nodesLength = nodes.length;
-    const firstNode = nodes[0];
-    const firstNodeParent = firstNode.getParent();
-
-    if (firstNodeParent !== null && (!firstNodeParent.canBeEmpty() || lexical.$isRootNode(firstNodeParent))) {
-      const parentChildren = firstNodeParent.__children;
-      const parentChildrenLength = parentChildren.length;
-
-      if (parentChildrenLength === nodesLength) {
-        let areTheSame = true;
-
-        for (let i = 0; i < parentChildren.length; i++) {
-          if (parentChildren[i] !== nodes[i].__key) {
-            areTheSame = false;
-            break;
-          }
-        }
-
-        if (areTheSame) {
-          nodesLength++;
-          nodes.push(firstNodeParent);
-        }
-      }
-    }
-
-    const lastNode = nodes[nodesLength - 1];
-    const isBefore = anchor.isBefore(focus);
-    const nodeMap = new Map();
-    const range = [];
-    const isOnlyText = lexical.$isTextNode(firstNode) && nodesLength === 1; // Do first node to root
-
-    $copyLeafNodeBranchToRoot(firstNode, isBefore ? anchorOffset : focusOffset, isOnlyText ? isBefore ? focusOffset : anchorOffset : undefined, true, range, nodeMap); // Copy all nodes between
-
-    for (let i = 0; i < nodesLength; i++) {
-      const node = nodes[i];
-      const key = node.getKey();
+  if (rootElement === null) {
+    return [];
+  }
 
-      if (!nodeMap.has(key) && (!lexical.$isElementNode(node) || !node.excludeFromCopy('clone'))) {
-        const clone = $cloneWithProperties(node);
+  const rootRect = rootElement.getBoundingClientRect();
+  const computedStyle = getComputedStyle(rootElement);
+  const rootPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+  const selectionRects = Array.from(range.getClientRects());
+  let selectionRectsLength = selectionRects.length;
+  let prevRect;
 
-        if (lexical.$isRootNode(node.getParent())) {
-          range.push(node.getKey());
-        }
+  for (let i = 0; i < selectionRectsLength; i++) {
+    const selectionRect = selectionRects[i]; // Exclude a rect that is the exact same as the last rect. getClientRects() can return
+    // the same rect twice for some elements. A more sophisticated thing to do here is to
+    // merge all the rects together into a set of rects that don't overlap, so we don't
+    // generate backgrounds that are too dark.
 
-        if (key !== 'root') {
-          nodeMap.set(key, clone);
-        }
-      }
-    } // Do last node to root
+    const isDuplicateRect = prevRect && prevRect.top === selectionRect.top && prevRect.left === selectionRect.left && prevRect.width === selectionRect.width && prevRect.height === selectionRect.height; // Exclude selections that span the entire element
 
+    const selectionSpansElement = selectionRect.width + rootPadding === rootRect.width;
 
-    $copyLeafNodeBranchToRoot(lastNode, isOnlyText ? undefined : isBefore ? focusOffset : anchorOffset, undefined, false, range, nodeMap);
-    return {
-      nodeMap: Array.from(nodeMap.entries()),
-      range
-    };
-  } else if (lexical.$isGridSelection(selection)) {
-    const nodeMap = selection.getNodes().map(node => {
-      const nodeKey = node.getKey();
-      const clone = $cloneWithProperties(node);
-      return [nodeKey, clone];
-    });
-    return {
-      nodeMap,
-      range: [selection.gridKey]
-    };
-  }
+    if (isDuplicateRect || selectionSpansElement) {
+      selectionRects.splice(i--, 1);
+      selectionRectsLength--;
+      continue;
+    }
 
-  {
-    throw Error(`TODO`);
+    prevRect = selectionRect;
   }
-}
 
-function getStyleObjectFromCSS(css) {
-  return cssToStyles.get(css) || null;
+  return selectionRects;
 }
-
 function getStyleObjectFromRawCSS(css) {
   const styleObject = {};
   const styles = css.split(';');
@@ -236,222 +180,40 @@ function getStyleObjectFromRawCSS(css) {
 
   return styleObject;
 }
+function getStyleObjectFromCSS(css) {
+  let value = CSS_TO_STYLES.get(css);
 
+  if (value === undefined) {
+    value = getStyleObjectFromRawCSS(css);
+    CSS_TO_STYLES.set(css, value);
+  }
+
+  return value;
+}
 function getCSSFromStyleObject(styles) {
   let css = '';
 
   for (const style in styles) {
     if (style) {
-      css += `${style}: ${styles[style]};`;
-    }
-  }
-
-  return css;
-}
-
-function $addNodeStyle(node) {
-  const CSSText = node.getStyle();
-  const styles = getStyleObjectFromRawCSS(CSSText);
-  cssToStyles.set(CSSText, styles);
-}
-
-function $patchNodeStyle(node, patch) {
-  const prevStyles = getStyleObjectFromCSS(node.getStyle());
-  const newStyles = prevStyles ? { ...prevStyles,
-    ...patch
-  } : patch;
-  const newCSSText = getCSSFromStyleObject(newStyles);
-  node.setStyle(newCSSText);
-  cssToStyles.set(newCSSText, newStyles);
-}
-
-function $patchStyleText(selection, patch) {
-  const selectedNodes = selection.getNodes();
-  const selectedNodesLength = selectedNodes.length;
-  const lastIndex = selectedNodesLength - 1;
-  let firstNode = selectedNodes[0];
-  let lastNode = selectedNodes[lastIndex];
-
-  if (selection.isCollapsed()) {
-    return;
-  }
-
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const firstNodeText = firstNode.getTextContent();
-  const firstNodeTextLength = firstNodeText.length;
-  const focusOffset = focus.offset;
-  let anchorOffset = anchor.offset;
-  let startOffset;
-  let endOffset;
-  const isBefore = anchor.isBefore(focus);
-  startOffset = isBefore ? anchorOffset : focusOffset;
-  endOffset = isBefore ? focusOffset : anchorOffset; // This is the case where the user only selected the very end of the
-  // first node so we don't want to include it in the formatting change.
-
-  if (startOffset === firstNode.getTextContentSize()) {
-    const nextSibling = firstNode.getNextSibling();
-
-    if (lexical.$isTextNode(nextSibling)) {
-      // we basically make the second node the firstNode, changing offsets accordingly
-      anchorOffset = 0;
-      startOffset = 0;
-      firstNode = nextSibling;
-    }
-  } // This is the case where we only selected a single node
-
-
-  if (firstNode.is(lastNode)) {
-    if (lexical.$isTextNode(firstNode)) {
-      startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
-      endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset; // No actual text is selected, so do nothing.
-
-      if (startOffset === endOffset) {
-        return;
-      } // The entire node is selected, so just format it
-
-
-      if (startOffset === 0 && endOffset === firstNodeTextLength) {
-        $patchNodeStyle(firstNode, patch);
-        firstNode.select(startOffset, endOffset);
-      } else {
-        // The node is partially selected, so split it into two nodes
-        // and style the selected one.
-        const splitNodes = firstNode.splitText(startOffset, endOffset);
-        const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
-        $patchNodeStyle(replacement, patch);
-        replacement.select(0, endOffset - startOffset);
-      }
-    } // multiple nodes selected.
-
-  } else {
-    if (lexical.$isTextNode(firstNode)) {
-      if (startOffset !== 0) {
-        // the entire first node isn't selected, so split it
-        firstNode = firstNode.splitText(startOffset)[1];
-        startOffset = 0;
-      }
-
-      $patchNodeStyle(firstNode, patch);
-    }
-
-    if (lexical.$isTextNode(lastNode)) {
-      const lastNodeText = lastNode.getTextContent();
-      const lastNodeTextLength = lastNodeText.length; // if the entire last node isn't selected, split it
-
-      if (endOffset !== lastNodeTextLength) {
-        [lastNode] = lastNode.splitText(endOffset);
-      }
-
-      if (endOffset !== 0) {
-        $patchNodeStyle(lastNode, patch);
-      }
-    } // style all the text nodes in between
-
-
-    for (let i = 1; i < lastIndex; i++) {
-      const selectedNode = selectedNodes[i];
-      const selectedNodeKey = selectedNode.getKey();
-
-      if (lexical.$isTextNode(selectedNode) && selectedNodeKey !== firstNode.getKey() && selectedNodeKey !== lastNode.getKey() && !selectedNode.isToken()) {
-        $patchNodeStyle(selectedNode, patch);
-      }
-    }
-  }
-}
-function $getSelectionStyleValueForProperty(selection, styleProperty, defaultValue = '') {
-  let styleValue = null;
-  const nodes = selection.getNodes();
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const isBackward = selection.isBackward();
-  const endOffset = isBackward ? focus.offset : anchor.offset;
-  const endNode = isBackward ? focus.getNode() : anchor.getNode();
-
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i]; // if no actual characters in the end node are selected, we don't
-    // include it in the selection for purposes of determining style
-    // value
-
-    if (i !== 0 && endOffset === 0 && node.is(endNode)) {
-      continue;
-    }
-
-    if (lexical.$isTextNode(node)) {
-      const nodeStyleValue = $getNodeStyleValueForProperty(node, styleProperty, defaultValue);
-
-      if (styleValue === null) {
-        styleValue = nodeStyleValue;
-      } else if (styleValue !== nodeStyleValue) {
-        // multiple text nodes are in the selection and they don't all
-        // have the same font size.
-        styleValue = '';
-        break;
-      }
-    }
-  }
-
-  return styleValue === null ? defaultValue : styleValue;
-}
-
-function $getNodeStyleValueForProperty(node, styleProperty, defaultValue) {
-  const css = node.getStyle();
-  const styleObject = getStyleObjectFromCSS(css);
-
-  if (styleObject !== null) {
-    return styleObject[styleProperty] || defaultValue;
-  }
-
-  return defaultValue;
-}
-
-function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity) {
-  selection.modify(isHoldingShift ? 'extend' : 'move', isBackward, granularity);
-}
-function $isParentElementRTL(selection) {
-  const anchorNode = selection.anchor.getNode();
-  const parent = lexical.$isRootNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
-  return parent.getDirection() === 'rtl';
-}
-function $moveCharacter(selection, isHoldingShift, isBackward) {
-  const isRTL = $isParentElementRTL(selection);
-  $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
-}
-function $selectAll(selection) {
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const anchorNode = anchor.getNode();
-  const topParent = anchorNode.getTopLevelElementOrThrow();
-  const root = topParent.getParentOrThrow();
-  let firstNode = root.getFirstDescendant();
-  let lastNode = root.getLastDescendant();
-  let firstType = 'element';
-  let lastType = 'element';
-  let lastOffset = 0;
-
-  if (lexical.$isTextNode(firstNode)) {
-    firstType = 'text';
-  } else if (!lexical.$isElementNode(firstNode) && firstNode !== null) {
-    firstNode = firstNode.getParentOrThrow();
-  }
-
-  if (lexical.$isTextNode(lastNode)) {
-    lastType = 'text';
-    lastOffset = lastNode.getTextContentSize();
-  } else if (!lexical.$isElementNode(lastNode) && lastNode !== null) {
-    lastNode = lastNode.getParentOrThrow();
+      css += `${style}: ${styles[style]};`;
+    }
   }
 
-  if (firstNode && lastNode) {
-    anchor.set(firstNode.getKey(), 0, firstType);
-    focus.set(lastNode.getKey(), lastOffset, lastType);
-  }
+  return css;
 }
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 function $removeParentEmptyElements(startingNode) {
   let node = startingNode;
 
-  while (node !== null && !lexical.$isRootNode(node)) {
+  while (node !== null && !lexical.$isRootOrShadowRoot(node)) {
     const latest = node.getLatest();
     const parentNode = node.getParent();
 
@@ -463,7 +225,22 @@ function $removeParentEmptyElements(startingNode) {
   }
 }
 
-function $wrapLeafNodesInElements(selection, createElement, wrappingElement) {
+function isPointAttached(point) {
+  return point.getNode().isAttached();
+}
+/**
+ * Attempts to wrap all nodes in the Selection in ElementNodes returned from createElement.
+ * If wrappingElement is provided, all of the wrapped leaves are appended to the wrappingElement.
+ * It attempts to append the resulting sub-tree to the nearest safe insertion target.
+ *
+ * @param selection
+ * @param createElement
+ * @param wrappingElement
+ * @returns
+ */
+
+
+function $wrapNodes(selection, createElement, wrappingElement = null) {
   const nodes = selection.getNodes();
   const nodesLength = nodes.length;
   const anchor = selection.anchor;
@@ -484,6 +261,34 @@ function $wrapLeafNodesInElements(selection, createElement, wrappingElement) {
     return;
   }
 
+  let topLevelNode = null;
+  let descendants = [];
+
+  for (let i = 0; i < nodesLength; i++) {
+    const node = nodes[i]; // Determine whether wrapping has to be broken down into multiple chunks. This can happen if the
+    // user selected multiple Root-like nodes that have to be treated separately as if they are
+    // their own branch. I.e. you don't want to wrap a whole table, but rather the contents of each
+    // of each of the cell nodes.
+
+    if (lexical.$isRootOrShadowRoot(node)) {
+      $wrapNodesImpl(selection, descendants, descendants.length, createElement, wrappingElement);
+      descendants = [];
+      topLevelNode = node;
+    } else if (topLevelNode === null || topLevelNode !== null && lexical.$hasAncestor(node, topLevelNode)) {
+      descendants.push(node);
+    } else {
+      $wrapNodesImpl(selection, descendants, descendants.length, createElement, wrappingElement);
+      descendants = [node];
+    }
+  }
+
+  $wrapNodesImpl(selection, descendants, descendants.length, createElement, wrappingElement);
+}
+function $wrapNodesImpl(selection, nodes, nodesLength, createElement, wrappingElement = null) {
+  if (nodes.length === 0) {
+    return;
+  }
+
   const firstNode = nodes[0];
   const elementMapping = new Map();
   const elements = []; // The below logic is to find the right target for us to
@@ -497,17 +302,20 @@ function $wrapLeafNodesInElements(selection, createElement, wrappingElement) {
     target = target.getParentOrThrow();
   }
 
+  let targetIsPrevSibling = false;
+
   while (target !== null) {
     const prevSibling = target.getPreviousSibling();
 
     if (prevSibling !== null) {
       target = prevSibling;
+      targetIsPrevSibling = true;
       break;
     }
 
     target = target.getParentOrThrow();
 
-    if (lexical.$isRootNode(target)) {
+    if (lexical.$isRootOrShadowRoot(target)) {
       break;
     }
   }
@@ -556,42 +364,53 @@ function $wrapLeafNodesInElements(selection, createElement, wrappingElement) {
       targetElement.setFormat(node.getFormatType());
       targetElement.setIndent(node.getIndent());
       elements.push(targetElement);
-      node.remove();
+      node.remove(true);
     }
   }
 
-  if (wrappingElement) {
+  if (wrappingElement !== null) {
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       wrappingElement.append(element);
     }
-  } // If our target is the root, let's see if we can re-adjust
+  } // If our target is Root-like, let's see if we can re-adjust
   // so that the target is the first child instead.
 
 
-  if (lexical.$isRootNode(target)) {
-    const firstChild = target.getFirstChild();
-
-    if (lexical.$isElementNode(firstChild)) {
-      target = firstChild;
-    }
-
-    if (firstChild === null) {
-      if (wrappingElement) {
-        target.append(wrappingElement);
+  if (lexical.$isRootOrShadowRoot(target)) {
+    if (targetIsPrevSibling) {
+      if (wrappingElement !== null) {
+        target.insertAfter(wrappingElement);
       } else {
-        for (let i = 0; i < elements.length; i++) {
+        for (let i = elements.length - 1; i >= 0; i--) {
           const element = elements[i];
-          target.append(element);
+          target.insertAfter(element);
         }
       }
     } else {
-      if (wrappingElement) {
-        firstChild.insertBefore(wrappingElement);
+      const firstChild = target.getFirstChild();
+
+      if (lexical.$isElementNode(firstChild)) {
+        target = firstChild;
+      }
+
+      if (firstChild === null) {
+        if (wrappingElement) {
+          target.append(wrappingElement);
+        } else {
+          for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            target.append(element);
+          }
+        }
       } else {
-        for (let i = 0; i < elements.length; i++) {
-          const element = elements[i];
-          firstChild.insertBefore(element);
+        if (wrappingElement !== null) {
+          firstChild.insertBefore(wrappingElement);
+        } else {
+          for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            firstChild.insertBefore(element);
+          }
         }
       }
     }
@@ -614,131 +433,319 @@ function $wrapLeafNodesInElements(selection, createElement, wrappingElement) {
     selection.dirty = true;
   }
 }
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
+}
+function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity) {
+  selection.modify(isHoldingShift ? 'extend' : 'move', isBackward, granularity);
+}
+function $isParentElementRTL(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const parent = lexical.$isRootNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+  return parent.getDirection() === 'rtl';
+}
+function $moveCharacter(selection, isHoldingShift, isBackward) {
+  const isRTL = $isParentElementRTL(selection);
+  $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
+}
+function $selectAll(selection) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = anchor.getNode();
+  const topParent = anchorNode.getTopLevelElementOrThrow();
+  const root = topParent.getParentOrThrow();
+  let firstNode = root.getFirstDescendant();
+  let lastNode = root.getLastDescendant();
+  let firstType = 'element';
+  let lastType = 'element';
+  let lastOffset = 0;
 
-function isPointAttached(point) {
-  return point.getNode().isAttached();
+  if (lexical.$isTextNode(firstNode)) {
+    firstType = 'text';
+  } else if (!lexical.$isElementNode(firstNode) && firstNode !== null) {
+    firstNode = firstNode.getParentOrThrow();
+  }
+
+  if (lexical.$isTextNode(lastNode)) {
+    lastType = 'text';
+    lastOffset = lastNode.getTextContentSize();
+  } else if (!lexical.$isElementNode(lastNode) && lastNode !== null) {
+    lastNode = lastNode.getParentOrThrow();
+  }
+
+  if (firstNode && lastNode) {
+    anchor.set(firstNode.getKey(), 0, firstType);
+    focus.set(lastNode.getKey(), lastOffset, lastType);
+  }
 }
 
-function $isAtNodeEnd(point) {
-  if (point.type === 'text') {
-    return point.offset === point.getNode().getTextContentSize();
+function $getIndexFromPossibleClone(node, parent, nodeMap) {
+  const parentClone = nodeMap.get(parent.getKey());
+
+  if (lexical.$isElementNode(parentClone)) {
+    return parentClone.__children.indexOf(node.getKey());
   }
 
-  return point.offset === point.getNode().getChildrenSize();
+  return node.getIndexWithinParent();
 }
-function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
+
+function $getParentAvoidingExcludedElements(node) {
+  let parent = node.getParent();
+
+  while (parent !== null && parent.excludeFromCopy('clone')) {
+    parent = parent.getParent();
+  }
+
+  return parent;
 }
 
-function getDOMTextNode(element) {
-  let node = element;
+function $copyLeafNodeBranchToRoot(leaf, startingOffset, endingOffset, isLeftSide, range, nodeMap) {
+  let node = leaf;
+  let offset = startingOffset;
 
-  while (node != null) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      return node;
+  while (node !== null) {
+    const parent = $getParentAvoidingExcludedElements(node);
+
+    if (parent === null) {
+      break;
     }
 
-    node = node.firstChild;
-  }
+    if (!lexical.$isElementNode(node) || !node.excludeFromCopy('clone')) {
+      const key = node.getKey();
+      let clone = nodeMap.get(key);
+      const needsClone = clone === undefined;
 
-  return null;
+      if (needsClone) {
+        clone = $cloneWithProperties(node);
+        nodeMap.set(key, clone);
+      }
+
+      if (lexical.$isTextNode(clone) && !clone.isSegmented() && !clone.isToken()) {
+        clone.__text = clone.__text.slice(isLeftSide ? offset : 0, isLeftSide ? endingOffset : offset);
+      } else if (lexical.$isElementNode(clone)) {
+        clone.__children = clone.__children.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : (offset || 0) + 1);
+      }
+
+      if (lexical.$isRootNode(parent)) {
+        if (needsClone) {
+          // We only want to collect a range of top level nodes.
+          // So if the parent is the root, we know this is a top level.
+          range.push(key);
+        }
+
+        break;
+      }
+    }
+
+    offset = $getIndexFromPossibleClone(node, parent, nodeMap);
+    node = parent;
+  }
 }
 
-function getDOMIndexWithinParent(node) {
-  const parent = node.parentNode;
+function $cloneRangeSelectionContent(selection) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const [anchorOffset, focusOffset] = selection.getCharacterOffsets();
+  const nodes = selection.getNodes();
 
-  if (parent == null) {
-    throw new Error('Should never happen');
+  if (nodes.length === 0) {
+    return {
+      nodeMap: [],
+      range: []
+    };
+  } // Check if we can use the parent of the nodes, if the
+  // parent can't be empty, then it's important that we
+  // also copy that element node along with its children.
+
+
+  let nodesLength = nodes.length;
+  const firstNode = nodes[0];
+  const firstNodeParent = firstNode.getParent();
+
+  if (firstNodeParent !== null && (!firstNodeParent.canBeEmpty() || lexical.$isRootNode(firstNodeParent))) {
+    const parentChildren = firstNodeParent.__children;
+    const parentChildrenLength = parentChildren.length;
+
+    if (parentChildrenLength === nodesLength) {
+      let areTheSame = true;
+
+      for (let i = 0; i < parentChildren.length; i++) {
+        if (parentChildren[i] !== nodes[i].__key) {
+          areTheSame = false;
+          break;
+        }
+      }
+
+      if (areTheSame) {
+        nodesLength++;
+        nodes.push(firstNodeParent);
+      }
+    }
   }
 
-  return [parent, Array.from(parent.childNodes).indexOf(node)];
+  const lastNode = nodes[nodesLength - 1];
+  const isBefore = anchor.isBefore(focus);
+  const nodeMap = new Map();
+  const range = [];
+  const isOnlyText = lexical.$isTextNode(firstNode) && nodesLength === 1; // Do first node to root
+
+  $copyLeafNodeBranchToRoot(firstNode, isBefore ? anchorOffset : focusOffset, isOnlyText ? isBefore ? focusOffset : anchorOffset : undefined, true, range, nodeMap); // Copy all nodes between
+
+  for (let i = 0; i < nodesLength; i++) {
+    const node = nodes[i];
+    const key = node.getKey();
+
+    if (!nodeMap.has(key) && (!lexical.$isElementNode(node) || !node.excludeFromCopy('clone'))) {
+      const clone = $cloneWithProperties(node);
+
+      if (lexical.$isRootNode(node.getParent())) {
+        range.push(node.getKey());
+      }
+
+      if (key !== 'root') {
+        nodeMap.set(key, clone);
+      }
+    }
+  } // Do last node to root
+
+
+  $copyLeafNodeBranchToRoot(lastNode, isOnlyText ? undefined : isBefore ? focusOffset : anchorOffset, undefined, false, range, nodeMap);
+  return {
+    nodeMap: Array.from(nodeMap.entries()),
+    range
+  };
 }
 
-function createDOMRange(editor, anchorNode, _anchorOffset, focusNode, _focusOffset) {
-  const anchorKey = anchorNode.getKey();
-  const focusKey = focusNode.getKey();
-  const range = document.createRange();
-  let anchorDOM = editor.getElementByKey(anchorKey);
-  let focusDOM = editor.getElementByKey(focusKey);
-  let anchorOffset = _anchorOffset;
-  let focusOffset = _focusOffset;
+function $getNodeStyleValueForProperty(node, styleProperty, defaultValue) {
+  const css = node.getStyle();
+  const styleObject = getStyleObjectFromCSS(css);
 
-  if (lexical.$isTextNode(anchorNode)) {
-    anchorDOM = getDOMTextNode(anchorDOM);
+  if (styleObject !== null) {
+    return styleObject[styleProperty] || defaultValue;
   }
 
-  if (lexical.$isTextNode(focusNode)) {
-    focusDOM = getDOMTextNode(focusDOM);
-  }
+  return defaultValue;
+}
 
-  if (anchorNode === undefined || focusNode === undefined || anchorDOM === null || focusDOM === null) {
-    return null;
+function $getSelectionStyleValueForProperty(selection, styleProperty, defaultValue = '') {
+  let styleValue = null;
+  const nodes = selection.getNodes();
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const isBackward = selection.isBackward();
+  const endOffset = isBackward ? focus.offset : anchor.offset;
+  const endNode = isBackward ? focus.getNode() : anchor.getNode();
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]; // if no actual characters in the end node are selected, we don't
+    // include it in the selection for purposes of determining style
+    // value
+
+    if (i !== 0 && endOffset === 0 && node.is(endNode)) {
+      continue;
+    }
+
+    if (lexical.$isTextNode(node)) {
+      const nodeStyleValue = $getNodeStyleValueForProperty(node, styleProperty, defaultValue);
+
+      if (styleValue === null) {
+        styleValue = nodeStyleValue;
+      } else if (styleValue !== nodeStyleValue) {
+        // multiple text nodes are in the selection and they don't all
+        // have the same font size.
+        styleValue = '';
+        break;
+      }
+    }
   }
 
-  if (anchorDOM.nodeName === 'BR') {
-    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM);
-  }
+  return styleValue === null ? defaultValue : styleValue;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function $updateElementNodeProperties(target, source) {
+  target.__children = Array.from(source.__children);
+  target.__format = source.__format;
+  target.__indent = source.__indent;
+  target.__dir = source.__dir;
+  return target;
+}
 
-  if (focusDOM.nodeName === 'BR') {
-    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM);
-  }
+function $updateTextNodeProperties(target, source) {
+  target.__format = source.__format;
+  target.__style = source.__style;
+  target.__mode = source.__mode;
+  target.__detail = source.__detail;
+  return target;
+}
 
-  const firstChild = anchorDOM.firstChild;
+function $cloneWithProperties(node) {
+  const latest = node.getLatest();
+  const constructor = latest.constructor; // @ts-expect-error
 
-  if (anchorDOM === focusDOM && firstChild != null && firstChild.nodeName === 'BR' && anchorOffset === 0 && focusOffset === 0) {
-    focusOffset = 1;
-  }
+  const clone = constructor.clone(latest);
+  clone.__parent = latest.__parent;
 
-  try {
-    range.setStart(anchorDOM, anchorOffset);
-    range.setEnd(focusDOM, focusOffset);
-  } catch (e) {
-    return null;
+  if (lexical.$isElementNode(latest) && lexical.$isElementNode(clone)) {
+    return $updateElementNodeProperties(clone, latest);
   }
 
-  if (range.collapsed && (anchorOffset !== focusOffset || anchorKey !== focusKey)) {
-    // Range is backwards, we need to reverse it
-    range.setStart(focusDOM, focusOffset);
-    range.setEnd(anchorDOM, anchorOffset);
+  if (lexical.$isTextNode(latest) && lexical.$isTextNode(clone)) {
+    return $updateTextNodeProperties(clone, latest);
   }
 
-  return range;
+  return clone;
 }
-function createRectsFromDOMRange(editor, range) {
-  const rootElement = editor.getRootElement();
-
-  if (rootElement === null) {
-    return [];
-  }
-
-  const rootRect = rootElement.getBoundingClientRect();
-  const computedStyle = getComputedStyle(rootElement);
-  const rootPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-  const selectionRects = Array.from(range.getClientRects());
-  let selectionRectsLength = selectionRects.length;
-  let prevRect;
-
-  for (let i = 0; i < selectionRectsLength; i++) {
-    const selectionRect = selectionRects[i]; // Exclude a rect that is the exact same as the last rect. getClientRects() can return
-    // the same rect twice for some elements. A more sophisticated thing to do here is to
-    // merge all the rects together into a set of rects that don't overlap, so we don't
-    // generate backgrounds that are too dark.
+function $sliceSelectedTextNodeContent(selection, textNode) {
+  if (textNode.isSelected() && !textNode.isSegmented() && !textNode.isToken() && (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    const isAnchor = textNode.is(anchorNode);
+    const isFocus = textNode.is(focusNode);
 
-    const isDuplicateRect = prevRect && prevRect.top === selectionRect.top && prevRect.left === selectionRect.left && prevRect.width === selectionRect.width && prevRect.height === selectionRect.height; // Exclude selections that span the entire element
+    if (isAnchor || isFocus) {
+      const isBackward = selection.isBackward();
+      const [anchorOffset, focusOffset] = selection.getCharacterOffsets();
+      const isSame = anchorNode.is(focusNode);
+      const isFirst = textNode.is(isBackward ? focusNode : anchorNode);
+      const isLast = textNode.is(isBackward ? anchorNode : focusNode);
+      let startOffset = 0;
+      let endOffset = undefined;
 
-    const selectionSpansElement = selectionRect.width + rootPadding === rootRect.width;
+      if (isSame) {
+        startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
+        endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset;
+      } else if (isFirst) {
+        const offset = isBackward ? focusOffset : anchorOffset;
+        startOffset = offset;
+        endOffset = undefined;
+      } else if (isLast) {
+        const offset = isBackward ? anchorOffset : focusOffset;
+        startOffset = 0;
+        endOffset = offset;
+      }
 
-    if (isDuplicateRect || selectionSpansElement) {
-      selectionRects.splice(i--, 1);
-      selectionRectsLength--;
-      continue;
+      textNode.__text = textNode.__text.slice(startOffset, endOffset);
+      return textNode;
     }
+  }
 
-    prevRect = selectionRect;
+  return textNode;
+}
+function $isAtNodeEnd(point) {
+  if (point.type === 'text') {
+    return point.offset === point.getNode().getTextContentSize();
   }
 
-  return selectionRects;
+  return point.offset === point.getNode().getChildrenSize();
 }
 function trimTextContentFromAnchor(editor, anchor, delCount) {
   // Work from the current selection anchor point
@@ -863,41 +870,159 @@ function trimTextContentFromAnchor(editor, anchor, delCount) {
     }
   }
 }
-function $sliceSelectedTextNodeContent(selection, textNode) {
-  if (textNode.isSelected() && !textNode.isSegmented() && !textNode.isToken() && (lexical.$isRangeSelection(selection) || lexical.$isGridSelection(selection))) {
-    const anchorNode = selection.anchor.getNode();
-    const focusNode = selection.focus.getNode();
-    const isAnchor = textNode.is(anchorNode);
-    const isFocus = textNode.is(focusNode);
 
-    if (isAnchor || isFocus) {
-      const isBackward = selection.isBackward();
-      const [anchorOffset, focusOffset] = selection.getCharacterOffsets();
-      const isSame = anchorNode.is(focusNode);
-      const isFirst = textNode.is(isBackward ? focusNode : anchorNode);
-      const isLast = textNode.is(isBackward ? anchorNode : focusNode);
-      let startOffset = 0;
-      let endOffset = undefined;
+function errGetLatestOnClone() {
+  {
+    throw Error(`getLatest() on clone node`);
+  }
+}
 
-      if (isSame) {
-        startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
-        endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset;
-      } else if (isFirst) {
-        const offset = isBackward ? focusOffset : anchorOffset;
-        startOffset = offset;
-        endOffset = undefined;
-      } else if (isLast) {
-        const offset = isBackward ? anchorOffset : focusOffset;
-        startOffset = 0;
-        endOffset = offset;
+function $cloneContents(selection) {
+  let clone = {
+    nodeMap: [],
+    range: []
+  };
+
+  if (lexical.$isRangeSelection(selection)) {
+    clone = $cloneRangeSelectionContent(selection);
+  } else if (lexical.DEPRECATED_$isGridSelection(selection)) {
+    clone = $cloneGridSelectionContent(selection);
+  } else if (lexical.$isNodeSelection(selection)) {
+    clone = $cloneNodeSelectionContent();
+  }
+
+  {
+    const nodeMap = clone.nodeMap;
+
+    for (let i = 0; i < nodeMap.length; i++) {
+      const node = nodeMap[i][1];
+
+      if (node.getLatest === errGetLatestOnClone) {
+        continue;
       }
 
-      textNode.__text = textNode.__text.slice(startOffset, endOffset);
-      return textNode;
+      Object.setPrototypeOf(node, Object.create(Object.getPrototypeOf(node), {
+        getLatest: {
+          configurable: true,
+          enumerable: true,
+          value: errGetLatestOnClone,
+          writable: true
+        }
+      }));
     }
   }
 
-  return textNode;
+  return clone;
+}
+function $addNodeStyle(node) {
+  const CSSText = node.getStyle();
+  const styles = getStyleObjectFromRawCSS(CSSText);
+  CSS_TO_STYLES.set(CSSText, styles);
+}
+
+function $patchNodeStyle(node, patch) {
+  const prevStyles = getStyleObjectFromCSS(node.getStyle());
+  const newStyles = prevStyles ? { ...prevStyles,
+    ...patch
+  } : patch;
+  const newCSSText = getCSSFromStyleObject(newStyles);
+  node.setStyle(newCSSText);
+  CSS_TO_STYLES.set(newCSSText, newStyles);
+}
+
+function $patchStyleText(selection, patch) {
+  const selectedNodes = selection.getNodes();
+  const selectedNodesLength = selectedNodes.length;
+  const lastIndex = selectedNodesLength - 1;
+  let firstNode = selectedNodes[0];
+  let lastNode = selectedNodes[lastIndex];
+
+  if (selection.isCollapsed()) {
+    return;
+  }
+
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const firstNodeText = firstNode.getTextContent();
+  const firstNodeTextLength = firstNodeText.length;
+  const focusOffset = focus.offset;
+  let anchorOffset = anchor.offset;
+  let startOffset;
+  let endOffset;
+  const isBefore = anchor.isBefore(focus);
+  startOffset = isBefore ? anchorOffset : focusOffset;
+  endOffset = isBefore ? focusOffset : anchorOffset; // This is the case where the user only selected the very end of the
+  // first node so we don't want to include it in the formatting change.
+
+  if (startOffset === firstNode.getTextContentSize()) {
+    const nextSibling = firstNode.getNextSibling();
+
+    if (lexical.$isTextNode(nextSibling)) {
+      // we basically make the second node the firstNode, changing offsets accordingly
+      anchorOffset = 0;
+      startOffset = 0;
+      firstNode = nextSibling;
+    }
+  } // This is the case where we only selected a single node
+
+
+  if (firstNode.is(lastNode)) {
+    if (lexical.$isTextNode(firstNode)) {
+      startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
+      endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset; // No actual text is selected, so do nothing.
+
+      if (startOffset === endOffset) {
+        return;
+      } // The entire node is selected, so just format it
+
+
+      if (startOffset === 0 && endOffset === firstNodeTextLength) {
+        $patchNodeStyle(firstNode, patch);
+        firstNode.select(startOffset, endOffset);
+      } else {
+        // The node is partially selected, so split it into two nodes
+        // and style the selected one.
+        const splitNodes = firstNode.splitText(startOffset, endOffset);
+        const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
+        $patchNodeStyle(replacement, patch);
+        replacement.select(0, endOffset - startOffset);
+      }
+    } // multiple nodes selected.
+
+  } else {
+    if (lexical.$isTextNode(firstNode)) {
+      if (startOffset !== 0) {
+        // the entire first node isn't selected, so split it
+        firstNode = firstNode.splitText(startOffset)[1];
+        startOffset = 0;
+      }
+
+      $patchNodeStyle(firstNode, patch);
+    }
+
+    if (lexical.$isTextNode(lastNode)) {
+      const lastNodeText = lastNode.getTextContent();
+      const lastNodeTextLength = lastNodeText.length; // if the entire last node isn't selected, split it
+
+      if (endOffset !== lastNodeTextLength) {
+        [lastNode] = lastNode.splitText(endOffset);
+      }
+
+      if (endOffset !== 0) {
+        $patchNodeStyle(lastNode, patch);
+      }
+    } // style all the text nodes in between
+
+
+    for (let i = 1; i < lastIndex; i++) {
+      const selectedNode = selectedNodes[i];
+      const selectedNodeKey = selectedNode.getKey();
+
+      if (lexical.$isTextNode(selectedNode) && selectedNodeKey !== firstNode.getKey() && selectedNodeKey !== lastNode.getKey() && !selectedNode.isToken()) {
+        $patchNodeStyle(selectedNode, patch);
+      }
+    }
+  }
 }
 
 exports.$addNodeStyle = $addNodeStyle;
@@ -912,7 +1037,8 @@ exports.$patchStyleText = $patchStyleText;
 exports.$selectAll = $selectAll;
 exports.$shouldOverrideDefaultCharacterSelection = $shouldOverrideDefaultCharacterSelection;
 exports.$sliceSelectedTextNodeContent = $sliceSelectedTextNodeContent;
-exports.$wrapLeafNodesInElements = $wrapLeafNodesInElements;
+exports.$wrapNodes = $wrapNodes;
+exports.$wrapNodesImpl = $wrapNodesImpl;
 exports.createDOMRange = createDOMRange;
 exports.createRectsFromDOMRange = createRectsFromDOMRange;
 exports.getStyleObjectFromCSS = getStyleObjectFromCSS;