lexical 0.3.7 → 0.3.10

package/Lexical.dev.js

@@ -77,14 +77,12 @@ var getDOMSelection = getSelection;
  *
  */
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-const documentMode = // @ts-ignore
-CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
+const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
 const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
 const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
 const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
-const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && // @ts-ignore
-!window.MSStream; // Keep these in case we need to use them in the future.
+const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; // Keep these in case we need to use them in the future.
 // export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
 // export const IS_CHROME: boolean = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
 // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
@@ -115,7 +113,8 @@ const IS_STRIKETHROUGH = 1 << 2;
 const IS_UNDERLINE = 1 << 3;
 const IS_CODE = 1 << 4;
 const IS_SUBSCRIPT = 1 << 5;
-const IS_SUPERSCRIPT = 1 << 6; // Text node details
+const IS_SUPERSCRIPT = 1 << 6;
+const IS_ALL_FORMATTING = IS_BOLD | IS_ITALIC | IS_STRIKETHROUGH | IS_UNDERLINE | IS_CODE | IS_SUBSCRIPT | IS_SUPERSCRIPT; // Text node details
 
 const IS_DIRECTIONLESS = 1;
 const IS_UNMERGEABLE = 1 << 1; // Element node formatting
@@ -125,10 +124,11 @@ const IS_ALIGN_CENTER = 2;
 const IS_ALIGN_RIGHT = 3;
 const IS_ALIGN_JUSTIFY = 4; // Reconciliation
 
-const NON_BREAKING_SPACE = '\u00A0'; // For iOS/Safari we use a non breaking space, otherwise the cursor appears
+const NON_BREAKING_SPACE = '\u00A0';
+const ZERO_WIDTH_SPACE = '\u200b'; // For iOS/Safari we use a non breaking space, otherwise the cursor appears
 // overlapping the composed text.
 
-const COMPOSITION_SUFFIX = IS_SAFARI || IS_IOS ? NON_BREAKING_SPACE : '\u200b';
+const COMPOSITION_SUFFIX = IS_SAFARI || IS_IOS ? NON_BREAKING_SPACE : ZERO_WIDTH_SPACE;
 const DOUBLE_LINE_BREAK = '\n\n'; // For FF, we need to use a non-breaking space, or it gets composition
 // in a stuck state.
 
@@ -494,12 +494,16 @@ function $isTokenOrInertOrSegmented(node) {
 function $isTokenOrInert(node) {
   return node.isToken() || node.isInert();
 }
+
+function isDOMNodeLexicalTextNode(node) {
+  return node.nodeType === DOM_TEXT_TYPE;
+}
+
 function getDOMTextNode(element) {
   let node = element;
 
   while (node != null) {
-    if (node.nodeType === DOM_TEXT_TYPE) {
-      // @ts-expect-error: this is a Text
+    if (isDOMNodeLexicalTextNode(node)) {
       return node;
     }
 
@@ -810,7 +814,7 @@ function getEditorsToPropagate(editor) {
 function createUID() {
   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 }
-function $updateSelectedTextFromDOM(editor, isCompositionEnd, data) {
+function $updateSelectedTextFromDOM(isCompositionEnd, data) {
   // Update the text content with the latest composition text
   const domSelection = getDOMSelection();
 
@@ -881,7 +885,7 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
       const prevSelection = $getPreviousSelection();
 
       if ($isTokenOrInert(node) || $getCompositionKey() !== null && !isComposing || // Check if character was added at the start, and we need
-      // to clear this input from occuring as that action wasn't
+      // to clear this input from occurring as that action wasn't
       // permitted.
       parent !== null && $isRangeSelection(prevSelection) && !parent.canInsertTextBefore() && prevSelection.anchor.offset === 0) {
         node.markDirty();
@@ -1071,22 +1075,22 @@ function isArrowDown(keyCode) {
   return keyCode === 40;
 }
 
-function isMoveBackward(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveBackward(keyCode, ctrlKey, altKey, metaKey) {
   return isArrowLeft(keyCode) && !ctrlKey && !metaKey && !altKey;
 }
 function isMoveToStart(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
   return isArrowLeft(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey);
 }
-function isMoveForward(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveForward(keyCode, ctrlKey, altKey, metaKey) {
   return isArrowRight(keyCode) && !ctrlKey && !metaKey && !altKey;
 }
 function isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
   return isArrowRight(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey);
 }
-function isMoveUp(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveUp(keyCode, ctrlKey, metaKey) {
   return isArrowUp(keyCode) && !ctrlKey && !metaKey;
 }
-function isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveDown(keyCode, ctrlKey, metaKey) {
   return isArrowDown(keyCode) && !ctrlKey && !metaKey;
 }
 function isModifier(ctrlKey, shiftKey, altKey, metaKey) {
@@ -1228,7 +1232,7 @@ function getElementByKeyOrThrow(editor, key) {
 
   if (element === undefined) {
     {
-      throw Error(`Reconciliation: could not find DOM element for node key "${key}"`);
+      throw Error(`Reconciliation: could not find DOM element for node key ${key}`);
     }
   }
 
@@ -1268,6 +1272,50 @@ function scrollIntoViewIfNeeded(editor, anchor, rootElement, tags) {
     tags.add('scroll-into-view');
   }
 }
+function $maybeMoveChildrenSelectionToParent(parentNode, offset = 0) {
+  if (offset !== 0) {
+    {
+      throw Error(`TODO`);
+    }
+  }
+
+  const selection = $getSelection();
+
+  if (!$isRangeSelection(selection) || !$isElementNode(parentNode)) {
+    return selection;
+  }
+
+  const {
+    anchor,
+    focus
+  } = selection;
+  const anchorNode = anchor.getNode();
+  const focusNode = focus.getNode();
+
+  if ($hasAncestor(anchorNode, parentNode)) {
+    anchor.set(parentNode.__key, 0, 'element');
+  }
+
+  if ($hasAncestor(focusNode, parentNode)) {
+    focus.set(parentNode.__key, 0, 'element');
+  }
+
+  return selection;
+}
+
+function $hasAncestor(child, targetNode) {
+  let parent = child.getParent();
+
+  while (parent !== null) {
+    if (parent.is(targetNode)) {
+      return true;
+    }
+
+    parent = parent.getParent();
+  }
+
+  return false;
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1633,7 +1681,7 @@ function isLastChildLineBreakOrDecorator(children, nodeMap) {
   const childKey = children[children.length - 1];
   const node = nodeMap.get(childKey);
   return $isLineBreakNode(node) || $isDecoratorNode(node);
-} // If we end an element with a LinkBreakNode, then we need to add an additonal <br>
+} // If we end an element with a LinkBreakNode, then we need to add an additional <br>
 
 
 function reconcileElementTerminatingLineBreak(prevChildren, nextChildren, dom) {
@@ -2055,7 +2103,7 @@ function getPrevElementByKeyOrThrow(key) {
 
   if (element === undefined) {
     {
-      throw Error(`Reconciliation: could not find DOM element for node key "${key}"`);
+      throw Error(`Reconciliation: could not find DOM element for node key ${key}`);
     }
   }
 
@@ -2153,19 +2201,25 @@ function onSelectionChange(domSelection, editor, isActive) {
           }
         }
       } else {
-        const focus = selection.focus;
-        const focusNode = focus.getNode();
-        let combinedFormat = 0;
+        let combinedFormat = IS_ALL_FORMATTING;
+        let hasTextNodes = false;
+        const nodes = selection.getNodes();
+        const nodesLength = nodes.length;
 
-        if (anchor.type === 'text') {
-          combinedFormat |= anchorNode.getFormat();
-        }
+        for (let i = 0; i < nodesLength; i++) {
+          const node = nodes[i];
+
+          if ($isTextNode(node)) {
+            hasTextNodes = true;
+            combinedFormat &= node.getFormat();
 
-        if (focus.type === 'text' && !anchorNode.is(focusNode)) {
-          combinedFormat |= focusNode.getFormat();
+            if (combinedFormat === 0) {
+              break;
+            }
+          }
         }
 
-        selection.format = combinedFormat;
+        selection.format = hasTextNodes ? combinedFormat : 0;
       }
     }
 
@@ -2192,7 +2246,7 @@ function onClick(event, editor) {
         domSelection.removeAllRanges();
         selection.dirty = true;
       }
-    } else if (domSelection && $isNodeSelection(selection) && domSelection.isCollapsed) {
+    } else if (domSelection && $isNodeSelection(selection)) {
       const domAnchor = domSelection.anchorNode; // If the user is attempting to click selection back onto text, then
       // we should attempt create a range selection.
       // When we click on an empty paragraph node or the end of a paragraph that ends
@@ -2239,41 +2293,6 @@ function onBeforeInput(event, editor) {
   IS_FIREFOX && isFirefoxClipboardEvents()) {
     return;
   } else if (inputType === 'insertCompositionText') {
-    // This logic handles insertion of text between different
-    // format text types. We have to detect a change in type
-    // during composition and see if the previous text contains
-    // part of the composed text to work out the actual text that
-    // we need to insert.
-    const composedText = event.data; // TODO: evaluate if this is Android only. It doesn't always seem
-    // to have any real impact, so could probably be refactored or removed
-    // for an alternative approach.
-
-    if (composedText) {
-      updateEditor(editor, () => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          const anchor = selection.anchor;
-          const node = anchor.getNode();
-          const prevNode = node.getPreviousSibling();
-
-          if (anchor.offset === 0 && $isTextNode(node) && $isTextNode(prevNode) && node.getTextContent() === COMPOSITION_START_CHAR && prevNode.getFormat() !== selection.format) {
-            const prevTextContent = prevNode.getTextContent();
-
-            if (composedText.indexOf(prevTextContent) === 0) {
-              const insertedText = composedText.slice(prevTextContent.length);
-              dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, insertedText);
-              setTimeout(() => {
-                updateEditor(editor, () => {
-                  node.select();
-                });
-              }, ANDROID_COMPOSITION_LATENCY);
-            }
-          }
-        }
-      });
-    }
-
     return;
   }
 
@@ -2333,10 +2352,10 @@ function onBeforeInput(event, editor) {
     const anchorNode = anchor.getNode();
     const focusNode = focus.getNode();
 
-    if (inputType === 'insertText') {
+    if (inputType === 'insertText' || inputType === 'insertTranspose') {
       if (data === '\n') {
         event.preventDefault();
-        dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, undefined);
+        dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
       } else if (data === DOUBLE_LINE_BREAK) {
         event.preventDefault();
         dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND, undefined);
@@ -2379,7 +2398,7 @@ function onBeforeInput(event, editor) {
         {
           // Used for Android
           $setCompositionKey(null);
-          dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, undefined);
+          dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
           break;
         }
 
@@ -2391,7 +2410,7 @@ function onBeforeInput(event, editor) {
 
           if (isInsertLineBreak) {
             isInsertLineBreak = false;
-            dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, undefined);
+            dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
           } else {
             dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND, undefined);
           }
@@ -2525,7 +2544,7 @@ function onInput(event, editor) {
         $setCompositionKey(null);
       }
     } else {
-      $updateSelectedTextFromDOM(editor, false); // onInput always fires after onCompositionEnd for FF.
+      $updateSelectedTextFromDOM(false); // onInput always fires after onCompositionEnd for FF.
 
       if (isFirefoxEndingComposition) {
         onCompositionEndImpl(editor, data || undefined);
@@ -2597,7 +2616,7 @@ function onCompositionEndImpl(editor, data) {
     }
   }
 
-  $updateSelectedTextFromDOM(editor, true, data);
+  $updateSelectedTextFromDOM(true, data);
 }
 
 function onCompositionEnd(event, editor) {
@@ -2631,17 +2650,17 @@ function onKeyDown(event, editor) {
     altKey
   } = event;
 
-  if (isMoveForward(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  if (isMoveForward(keyCode, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
   } else if (isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_END, event);
-  } else if (isMoveBackward(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveBackward(keyCode, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_LEFT_COMMAND, event);
   } else if (isMoveToStart(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_START, event);
-  } else if (isMoveUp(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveUp(keyCode, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_UP_COMMAND, event);
-  } else if (isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveDown(keyCode, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event);
   } else if (isLineBreak(keyCode, shiftKey)) {
     isInsertLineBreak = true;
@@ -3762,7 +3781,13 @@ class RangeSelection {
   }
 
   formatText(formatType) {
-    // TODO I wonder if this methods use selection.extract() instead?
+    if (this.isCollapsed()) {
+      this.toggleFormat(formatType); // When changing format, we should stop composition
+
+      $setCompositionKey(null);
+      return;
+    }
+
     const selectedNodes = this.getNodes();
     const selectedTextNodes = [];
 
@@ -3773,12 +3798,8 @@ class RangeSelection {
     }
 
     const selectedTextNodesLength = selectedTextNodes.length;
-    let firstIndex = 0;
-    const lastIndex = selectedTextNodesLength - 1;
-    let firstNode = selectedTextNodes[0];
-    let lastNode = selectedTextNodes[lastIndex];
 
-    if (this.isCollapsed()) {
+    if (selectedTextNodesLength === 0) {
       this.toggleFormat(formatType); // When changing format, we should stop composition
 
       $setCompositionKey(null);
@@ -3787,98 +3808,96 @@ class RangeSelection {
 
     const anchor = this.anchor;
     const focus = this.focus;
-    const anchorOffset = anchor.offset;
-    const focusOffset = focus.offset;
-    let firstNextFormat = firstNode.getFormatFlags(formatType, null);
-    let firstNodeTextLength = firstNode.getTextContent().length;
-    const isBefore = anchor.isBefore(focus);
-    const endOffset = isBefore ? focusOffset : anchorOffset;
-    let startOffset = isBefore ? anchorOffset : focusOffset; // 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.
+    const isBackward = this.isBackward();
+    const startPoint = isBackward ? focus : anchor;
+    const endPoint = isBackward ? anchor : focus;
+    let firstIndex = 0;
+    let firstNode = selectedTextNodes[0];
+    let startOffset = startPoint.type === 'element' ? 0 : startPoint.offset; // In case selection started at the end of text node use next text node
 
-    if (startOffset === firstNode.getTextContentSize() && selectedTextNodes.length > 1) {
-      const nextNode = selectedTextNodes[1];
-      startOffset = 0;
+    if (startPoint.type === 'text' && startOffset === firstNode.getTextContentSize()) {
       firstIndex = 1;
-      firstNode = nextNode;
-      firstNodeTextLength = nextNode.getTextContentSize();
-      firstNextFormat = nextNode.getFormatFlags(formatType, null);
-    } // This is the case where we only selected a single node
+      firstNode = selectedTextNodes[1];
+      startOffset = 0;
+    }
 
+    if (firstNode == null) {
+      return;
+    }
+
+    const firstNextFormat = firstNode.getFormatFlags(formatType, null);
+    const lastIndex = selectedTextNodesLength - 1;
+    let lastNode = selectedTextNodes[lastIndex];
+    const endOffset = endPoint.type === 'text' ? endPoint.offset : lastNode.getTextContentSize(); // Single node selected
 
     if (firstNode.is(lastNode)) {
-      if ($isTextNode(firstNode)) {
-        if (anchor.type === 'element' && focus.type === 'element') {
-          firstNode.setFormat(firstNextFormat);
-          firstNode.select(startOffset, endOffset);
-          this.format = firstNextFormat;
-          return;
-        } // No actual text is selected, so do nothing.
+      // No actual text is selected, so do nothing.
+      if (startOffset === endOffset) {
+        return;
+      } // The entire node is selected, so just format it
 
 
-        if (startOffset === endOffset) {
-          return;
-        } // The entire node is selected, so just format it
+      if (startOffset === 0 && endOffset === firstNode.getTextContentSize()) {
+        firstNode.setFormat(firstNextFormat);
+      } else {
+        // Node is partially selected, so split it into two nodes
+        // add style the selected one.
+        const splitNodes = firstNode.splitText(startOffset, endOffset);
+        const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
+        replacement.setFormat(firstNextFormat); // Update selection only if starts/ends on text node
 
+        if (startPoint.type === 'text') {
+          startPoint.set(replacement.__key, 0, 'text');
+        }
 
-        if (startOffset === 0 && endOffset === firstNodeTextLength) {
-          firstNode.setFormat(firstNextFormat);
-          firstNode.select(startOffset, endOffset);
-        } else {
-          // ndoe is partially selected, so split it into two nodes
-          // adnd style the selected one.
-          const splitNodes = firstNode.splitText(startOffset, endOffset);
-          const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
-          replacement.setFormat(firstNextFormat);
-          replacement.select(0, endOffset - startOffset);
+        if (endPoint.type === 'text') {
+          endPoint.set(replacement.__key, endOffset - startOffset, 'text');
         }
+      }
 
-        this.format = firstNextFormat;
-      } // multiple nodes selected.
+      this.format = firstNextFormat;
+      return;
+    } // Multiple nodes selected
+    // The entire first node isn't selected, so split it
 
-    } else {
-      // Note: startOffset !== firstNodeTextLength should only occur within rare programatic
-      // update functions; transforms normalization ensure there's no empty text nodes.
-      if ($isTextNode(firstNode) && startOffset !== firstNodeTextLength) {
-        if (startOffset !== 0) {
-          // the entire first node isn't selected, so split it
-          [, firstNode] = firstNode.splitText(startOffset);
-          startOffset = 0;
-        }
 
-        firstNode.setFormat(firstNextFormat);
+    if (startOffset !== 0) {
+      [, firstNode] = firstNode.splitText(startOffset);
+      startOffset = 0;
+    }
+
+    firstNode.setFormat(firstNextFormat);
+    const lastNextFormat = lastNode.getFormatFlags(formatType, firstNextFormat); // If the offset is 0, it means no actual characters are selected,
+    // so we skip formatting the last node altogether.
+
+    if (endOffset > 0) {
+      if (endOffset !== lastNode.getTextContentSize()) {
+        [lastNode] = lastNode.splitText(endOffset);
       }
 
-      let lastNextFormat = firstNextFormat;
+      lastNode.setFormat(lastNextFormat);
+    } // Process all text nodes in between
 
-      if ($isTextNode(lastNode)) {
-        lastNextFormat = lastNode.getFormatFlags(formatType, firstNextFormat);
-        const lastNodeText = lastNode.getTextContent();
-        const lastNodeTextLength = lastNodeText.length; // if the offset is 0, it means no actual characters are selected,
-        // so we skip formatting the last node altogether.
 
-        if (endOffset !== 0) {
-          // if the entire last node isn't selected, split it
-          if (endOffset !== lastNodeTextLength) {
-            [lastNode] = lastNode.splitText(endOffset);
-          }
+    for (let i = firstIndex + 1; i < lastIndex; i++) {
+      const textNode = selectedTextNodes[i];
 
-          lastNode.setFormat(lastNextFormat);
-        }
+      if (!textNode.isToken()) {
+        const nextFormat = textNode.getFormatFlags(formatType, lastNextFormat);
+        textNode.setFormat(nextFormat);
       }
+    } // Update selection only if starts/ends on text node
 
-      this.format = firstNextFormat | lastNextFormat; // deal with all the nodes in between
 
-      for (let i = firstIndex + 1; i < lastIndex; i++) {
-        const selectedNode = selectedTextNodes[i];
-        const selectedNodeKey = selectedNode.__key;
+    if (startPoint.type === 'text') {
+      startPoint.set(firstNode.__key, startOffset, 'text');
+    }
 
-        if ($isTextNode(selectedNode) && selectedNodeKey !== firstNode.__key && selectedNodeKey !== lastNode.__key && !selectedNode.isToken()) {
-          const selectedNextFormat = selectedNode.getFormatFlags(formatType, lastNextFormat);
-          selectedNode.setFormat(selectedNextFormat);
-        }
-      }
+    if (endPoint.type === 'text') {
+      endPoint.set(lastNode.__key, endOffset, 'text');
     }
+
+    this.format = firstNextFormat | lastNextFormat;
   }
 
   insertNodes(nodes, selectStart) {
@@ -3949,7 +3968,7 @@ class RangeSelection {
 
       if ($isElementNode(node) && !node.isInline()) {
         // -----
-        // Heuristics for the replacment or merging of elements
+        // Heuristics for the replacement or merging of elements
         // -----
         // If we have an incoming element node as the first node, then we'll need
         // see if we can merge any descendant leaf nodes into our existing target.
@@ -4126,7 +4145,7 @@ class RangeSelection {
           const sibling = siblings[i];
           const prevParent = sibling.getParentOrThrow();
 
-          if ($isElementNode(target) && !$isBlockElementNode(sibling)) {
+          if ($isElementNode(target) && !$isBlockElementNode(sibling) && !($isDecoratorNode(sibling) && sibling.isTopLevel())) {
             if (originalTarget === target) {
               target.append(sibling);
             } else {
@@ -4335,7 +4354,7 @@ class RangeSelection {
     if (selectedNodesLength === 0) {
       return [];
     } else if (selectedNodesLength === 1) {
-      if ($isTextNode(firstNode)) {
+      if ($isTextNode(firstNode) && !this.isCollapsed()) {
         const startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
         const endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset;
         const splitNodes = firstNode.splitText(startOffset, endOffset);
@@ -4505,7 +4524,18 @@ class RangeSelection {
 
   deleteLine(isBackward) {
     if (this.isCollapsed()) {
-      this.modify('extend', isBackward, 'lineboundary');
+      if (this.anchor.type === 'text') {
+        this.modify('extend', isBackward, 'lineboundary');
+      } // If selection is extended to cover text edge then extend it one character more
+      // to delete its parent element. Otherwise text content will be deleted but empty
+      // parent node will remain
+
+
+      const endPoint = isBackward ? this.focus : this.anchor;
+
+      if (endPoint.offset === 0) {
+        this.modify('extend', isBackward, 'character');
+      }
     }
 
     this.removeText();
@@ -5293,7 +5323,7 @@ function $normalizeAllDirtyTextNodes(editorState, editor) {
  * 2. We transform elements. If element transforms generate additional dirty nodes we repeat step 1.
  * If element transforms only generate additional dirty elements we only repeat step 2.
  *
- * Note that to keep track of newly dirty nodes and subtress we leverage the editor._dirtyNodes and
+ * Note that to keep track of newly dirty nodes and subtrees we leverage the editor._dirtyNodes and
  * editor._subtrees which we reset in every loop.
  */
 
@@ -5498,7 +5528,7 @@ function commitPendingUpdates(editor) {
   if (rootElement === null && !headless || pendingEditorState === null) {
     return;
   } // ======
-  // Reconcilation has started.
+  // Reconciliation has started.
   // ======
 
 
@@ -5518,7 +5548,7 @@ function commitPendingUpdates(editor) {
   if (!headless && needsUpdate && observer !== null) {
     activeEditor = editor;
     activeEditorState = pendingEditorState;
-    isReadOnlyMode = false; // We don't want updates to sync block the reconcilation.
+    isReadOnlyMode = false; // We don't want updates to sync block the reconciliation.
 
     editor._updating = true;
 
@@ -5593,7 +5623,7 @@ function commitPendingUpdates(editor) {
   }
 
   $garbageCollectDetachedDecorators(editor, pendingEditorState); // ======
-  // Reconcilation has finished. Now update selection and trigger listeners.
+  // Reconciliation has finished. Now update selection and trigger listeners.
   // ======
 
   const domSelection = headless ? null : getDOMSelection(); // Attempt to update the DOM selection, including focusing of the root element,
@@ -5613,7 +5643,7 @@ function commitPendingUpdates(editor) {
   }
 
   if (mutatedNodes !== null) {
-    triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes);
+    triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes, tags, dirtyLeaves);
   }
 
   if (pendingDecorators !== null) {
@@ -5644,7 +5674,7 @@ function triggerTextContentListeners(editor, currentEditorState, pendingEditorSt
   }
 }
 
-function triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes) {
+function triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes, updateTags, dirtyLeaves) {
   const listeners = Array.from(editor._listeners.mutation);
   const listenersLength = listeners.length;
 
@@ -5653,7 +5683,10 @@ function triggerMutationListeners(editor, currentEditorState, pendingEditorState
     const mutatedNodesByType = mutatedNodes.get(klass);
 
     if (mutatedNodesByType !== undefined) {
-      listener(mutatedNodesByType);
+      listener(mutatedNodesByType, {
+        dirtyLeaves,
+        updateTags
+      });
     }
   }
 }
@@ -5937,7 +5970,7 @@ function removeNode(nodeToRemove, restoreSelection, preserveEmptyParent) {
     return;
   }
 
-  const selection = $getSelection();
+  const selection = $maybeMoveChildrenSelectionToParent(nodeToRemove);
   let selectionMoved = false;
 
   if ($isRangeSelection(selection) && restoreSelection) {
@@ -6118,7 +6151,7 @@ class LexicalNode {
     while (node !== null) {
       const parent = node.getParent();
 
-      if ($isRootNode(parent) && $isElementNode(node)) {
+      if ($isRootNode(parent) && ($isElementNode(node) || $isDecoratorNode(node) && node.isTopLevel())) {
         return node;
       }
 
@@ -7055,7 +7088,7 @@ class ElementNode extends LexicalNode {
 
       if (nodeToInsert.__key === writableSelfKey) {
         {
-          throw Error(`append: attemtping to append self`);
+          throw Error(`append: attempting to append self`);
         }
       }
 
@@ -7846,6 +7879,10 @@ class TextNode extends LexicalNode {
         conversion: convertBringAttentionToElement,
         priority: 0
       }),
+      code: node => ({
+        conversion: convertTextFormatElement,
+        priority: 0
+      }),
       em: node => ({
         conversion: convertTextFormatElement,
         priority: 0
@@ -8205,11 +8242,7 @@ function convertSpanElement(domNode) {
 
   const hasUnderlineTextDecoration = span.style.textDecoration === 'underline'; // Google Docs uses span tags + vertical-align to specify subscript and superscript
 
-  const verticalAlign = span.style.verticalAlign; // Google Docs uses span tags + color, background-color for coloring
-
-  const backgroundColor = span.style.backgroundColor;
-  const textColor = span.style.color; //TODO: font-size and coloring of subscript & superscript
-
+  const verticalAlign = span.style.verticalAlign;
   return {
     forChild: lexicalNode => {
       if (!$isTextNode(lexicalNode)) {
@@ -8240,20 +8273,6 @@ function convertSpanElement(domNode) {
         lexicalNode.toggleFormat('superscript');
       }
 
-      let cssString = '';
-
-      if (textColor && textColor !== 'rgb(0, 0, 0)') {
-        cssString += `color: ${textColor};`;
-      }
-
-      if (backgroundColor && backgroundColor !== 'transparent') {
-        cssString += `background-color: ${backgroundColor};`;
-      }
-
-      if (cssString !== '') {
-        lexicalNode.setStyle(cssString);
-      }
-
       return lexicalNode;
     },
     node: null
@@ -8297,6 +8316,7 @@ function convertTextDOMNode(domNode) {
 }
 
 const nodeNameToTextFormat = {
+  code: 'code',
   em: 'italic',
   i: 'italic',
   strong: 'bold',
@@ -8641,7 +8661,7 @@ class LexicalEditor {
     this._nodes = nodes; // React node decorators for portals
 
     this._decorators = {};
-    this._pendingDecorators = null; // Used to optimize reconcilation
+    this._pendingDecorators = null; // Used to optimize reconciliation
 
     this._dirtyType = NO_DIRTY_NODES;
     this._cloneNotNeeded = new Set();
@@ -8961,7 +8981,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.3.7';
+const VERSION = '0.3.10';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.