lexical 0.3.4 → 0.3.7

package/Lexical.dev.js

@@ -148,6 +148,10 @@ const TEXT_TYPE_TO_FORMAT = {
   superscript: IS_SUPERSCRIPT,
   underline: IS_UNDERLINE
 };
+const DETAIL_TYPE_TO_DETAIL = {
+  directionless: IS_DIRECTIONLESS,
+  unmergeable: IS_UNMERGEABLE
+};
 const ELEMENT_TYPE_TO_FORMAT = {
   center: IS_ALIGN_CENTER,
   justify: IS_ALIGN_JUSTIFY,
@@ -200,7 +204,8 @@ function initTextEntryListener() {
 
 function isManagedLineBreak(dom, target, editor) {
   return (// @ts-expect-error: internal field
-    target.__lexicalLineBreak === dom || dom['__lexicalKey_' + editor._key] !== undefined
+    target.__lexicalLineBreak === dom || // @ts-ignore We intentionally add this to the Node.
+    dom[`__lexicalKey_${editor._key}`] !== undefined
   );
 }
 
@@ -222,7 +227,10 @@ function handleTextMutation(target, node, editor) {
   }
 
   const text = target.nodeValue;
-  $updateTextNodeFromDOMContent(node, text, anchorOffset, focusOffset, false);
+
+  if (text !== null) {
+    $updateTextNodeFromDOMContent(node, text, anchorOffset, focusOffset, false);
+  }
 }
 
 function shouldUpdateTextNodeFromMutation(selection, targetDOM, targetNode) {
@@ -245,7 +253,7 @@ function $flushMutations$1(editor, mutations, observer) {
     updateEditor(editor, () => {
       const selection = $getSelection() || getLastSelection(editor);
       const badDOMTargets = new Map();
-      const rootElement = editor.getRootElement(); // We use the current edtior state, as that reflects what is
+      const rootElement = editor.getRootElement(); // We use the current editor state, as that reflects what is
       // actually "on screen".
 
       const currentEditorState = editor._editorState;
@@ -661,8 +669,9 @@ function $getNodeByKey(key, _editorState) {
   return node;
 }
 function getNodeFromDOMNode(dom, editorState) {
-  const editor = getActiveEditor();
-  const key = dom['__lexicalKey_' + editor._key];
+  const editor = getActiveEditor(); // @ts-ignore We intentionally add this to the Node.
+
+  const key = dom[`__lexicalKey_${editor._key}`];
 
   if (key !== undefined) {
     return $getNodeByKey(key, editorState);
@@ -771,7 +780,8 @@ dom, editor) {
   let node = dom;
 
   while (node != null) {
-    const key = node['__lexicalKey_' + editor._key];
+    // @ts-ignore We intentionally add this to the Node.
+    const key = node[`__lexicalKey_${editor._key}`];
 
     if (key !== undefined) {
       return key;
@@ -827,7 +837,9 @@ function $updateSelectedTextFromDOM(editor, isCompositionEnd, data) {
         focusOffset = offset;
       }
 
-      $updateTextNodeFromDOMContent(node, textContent, anchorOffset, focusOffset, isCompositionEnd);
+      if (textContent !== null) {
+        $updateTextNodeFromDOMContent(node, textContent, anchorOffset, focusOffset, isCompositionEnd);
+      }
     }
   }
 }
@@ -897,6 +909,11 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
   }
 }
 
+function $previousSiblingDoesNotAcceptText(node) {
+  const previousSibling = node.getPreviousSibling();
+  return ($isTextNode(previousSibling) || $isElementNode(previousSibling) && previousSibling.isInline()) && !previousSibling.canInsertTextAfter();
+}
+
 function $shouldInsertTextAfterOrBeforeTextNode(selection, node) {
   if (node.isSegmented()) {
     return true;
@@ -909,7 +926,7 @@ function $shouldInsertTextAfterOrBeforeTextNode(selection, node) {
   const offset = selection.anchor.offset;
   const parent = node.getParentOrThrow();
   const isToken = node.isToken();
-  const shouldInsertTextBefore = offset === 0 && (!node.canInsertTextBefore() || !parent.canInsertTextBefore() || isToken);
+  const shouldInsertTextBefore = offset === 0 && (!node.canInsertTextBefore() || !parent.canInsertTextBefore() || isToken || $previousSiblingDoesNotAcceptText(node));
   const shouldInsertTextAfter = node.getTextContentSize() === offset && (!node.canInsertTextBefore() || !parent.canInsertTextBefore() || isToken);
   return shouldInsertTextBefore || shouldInsertTextAfter;
 } // This function is used to determine if Lexical should attempt to override
@@ -1023,6 +1040,8 @@ function isCopy(keyCode, shiftKey, metaKey, ctrlKey) {
   if (keyCode === 67) {
     return IS_APPLE ? metaKey : ctrlKey;
   }
+
+  return false;
 }
 function isCut(keyCode, shiftKey, metaKey, ctrlKey) {
   if (shiftKey) {
@@ -1032,6 +1051,8 @@ function isCut(keyCode, shiftKey, metaKey, ctrlKey) {
   if (keyCode === 88) {
     return IS_APPLE ? metaKey : ctrlKey;
   }
+
+  return false;
 }
 
 function isArrowLeft(keyCode) {
@@ -1137,8 +1158,7 @@ function setMutatedNode(mutatedNodes, registeredNodes, mutationListeners, node,
 }
 function $nodesOfType(klass) {
   const editorState = getActiveEditorState();
-  const readOnly = editorState._readOnly; // @ts-expect-error TODO Replace Class utility type with InstanceType
-
+  const readOnly = editorState._readOnly;
   const klassType = klass.getType();
   const nodes = editorState._nodeMap;
   const nodesOfType = [];
@@ -1658,10 +1678,9 @@ function reconcileBlockDirection(element, dom) {
 
       if (previousDirectionTheme !== undefined) {
         if (typeof previousDirectionTheme === 'string') {
-          const classNamesArr = previousDirectionTheme.split(' '); // @ts-expect-error: intentional
-
+          const classNamesArr = previousDirectionTheme.split(' ');
           previousDirectionTheme = theme[previousDirection] = classNamesArr;
-        } // @ts-expect-error: intentional
+        } // @ts-ignore: intentional
 
 
         classList.remove(...previousDirectionTheme);
@@ -1679,7 +1698,9 @@ function reconcileBlockDirection(element, dom) {
             nextDirectionTheme = theme[direction] = classNamesArr;
           }
 
-          classList.add(...nextDirectionTheme);
+          if (nextDirectionTheme !== undefined) {
+            classList.add(...nextDirectionTheme);
+          }
         } // Update direction
 
 
@@ -2001,20 +2022,30 @@ function reconcileRoot(prevEditorState, nextEditorState, editor, dirtyType, dirt
   // so instead we make it seem that these values are always set.
   // We also want to make sure we clear them down, otherwise we
   // can leak memory.
+  // @ts-ignore
+
+  activeEditor$1 = undefined; // @ts-ignore
+
+  activeEditorNodes = undefined; // @ts-ignore
+
+  activeDirtyElements = undefined; // @ts-ignore
+
+  activeDirtyLeaves = undefined; // @ts-ignore
+
+  activePrevNodeMap = undefined; // @ts-ignore
+
+  activeNextNodeMap = undefined; // @ts-ignore
+
+  activeEditorConfig = undefined; // @ts-ignore
+
+  activePrevKeyToDOMMap = undefined; // @ts-ignore
 
-  activeEditor$1 = undefined;
-  activeEditorNodes = undefined;
-  activeDirtyElements = undefined;
-  activeDirtyLeaves = undefined;
-  activePrevNodeMap = undefined;
-  activeNextNodeMap = undefined;
-  activeEditorConfig = undefined;
-  activePrevKeyToDOMMap = undefined;
   mutatedNodes = undefined;
   return currentMutatedNodes;
 }
 function storeDOMWithKey(key, dom, editor) {
-  const keyToDOMMap = editor._keyToDOMMap;
+  const keyToDOMMap = editor._keyToDOMMap; // @ts-ignore We intentionally add this to the Node.
+
   dom['__lexicalKey_' + editor._key] = key;
   keyToDOMMap.set(key, dom);
 }
@@ -2040,10 +2071,10 @@ function getPrevElementByKeyOrThrow(key) {
  */
 const PASS_THROUGH_COMMAND = Object.freeze({});
 const ANDROID_COMPOSITION_LATENCY = 30;
-const rootElementEvents = [['keydown', onKeyDown], ['compositionstart', onCompositionStart], ['compositionend', onCompositionEnd], ['input', onInput], ['click', onClick], ['cut', PASS_THROUGH_COMMAND], ['copy', PASS_THROUGH_COMMAND], ['dragstart', PASS_THROUGH_COMMAND], ['dragover', PASS_THROUGH_COMMAND], ['paste', PASS_THROUGH_COMMAND], ['focus', PASS_THROUGH_COMMAND], ['blur', PASS_THROUGH_COMMAND], ['drop', PASS_THROUGH_COMMAND]];
+const rootElementEvents = [['keydown', onKeyDown], ['compositionstart', onCompositionStart], ['compositionend', onCompositionEnd], ['input', onInput], ['click', onClick], ['cut', PASS_THROUGH_COMMAND], ['copy', PASS_THROUGH_COMMAND], ['dragstart', PASS_THROUGH_COMMAND], ['dragover', PASS_THROUGH_COMMAND], ['dragend', PASS_THROUGH_COMMAND], ['paste', PASS_THROUGH_COMMAND], ['focus', PASS_THROUGH_COMMAND], ['blur', PASS_THROUGH_COMMAND], ['drop', PASS_THROUGH_COMMAND]];
 
 if (CAN_USE_BEFORE_INPUT) {
-  rootElementEvents.push(['beforeinput', onBeforeInput]);
+  rootElementEvents.push(['beforeinput', (event, editor) => onBeforeInput(event, editor)]);
 }
 
 let lastKeyDownTimeStamp = 0;
@@ -2055,7 +2086,7 @@ 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;
+  return domNode !== null && domNode.nodeValue !== null && domNode.nodeType === DOM_TEXT_TYPE && offset !== 0 && offset !== domNode.nodeValue.length;
 }
 
 function onSelectionChange(domSelection, editor, isActive) {
@@ -2157,15 +2188,19 @@ function onClick(event, editor) {
       const anchor = selection.anchor;
       const anchorNode = anchor.getNode();
 
-      if (anchor.type === 'element' && anchor.offset === 0 && selection.isCollapsed() && !$isRootNode(anchorNode) && $getRoot().getChildrenSize() === 1 && anchorNode.getTopLevelElementOrThrow().isEmpty() && lastSelection !== null && selection.is(lastSelection)) {
+      if (domSelection && anchor.type === 'element' && anchor.offset === 0 && selection.isCollapsed() && !$isRootNode(anchorNode) && $getRoot().getChildrenSize() === 1 && anchorNode.getTopLevelElementOrThrow().isEmpty() && lastSelection !== null && selection.is(lastSelection)) {
         domSelection.removeAllRanges();
         selection.dirty = true;
       }
-    } else if ($isNodeSelection(selection) && domSelection.isCollapsed) {
+    } else if (domSelection && $isNodeSelection(selection) && domSelection.isCollapsed) {
       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
+      // with an image/poll, the nodeType will be ELEMENT_NODE
 
-      if (domAnchor !== null && domAnchor.nodeType === DOM_TEXT_TYPE) {
+      const allowedNodeType = [DOM_ELEMENT_TYPE, DOM_TEXT_TYPE];
+
+      if (domAnchor !== null && allowedNodeType.includes(domAnchor.nodeType)) {
         const newSelection = internalCreateRangeSelection(lastSelection, domSelection, editor);
         $setSelection(newSelection);
       }
@@ -2476,7 +2511,14 @@ function onInput(event, editor) {
         isFirefoxEndingComposition = false;
       }
 
-      dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data); // This ensures consistency on Android.
+      dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
+      const textLength = data.length; // Another hack for FF, as it's possible that the IME is still
+      // open, even though compositionend has already fired (sigh).
+
+      if (IS_FIREFOX && textLength > 1 && event.inputType === 'insertCompositionText' && !editor.isComposing()) {
+        selection.anchor.offset -= textLength;
+      } // This ensures consistency on Android.
+
 
       if (!IS_SAFARI && !IS_IOS && editor.isComposing()) {
         lastKeyDownTimeStamp = 0;
@@ -2486,7 +2528,7 @@ function onInput(event, editor) {
       $updateSelectedTextFromDOM(editor, false); // onInput always fires after onCompositionEnd for FF.
 
       if (isFirefoxEndingComposition) {
-        onCompositionEndImpl(editor, data);
+        onCompositionEndImpl(editor, data || undefined);
         isFirefoxEndingComposition = false;
       }
     } // Also flush any other mutations that might have occurred
@@ -2532,7 +2574,7 @@ function onCompositionEndImpl(editor, data) {
       const node = $getNodeByKey(compositionKey);
       const textNode = getDOMTextNode(editor.getElementByKey(compositionKey));
 
-      if (textNode !== null && $isTextNode(node)) {
+      if (textNode !== null && textNode.nodeValue !== null && $isTextNode(node)) {
         $updateTextNodeFromDOMContent(node, textNode.nodeValue, null, null, true);
       }
 
@@ -2696,6 +2738,11 @@ const activeNestedEditorsMap = new Map();
 
 function onDocumentSelectionChange(event) {
   const selection = getDOMSelection();
+
+  if (!selection) {
+    return;
+  }
+
   const nextActiveEditor = getNearestEditorFromDOMNode(selection.anchorNode);
 
   if (nextActiveEditor === null) {
@@ -2795,7 +2842,7 @@ function removeRootElementEvents(rootElement) {
 
   const editor = rootElement.__lexicalEditor;
 
-  if (editor !== null || editor !== undefined) {
+  if (editor !== null && editor !== undefined) {
     cleanActiveNestedEditorsMap(editor); // @ts-expect-error: internal field
 
     rootElement.__lexicalEditor = null;
@@ -3472,7 +3519,7 @@ class RangeSelection {
     const lastIndex = selectedNodesLength - 1;
     let lastNode = selectedNodes[lastIndex];
 
-    if (this.isCollapsed() && startOffset === firstNodeTextLength && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextAfter() || !firstNodeParent.canInsertTextAfter())) {
+    if (this.isCollapsed() && startOffset === firstNodeTextLength && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextAfter() || !firstNodeParent.canInsertTextAfter() && firstNode.getNextSibling() === null)) {
       let nextSibling = firstNode.getNextSibling();
 
       if (!$isTextNode(nextSibling) || $isTokenOrInertOrSegmented(nextSibling)) {
@@ -3493,7 +3540,7 @@ class RangeSelection {
         this.insertText(text);
         return;
       }
-    } else if (this.isCollapsed() && startOffset === 0 && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextBefore() || !firstNodeParent.canInsertTextBefore())) {
+    } else if (this.isCollapsed() && startOffset === 0 && (firstNode.isSegmented() || firstNode.isToken() || !firstNode.canInsertTextBefore() || !firstNodeParent.canInsertTextBefore() && firstNode.getPreviousSibling() === null)) {
       let prevSibling = firstNode.getPreviousSibling();
 
       if (!$isTextNode(prevSibling) || $isTokenOrInertOrSegmented(prevSibling)) {
@@ -3717,10 +3764,19 @@ class RangeSelection {
   formatText(formatType) {
     // TODO I wonder if this methods use selection.extract() instead?
     const selectedNodes = this.getNodes();
-    const selectedNodesLength = selectedNodes.length;
-    const lastIndex = selectedNodesLength - 1;
-    let firstNode = selectedNodes[0];
-    let lastNode = selectedNodes[lastIndex];
+    const selectedTextNodes = [];
+
+    for (const selectedNode of selectedNodes) {
+      if ($isTextNode(selectedNode)) {
+        selectedTextNodes.push(selectedNode);
+      }
+    }
+
+    const selectedTextNodesLength = selectedTextNodes.length;
+    let firstIndex = 0;
+    const lastIndex = selectedTextNodesLength - 1;
+    let firstNode = selectedTextNodes[0];
+    let lastNode = selectedTextNodes[lastIndex];
 
     if (this.isCollapsed()) {
       this.toggleFormat(formatType); // When changing format, we should stop composition
@@ -3731,42 +3787,22 @@ class RangeSelection {
 
     const anchor = this.anchor;
     const focus = this.focus;
+    const anchorOffset = anchor.offset;
     const focusOffset = focus.offset;
-    let firstNextFormat = 0;
+    let firstNextFormat = firstNode.getFormatFlags(formatType, null);
     let firstNodeTextLength = firstNode.getTextContent().length;
-
-    for (let i = 0; i < selectedNodes.length; i++) {
-      const selectedNode = selectedNodes[i];
-
-      if ($isTextNode(selectedNode)) {
-        firstNextFormat = selectedNode.getFormatFlags(formatType, null);
-        break;
-      }
-    }
-
-    let anchorOffset = anchor.offset;
-    let startOffset;
-    let endOffset;
     const isBefore = anchor.isBefore(focus);
-    startOffset = isBefore ? anchorOffset : focusOffset;
-    endOffset = isBefore ? focusOffset : anchorOffset; // This is the case where the user only selected the very end of the
+    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.
 
-    if (startOffset === firstNode.getTextContentSize()) {
-      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);
-      }
+    if (startOffset === firstNode.getTextContentSize() && selectedTextNodes.length > 1) {
+      const nextNode = selectedTextNodes[1];
+      startOffset = 0;
+      firstIndex = 1;
+      firstNode = nextNode;
+      firstNodeTextLength = nextNode.getTextContentSize();
+      firstNextFormat = nextNode.getFormatFlags(formatType, null);
     } // This is the case where we only selected a single node
 
 
@@ -3777,10 +3813,8 @@ class RangeSelection {
           firstNode.select(startOffset, endOffset);
           this.format = firstNextFormat;
           return;
-        }
+        } // No actual text is selected, so do nothing.
 
-        startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
-        endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset; // No actual text is selected, so do nothing.
 
         if (startOffset === endOffset) {
           return;
@@ -3803,7 +3837,9 @@ class RangeSelection {
       } // multiple nodes selected.
 
     } else {
-      if ($isTextNode(firstNode)) {
+      // 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);
@@ -3829,11 +3865,12 @@ class RangeSelection {
 
           lastNode.setFormat(lastNextFormat);
         }
-      } // deal with all the nodes in between
+      }
 
+      this.format = firstNextFormat | lastNextFormat; // deal with all the nodes in between
 
-      for (let i = 1; i < lastIndex; i++) {
-        const selectedNode = selectedNodes[i];
+      for (let i = firstIndex + 1; i < lastIndex; i++) {
+        const selectedNode = selectedTextNodes[i];
         const selectedNodeKey = selectedNode.__key;
 
         if ($isTextNode(selectedNode) && selectedNodeKey !== firstNode.__key && selectedNodeKey !== lastNode.__key && !selectedNode.isToken()) {
@@ -3905,7 +3942,7 @@ class RangeSelection {
     siblings.push(...nextSiblings);
     const firstNode = nodes[0];
     let didReplaceOrMerge = false;
-    let lastNodeInserted = null; // Time to insert the nodes!
+    let lastNode = null; // Time to insert the nodes!
 
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
@@ -3968,18 +4005,17 @@ class RangeSelection {
 
             if ($isElementNode(target)) {
               for (let s = 0; s < childrenLength; s++) {
-                lastNodeInserted = children[s];
-                target.append(lastNodeInserted);
+                target.append(children[s]);
               }
             } else {
               for (let s = childrenLength - 1; s >= 0; s--) {
-                lastNodeInserted = children[s];
-                target.insertAfter(lastNodeInserted);
+                target.insertAfter(children[s]);
               }
 
               target = target.getParentOrThrow();
             }
 
+            lastNode = children[childrenLength - 1];
             element.remove();
             didReplaceOrMerge = true;
 
@@ -4007,7 +4043,7 @@ class RangeSelection {
       didReplaceOrMerge = false;
 
       if ($isElementNode(target) && !target.isInline()) {
-        lastNodeInserted = node;
+        lastNode = node;
 
         if ($isDecoratorNode(node) && node.isTopLevel()) {
           target = target.insertAfter(node);
@@ -4040,8 +4076,8 @@ class RangeSelection {
             target = target.insertAfter(node);
           }
         }
-      } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && target.isTopLevel()) {
-        lastNodeInserted = node;
+      } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && target.isTopLevel() || $isLineBreakNode(target)) {
+        lastNode = node;
         target = target.insertAfter(node);
       } else {
         target = node.getParentOrThrow(); // Re-try again with the target being the parent
@@ -4070,7 +4106,7 @@ class RangeSelection {
     if ($isElementNode(target)) {
       // If the last node to be inserted was a text node,
       // then we should attempt to move selection to that.
-      const lastChild = $isTextNode(lastNodeInserted) ? lastNodeInserted : target.getLastDescendant();
+      const lastChild = $isTextNode(lastNode) ? lastNode : target.getLastDescendant();
 
       if (!selectStart) {
         // Handle moving selection to end for elements
@@ -4084,18 +4120,26 @@ class RangeSelection {
       }
 
       if (siblings.length !== 0) {
+        const originalTarget = target;
+
         for (let i = siblings.length - 1; i >= 0; i--) {
           const sibling = siblings[i];
           const prevParent = sibling.getParentOrThrow();
 
-          if ($isElementNode(target) && !$isElementNode(sibling)) {
-            target.append(sibling);
+          if ($isElementNode(target) && !$isBlockElementNode(sibling)) {
+            if (originalTarget === target) {
+              target.append(sibling);
+            } else {
+              target.insertBefore(sibling);
+            }
+
             target = sibling;
-          } else if (!$isElementNode(target) && !$isElementNode(sibling)) {
+          } else if (!$isElementNode(target) && !$isBlockElementNode(sibling)) {
             target.insertBefore(sibling);
             target = sibling;
           } else {
             if ($isElementNode(sibling) && !sibling.canInsertAfter(target)) {
+              // @ts-ignore The clone method does exist on the constructor.
               const prevParentClone = prevParent.constructor.clone(prevParent);
 
               if (!$isElementNode(prevParentClone)) {
@@ -4378,13 +4422,18 @@ class RangeSelection {
       }
     }
 
-    const domSelection = getDOMSelection(); // We use the DOM selection.modify API here to "tell" us what the selection
+    const domSelection = getDOMSelection();
+
+    if (!domSelection) {
+      return;
+    } // We use the DOM selection.modify API here to "tell" us what the selection
     // will be. We then use it to update the Lexical selection accordingly. This
     // is much more reliable than waiting for a beforeinput and using the ranges
     // from getTargetRanges(), and is also better than trying to do it ourselves
     // using Intl.Segmenter or other workarounds that struggle with word segments
     // and line segments (especially with word wrapping and non-Roman languages).
 
+
     $moveNativeSelection(domSelection, alter, isBackward ? 'backward' : 'forward', granularity); // Guard against no ranges
 
     if (domSelection.rangeCount > 0) {
@@ -4408,7 +4457,7 @@ class RangeSelection {
       let anchorNode = anchor.getNode();
 
       if (!isBackward && ( // Delete forward handle case
-      anchor.type === 'element' && anchor.offset === anchorNode.getChildrenSize() || anchor.type === 'text' && anchor.offset === anchorNode.getTextContentSize())) {
+      anchor.type === 'element' && $isElementNode(anchorNode) && anchor.offset === anchorNode.getChildrenSize() || anchor.type === 'text' && anchor.offset === anchorNode.getTextContentSize())) {
         const nextSibling = anchorNode.getNextSibling() || anchorNode.getParentOrThrow().getNextSibling();
 
         if ($isElementNode(nextSibling) && !nextSibling.canExtractContents()) {
@@ -4509,6 +4558,8 @@ function $swapPoints(selection) {
 }
 
 function $moveNativeSelection(domSelection, alter, direction, granularity) {
+  // @ts-expect-error Selection.modify() method applies a change to the current selection or cursor position,
+  // but is still non-standard in some browsers.
   domSelection.modify(alter, direction, granularity);
 }
 
@@ -4768,6 +4819,10 @@ function internalResolveSelectionPoints(anchorDOM, anchorOffset, focusDOM, focus
 
   normalizeSelectionPointsForBoundaries(resolvedAnchorPoint, resolvedFocusPoint, lastSelection);
   return [resolvedAnchorPoint, resolvedFocusPoint];
+}
+
+function $isBlockElementNode(node) {
+  return $isElementNode(node) && !node.isInline();
 } // This is used to make a selection when the existing
 // selection is null, i.e. forcing selection on the editor
 // when it current exists outside the editor.
@@ -5116,7 +5171,7 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
   if (anchorOffset === nextAnchorOffset && focusOffset === nextFocusOffset && anchorDOMNode === nextAnchorNode && focusDOMNode === nextFocusNode && // Badly interpreted range selection when collapsed - #1482
   !(domSelection.type === 'Range' && isCollapsed)) {
     // If the root element does not have focus, ensure it has focus
-    if (activeElement === null || !rootElement.contains(activeElement)) {
+    if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
       rootElement.focus({
         preventScroll: true
       });
@@ -5135,7 +5190,7 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
   try {
     domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset);
 
-    if (nextSelection.isCollapsed() && rootElement === activeElement) {
+    if (nextSelection.isCollapsed() && rootElement !== null && rootElement === activeElement) {
       scrollIntoViewIfNeeded(editor, anchor, rootElement, tags);
     }
 
@@ -5317,7 +5372,6 @@ function $applyAllTransforms(editorState, editor) {
 }
 
 function $parseSerializedNode(serializedNode) {
-  // $FlowFixMe: intentional cast to our internal type
   const internalSerializedNode = serializedNode;
   return $parseSerializedNodeImpl(internalSerializedNode, getActiveEditor()._nodes);
 }
@@ -5332,14 +5386,13 @@ function $parseSerializedNodeImpl(serializedNode, registeredNodes) {
     }
   }
 
-  const nodeClass = registeredNode.klass; // @ts-expect-error TODO Replace Class utility type with InstanceType
+  const nodeClass = registeredNode.klass;
 
   if (serializedNode.type !== nodeClass.getType()) {
     {
       throw Error(`LexicalNode: Node ${nodeClass.name} does not implement .importJSON().`);
     }
-  } // @ts-expect-error TODO Replace Class utility type with InstanceType
-
+  }
 
   const node = nodeClass.importJSON(serializedNode);
   const children = serializedNode.children;
@@ -5477,7 +5530,9 @@ function commitPendingUpdates(editor) {
       mutatedNodes = reconcileRoot(currentEditorState, pendingEditorState, editor, dirtyType, dirtyElements, dirtyLeaves);
     } catch (error) {
       // Report errors
-      editor._onError(error); // Reset editor and restore incoming editor state to the DOM
+      if (error instanceof Error) {
+        editor._onError(error);
+      } // Reset editor and restore incoming editor state to the DOM
 
 
       if (!isAttemptingToRecoverFromReconcilerError) {
@@ -5590,16 +5645,17 @@ function triggerTextContentListeners(editor, currentEditorState, pendingEditorSt
 }
 
 function triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes) {
-  const listeners = editor._listeners.mutation;
-  listeners.forEach((klass, listener) => {
+  const listeners = Array.from(editor._listeners.mutation);
+  const listenersLength = listeners.length;
+
+  for (let i = 0; i < listenersLength; i++) {
+    const [listener, klass] = listeners[i];
     const mutatedNodesByType = mutatedNodes.get(klass);
 
-    if (mutatedNodesByType === undefined) {
-      return;
+    if (mutatedNodesByType !== undefined) {
+      listener(mutatedNodesByType);
     }
-
-    listener(mutatedNodesByType);
-  });
+  }
 }
 
 function triggerListeners(type, editor, isCurrentlyEnqueuingUpdates, ...payload) {
@@ -5610,6 +5666,7 @@ function triggerListeners(type, editor, isCurrentlyEnqueuingUpdates, ...payload)
     const listeners = Array.from(editor._listeners[type]);
 
     for (let i = 0; i < listeners.length; i++) {
+      // @ts-ignore
       listeners[i].apply(null, payload);
     }
   } finally {
@@ -5634,11 +5691,14 @@ function triggerCommandListeners(editor, type, payload) {
       const listenerInPriorityOrder = commandListeners.get(type);
 
       if (listenerInPriorityOrder !== undefined) {
-        const listeners = listenerInPriorityOrder[i];
+        const listenersSet = listenerInPriorityOrder[i];
 
-        if (listeners !== undefined) {
-          for (const listener of listeners) {
-            if (listener(payload, editor) === true) {
+        if (listenersSet !== undefined) {
+          const listeners = Array.from(listenersSet);
+          const listenersLength = listeners.length;
+
+          for (let j = 0; j < listenersLength; j++) {
+            if (listeners[j](payload, editor) === true) {
               return true;
             }
           }
@@ -5654,8 +5714,12 @@ function triggerEnqueuedUpdates(editor) {
   const queuedUpdates = editor._updates;
 
   if (queuedUpdates.length !== 0) {
-    const [updateFn, options] = queuedUpdates.shift();
-    beginUpdate(editor, updateFn, options);
+    const queuedUpdate = queuedUpdates.shift();
+
+    if (queuedUpdate) {
+      const [updateFn, options] = queuedUpdate;
+      beginUpdate(editor, updateFn, options);
+    }
   }
 }
 
@@ -5683,28 +5747,32 @@ function processNestedUpdates(editor, initialSkipTransforms) {
   // empty.
 
   while (queuedUpdates.length !== 0) {
-    const [nextUpdateFn, options] = queuedUpdates.shift();
-    let onUpdate;
-    let tag;
+    const queuedUpdate = queuedUpdates.shift();
 
-    if (options !== undefined) {
-      onUpdate = options.onUpdate;
-      tag = options.tag;
+    if (queuedUpdate) {
+      const [nextUpdateFn, options] = queuedUpdate;
+      let onUpdate;
+      let tag;
 
-      if (options.skipTransforms) {
-        skipTransforms = true;
-      }
+      if (options !== undefined) {
+        onUpdate = options.onUpdate;
+        tag = options.tag;
 
-      if (onUpdate) {
-        editor._deferred.push(onUpdate);
-      }
+        if (options.skipTransforms) {
+          skipTransforms = true;
+        }
+
+        if (onUpdate) {
+          editor._deferred.push(onUpdate);
+        }
 
-      if (tag) {
-        editor._updateTags.add(tag);
+        if (tag) {
+          editor._updateTags.add(tag);
+        }
       }
-    }
 
-    nextUpdateFn();
+      nextUpdateFn();
+    }
   }
 
   return skipTransforms;
@@ -5724,7 +5792,7 @@ function beginUpdate(editor, updateFn, options) {
       updateTags.add(tag);
     }
 
-    skipTransforms = options.skipTransforms;
+    skipTransforms = options.skipTransforms || false;
   }
 
   if (onUpdate) {
@@ -5796,7 +5864,9 @@ function beginUpdate(editor, updateFn, options) {
     }
   } catch (error) {
     // Report errors
-    editor._onError(error); // Restore existing editor state to the DOM
+    if (error instanceof Error) {
+      editor._onError(error);
+    } // Restore existing editor state to the DOM
 
 
     editor._pendingEditorState = currentEditorState;
@@ -6158,7 +6228,6 @@ class LexicalNode {
     const b = node.getParents();
 
     if ($isElementNode(this)) {
-      // @ts-expect-error
       a.unshift(this);
     }
 
@@ -6338,7 +6407,7 @@ class LexicalNode {
 
     if (latest === null) {
       {
-        throw Error(`Lexical node does not exist in active edtior state. Avoid using the same node references between nested closures from editor.read/editor.update.`);
+        throw Error(`Lexical node does not exist in active editor state. Avoid using the same node references between nested closures from editor.read/editor.update.`);
       }
     }
 
@@ -6871,8 +6940,12 @@ class ElementNode extends LexicalNode {
   }
 
   hasFormat(type) {
-    const formatFlag = ELEMENT_TYPE_TO_FORMAT[type];
-    return (this.getFormat() & formatFlag) !== 0;
+    if (type !== '') {
+      const formatFlag = ELEMENT_TYPE_TO_FORMAT[type];
+      return (this.getFormat() & formatFlag) !== 0;
+    }
+
+    return false;
   } // Mutators
 
 
@@ -6957,7 +7030,7 @@ class ElementNode extends LexicalNode {
   setFormat(type) {
     errorOnReadOnly();
     const self = this.getWritable();
-    self.__format = ELEMENT_TYPE_TO_FORMAT[type] || 0;
+    self.__format = type !== '' ? ELEMENT_TYPE_TO_FORMAT[type] : 0;
     return this;
   }
 
@@ -7550,20 +7623,24 @@ function setTextContent(nextText, dom, node) {
     dom.textContent = text;
   } else {
     const nodeValue = firstChild.nodeValue;
-    if (nodeValue !== text) if (isComposing || IS_FIREFOX) {
-      // We also use the diff composed text for general text in FF to avoid
-      // the spellcheck red line from flickering.
-      const [index, remove, insert] = diffComposedText(nodeValue, text);
 
-      if (remove !== 0) {
-        // @ts-expect-error
-        firstChild.deleteData(index, remove);
-      } // @ts-expect-error
+    if (nodeValue !== text) {
+      if (isComposing || IS_FIREFOX) {
+        // We also use the diff composed text for general text in FF to avoid
+        // We also use the diff composed text for general text in FF to avoid
+        // the spellcheck red line from flickering.
+        const [index, remove, insert] = diffComposedText(nodeValue, text);
 
+        if (remove !== 0) {
+          // @ts-expect-error
+          firstChild.deleteData(index, remove);
+        } // @ts-expect-error
 
-      firstChild.insertData(index, insert);
-    } else {
-      firstChild.nodeValue = text;
+
+        firstChild.insertData(index, insert);
+      } else {
+        firstChild.nodeValue = text;
+      }
     }
   }
 }
@@ -7816,19 +7893,21 @@ class TextNode extends LexicalNode {
 
   selectionTransform(prevSelection, nextSelection) {
     return;
-  }
+  } // TODO 0.4 This should just be a `string`.
+
 
   setFormat(format) {
     errorOnReadOnly();
     const self = this.getWritable();
-    self.__format = format;
+    self.__format = typeof format === 'string' ? TEXT_TYPE_TO_FORMAT[format] : format;
     return self;
-  }
+  } // TODO 0.4 This should just be a `string`.
+
 
   setDetail(detail) {
     errorOnReadOnly();
     const self = this.getWritable();
-    self.__detail = detail;
+    self.__detail = typeof detail === 'string' ? DETAIL_TYPE_TO_DETAIL[detail] : detail;
     return self;
   }
 
@@ -8118,25 +8197,63 @@ function convertSpanElement(domNode) {
   // domNode is a <span> since we matched it by nodeName
   const span = domNode; // Google Docs uses span tags + font-weight for bold text
 
-  const hasBoldFontWeight = span.style.fontWeight === '700'; // Google Docs uses span tags + text-decoration for strikethrough text
+  const hasBoldFontWeight = span.style.fontWeight === '700'; // Google Docs uses span tags + text-decoration: line-through for strikethrough text
 
   const hasLinethroughTextDecoration = span.style.textDecoration === 'line-through'; // Google Docs uses span tags + font-style for italic text
 
-  const hasItalicFontStyle = span.style.fontStyle === 'italic';
+  const hasItalicFontStyle = span.style.fontStyle === 'italic'; // Google Docs uses span tags + text-decoration: underline for underline text
+
+  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
+
   return {
     forChild: lexicalNode => {
-      if ($isTextNode(lexicalNode) && hasBoldFontWeight) {
+      if (!$isTextNode(lexicalNode)) {
+        return lexicalNode;
+      }
+
+      if (hasBoldFontWeight) {
         lexicalNode.toggleFormat('bold');
       }
 
-      if ($isTextNode(lexicalNode) && hasLinethroughTextDecoration) {
+      if (hasLinethroughTextDecoration) {
         lexicalNode.toggleFormat('strikethrough');
       }
 
-      if ($isTextNode(lexicalNode) && hasItalicFontStyle) {
+      if (hasItalicFontStyle) {
         lexicalNode.toggleFormat('italic');
       }
 
+      if (hasUnderlineTextDecoration) {
+        lexicalNode.toggleFormat('underline');
+      }
+
+      if (verticalAlign === 'sub') {
+        lexicalNode.toggleFormat('subscript');
+      }
+
+      if (verticalAlign === 'super') {
+        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
@@ -8162,9 +8279,9 @@ function convertBringAttentionToElement(domNode) {
 
 function convertTextDOMNode(domNode) {
   const {
-    parentElement,
-    textContent
+    parentElement
   } = domNode;
+  const textContent = domNode.textContent || '';
   const textContentTrim = textContent.trim();
   const isPre = parentElement != null && parentElement.tagName.toLowerCase() === 'pre';
 
@@ -8261,10 +8378,8 @@ class ParagraphNode extends ElementNode {
       element
     } = super.exportDOM(editor);
 
-    if (element) {
-      if (this.getTextContentSize() === 0) {
-        element.append(document.createElement('br'));
-      }
+    if (element && this.isEmpty()) {
+      element.append(document.createElement('br'));
     }
 
     return {
@@ -8388,9 +8503,7 @@ function initializeConversionCache(nodes) {
   const conversionCache = new Map();
   const handledConversions = new Set();
   nodes.forEach(node => {
-    const importDOM = // @ts-expect-error TODO Replace Class utility type with InstanceType
-    node.klass.importDOM != null ? // @ts-expect-error TODO Replace Class utility type with InstanceType
-    node.klass.importDOM.bind(node.klass) : null;
+    const importDOM = node.klass.importDOM != null ? node.klass.importDOM.bind(node.klass) : null;
 
     if (importDOM == null || handledConversions.has(importDOM)) {
       return;
@@ -8458,7 +8571,7 @@ function createEditor(editorConfig) {
           if (proto instanceof DecoratorNode) {
             // eslint-disable-next-line no-prototype-builtins
             if (!proto.hasOwnProperty('decorate')) {
-              console.warn(`${this.constructor.name} must implement "decorate" method`);
+              console.warn(`${proto.constructor.name} must implement "decorate" method`);
             }
           }
 
@@ -8472,8 +8585,7 @@ function createEditor(editorConfig) {
             console.warn(`${name} should implement "exportJSON" method to ensure JSON and default HTML serialization works as expected`);
           }
         }
-      } // @ts-expect-error TODO Replace Class utility type with InstanceType
-
+      }
 
       const type = klass.getType();
       registeredNodes.set(type, {
@@ -8487,7 +8599,7 @@ function createEditor(editorConfig) {
     disableEvents,
     namespace,
     theme
-  }, onError, initializeConversionCache(registeredNodes), isReadOnly);
+  }, onError ? onError : console.error, initializeConversionCache(registeredNodes), isReadOnly);
 
   if (initialEditorState !== undefined) {
     editor._pendingEditorState = initialEditorState;
@@ -8626,7 +8738,6 @@ class LexicalEditor {
   }
 
   registerMutationListener(klass, listener) {
-    // @ts-expect-error TODO Replace Class utility type with InstanceType
     const registeredNode = this._nodes.get(klass.getType());
 
     if (registeredNode === undefined) {
@@ -8643,7 +8754,6 @@ class LexicalEditor {
   }
 
   registerNodeTransform(klass, listener) {
-    // @ts-expect-error TODO Replace Class utility type with InstanceType
     const type = klass.getType();
 
     const registeredNode = this._nodes.get(type);
@@ -8664,8 +8774,7 @@ class LexicalEditor {
 
   hasNodes(nodes) {
     for (let i = 0; i < nodes.length; i++) {
-      const klass = nodes[i]; // @ts-expect-error
-
+      const klass = nodes[i];
       const type = klass.getType();
 
       if (!this._nodes.has(type)) {
@@ -8780,7 +8889,7 @@ class LexicalEditor {
     updateEditor(this, updateFn, options);
   }
 
-  focus(callbackFn) {
+  focus(callbackFn, options = {}) {
     const rootElement = this._rootElement;
 
     if (rootElement !== null) {
@@ -8794,7 +8903,11 @@ class LexicalEditor {
           // Marking the selection dirty will force the selection back to it
           selection.dirty = true;
         } else if (root.getChildrenSize() !== 0) {
-          root.selectEnd();
+          if (options.defaultSelection === 'rootStart') {
+            root.selectStart();
+          } else {
+            root.selectEnd();
+          }
         }
       }, {
         onUpdate: () => {
@@ -8827,8 +8940,10 @@ class LexicalEditor {
   }
 
   setReadOnly(readOnly) {
-    this._readOnly = readOnly;
-    triggerListeners('readonly', this, true, readOnly);
+    if (this._readOnly !== readOnly) {
+      this._readOnly = readOnly;
+      triggerListeners('readonly', this, true, readOnly);
+    }
   }
 
   toJSON() {
@@ -8846,7 +8961,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.3.4';
+const VERSION = '0.3.7';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.