lexical 0.12.4 → 0.12.5

package/Lexical.dev.js

@@ -583,16 +583,16 @@ function getDOMTextNode(element) {
 }
 function toggleTextFormatType(format, type, alignWithFormat) {
   const activeFormat = TEXT_TYPE_TO_FORMAT[type];
-  const isStateFlagPresent = format & activeFormat;
-  if (isStateFlagPresent && (alignWithFormat === null || (alignWithFormat & activeFormat) === 0)) {
-    // Remove the state flag.
-    return format ^ activeFormat;
+  if (alignWithFormat !== null && (format & activeFormat) === (alignWithFormat & activeFormat)) {
+    return format;
   }
-  if (alignWithFormat === null || alignWithFormat & activeFormat) {
-    // Add the state flag.
-    return format | activeFormat;
+  let newFormat = format ^ activeFormat;
+  if (type === 'subscript') {
+    newFormat &= ~TEXT_TYPE_TO_FORMAT.superscript;
+  } else if (type === 'superscript') {
+    newFormat &= ~TEXT_TYPE_TO_FORMAT.subscript;
   }
-  return format;
+  return newFormat;
 }
 function $isLeafNode(node) {
   return $isTextNode(node) || $isLineBreakNode(node) || $isDecoratorNode(node);
@@ -816,7 +816,7 @@ function $setSelection(selection) {
       }
     }
     selection.dirty = true;
-    selection._cachedNodes = null;
+    selection.setCachedNodes(null);
   }
   editorState._selection = selection;
 }
@@ -2357,6 +2357,8 @@ function onSelectionChange(domSelection, editor, isActive) {
         const windowEvent = getWindow(editor).event;
         const currentTimeStamp = windowEvent ? windowEvent.timeStamp : performance.now();
         const [lastFormat, lastStyle, lastOffset, lastKey, timeStamp] = collapsedSelectionFormat;
+        const root = $getRoot();
+        const isRootTextContentEmpty = editor.isComposing() === false && root.getTextContent() === '';
         if (currentTimeStamp < timeStamp + 200 && anchor.offset === lastOffset && anchor.key === lastKey) {
           selection.format = lastFormat;
           selection.style = lastStyle;
@@ -2364,7 +2366,7 @@ function onSelectionChange(domSelection, editor, isActive) {
           if (anchor.type === 'text') {
             selection.format = anchorNode.getFormat();
             selection.style = anchorNode.getStyle();
-          } else if (anchor.type === 'element') {
+          } else if (anchor.type === 'element' && !isRootTextContentEmpty) {
             selection.format = 0;
             selection.style = '';
           }
@@ -2521,6 +2523,11 @@ function onBeforeInput(event, editor) {
             selection.format = anchorNode.getFormat();
             selection.style = anchorNode.getStyle();
           }
+          const selectedText = selection.anchor.getNode().getTextContent();
+          if (selectedText.length <= 1) {
+            event.preventDefault();
+            dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
+          }
         } else {
           event.preventDefault();
           dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
@@ -3646,8 +3653,8 @@ class LexicalNode {
     const parent = latestNode.__parent;
     const cloneNotNeeded = editor._cloneNotNeeded;
     const selection = $getSelection();
-    if (selection !== null) {
-      selection._cachedNodes = null;
+    if ($INTERNAL_isPointSelection(selection)) {
+      selection.setCachedNodes(null);
     }
     if (cloneNotNeeded.has(key)) {
       // Transforms clear the dirty node set on each iteration to keep track on newly dirty nodes
@@ -3977,6 +3984,12 @@ class LexicalNode {
   createParentElementNode() {
     return $createParagraphNode();
   }
+  selectStart() {
+    return this.selectPrevious();
+  }
+  selectEnd() {
+    return this.selectNext(0, 0);
+  }
 
   /**
    * Moves selection to the previous sibling of this node, at the specified offsets.
@@ -4047,6 +4060,32 @@ function errorOnTypeKlassMismatch(type, klass) {
   }
 }
 
+/**
+ * Insert a series of nodes after this LexicalNode (as next siblings)
+ *
+ * @param firstToInsert - The first node to insert after this one.
+ * @param lastToInsert - The last node to insert after this one. Must be a
+ * later sibling of FirstNode. If not provided, it will be its last sibling.
+ */
+function insertRangeAfter(node, firstToInsert, lastToInsert) {
+  const lastToInsert2 = lastToInsert || firstToInsert.getParentOrThrow().getLastChild();
+  let current = firstToInsert;
+  const nodesToInsert = [firstToInsert];
+  while (current !== lastToInsert2) {
+    if (!current.getNextSibling()) {
+      {
+        throw Error(`insertRangeAfter: lastToInsert must be a later sibling of firstToInsert`);
+      }
+    }
+    current = current.getNextSibling();
+    nodesToInsert.push(current);
+  }
+  let currentNode = node;
+  for (const nodeToInsert of nodesToInsert) {
+    currentNode = currentNode.insertAfter(nodeToInsert);
+  }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -4635,7 +4674,8 @@ class TextNode extends LexicalNode {
   }
 
   /**
-   * Applies the provided format to this TextNode if it's not present. Removes it if it is present.
+   * Applies the provided format to this TextNode if it's not present. Removes it if it's present.
+   * The subscript and superscript formats are mutually exclusive.
    * Prefer using this method to turn specific formats on and off.
    *
    * @param type - TextFormatType to toggle.
@@ -4643,8 +4683,9 @@ class TextNode extends LexicalNode {
    * @returns this TextNode.
    */
   toggleFormat(type) {
-    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
-    return this.setFormat(this.getFormat() ^ formatFlag);
+    const format = this.getFormat();
+    const newFormat = toggleTextFormatType(format, type, null);
+    return this.setFormat(newFormat);
   }
 
   /**
@@ -4738,6 +4779,13 @@ class TextNode extends LexicalNode {
     }
     return selection;
   }
+  selectStart() {
+    return this.select(0, 0);
+  }
+  selectEnd() {
+    const size = this.getTextContentSize();
+    return this.select(size, size);
+  }
 
   /**
    * Inserts the provided text into this TextNode at the provided offset, deleting the number of characters
@@ -5293,7 +5341,7 @@ class Point {
         $setCompositionKey(key);
       }
       if (selection !== null) {
-        selection._cachedNodes = null;
+        selection.setCachedNodes(null);
         selection.dirty = true;
       }
     }
@@ -5364,12 +5412,68 @@ function $setPointValues(point, key, offset, type) {
   point.offset = offset;
   point.type = type;
 }
+/**
+ * This class is being used only for internal use case of migration GridSelection outside of core package.
+ * DO NOT USE THIS CLASS DIRECTLY.
+ */
+class INTERNAL_PointSelection {
+  constructor(anchor, focus) {
+    this.anchor = anchor;
+    this.focus = focus;
+    anchor._selection = this;
+    focus._selection = this;
+    this._cachedNodes = null;
+    this.dirty = false;
+  }
+  getCachedNodes() {
+    return this._cachedNodes;
+  }
+  setCachedNodes(nodes) {
+    this._cachedNodes = nodes;
+  }
+  is(selection) {
+    if (!$INTERNAL_isPointSelection(selection)) {
+      return false;
+    }
+    return this.anchor.is(selection.anchor) && this.focus.is(selection.focus);
+  }
+  isCollapsed() {
+    return false;
+  }
+  extract() {
+    return this.getNodes();
+  }
+  /**
+   * Returns whether the Selection is "backwards", meaning the focus
+   * logically precedes the anchor in the EditorState.
+   * @returns true if the Selection is backwards, false otherwise.
+   */
+  isBackward() {
+    return this.focus.isBefore(this.anchor);
+  }
+
+  /**
+   * Returns the character-based offsets of the Selection, accounting for non-text Points
+   * by using the children size or text content.
+   *
+   * @returns the character offsets for the Selection
+   */
+  getCharacterOffsets() {
+    return getCharacterOffsets(this);
+  }
+}
 class NodeSelection {
   constructor(objects) {
     this.dirty = false;
     this._nodes = objects;
     this._cachedNodes = null;
   }
+  getCachedNodes() {
+    return this._cachedNodes;
+  }
+  setCachedNodes(nodes) {
+    this._cachedNodes = nodes;
+  }
   is(selection) {
     if (!$isNodeSelection(selection)) {
       return false;
@@ -5456,6 +5560,9 @@ class NodeSelection {
 function $isRangeSelection(x) {
   return x instanceof RangeSelection;
 }
+function $INTERNAL_isPointSelection(x) {
+  return x instanceof INTERNAL_PointSelection;
+}
 function DEPRECATED_$getGridCellNodeRect(GridCellNode) {
   const [CellNode,, GridNode] = DEPRECATED_$getNodeTriplet(GridCellNode);
   const rows = GridNode.getChildren();
@@ -5501,15 +5608,16 @@ function DEPRECATED_$getGridCellNodeRect(GridCellNode) {
   }
   return null;
 }
-class GridSelection {
+class GridSelection extends INTERNAL_PointSelection {
   constructor(gridKey, anchor, focus) {
+    super(anchor, focus);
     this.gridKey = gridKey;
-    this.anchor = anchor;
-    this.focus = focus;
-    this.dirty = false;
-    this._cachedNodes = null;
-    anchor._selection = this;
-    focus._selection = this;
+  }
+  getCachedNodes() {
+    return this._cachedNodes;
+  }
+  setCachedNodes(nodes) {
+    this._cachedNodes = nodes;
   }
   is(selection) {
     if (!DEPRECATED_$isGridSelection(selection)) {
@@ -5530,12 +5638,6 @@ class GridSelection {
   isCollapsed() {
     return false;
   }
-  isBackward() {
-    return this.focus.isBefore(this.anchor);
-  }
-  getCharacterOffsets() {
-    return getCharacterOffsets(this);
-  }
   extract() {
     return this.getNodes();
   }
@@ -5721,16 +5823,17 @@ class GridSelection {
 function DEPRECATED_$isGridSelection(x) {
   return x instanceof GridSelection;
 }
-class RangeSelection {
+class RangeSelection extends INTERNAL_PointSelection {
   constructor(anchor, focus, format, style) {
-    this.anchor = anchor;
-    this.focus = focus;
-    this.dirty = false;
+    super(anchor, focus);
     this.format = format;
     this.style = style;
-    this._cachedNodes = null;
-    anchor._selection = this;
-    focus._selection = this;
+  }
+  getCachedNodes() {
+    return this._cachedNodes;
+  }
+  setCachedNodes(nodes) {
+    this._cachedNodes = nodes;
   }
 
   /**
@@ -5746,15 +5849,6 @@ class RangeSelection {
     return this.anchor.is(selection.anchor) && this.focus.is(selection.focus) && this.format === selection.format && this.style === selection.style;
   }
 
-  /**
-   * Returns whether the Selection is "backwards", meaning the focus
-   * logically precedes the anchor in the EditorState.
-   * @returns true if the Selection is backwards, false otherwise.
-   */
-  isBackward() {
-    return this.focus.isBefore(this.anchor);
-  }
-
   /**
    * Returns whether the Selection is "collapsed", meaning the anchor and focus are
    * the same node and have the same offset.
@@ -6372,53 +6466,59 @@ class RangeSelection {
       return selection.insertNodes(nodes);
     }
     const firstBlock = $getAncestor(this.anchor.getNode(), INTERNAL_$isBlock);
+    const last = nodes[nodes.length - 1];
 
-    // case where we insert inside a code block
+    // CASE 1: insert inside a code block
     if ('__language' in firstBlock) {
       if ('__language' in nodes[0]) {
         this.insertText(nodes[0].getTextContent());
       } else {
         const index = removeTextAndSplitBlock(this);
         firstBlock.splice(index, 0, nodes);
-        const last = nodes[nodes.length - 1];
-        if (last.select) {
-          last.select();
-        } else last.selectNext(0, 0);
+        last.selectEnd();
       }
       return;
     }
+
+    // CASE 2: All elements of the array are inline
     const notInline = node => ($isElementNode(node) || $isDecoratorNode(node)) && !node.isInline();
-    const isMergeable = node => $isElementNode(node) && INTERNAL_$isBlock(node) && !node.isEmpty() && $isElementNode(firstBlock) && (!firstBlock.isEmpty() || !$isRootOrShadowRoot(firstBlock.getParentOrThrow()));
-    const firstNotInline = nodes.find(notInline);
+    if (!nodes.some(notInline)) {
+      const index = removeTextAndSplitBlock(this);
+      firstBlock.splice(index, 0, nodes);
+      last.selectEnd();
+      return;
+    }
+
+    // CASE 3: At least 1 element of the array is not inline
+    const blocksParent = $wrapInlineNodes(nodes);
+    const nodeToSelect = blocksParent.getLastDescendant();
+    const blocks = blocksParent.getChildren();
+    const isLI = node => '__value' in node && '__checked' in node;
+    const isMergeable = node => $isElementNode(node) && INTERNAL_$isBlock(node) && !node.isEmpty() && $isElementNode(firstBlock) && (!firstBlock.isEmpty() || isLI(firstBlock));
     const shouldInsert = !$isElementNode(firstBlock) || !firstBlock.isEmpty();
     const insertedParagraph = shouldInsert ? this.insertParagraph() : null;
-    const last = nodes[nodes.length - 1];
-    const nodeToSelect = $isElementNode(last) ? last.getLastDescendant() || last : last;
-    const nodeToSelectSize = nodeToSelect.getTextContentSize();
-    let currentBlock = firstBlock;
-    for (const node of nodes) {
-      if (node === firstNotInline && isMergeable(node)) {
-        currentBlock.append(...node.getChildren());
-      } else if (notInline(node)) {
-        currentBlock = currentBlock.insertAfter(node);
-      } else {
-        currentBlock.append(node);
-      }
-    }
-    if (insertedParagraph && $isElementNode(currentBlock) && INTERNAL_$isBlock(currentBlock)) {
-      currentBlock.append(...insertedParagraph.getChildren());
+    const lastToInsert = blocks[blocks.length - 1];
+    let firstToInsert = blocks[0];
+    if (isMergeable(firstToInsert)) {
+      firstBlock.append(...firstToInsert.getChildren());
+      firstToInsert = blocks[1];
+    }
+    if (firstToInsert) {
+      insertRangeAfter(firstBlock, firstToInsert);
+    }
+    const lastInsertedBlock = $getAncestor(nodeToSelect, INTERNAL_$isBlock);
+    if (insertedParagraph && $isElementNode(lastInsertedBlock) && (isLI(insertedParagraph) || INTERNAL_$isBlock(lastToInsert))) {
+      lastInsertedBlock.append(...insertedParagraph.getChildren());
       insertedParagraph.remove();
     }
     if ($isElementNode(firstBlock) && firstBlock.isEmpty()) {
       firstBlock.remove();
     }
-    if (!nodeToSelect.select) {
-      nodeToSelect.selectNext(0, 0);
-    } else {
-      nodeToSelect.select(nodeToSelectSize, nodeToSelectSize);
-    }
+    nodeToSelect.selectEnd();
+
+    // To understand this take a look at the test "can wrap post-linebreak nodes into new element"
     const lastChild = $isElementNode(firstBlock) ? firstBlock.getLastChild() : null;
-    if ($isLineBreakNode(lastChild) && currentBlock !== firstBlock) {
+    if ($isLineBreakNode(lastChild) && lastInsertedBlock !== firstBlock) {
       lastChild.remove();
     }
   }
@@ -6464,16 +6564,6 @@ class RangeSelection {
     }
   }
 
-  /**
-   * Returns the character-based offsets of the Selection, accounting for non-text Points
-   * by using the children size or text content.
-   *
-   * @returns the character offsets for the Selection
-   */
-  getCharacterOffsets() {
-    return getCharacterOffsets(this);
-  }
-
   /**
    * Extracts the nodes in the Selection, splitting nodes where necessary
    * to get offset-level precision.
@@ -7060,10 +7150,10 @@ function internalCreateSelection(editor) {
   const currentEditorState = editor.getEditorState();
   const lastSelection = currentEditorState._selection;
   const domSelection = getDOMSelection(editor._window);
-  if ($isNodeSelection(lastSelection) || DEPRECATED_$isGridSelection(lastSelection)) {
-    return lastSelection.clone();
+  if ($isRangeSelection(lastSelection) || lastSelection == null) {
+    return internalCreateRangeSelection(lastSelection, domSelection, editor);
   }
-  return internalCreateRangeSelection(lastSelection, domSelection, editor);
+  return lastSelection.clone();
 }
 function internalCreateRangeSelection(lastSelection, domSelection, editor) {
   const windowObj = editor._window;
@@ -7504,6 +7594,34 @@ function removeTextAndSplitBlock(selection) {
   }
   return pointParent.getIndexWithinParent() + x;
 }
+function $wrapInlineNodes(nodes) {
+  // We temporarily insert the topLevelNodes into an arbitrary ElementNode,
+  // since insertAfter does not work on nodes that have no parent (TO-DO: fix that).
+  const virtualRoot = $createParagraphNode();
+  let currentBlock = null;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const isLineBreakNode = $isLineBreakNode(node);
+    if (isLineBreakNode || $isDecoratorNode(node) && node.isInline() || $isElementNode(node) && node.isInline() || $isTextNode(node) || node.isParentRequired()) {
+      if (currentBlock === null) {
+        currentBlock = node.createParentElementNode();
+        virtualRoot.append(currentBlock);
+        // In the case of LineBreakNode, we just need to
+        // add an empty ParagraphNode to the topLevelBlocks.
+        if (isLineBreakNode) {
+          continue;
+        }
+      }
+      if (currentBlock !== null) {
+        currentBlock.append(node);
+      }
+    } else {
+      virtualRoot.append(node);
+      currentBlock = null;
+    }
+  }
+  return virtualRoot;
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -8180,6 +8298,10 @@ class DecoratorNode extends LexicalNode {
   constructor(key) {
     super(key);
   }
+
+  /**
+   * The returned value is added to the LexicalEditor._decorators
+   */
   decorate(editor, config) {
     {
       throw Error(`decorate: base method not extended`);
@@ -8463,25 +8585,11 @@ class ElementNode extends LexicalNode {
   }
   selectStart() {
     const firstNode = this.getFirstDescendant();
-    if ($isElementNode(firstNode) || $isTextNode(firstNode)) {
-      return firstNode.select(0, 0);
-    }
-    // Decorator or LineBreak
-    if (firstNode !== null) {
-      return firstNode.selectPrevious();
-    }
-    return this.select(0, 0);
+    return firstNode ? firstNode.selectStart() : this.select();
   }
   selectEnd() {
     const lastNode = this.getLastDescendant();
-    if ($isElementNode(lastNode) || $isTextNode(lastNode)) {
-      return lastNode.select();
-    }
-    // Decorator or LineBreak
-    if (lastNode !== null) {
-      return lastNode.selectNext();
-    }
-    return this.select();
+    return lastNode ? lastNode.selectEnd() : this.select();
   }
   clear() {
     const writableSelf = this.getWritable();
@@ -9847,6 +9955,7 @@ function DEPRECATED_$isGridRowNode(node) {
   return node instanceof DEPRECATED_GridRowNode;
 }
 
+exports.$INTERNAL_isPointSelection = $INTERNAL_isPointSelection;
 exports.$addUpdateTag = $addUpdateTag;
 exports.$applyNodeReplacement = $applyNodeReplacement;
 exports.$copyNode = $copyNode;