lexical 0.2.4 → 0.2.7

package/Lexical.dev.js

@@ -56,6 +56,7 @@ const IS_ALIGN_RIGHT = 3;
 const IS_ALIGN_JUSTIFY = 4; // Reconciliation
 
 const ZERO_WIDTH_CHAR = '\u200b';
+const DOUBLE_LINE_BREAK = '\n\n';
 const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
 const LTR = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' + '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' + '\uFE00-\uFE6F\uFEFD-\uFFFF';
 const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']');
@@ -181,6 +182,9 @@ function getTextDirection(text) {
 
   return null;
 }
+function $isTokenOrInertOrSegmented(node) {
+  return $isTokenOrInert(node) || node.isSegmented();
+}
 function $isTokenOrInert(node) {
   return node.isToken() || node.isInert();
 }
@@ -322,21 +326,24 @@ function $setCompositionKey(compositionKey) {
   errorOnReadOnly();
   const editor = getActiveEditor();
   const previousCompositionKey = editor._compositionKey;
-  editor._compositionKey = compositionKey;
 
-  if (previousCompositionKey !== null) {
-    const node = $getNodeByKey(previousCompositionKey);
+  if (compositionKey !== previousCompositionKey) {
+    editor._compositionKey = compositionKey;
 
-    if (node !== null) {
-      node.getWritable();
+    if (previousCompositionKey !== null) {
+      const node = $getNodeByKey(previousCompositionKey);
+
+      if (node !== null) {
+        node.getWritable();
+      }
     }
-  }
 
-  if (compositionKey !== null) {
-    const node = $getNodeByKey(compositionKey);
+    if (compositionKey !== null) {
+      const node = $getNodeByKey(compositionKey);
 
-    if (node !== null) {
-      node.getWritable();
+      if (node !== null) {
+        node.getWritable();
+      }
     }
   }
 }
@@ -423,8 +430,15 @@ function internalGetRoot(editorState) {
 function $setSelection(selection) {
   const editorState = getActiveEditorState();
 
-  if (selection !== null && Object.isFrozen(selection)) {
-    console.warn('$setSelection called on frozen selection object. Ensure selection is cloned before passing in.');
+  if (selection !== null) {
+    if (Object.isFrozen(selection)) {
+      {
+        throw Error(`$setSelection called on frozen selection object. Ensure selection is cloned before passing in.`);
+      }
+    }
+
+    selection.dirty = true;
+    selection._cachedNodes = null;
   }
 
   editorState._selection = selection;
@@ -489,7 +503,7 @@ function getEditorsToPropagate(editor) {
 function createUID() {
   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 }
-function $updateSelectedTextFromDOM(editor, compositionEndEvent) {
+function $updateSelectedTextFromDOM(editor, isCompositionEnd, data) {
   // Update the text content with the latest composition text
   const domSelection = getDOMSelection();
 
@@ -507,8 +521,7 @@ function $updateSelectedTextFromDOM(editor, compositionEndEvent) {
     const node = $getNearestNodeFromDOMNode(anchorNode);
 
     if ($isTextNode(node)) {
-      let textContent = anchorNode.nodeValue;
-      const data = compositionEndEvent !== null && compositionEndEvent.data; // Data is intentionally truthy, as we check for boolean, null and empty string.
+      let textContent = anchorNode.nodeValue; // Data is intentionally truthy, as we check for boolean, null and empty string.
 
       if (textContent === ZERO_WIDTH_CHAR && data) {
         const offset = data.length;
@@ -517,7 +530,7 @@ function $updateSelectedTextFromDOM(editor, compositionEndEvent) {
         focusOffset = offset;
       }
 
-      $updateTextNodeFromDOMContent(node, textContent, anchorOffset, focusOffset, compositionEndEvent !== null);
+      $updateTextNodeFromDOMContent(node, textContent, anchorOffset, focusOffset, isCompositionEnd);
     }
   }
 }
@@ -543,7 +556,9 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
           const editor = getActiveEditor();
           setTimeout(() => {
             editor.update(() => {
-              node.remove();
+              if (node.isAttached()) {
+                node.remove();
+              }
             });
           }, 20);
         } else {
@@ -727,6 +742,9 @@ function isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
 function isModifier(ctrlKey, shiftKey, altKey, metaKey) {
   return ctrlKey || shiftKey || altKey || metaKey;
 }
+function isSpace(keyCode) {
+  return keyCode === 32;
+}
 function controlOrMeta(metaKey, ctrlKey) {
   if (IS_APPLE) {
     return metaKey;
@@ -852,6 +870,9 @@ function isFirefoxClipboardEvents() {
 function dispatchCommand(editor, type, payload) {
   return triggerCommandListeners(editor, type, payload);
 }
+function $textContentRequiresDoubleLinebreakAtEnd(node) {
+  return !$isRootNode(node) && !node.isLastChild() && !node.isInline();
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1141,8 +1162,8 @@ function internalCreateNodeFromParse(parsedNode, parsedNodeMap, editor, parentKe
       }
     } else if (originalSelection.type === 'grid') {
       const gridKey = originalSelection.gridKey;
-      const anchorCellKey = originalSelection.anchorCellKey;
-      const focusCellKey = originalSelection.focusCellKey;
+      const anchorCellKey = originalSelection.anchor.key;
+      const focusCellKey = originalSelection.focus.key;
 
       if (remappedSelection == null && (gridKey === parsedKey || gridKey === anchorCellKey || gridKey === focusCellKey)) {
         state.remappedSelection = remappedSelection = { ...originalSelection,
@@ -1156,11 +1177,11 @@ function internalCreateNodeFromParse(parsedNode, parsedNodeMap, editor, parentKe
         }
 
         if (anchorCellKey === parsedKey) {
-          remappedSelection.anchorCellKey = key;
+          remappedSelection.anchor.key = key;
         }
 
         if (focusCellKey === parsedKey) {
-          remappedSelection.focusCellKey = key;
+          remappedSelection.focus.key = key;
         }
       }
     }
@@ -1199,6 +1220,7 @@ const KEY_ARROW_LEFT_COMMAND = createCommand();
 const KEY_ARROW_UP_COMMAND = createCommand();
 const KEY_ARROW_DOWN_COMMAND = createCommand();
 const KEY_ENTER_COMMAND = createCommand();
+const KEY_SPACE_COMMAND = createCommand();
 const KEY_BACKSPACE_COMMAND = createCommand();
 const KEY_ESCAPE_COMMAND = createCommand();
 const KEY_DELETE_COMMAND = createCommand();
@@ -1208,6 +1230,7 @@ const OUTDENT_CONTENT_COMMAND = createCommand();
 const DROP_COMMAND = createCommand();
 const FORMAT_ELEMENT_COMMAND = createCommand();
 const DRAGSTART_COMMAND = createCommand();
+const DRAGEND_COMMAND = createCommand();
 const COPY_COMMAND = createCommand();
 const CUT_COMMAND = createCommand();
 const CLEAR_EDITOR_COMMAND = createCommand();
@@ -1245,20 +1268,32 @@ if (CAN_USE_BEFORE_INPUT) {
 let lastKeyDownTimeStamp = 0;
 let rootElementsRegistered = 0;
 let isSelectionChangeFromReconcile = false;
+let isInsertLineBreak = false;
+let isFirefoxEndingComposition = false;
+let collapsedSelectionFormat = [0, 0, 'root', 0];
+
+function shouldSkipSelectionChange(domNode, offset) {
+  return domNode !== null && domNode.nodeType === DOM_TEXT_TYPE && offset !== 0 && offset !== domNode.nodeValue.length;
+}
 
 function onSelectionChange(domSelection, editor, isActive) {
   if (isSelectionChangeFromReconcile) {
     isSelectionChangeFromReconcile = false;
     const {
       anchorNode,
-      focusNode
+      anchorOffset,
+      focusNode,
+      focusOffset
     } = domSelection; // If native DOM selection is on a DOM element, then
     // we should continue as usual, as Lexical's selection
     // may have normalized to a better child. If the DOM
     // element is a text node, we can safely apply this
     // optimization and skip the selection change entirely.
+    // We also need to check if the offset is at the boundary,
+    // because in this case, we might need to normalize to a
+    // sibling instead.
 
-    if (anchorNode !== null && focusNode !== null && anchorNode.nodeType === DOM_TEXT_TYPE && focusNode.nodeType === DOM_TEXT_TYPE) {
+    if (shouldSkipSelectionChange(anchorNode, anchorOffset) && shouldSkipSelectionChange(focusNode, focusOffset)) {
       return;
     }
   }
@@ -1273,19 +1308,45 @@ function onSelectionChange(domSelection, editor, isActive) {
 
     const selection = $getSelection(); // Update the selection format
 
-    if ($isRangeSelection(selection) && selection.isCollapsed()) {
-      // Badly interpreted range selection when collapsed - #1482
-      if (domSelection.type === 'Range') {
-        selection.dirty = true;
-      }
-
+    if ($isRangeSelection(selection)) {
       const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+
+      if (selection.isCollapsed()) {
+        // Badly interpreted range selection when collapsed - #1482
+        if (domSelection.type === 'Range') {
+          selection.dirty = true;
+        } // If we have marked a collapsed selection format, and we're
+        // within the given time range – then attempt to use that format
+        // instead of getting the format from the anchor node.
+
+
+        const currentTimeStamp = window.event.timeStamp;
+        const [lastFormat, lastOffset, lastKey, timeStamp] = collapsedSelectionFormat;
+
+        if (currentTimeStamp < timeStamp + 200 && anchor.offset === lastOffset && anchor.key === lastKey) {
+          selection.format = lastFormat;
+        } else {
+          if (anchor.type === 'text') {
+            selection.format = anchorNode.getFormat();
+          } else if (anchor.type === 'element') {
+            selection.format = 0;
+          }
+        }
+      } else {
+        const focus = selection.focus;
+        const focusNode = focus.getNode();
+        let combinedFormat = 0;
+
+        if (anchor.type === 'text') {
+          combinedFormat |= anchorNode.getFormat();
+        }
+
+        if (focus.type === 'text' && !anchorNode.is(focusNode)) {
+          combinedFormat |= focusNode.getFormat();
+        }
 
-      if (anchor.type === 'text') {
-        const anchorNode = anchor.getNode();
-        selection.format = anchorNode.getFormat();
-      } else if (anchor.type === 'element') {
-        selection.format = 0;
+        selection.format = combinedFormat;
       }
     }
 
@@ -1306,7 +1367,7 @@ function onClick(event, editor) {
       const anchor = selection.anchor;
 
       if (anchor.type === 'element' && anchor.offset === 0 && selection.isCollapsed() && $getRoot().getChildrenSize() === 1 && anchor.getNode().getTopLevelElementOrThrow().isEmpty()) {
-        const lastSelection = editor.getEditorState()._selection;
+        const lastSelection = $getPreviousSelection();
 
         if (lastSelection !== null && selection.is(lastSelection)) {
           getDOMSelection().removeAllRanges();
@@ -1383,25 +1444,36 @@ function onBeforeInput(event, editor) {
   updateEditor(editor, () => {
     const selection = $getSelection();
 
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-
     if (inputType === 'deleteContentBackward') {
-      // Used for Android
+      if (selection === null) {
+        // Use previous selection
+        const prevSelection = $getPreviousSelection();
+
+        if (!$isRangeSelection(prevSelection)) {
+          return;
+        }
+
+        $setSelection(prevSelection.clone());
+      } // Used for Android
+
+
       $setCompositionKey(null);
       event.preventDefault();
       lastKeyDownTimeStamp = 0;
       dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true); // Fixes an Android bug where selection flickers when backspacing
 
       setTimeout(() => {
-        editor.update(() => {
+        updateEditor(editor, () => {
           $setCompositionKey(null);
         });
       }, ANDROID_COMPOSITION_LATENCY);
       return;
     }
 
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+
     const data = event.data;
 
     if (!selection.dirty && selection.isCollapsed() && !$isRootNode(selection.anchor.getNode())) {
@@ -1417,7 +1489,7 @@ function onBeforeInput(event, editor) {
       if (data === '\n') {
         event.preventDefault();
         dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND);
-      } else if (data === '\n\n') {
+      } else if (data === DOUBLE_LINE_BREAK) {
         event.preventDefault();
         dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND);
       } else if (data == null && event.dataTransfer) {
@@ -1466,8 +1538,16 @@ function onBeforeInput(event, editor) {
       case 'insertParagraph':
         {
           // Used for Android
-          $setCompositionKey(null);
-          dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND);
+          $setCompositionKey(null); // Some browsers do not provide the type "insertLineBreak".
+          // So instead, we need to infer it from the keyboard event.
+
+          if (isInsertLineBreak) {
+            isInsertLineBreak = false;
+            dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND);
+          } else {
+            dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND);
+          }
+
           break;
         }
 
@@ -1575,14 +1655,27 @@ function onInput(event, editor) {
     const data = event.data;
 
     if (data != null && $isRangeSelection(selection) && $shouldPreventDefaultAndInsertText(selection, data, false)) {
-      dispatchCommand(editor, INSERT_TEXT_COMMAND, data); // For Android
+      // Given we're over-riding the default behavior, we will need
+      // to ensure to disable composition before dispatching the
+      // insertText command for when changing the sequence for FF.
+      if (isFirefoxEndingComposition) {
+        onCompositionEndImpl(editor, data);
+        isFirefoxEndingComposition = false;
+      }
+
+      dispatchCommand(editor, INSERT_TEXT_COMMAND, data); // This ensures consistency on Android.
 
       if (editor._compositionKey !== null) {
         lastKeyDownTimeStamp = 0;
         $setCompositionKey(null);
       }
     } else {
-      $updateSelectedTextFromDOM(editor, null);
+      $updateSelectedTextFromDOM(editor, false); // onInput always fires after onCompositionEnd for FF.
+
+      if (isFirefoxEndingComposition) {
+        onCompositionEndImpl(editor, data);
+        isFirefoxEndingComposition = false;
+      }
     } // Also flush any other mutations that might have occurred
     // since the change.
 
@@ -1601,7 +1694,9 @@ function onCompositionStart(event, editor) {
 
       if ( // If it has been 30ms since the last keydown, then we should
       // apply the empty space heuristic.
-      event.timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY || anchor.type === 'element' || !selection.isCollapsed() || selection.anchor.getNode().getFormat() !== selection.format) {
+      event.timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY || // FF has issues around composing multibyte characters, so we also
+      // need to invoke the empty space heuristic below.
+      IS_FIREFOX && anchor.type === 'element' || !selection.isCollapsed() || selection.anchor.getNode().getFormat() !== selection.format) {
         // We insert an empty space, ready for the composition
         // to get inserted into the new node we create. If
         // we don't do this, Safari will fail on us because
@@ -1612,40 +1707,56 @@ function onCompositionStart(event, editor) {
   });
 }
 
-function onCompositionEnd(event, editor) {
-  updateEditor(editor, () => {
-    const compositionKey = editor._compositionKey;
-    $setCompositionKey(null);
-    const data = event.data; // Handle termination of composition.
-
-    if (compositionKey !== null && data != null) {
-      // It can sometimes move to an adjacent DOM node when backspacing.
-      // So check for the empty case.
-      if (data === '') {
-        const node = $getNodeByKey(compositionKey);
-        const textNode = getDOMTextNode(editor.getElementByKey(compositionKey));
-
-        if (textNode !== null && $isTextNode(node)) {
-          $updateTextNodeFromDOMContent(node, textNode.nodeValue, null, null, true);
-        }
+function onCompositionEndImpl(editor, data) {
+  const compositionKey = editor._compositionKey;
+  $setCompositionKey(null); // Handle termination of composition.
 
-        return;
-      } else if (data[data.length - 1] === '\n') {
-        const selection = $getSelection();
+  if (compositionKey !== null && data != null) {
+    // Composition can sometimes move to an adjacent DOM node when backspacing.
+    // So check for the empty case.
+    if (data === '') {
+      const node = $getNodeByKey(compositionKey);
+      const textNode = getDOMTextNode(editor.getElementByKey(compositionKey));
 
-        if ($isRangeSelection(selection)) {
-          // If the last character is a line break, we also need to insert
-          // a line break.
-          const focus = selection.focus;
-          selection.anchor.set(focus.key, focus.offset, focus.type);
-          dispatchCommand(editor, KEY_ENTER_COMMAND, null);
-          return;
-        }
+      if (textNode !== null && $isTextNode(node)) {
+        $updateTextNodeFromDOMContent(node, textNode.nodeValue, null, null, true);
+      }
+
+      return;
+    } // Composition can sometimes be that of a new line. In which case, we need to
+    // handle that accordingly.
+
+
+    if (data[data.length - 1] === '\n') {
+      const selection = $getSelection();
+
+      if ($isRangeSelection(selection)) {
+        // If the last character is a line break, we also need to insert
+        // a line break.
+        const focus = selection.focus;
+        selection.anchor.set(focus.key, focus.offset, focus.type);
+        dispatchCommand(editor, KEY_ENTER_COMMAND, null);
+        return;
       }
     }
+  }
 
-    $updateSelectedTextFromDOM(editor, event);
-  });
+  $updateSelectedTextFromDOM(editor, true, data);
+}
+
+function onCompositionEnd(event, editor) {
+  // Firefox fires onCompositionEnd before onInput, but Chrome/Webkit,
+  // fire onInput before onCompositionEnd. To ensure the sequence works
+  // like Chrome/Webkit we use the isFirefoxEndingComposition flag to
+  // defer handling of onCompositionEnd in Firefox till we have processed
+  // the logic in onInput.
+  if (IS_FIREFOX) {
+    isFirefoxEndingComposition = true;
+  } else {
+    updateEditor(editor, () => {
+      onCompositionEndImpl(editor, event.data);
+    });
+  }
 }
 
 function onKeyDown(event, editor) {
@@ -1672,11 +1783,16 @@ function onKeyDown(event, editor) {
   } else if (isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event);
   } else if (isLineBreak(keyCode, shiftKey)) {
+    isInsertLineBreak = true;
     dispatchCommand(editor, KEY_ENTER_COMMAND, event);
+  } else if (isSpace(keyCode)) {
+    dispatchCommand(editor, KEY_SPACE_COMMAND, event);
   } else if (isOpenLineBreak(keyCode, ctrlKey)) {
     event.preventDefault();
+    isInsertLineBreak = true;
     dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, true);
   } else if (isParagraph(keyCode, shiftKey)) {
+    isInsertLineBreak = false;
     dispatchCommand(editor, KEY_ENTER_COMMAND, event);
   } else if (isDeleteBackward(keyCode, altKey, metaKey, ctrlKey)) {
     if (isBackspace(keyCode)) {
@@ -1811,6 +1927,9 @@ function addRootElementEvents(rootElement, editor) {
           case 'dragstart':
             return dispatchCommand(editor, DRAGSTART_COMMAND, event);
 
+          case 'dragend':
+            return dispatchCommand(editor, DRAGEND_COMMAND, event);
+
           case 'focus':
             return dispatchCommand(editor, FOCUS_COMMAND, event);
 
@@ -1877,6 +1996,9 @@ function cleanActiveNestedEditorsMap(editor) {
 function markSelectionChangeFromReconcile() {
   isSelectionChangeFromReconcile = true;
 }
+function markCollapsedSelectionFormat(format, offset, key, timeStamp) {
+  collapsedSelectionFormat = [format, offset, key, timeStamp];
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1944,7 +2066,7 @@ function setTextAlign(domStyle, value) {
 }
 
 function setElementIndent(dom, indent) {
-  dom.style.setProperty('padding-inline-start', indent === 0 ? '' : indent * 40 + 'px');
+  dom.style.setProperty('padding-inline-start', indent === 0 ? '' : indent * 20 + 'px');
 }
 
 function setElementFormat(dom, format) {
@@ -2005,6 +2127,11 @@ function createNode(key, parentDOM, insertDOM) {
     }
 
     reconcileElementTerminatingLineBreak(null, children, dom);
+
+    if ($textContentRequiresDoubleLinebreakAtEnd(node)) {
+      subTreeTextContent += DOUBLE_LINE_BREAK;
+      editorTextContent += DOUBLE_LINE_BREAK;
+    }
   } else {
     const text = node.getTextContent();
 
@@ -2176,12 +2303,12 @@ function reconcileBlockDirection(element, dom) {
 function reconcileChildrenWithDirection(prevChildren, nextChildren, element, dom) {
   const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
-  reconcileChildren(prevChildren, nextChildren, dom);
+  reconcileChildren(element, prevChildren, nextChildren, dom);
   reconcileBlockDirection(element, dom);
   subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
 }
 
-function reconcileChildren(prevChildren, nextChildren, dom) {
+function reconcileChildren(element, prevChildren, nextChildren, dom) {
   const previousSubTreeTextContent = subTreeTextContent;
   subTreeTextContent = '';
   const prevChildrenLength = prevChildren.length;
@@ -2216,7 +2343,11 @@ function reconcileChildren(prevChildren, nextChildren, dom) {
       }
     }
   } else {
-    reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, dom);
+    reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, element, dom);
+  }
+
+  if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
+    subTreeTextContent += DOUBLE_LINE_BREAK;
   } // $FlowFixMe: internal field
 
 
@@ -2311,6 +2442,11 @@ function reconcileNode(key, parentDOM) {
         reconcileElementTerminatingLineBreak(prevChildren, nextChildren, dom);
       }
     }
+
+    if ($textContentRequiresDoubleLinebreakAtEnd(nextNode)) {
+      subTreeTextContent += DOUBLE_LINE_BREAK;
+      editorTextContent += DOUBLE_LINE_BREAK;
+    }
   } else {
     const text = nextNode.getTextContent();
 
@@ -2320,6 +2456,9 @@ function reconcileNode(key, parentDOM) {
       if (decorator !== null) {
         reconcileDecorator(key, decorator);
       }
+
+      subTreeTextContent += text;
+      editorTextContent += text;
     } else if ($isTextNode(nextNode) && !nextNode.isDirectionless()) {
       // Handle text content, for LTR, LTR cases.
       subTreeDirectionedTextContent += text;
@@ -2368,7 +2507,7 @@ function getNextSibling(element) {
   return element.nextSibling;
 }
 
-function reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, dom) {
+function reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, element, dom) {
   const prevEndIndex = prevChildrenLength - 1;
   const nextEndIndex = nextChildrenLength - 1;
   let prevChildrenSet;
@@ -2582,11 +2721,15 @@ function reconcileSelection(prevSelection, nextSelection, editor, domSelection)
   const focusDOM = getElementByKeyOrThrow(editor, focusKey);
   const nextAnchorOffset = anchor.offset;
   const nextFocusOffset = focus.offset;
+  const nextFormat = nextSelection.format;
+  const isCollapsed = nextSelection.isCollapsed();
   let nextAnchorNode = anchorDOM;
   let nextFocusNode = focusDOM;
+  let anchorFormatChanged = false;
 
   if (anchor.type === 'text') {
     nextAnchorNode = getDOMTextNode(anchorDOM);
+    anchorFormatChanged = anchor.getNode().getFormat() !== nextFormat;
   }
 
   if (focus.type === 'text') {
@@ -2597,20 +2740,31 @@ function reconcileSelection(prevSelection, nextSelection, editor, domSelection)
 
   if (nextAnchorNode === null || nextFocusNode === null) {
     return;
+  }
+
+  if (isCollapsed && (prevSelection === null || anchorFormatChanged || prevSelection.format !== nextFormat)) {
+    markCollapsedSelectionFormat(nextFormat, nextAnchorOffset, anchorKey, performance.now());
   } // Diff against the native DOM selection to ensure we don't do
-  // an unnecessary selection update.
+  // an unnecessary selection update. We also skip this check if
+  // we're moving selection to within an element, as this can
+  // sometimes be problematic around scrolling.
 
 
   if (anchorOffset === nextAnchorOffset && focusOffset === nextFocusOffset && anchorDOMNode === nextAnchorNode && focusDOMNode === nextFocusNode && // Badly interpreted range selection when collapsed - #1482
-  !(domSelection.type === 'Range' && nextSelection.isCollapsed())) {
+  !(domSelection.type === 'Range' && isCollapsed)) {
     // If the root element does not have focus, ensure it has focus
     if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
       rootElement.focus({
         preventScroll: true
       });
-    }
+    } // In Safari/iOS if we have selection on an element, then we also
+    // need to additionally set the DOM selection, otherwise a selectionchange
+    // event will not fire.
 
-    return;
+
+    if (!(IS_IOS || IS_SAFARI) || anchor.type !== 'element') {
+      return;
+    }
   } // Apply the updated selection to the DOM. Note: this will trigger
   // a "selectionchange" event, although it will be asynchronous.
 
@@ -2741,7 +2895,7 @@ function $normalizeAllDirtyTextNodes(editorState, editor) {
   for (const nodeKey of dirtyLeaves) {
     const node = nodeMap.get(nodeKey);
 
-    if ($isTextNode(node) && node.isSimpleText() && !node.isUnmergeable()) {
+    if ($isTextNode(node) && node.isAttached() && node.isSimpleText() && !node.isUnmergeable()) {
       $normalizeTextNode(node);
     }
   }
@@ -2777,7 +2931,7 @@ function $applyAllTransforms(editorState, editor) {
       for (const nodeKey of untransformedDirtyLeaves) {
         const node = nodeMap.get(nodeKey);
 
-        if ($isTextNode(node) && node.isSimpleText() && !node.isUnmergeable()) {
+        if ($isTextNode(node) && node.isAttached() && node.isSimpleText() && !node.isUnmergeable()) {
           $normalizeTextNode(node);
         }
 
@@ -2903,8 +3057,9 @@ function handleDEVOnlyPendingUpdateGuarantees(pendingEditorState) {
 function commitPendingUpdates(editor) {
   const pendingEditorState = editor._pendingEditorState;
   const rootElement = editor._rootElement;
+  const headless = editor._headless;
 
-  if (rootElement === null || pendingEditorState === null) {
+  if (rootElement === null && !headless || pendingEditorState === null) {
     return;
   }
 
@@ -2925,10 +3080,12 @@ function commitPendingUpdates(editor) {
   editor._updating = true;
 
   try {
-    const mutatedNodes = updateEditorState(rootElement, currentEditorState, pendingEditorState, currentSelection, pendingSelection, needsUpdate, editor);
+    if (!headless && rootElement !== null) {
+      const mutatedNodes = updateEditorState(rootElement, currentEditorState, pendingEditorState, currentSelection, pendingSelection, needsUpdate, editor);
 
-    if (mutatedNodes !== null) {
-      triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes);
+      if (mutatedNodes !== null) {
+        triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes);
+      }
     }
   } catch (error) {
     // Report errors
@@ -3095,9 +3252,9 @@ function triggerDeferredUpdateCallbacks(editor) {
   }
 }
 
-function processNestedUpdates(editor) {
+function processNestedUpdates(editor, initialSkipTransforms) {
   const queuedUpdates = editor._updates;
-  let skipTransforms = false; // Updates might grow as we process them, we so we'll need
+  let skipTransforms = initialSkipTransforms || false; // Updates might grow as we process them, we so we'll need
   // to handle each update as we go until the updates array is
   // empty.
 
@@ -3169,13 +3326,13 @@ function beginUpdate(editor, updateFn, options) {
   activeEditor = editor;
 
   try {
-    if (editorStateWasCloned) {
+    if (editorStateWasCloned && !editor._headless) {
       pendingEditorState._selection = internalCreateSelection(editor);
     }
 
     const startingCompositionKey = editor._compositionKey;
     updateFn();
-    skipTransforms = processNestedUpdates(editor);
+    skipTransforms = processNestedUpdates(editor, skipTransforms);
     applySelectionTransforms(pendingEditorState, editor);
 
     if (editor._dirtyType !== NO_DIRTY_NODES) {
@@ -3506,6 +3663,8 @@ function initMutationObserver(editor) {
 
 class Point {
   constructor(key, offset, type) {
+    // $FlowFixMe: is temporarily null
+    this._selection = null;
     this.key = key;
     this.offset = offset;
     this.type = type;
@@ -3536,10 +3695,6 @@ class Point {
     return aNode.isBefore(bNode);
   }
 
-  getCharacterOffset() {
-    return this.type === 'text' ? this.offset : 0;
-  }
-
   getNode() {
     const key = this.key;
     const node = $getNodeByKey(key);
@@ -3554,7 +3709,7 @@ class Point {
   }
 
   set(key, offset, type) {
-    const selection = $getSelection();
+    const selection = this._selection;
     const oldKey = this.key;
     this.key = key;
     this.offset = offset;
@@ -3566,6 +3721,7 @@ class Point {
       }
 
       if (selection !== null && (selection.anchor === this || selection.focus === this)) {
+        selection._cachedNodes = null;
         selection.dirty = true;
       }
     }
@@ -3642,6 +3798,7 @@ class NodeSelection {
   constructor(objects) {
     this.dirty = false;
     this._nodes = objects;
+    this._cachedNodes = null;
   }
 
   is(selection) {
@@ -3658,18 +3815,24 @@ class NodeSelection {
     this.dirty = true;
 
     this._nodes.add(key);
+
+    this._cachedNodes = null;
   }
 
   delete(key) {
     this.dirty = true;
 
     this._nodes.delete(key);
+
+    this._cachedNodes = null;
   }
 
   clear() {
     this.dirty = true;
 
     this._nodes.clear();
+
+    this._cachedNodes = null;
   }
 
   has(key) {
@@ -3691,6 +3854,12 @@ class NodeSelection {
   }
 
   getNodes() {
+    const cachedNodes = this._cachedNodes;
+
+    if (cachedNodes !== null) {
+      return cachedNodes;
+    }
+
     const objects = this._nodes;
     const nodes = [];
 
@@ -3702,6 +3871,10 @@ class NodeSelection {
       }
     }
 
+    if (!isCurrentlyReadOnlyMode()) {
+      this._cachedNodes = nodes;
+    }
+
     return nodes;
   }
 
@@ -3721,13 +3894,14 @@ function $isRangeSelection(x) {
   return x instanceof RangeSelection;
 }
 class GridSelection {
-  constructor(gridKey, anchorCellKey, focusCellKey) {
+  constructor(gridKey, anchor, focus) {
     this.gridKey = gridKey;
-    this.anchorCellKey = anchorCellKey;
-    this.anchor = $createPoint(anchorCellKey, 0, 'element');
-    this.focusCellKey = focusCellKey;
-    this.focus = $createPoint(focusCellKey, 0, 'element');
+    this.anchor = anchor;
+    this.focus = focus;
     this.dirty = false;
+    this._cachedNodes = null;
+    anchor._selection = this;
+    focus._selection = this;
   }
 
   is(selection) {
@@ -3735,18 +3909,19 @@ class GridSelection {
       return false;
     }
 
-    return this.gridKey === selection.gridKey && this.anchorCellKey === selection.anchorCellKey && this.focusCellKey === selection.focusCellKey;
+    return this.gridKey === selection.gridKey && this.anchor.is(this.focus);
   }
 
   set(gridKey, anchorCellKey, focusCellKey) {
     this.dirty = true;
     this.gridKey = gridKey;
-    this.anchorCellKey = anchorCellKey;
-    this.focusCellKey = focusCellKey;
+    this.anchor.key = anchorCellKey;
+    this.focus.key = focusCellKey;
+    this._cachedNodes = null;
   }
 
   clone() {
-    return new GridSelection(this.gridKey, this.anchorCellKey, this.focusCellKey);
+    return new GridSelection(this.gridKey, this.anchor, this.focus);
   }
 
   isCollapsed() {
@@ -3757,6 +3932,10 @@ class GridSelection {
     return this.focus.isBefore(this.anchor);
   }
 
+  getCharacterOffsets() {
+    return getCharacterOffsets(this);
+  }
+
   extract() {
     return this.getNodes();
   }
@@ -3768,7 +3947,7 @@ class GridSelection {
   }
 
   getShape() {
-    const anchorCellNode = $getNodeByKey(this.anchorCellKey);
+    const anchorCellNode = $getNodeByKey(this.anchor.key);
 
     if (!anchorCellNode) {
       throw Error(`getNodes: expected to find AnchorNode`);
@@ -3776,7 +3955,7 @@ class GridSelection {
 
     const anchorCellNodeIndex = anchorCellNode.getIndexWithinParent();
     const anchorCelRoweIndex = anchorCellNode.getParentOrThrow().getIndexWithinParent();
-    const focusCellNode = $getNodeByKey(this.focusCellKey);
+    const focusCellNode = $getNodeByKey(this.focus.key);
 
     if (!focusCellNode) {
       throw Error(`getNodes: expected to find FocusNode`);
@@ -3797,7 +3976,13 @@ class GridSelection {
   }
 
   getNodes() {
-    const nodes = new Set();
+    const cachedNodes = this._cachedNodes;
+
+    if (cachedNodes !== null) {
+      return cachedNodes;
+    }
+
+    const nodesSet = new Set();
     const {
       fromX,
       fromY,
@@ -3812,12 +3997,12 @@ class GridSelection {
       }
     }
 
-    nodes.add(gridNode);
+    nodesSet.add(gridNode);
     const gridRowNodes = gridNode.getChildren();
 
     for (let r = fromY; r <= toY; r++) {
       const gridRowNode = gridRowNodes[r];
-      nodes.add(gridRowNode);
+      nodesSet.add(gridRowNode);
 
       if (!$isGridRowNode(gridRowNode)) {
         {
@@ -3836,12 +4021,12 @@ class GridSelection {
           }
         }
 
-        nodes.add(gridCellNode);
+        nodesSet.add(gridCellNode);
         const children = gridCellNode.getChildren();
 
         while (children.length > 0) {
           const child = children.shift();
-          nodes.add(child);
+          nodesSet.add(child);
 
           if ($isElementNode(child)) {
             children.unshift(...child.getChildren());
@@ -3850,7 +4035,13 @@ class GridSelection {
       }
     }
 
-    return Array.from(nodes);
+    const nodes = Array.from(nodesSet);
+
+    if (!isCurrentlyReadOnlyMode()) {
+      this._cachedNodes = nodes;
+    }
+
+    return nodes;
   }
 
   getTextContent() {
@@ -3874,6 +4065,9 @@ class RangeSelection {
     this.focus = focus;
     this.dirty = false;
     this.format = format;
+    this._cachedNodes = null;
+    anchor._selection = this;
+    focus._selection = this;
   }
 
   is(selection) {
@@ -3893,6 +4087,12 @@ class RangeSelection {
   }
 
   getNodes() {
+    const cachedNodes = this._cachedNodes;
+
+    if (cachedNodes !== null) {
+      return cachedNodes;
+    }
+
     const anchor = this.anchor;
     const focus = this.focus;
     let firstNode = anchor.getNode();
@@ -3906,20 +4106,29 @@ class RangeSelection {
       lastNode = lastNode.getDescendantByIndex(focus.offset);
     }
 
+    let nodes;
+
     if (firstNode.is(lastNode)) {
-      if ($isElementNode(firstNode)) {
-        return [];
+      if ($isElementNode(firstNode) && (firstNode.getChildrenSize() > 0 || firstNode.excludeFromCopy())) {
+        nodes = [];
+      } else {
+        nodes = [firstNode];
       }
+    } else {
+      nodes = firstNode.getNodesBetween(lastNode);
+    }
 
-      return [firstNode];
+    if (!isCurrentlyReadOnlyMode()) {
+      this._cachedNodes = nodes;
     }
 
-    return firstNode.getNodesBetween(lastNode);
+    return nodes;
   }
 
   setTextNodeRange(anchorNode, anchorOffset, focusNode, focusOffset) {
     $setPointValues(this.anchor, anchorNode.__key, anchorOffset, 'text');
     $setPointValues(this.focus, focusNode.__key, focusOffset, 'text');
+    this._cachedNodes = null;
     this.dirty = true;
   }
 
@@ -3935,8 +4144,7 @@ class RangeSelection {
     const anchor = this.anchor;
     const focus = this.focus;
     const isBefore = anchor.isBefore(focus);
-    const anchorOffset = anchor.getCharacterOffset();
-    const focusOffset = focus.getCharacterOffset();
+    const [anchorOffset, focusOffset] = getCharacterOffsets(this);
     let textContent = '';
     let prevWasElement = true;
 
@@ -3992,12 +4200,14 @@ class RangeSelection {
     const [anchorPoint, focusPoint] = resolvedSelectionPoints;
     $setPointValues(this.anchor, anchorPoint.key, anchorPoint.offset, anchorPoint.type);
     $setPointValues(this.focus, focusPoint.key, focusPoint.offset, focusPoint.type);
+    this._cachedNodes = null;
   }
 
   clone() {
     const anchor = this.anchor;
     const focus = this.focus;
-    return new RangeSelection($createPoint(anchor.key, anchor.offset, anchor.type), $createPoint(focus.key, focus.offset, focus.type), this.format);
+    const selection = new RangeSelection($createPoint(anchor.key, anchor.offset, anchor.type), $createPoint(focus.key, focus.offset, focus.type), this.format);
+    return selection;
   }
 
   toggleFormat(format) {
@@ -4064,11 +4274,13 @@ class RangeSelection {
     const firstNodeText = firstNode.getTextContent();
     const firstNodeTextLength = firstNodeText.length;
     const firstNodeParent = firstNode.getParentOrThrow();
+    const lastIndex = selectedNodesLength - 1;
+    let lastNode = selectedNodes[lastIndex];
 
     if (this.isCollapsed() && startOffset === firstNodeTextLength && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextAfter() || !firstNodeParent.canInsertTextAfter())) {
       let nextSibling = firstNode.getNextSibling();
 
-      if (!$isTextNode(nextSibling) || $isTokenOrInert(nextSibling) || nextSibling.isSegmented()) {
+      if (!$isTextNode(nextSibling) || $isTokenOrInertOrSegmented(nextSibling)) {
         nextSibling = $createTextNode();
 
         if (!firstNodeParent.canInsertTextAfter()) {
@@ -4088,7 +4300,7 @@ class RangeSelection {
     } else if (this.isCollapsed() && startOffset === 0 && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextBefore() || !firstNodeParent.canInsertTextBefore())) {
       let prevSibling = firstNode.getPreviousSibling();
 
-      if (!$isTextNode(prevSibling) || $isTokenOrInert(prevSibling) || prevSibling.isSegmented()) {
+      if (!$isTextNode(prevSibling) || $isTokenOrInertOrSegmented(prevSibling)) {
         prevSibling = $createTextNode();
 
         if (!firstNodeParent.canInsertTextBefore()) {
@@ -4109,6 +4321,19 @@ class RangeSelection {
       const textNode = $createTextNode(firstNode.getTextContent());
       firstNode.replace(textNode);
       firstNode = textNode;
+    } else if (!this.isCollapsed() && text !== '') {
+      // When the firstNode or lastNode parents are elements that
+      // do not allow text to be inserted before or after, we first
+      // clear the content. Then we normalize selection, then insert
+      // the new content.
+      const lastNodeParent = lastNode.getParent();
+
+      if (!firstNodeParent.canInsertTextBefore() || !firstNodeParent.canInsertTextAfter() || $isElementNode(lastNodeParent) && (!lastNodeParent.canInsertTextBefore() || !lastNodeParent.canInsertTextAfter())) {
+        this.insertText('');
+        normalizeSelectionPointsForBoundaries(this.anchor, this.focus, null);
+        this.insertText(text);
+        return;
+      }
     }
 
     if (selectedNodesLength === 1) {
@@ -4157,11 +4382,24 @@ class RangeSelection {
         this.anchor.offset -= text.length;
       }
     } else {
-      const lastIndex = selectedNodesLength - 1;
-      let lastNode = selectedNodes[lastIndex];
-      const markedNodeKeysForKeep = new Set([...firstNode.getParentKeys(), ...lastNode.getParentKeys()]);
+      const markedNodeKeysForKeep = new Set([...firstNode.getParentKeys(), ...lastNode.getParentKeys()]); // We have to get the parent elements before the next section,
+      // as in that section we might mutate the lastNode.
+
       const firstElement = $isElementNode(firstNode) ? firstNode : firstNode.getParentOrThrow();
-      const lastElement = $isElementNode(lastNode) ? lastNode : lastNode.getParentOrThrow(); // Handle mutations to the last node.
+      let lastElement = $isElementNode(lastNode) ? lastNode : lastNode.getParentOrThrow();
+      let lastElementChild = lastNode; // If the last element is inline, we should instead look at getting
+      // the nodes of its parent, rather than itself. This behavior will
+      // then better match how text node insertions work. We will need to
+      // also update the last element's child accordingly as we do this.
+
+      if (!firstElement.is(lastElement) && lastElement.isInline()) {
+        // Keep traversing till we have a non-inline element parent.
+        do {
+          lastElementChild = lastElement;
+          lastElement = lastElement.getParentOrThrow();
+        } while (lastElement.isInline());
+      } // Handle mutations to the last node.
+
 
       if (endPoint.type === 'text' && (endOffset !== 0 || lastNode.getTextContent() === '') || endPoint.type === 'element' && lastNode.getIndexWithinParent() < endOffset) {
         if ($isTextNode(lastNode) && !$isTokenOrInert(lastNode) && endOffset !== lastNode.getTextContentSize()) {
@@ -4174,7 +4412,13 @@ class RangeSelection {
           lastNode = lastNode.spliceText(0, endOffset, '');
           markedNodeKeysForKeep.add(lastNode.__key);
         } else {
-          lastNode.remove();
+          const lastNodeParent = lastNode.getParentOrThrow();
+
+          if (!lastNodeParent.canBeEmpty() && lastNodeParent.getChildrenSize() === 1) {
+            lastNodeParent.remove();
+          } else {
+            lastNode.remove();
+          }
         }
       } else {
         markedNodeKeysForKeep.add(lastNode.__key);
@@ -4185,48 +4429,50 @@ class RangeSelection {
 
       const lastNodeChildren = lastElement.getChildren();
       const selectedNodesSet = new Set(selectedNodes);
-      const firstAndLastElementsAreEqual = firstElement.is(lastElement); // If the last element is an "inline" element, don't move it's text nodes to the first node.
-      // Instead, preserve the "inline" element's children and append to the first element.
+      const firstAndLastElementsAreEqual = firstElement.is(lastElement); // We choose a target to insert all nodes after. In the case of having
+      // and inline starting parent element with a starting node that has no
+      // siblings, we should insert after the starting parent element, otherwise
+      // we will incorrectly merge into the starting parent element.
+      // TODO: should we keep on traversing parents if we're inside another
+      // nested inline element?
 
-      if (!lastElement.canBeEmpty() && firstElement !== lastElement) {
-        firstElement.append(lastElement);
-      } else {
-        for (let i = lastNodeChildren.length - 1; i >= 0; i--) {
-          const lastNodeChild = lastNodeChildren[i];
+      const insertionTarget = firstElement.isInline() && firstNode.getNextSibling() === null ? firstElement : firstNode;
 
-          if (lastNodeChild.is(firstNode) || $isElementNode(lastNodeChild) && lastNodeChild.isParentOf(firstNode)) {
-            break;
-          }
+      for (let i = lastNodeChildren.length - 1; i >= 0; i--) {
+        const lastNodeChild = lastNodeChildren[i];
 
-          if (lastNodeChild.isAttached()) {
-            if (!selectedNodesSet.has(lastNodeChild) || lastNodeChild.is(lastNode)) {
-              if (!firstAndLastElementsAreEqual) {
-                firstNode.insertAfter(lastNodeChild);
-              }
-            } else {
-              lastNodeChild.remove();
+        if (lastNodeChild.is(firstNode) || $isElementNode(lastNodeChild) && lastNodeChild.isParentOf(firstNode)) {
+          break;
+        }
+
+        if (lastNodeChild.isAttached()) {
+          if (!selectedNodesSet.has(lastNodeChild) || lastNodeChild.is(lastElementChild)) {
+            if (!firstAndLastElementsAreEqual) {
+              insertionTarget.insertAfter(lastNodeChild);
             }
+          } else {
+            lastNodeChild.remove();
           }
         }
+      }
 
-        if (!firstAndLastElementsAreEqual) {
-          // Check if we have already moved out all the nodes of the
-          // last parent, and if so, traverse the parent tree and mark
-          // them all as being able to deleted too.
-          let parent = lastElement;
-          let lastRemovedParent = null;
+      if (!firstAndLastElementsAreEqual) {
+        // Check if we have already moved out all the nodes of the
+        // last parent, and if so, traverse the parent tree and mark
+        // them all as being able to deleted too.
+        let parent = lastElement;
+        let lastRemovedParent = null;
 
-          while (parent !== null) {
-            const children = parent.getChildren();
-            const childrenLength = children.length;
+        while (parent !== null) {
+          const children = parent.getChildren();
+          const childrenLength = children.length;
 
-            if (childrenLength === 0 || children[childrenLength - 1].is(lastRemovedParent)) {
-              markedNodeKeysForKeep.delete(parent.__key);
-              lastRemovedParent = parent;
-            }
-
-            parent = parent.getParent();
+          if (childrenLength === 0 || children[childrenLength - 1].is(lastRemovedParent)) {
+            markedNodeKeysForKeep.delete(parent.__key);
+            lastRemovedParent = parent;
           }
+
+          parent = parent.getParent();
         }
       } // Ensure we do splicing after moving of nodes, as splicing
       // can have side-effects (in the case of hashtags).
@@ -4283,10 +4529,9 @@ class RangeSelection {
 
     const anchor = this.anchor;
     const focus = this.focus;
-    const firstNodeText = firstNode.getTextContent();
-    const firstNodeTextLength = firstNodeText.length;
     const focusOffset = focus.offset;
     let firstNextFormat = 0;
+    let firstNodeTextLength = firstNode.getTextContent().length;
 
     for (let i = 0; i < selectedNodes.length; i++) {
       const selectedNode = selectedNodes[i];
@@ -4306,13 +4551,18 @@ class RangeSelection {
     // first node so we don't want to include it in the formatting change.
 
     if (startOffset === firstNode.getTextContentSize()) {
-      const nextSibling = firstNode.getNextSibling();
+      let nextSibling = firstNode.getNextSibling();
+
+      if ($isElementNode(nextSibling) && nextSibling.isInline()) {
+        nextSibling = nextSibling.getFirstChild();
+      }
 
       if ($isTextNode(nextSibling)) {
         // we basically make the second node the firstNode, changing offsets accordingly
         anchorOffset = 0;
         startOffset = 0;
         firstNode = nextSibling;
+        firstNodeTextLength = nextSibling.getTextContent().length;
         firstNextFormat = firstNode.getFormatFlags(formatType, null);
       }
     } // This is the case where we only selected a single node
@@ -4458,7 +4708,7 @@ class RangeSelection {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
 
-      if ($isElementNode(node)) {
+      if ($isElementNode(node) && !node.isInline()) {
         // -----
         // Heuristics for the replacment or merging of elements
         // -----
@@ -4554,7 +4804,7 @@ class RangeSelection {
 
       didReplaceOrMerge = false;
 
-      if ($isElementNode(target)) {
+      if ($isElementNode(target) && !target.isInline()) {
         lastNodeInserted = node;
 
         if ($isDecoratorNode(node) && node.isTopLevel()) {
@@ -4588,7 +4838,7 @@ class RangeSelection {
             target = target.insertAfter(node);
           }
         }
-      } else if (!$isElementNode(node) || $isDecoratorNode(target) && target.isTopLevel()) {
+      } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && target.isTopLevel()) {
         lastNodeInserted = node;
         target = target.insertAfter(node);
       } else {
@@ -4738,7 +4988,17 @@ class RangeSelection {
     const nodesToMoveLength = nodesToMove.length;
 
     if (anchorOffset === 0 && nodesToMoveLength > 0 && currentElement.isInline()) {
-      currentElement.getParentOrThrow().insertBefore($createParagraphNode());
+      const parent = currentElement.getParentOrThrow();
+      const newElement = parent.insertNewAfter(this);
+
+      if ($isElementNode(newElement)) {
+        const children = parent.getChildren();
+
+        for (let i = 0; i < children.length; i++) {
+          newElement.append(children[i]);
+        }
+      }
+
       return;
     }
 
@@ -4812,6 +5072,10 @@ class RangeSelection {
     }
   }
 
+  getCharacterOffsets() {
+    return getCharacterOffsets(this);
+  }
+
   extract() {
     const selectedNodes = this.getNodes();
     const selectedNodesLength = selectedNodes.length;
@@ -4820,8 +5084,7 @@ class RangeSelection {
     const focus = this.focus;
     let firstNode = selectedNodes[0];
     let lastNode = selectedNodes[lastIndex];
-    const anchorOffset = anchor.getCharacterOffset();
-    const focusOffset = focus.getCharacterOffset();
+    const [anchorOffset, focusOffset] = getCharacterOffsets(this);
 
     if (selectedNodesLength === 0) {
       return [];
@@ -4899,6 +5162,16 @@ class RangeSelection {
           anchor.set(elementKey, offset, 'element');
         }
 
+        return;
+      } else {
+        const siblingKey = sibling.__key;
+        const offset = isBackward ? sibling.getTextContent().length : 0;
+        focus.set(siblingKey, offset, 'text');
+
+        if (collapse) {
+          anchor.set(siblingKey, offset, 'text');
+        }
+
         return;
       }
     }
@@ -4916,7 +5189,8 @@ class RangeSelection {
       const range = domSelection.getRangeAt(0); // Apply the DOM selection to our Lexical selection.
       // $FlowFixMe[incompatible-call]
 
-      this.applyDOMRange(range); // Because a range works on start and end, we might need to flip
+      this.applyDOMRange(range);
+      this.dirty = true; // Because a range works on start and end, we might need to flip
       // the anchor and focus points to match what the DOM has, not what
       // the range has specifically.
 
@@ -5001,6 +5275,29 @@ function $isNodeSelection(x) {
   return x instanceof NodeSelection;
 }
 
+function getCharacterOffset(point) {
+  const offset = point.offset;
+
+  if (point.type === 'text') {
+    return offset;
+  } // $FlowFixMe: cast
+
+
+  const parent = point.getNode();
+  return offset === parent.getChildrenSize() ? parent.getTextContent().length : 0;
+}
+
+function getCharacterOffsets(selection) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+
+  if (anchor.type === 'element' && focus.type === 'element' && anchor.key === focus.key && anchor.offset === focus.offset) {
+    return [0, 0];
+  }
+
+  return [getCharacterOffset(anchor), getCharacterOffset(focus)];
+}
+
 function $swapPoints(selection) {
   const focus = selection.focus;
   const anchor = selection.anchor;
@@ -5009,6 +5306,7 @@ function $swapPoints(selection) {
   const anchorType = anchor.type;
   $setPointValues(anchor, focus.key, focus.offset, focus.type);
   $setPointValues(focus, anchorKey, anchorOffset, anchorType);
+  selection._cachedNodes = null;
 }
 
 function $moveNativeSelection(domSelection, alter, direction, granularity) {
@@ -5048,7 +5346,7 @@ function $updateCaretSelectionForUnicodeCharacter(selection, isBackward) {
 function $removeSegment(node, isBackward, offset) {
   const textNode = node;
   const textContent = textNode.getTextContent();
-  const split = textContent.split(/\s/g);
+  const split = textContent.split(/(?=\s)/g);
   const splitLength = split.length;
   let segmentOffset = 0;
   let restoreOffset = 0;
@@ -5070,7 +5368,7 @@ function $removeSegment(node, isBackward, offset) {
     }
   }
 
-  const nextTextContent = split.join(' ');
+  const nextTextContent = split.join('').trim();
 
   if (nextTextContent === '') {
     textNode.remove();
@@ -5169,6 +5467,78 @@ function internalResolveSelectionPoint(dom, offset, lastPoint) {
   return $createPoint(resolvedNode.__key, resolvedOffset, 'text');
 }
 
+function resolveSelectionPointOnBoundary(point, isBackward, isCollapsed) {
+  const offset = point.offset;
+  const node = point.getNode();
+
+  if (offset === 0) {
+    const prevSibling = node.getPreviousSibling();
+    const parent = node.getParent();
+
+    if (!isBackward) {
+      if ($isElementNode(prevSibling) && !isCollapsed && prevSibling.isInline()) {
+        point.key = prevSibling.__key;
+        point.offset = prevSibling.getChildrenSize(); // $FlowFixMe: intentional
+
+        point.type = 'element';
+      } else if ($isTextNode(prevSibling) && !prevSibling.isInert()) {
+        point.key = prevSibling.__key;
+        point.offset = prevSibling.getTextContent().length;
+      }
+    } else if ((isCollapsed || !isBackward) && prevSibling === null && $isElementNode(parent) && parent.isInline()) {
+      const parentSibling = parent.getPreviousSibling();
+
+      if ($isTextNode(parentSibling)) {
+        point.key = parentSibling.__key;
+        point.offset = parentSibling.getTextContent().length;
+      }
+    }
+  } else if (offset === node.getTextContent().length) {
+    const nextSibling = node.getNextSibling();
+    const parent = node.getParent();
+
+    if (isBackward && $isElementNode(nextSibling) && nextSibling.isInline()) {
+      point.key = nextSibling.__key;
+      point.offset = 0; // $FlowFixMe: intentional
+
+      point.type = 'element';
+    } else if ((isCollapsed || isBackward) && nextSibling === null && $isElementNode(parent) && parent.isInline() && !parent.canInsertTextAfter()) {
+      const parentSibling = parent.getNextSibling();
+
+      if ($isTextNode(parentSibling)) {
+        point.key = parentSibling.__key;
+        point.offset = 0;
+      }
+    }
+  }
+}
+
+function normalizeSelectionPointsForBoundaries(anchor, focus, lastSelection) {
+  if (anchor.type === 'text' && focus.type === 'text') {
+    const isBackward = anchor.isBefore(focus);
+    const isCollapsed = anchor.is(focus); // Attempt to normalize the offset to the previous sibling if we're at the
+    // start of a text node and the sibling is a text node or inline element.
+
+    resolveSelectionPointOnBoundary(anchor, isBackward, isCollapsed);
+    resolveSelectionPointOnBoundary(focus, !isBackward, isCollapsed);
+
+    if (isCollapsed) {
+      focus.key = anchor.key;
+      focus.offset = anchor.offset;
+      focus.type = anchor.type;
+    }
+
+    const editor = getActiveEditor();
+
+    if (editor.isComposing() && editor._compositionKey !== anchor.key && $isRangeSelection(lastSelection)) {
+      const lastAnchor = lastSelection.anchor;
+      const lastFocus = lastSelection.focus;
+      $setPointValues(anchor, lastAnchor.key, lastAnchor.offset, lastAnchor.type);
+      $setPointValues(focus, lastFocus.key, lastFocus.offset, lastFocus.type);
+    }
+  }
+}
+
 function internalResolveSelectionPoints(anchorDOM, anchorOffset, focusDOM, focusOffset, editor, lastSelection) {
   if (anchorDOM === null || focusDOM === null || !isSelectionWithinEditor(editor, anchorDOM, focusDOM)) {
     return null;
@@ -5186,46 +5556,19 @@ function internalResolveSelectionPoints(anchorDOM, anchorOffset, focusDOM, focus
     return null;
   }
 
-  if (resolvedAnchorPoint.type === 'text' && resolvedFocusPoint.type === 'text') {
-    const resolvedAnchorNode = resolvedAnchorPoint.getNode();
-    const resolvedFocusNode = resolvedFocusPoint.getNode(); // Handle normalization of selection when it is at the boundaries.
-
-    const textContentSize = resolvedAnchorNode.getTextContentSize();
-    const resolvedAnchorOffset = resolvedAnchorPoint.offset;
-    const resolvedFocusOffset = resolvedFocusPoint.offset;
-
-    if (resolvedAnchorNode === resolvedFocusNode && resolvedAnchorOffset === resolvedFocusOffset) {
-      if (anchorOffset === 0) {
-        const prevSibling = resolvedAnchorNode.getPreviousSibling();
-
-        if ($isTextNode(prevSibling) && !prevSibling.isInert()) {
-          const offset = prevSibling.getTextContentSize();
-          const key = prevSibling.__key;
-          resolvedAnchorPoint.key = key;
-          resolvedFocusPoint.key = key;
-          resolvedAnchorPoint.offset = offset;
-          resolvedFocusPoint.offset = offset;
-        }
-      }
-    } else {
-      if (resolvedAnchorOffset === textContentSize) {
-        const nextSibling = resolvedAnchorNode.getNextSibling();
+  if (resolvedAnchorPoint.type === 'element' && resolvedFocusPoint.type === 'element') {
+    const anchorNode = getNodeFromDOM(anchorDOM);
+    const focusNode = getNodeFromDOM(focusDOM); // Ensure if we're selecting the content of a decorator that we
+    // return null for this point, as it's not in the controlled scope
+    // of Lexical.
 
-        if ($isTextNode(nextSibling) && !nextSibling.isInert()) {
-          resolvedAnchorPoint.key = nextSibling.__key;
-          resolvedAnchorPoint.offset = 0;
-        }
-      }
+    if ($isDecoratorNode(anchorNode) && $isDecoratorNode(focusNode)) {
+      return null;
     }
+  } // Handle normalization of selection when it is at the boundaries.
 
-    if (editor.isComposing() && editor._compositionKey !== resolvedAnchorPoint.key && $isRangeSelection(lastSelection)) {
-      const lastAnchor = lastSelection.anchor;
-      const lastFocus = lastSelection.focus;
-      $setPointValues(resolvedAnchorPoint, lastAnchor.key, lastAnchor.offset, lastAnchor.type);
-      $setPointValues(resolvedFocusPoint, lastFocus.key, lastFocus.offset, lastFocus.type);
-    }
-  }
 
+  normalizeSelectionPointsForBoundaries(resolvedAnchorPoint, resolvedFocusPoint, lastSelection);
   return [resolvedAnchorPoint, resolvedFocusPoint];
 } // This is used to make a selection when the existing
 // selection is null, i.e. forcing selection on the editor
@@ -5248,7 +5591,9 @@ function $createEmptyObjectSelection() {
   return new NodeSelection(new Set());
 }
 function $createEmptyGridSelection() {
-  return new GridSelection('root', 'root', 'root');
+  const anchor = $createPoint('root', 0, 'element');
+  const focus = $createPoint('root', 0, 'element');
+  return new GridSelection('root', anchor, focus);
 }
 
 function getActiveEventType() {
@@ -5327,7 +5672,7 @@ function internalCreateSelectionFromParse(parsedSelection) {
     } else if (parsedSelection.type === 'node') {
       return new NodeSelection(new Set(parsedSelection.nodes));
     } else if (parsedSelection.type === 'grid') {
-      return new GridSelection(parsedSelection.gridKey, parsedSelection.anchorCellKey, parsedSelection.focusCellKey);
+      return new GridSelection(parsedSelection.gridKey, $createPoint(parsedSelection.anchor.key, parsedSelection.anchor.offset, parsedSelection.anchor.type), $createPoint(parsedSelection.focus.key, parsedSelection.focus.offset, parsedSelection.focus.type));
     }
   }
 
@@ -5669,8 +6014,7 @@ class LexicalNode {
       return false;
     }
 
-    const selectedNodeKeys = new Set(selection.getNodes().map(n => n.__key));
-    const isSelected = selectedNodeKeys.has(this.__key);
+    const isSelected = selection.getNodes().some(n => n.__key === this.__key);
 
     if ($isTextNode(this)) {
       return isSelected;
@@ -6024,11 +6368,6 @@ class LexicalNode {
     const editor = getActiveEditor();
     const dirtyLeaves = editor._dirtyLeaves;
     return dirtyLeaves !== null && dirtyLeaves.has(this.__key);
-  } // TODO remove this and move to TextNode
-
-
-  isComposing() {
-    return this.__key === $getCompositionKey();
   }
 
   getLatest() {
@@ -6054,6 +6393,11 @@ class LexicalNode {
     const latestNode = this.getLatest();
     const parent = latestNode.__parent;
     const cloneNotNeeded = editor._cloneNotNeeded;
+    const selection = $getSelection();
+
+    if (selection !== null) {
+      selection._cachedNodes = null;
+    }
 
     if (cloneNotNeeded.has(key)) {
       // Transforms clear the dirty node set on each iteration to keep track on newly dirty nodes
@@ -6084,34 +6428,29 @@ class LexicalNode {
     nodeMap.set(key, mutableNode); // $FlowFixMe this is LexicalNode
 
     return mutableNode;
-  } // TODO remove this completely
-
+  }
 
   getTextContent(includeInert, includeDirectionless) {
     return '';
-  } // TODO remove this completely
-
+  }
 
   getTextContentSize(includeInert, includeDirectionless) {
     return this.getTextContent(includeInert, includeDirectionless).length;
   } // View
-  // $FlowFixMe: Revise typings for EditorContext
 
 
   createDOM(config, editor) {
     {
       throw Error(`createDOM: base method not extended`);
     }
-  } // $FlowFixMe: Revise typings for EditorContext
-
+  }
 
   updateDOM( // $FlowFixMe: TODO
   prevNode, dom, config) {
     {
       throw Error(`updateDOM: base method not extended`);
     }
-  } // $FlowFixMe: Revise typings for EditorContext
-
+  }
 
   exportDOM(editor) {
     if ($isDecoratorNode(this)) {
@@ -6428,6 +6767,12 @@ class ElementNode extends LexicalNode {
     return dirtyElements !== null && dirtyElements.has(this.__key);
   }
 
+  isLastChild() {
+    const self = this.getLatest();
+    const parent = self.getParentOrThrow();
+    return parent.getLastChild() === self;
+  }
+
   getAllTextNodes(includeInert) {
     const textNodes = [];
     const self = this.getLatest();
@@ -6562,7 +6907,7 @@ class ElementNode extends LexicalNode {
       textContent += child.getTextContent(includeInert, includeDirectionless);
 
       if ($isElementNode(child) && i !== childrenLength - 1 && !child.isInline()) {
-        textContent += '\n\n';
+        textContent += DOUBLE_LINE_BREAK;
       }
     }
 
@@ -6791,6 +7136,10 @@ class ElementNode extends LexicalNode {
     return false;
   }
 
+  canIndent() {
+    return true;
+  }
+
   collapseAtStart(selection) {
     return false;
   }
@@ -6831,6 +7180,10 @@ class ElementNode extends LexicalNode {
     return false;
   }
 
+  extractWithChild(child, selection, destination) {
+    return false;
+  }
+
 }
 function $isElementNode(node) {
   return node instanceof ElementNode;
@@ -7011,8 +7364,16 @@ class EditorState {
         nodes: Array.from(selection._nodes),
         type: 'node'
       } : $isGridSelection(selection) ? {
-        anchorCellKey: selection.anchorCellKey,
-        focusCellKey: selection.focusCellKey,
+        anchor: {
+          key: selection.anchor.key,
+          offset: selection.anchor.offset,
+          type: selection.anchor.type
+        },
+        focus: {
+          key: selection.focus.key,
+          offset: selection.focus.offset,
+          type: selection.focus.type
+        },
         gridKey: selection.gridKey,
         type: 'grid'
       } : null
@@ -7259,6 +7620,10 @@ class TextNode extends LexicalNode {
     return self.__mode === IS_TOKEN;
   }
 
+  isComposing() {
+    return this.__key === $getCompositionKey();
+  }
+
   isSegmented() {
     const self = this.getLatest();
     return self.__mode === IS_SEGMENTED;
@@ -7302,7 +7667,6 @@ class TextNode extends LexicalNode {
     const format = self.__format;
     return toggleTextFormatType(format, type, alignWithFormat);
   } // View
-  // $FlowFixMe: Revise typings for EditorContext
 
 
   createDOM(config) {
@@ -7327,8 +7691,7 @@ class TextNode extends LexicalNode {
     }
 
     return dom;
-  } // $FlowFixMe: Revise typings for EditorContext
-
+  }
 
   updateDOM(prevNode, dom, config) {
     const nextText = this.__text;
@@ -7540,7 +7903,8 @@ class TextNode extends LexicalNode {
     }
 
     const updatedText = text.slice(0, index) + newText + text.slice(index + delCount);
-    return writableSelf.setTextContent(updatedText);
+    writableSelf.__text = updatedText;
+    return writableSelf;
   }
 
   canInsertTextBefore() {
@@ -7705,10 +8069,12 @@ class TextNode extends LexicalNode {
       }
     }
 
-    const newText = isBefore ? target.__text + text : text + target.__text;
+    const targetText = target.__text;
+    const newText = isBefore ? targetText + text : text + targetText;
     this.setTextContent(newText);
+    const writableSelf = this.getWritable();
     target.remove();
-    return this.getLatest();
+    return writableSelf;
   }
 
   isTextEntity() {
@@ -7982,7 +8348,6 @@ function createEditor(editorConfig) {
   const config = editorConfig || {};
   const namespace = config.namespace || createUID();
   const theme = config.theme || {};
-  const context = config.context || {};
   const parentEditor = config.parentEditor || null;
   const disableEvents = config.disableEvents || false;
   const editorState = createEmptyEditorState();
@@ -8004,8 +8369,6 @@ function createEditor(editorConfig) {
 
 
   const editor = new LexicalEditor(editorState, parentEditor, registeredNodes, {
-    // $FlowFixMe: we use our internal type to simpify the generics
-    context,
     disableEvents,
     namespace,
     theme
@@ -8066,6 +8429,7 @@ class LexicalEditor {
     this._onError = onError;
     this._htmlConversions = htmlConversions;
     this._readOnly = false;
+    this._headless = false;
   }
 
   isComposing() {
@@ -8288,8 +8652,8 @@ class LexicalEditor {
     commitPendingUpdates(this);
   }
 
-  parseEditorState(stringifiedEditorState) {
-    const parsedEditorState = JSON.parse(stringifiedEditorState);
+  parseEditorState(maybeStringifiedEditorState) {
+    const parsedEditorState = typeof maybeStringifiedEditorState === 'string' ? JSON.parse(maybeStringifiedEditorState) : maybeStringifiedEditorState;
     return parseEditorState(parsedEditorState, this);
   }
 
@@ -8364,7 +8728,7 @@ class LexicalEditor {
  *
  * 
  */
-const VERSION = '0.2.4';
+const VERSION = '0.2.7';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -8455,6 +8819,7 @@ exports.CUT_COMMAND = CUT_COMMAND;
 exports.DELETE_CHARACTER_COMMAND = DELETE_CHARACTER_COMMAND;
 exports.DELETE_LINE_COMMAND = DELETE_LINE_COMMAND;
 exports.DELETE_WORD_COMMAND = DELETE_WORD_COMMAND;
+exports.DRAGEND_COMMAND = DRAGEND_COMMAND;
 exports.DRAGSTART_COMMAND = DRAGSTART_COMMAND;
 exports.DROP_COMMAND = DROP_COMMAND;
 exports.DecoratorNode = DecoratorNode;
@@ -8478,7 +8843,9 @@ exports.KEY_DELETE_COMMAND = KEY_DELETE_COMMAND;
 exports.KEY_ENTER_COMMAND = KEY_ENTER_COMMAND;
 exports.KEY_ESCAPE_COMMAND = KEY_ESCAPE_COMMAND;
 exports.KEY_MODIFIER_COMMAND = KEY_MODIFIER_COMMAND;
+exports.KEY_SPACE_COMMAND = KEY_SPACE_COMMAND;
 exports.KEY_TAB_COMMAND = KEY_TAB_COMMAND;
+exports.LineBreakNode = LineBreakNode;
 exports.OUTDENT_CONTENT_COMMAND = OUTDENT_CONTENT_COMMAND;
 exports.PASTE_COMMAND = PASTE_COMMAND;
 exports.ParagraphNode = ParagraphNode;