lexical 0.6.2 → 0.6.4

package/Lexical.dev.js

@@ -826,6 +826,13 @@ function getEditorsToPropagate(editor) {
 function createUID() {
   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 }
+function getAnchorTextFromDOM(anchorNode) {
+  if (anchorNode.nodeType === DOM_TEXT_TYPE) {
+    return anchorNode.nodeValue;
+  }
+
+  return null;
+}
 function $updateSelectedTextFromDOM(isCompositionEnd, data) {
   // Update the text content with the latest composition text
   const domSelection = getDOMSelection();
@@ -840,12 +847,12 @@ function $updateSelectedTextFromDOM(isCompositionEnd, data) {
     focusOffset
   } = domSelection;
 
-  if (anchorNode !== null && anchorNode.nodeType === DOM_TEXT_TYPE) {
+  if (anchorNode !== null) {
+    let textContent = getAnchorTextFromDOM(anchorNode);
     const node = $getNearestNodeFromDOMNode(anchorNode);
 
-    if ($isTextNode(node)) {
-      let textContent = anchorNode.nodeValue; // Data is intentionally truthy, as we check for boolean, null and empty string.
-
+    if (textContent !== null && $isTextNode(node)) {
+      // Data is intentionally truthy, as we check for boolean, null and empty string.
       if (textContent === COMPOSITION_SUFFIX && data) {
         const offset = data.length;
         textContent = data;
@@ -953,33 +960,6 @@ function $shouldInsertTextAfterOrBeforeTextNode(selection, node) {
   } else {
     return false;
   }
-} // This function is used to determine if Lexical should attempt to override
-// the default browser behavior for insertion of text and use its own internal
-// heuristics. This is an extremely important function, and makes much of Lexical
-// work as intended between different browsers and across word, line and character
-// boundary/formats. It also is important for text replacement, node schemas and
-// composition mechanics.
-
-
-function $shouldPreventDefaultAndInsertText(selection, text) {
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const anchorNode = anchor.getNode();
-  const domSelection = getDOMSelection();
-  const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
-  const anchorKey = anchor.key;
-  const backingAnchorElement = getActiveEditor().getElementByKey(anchorKey);
-  const textLength = text.length;
-  return anchorKey !== focus.key || // If we're working with a non-text node.
-  !$isTextNode(anchorNode) || // If we are replacing a range with a single character or grapheme, and not composing.
-  (textLength < 2 || doesContainGrapheme(text)) && anchor.offset !== focus.offset && !anchorNode.isComposing() || // Any non standard text node.
-  $isTokenOrSegmented(anchorNode) || // If the text length is more than a single character and we're either
-  // dealing with this in "beforeinput" or where the node has already recently
-  // been changed (thus is dirty).
-  anchorNode.isDirty() && textLength > 1 || // If the DOM selection element is not the same as the backing node
-  backingAnchorElement !== null && !anchorNode.isComposing() && domAnchorNode !== getDOMTextNode(backingAnchorElement) || // Check if we're changing from bold to italics, or some other format.
-  anchorNode.getFormat() !== selection.format || // One last set of heuristics to check against.
-  $shouldInsertTextAfterOrBeforeTextNode(selection, anchorNode);
 }
 function isTab(keyCode, altKey, ctrlKey, metaKey) {
   return keyCode === 9 && !altKey && !ctrlKey && !metaKey;
@@ -1258,7 +1238,11 @@ function getElementByKeyOrThrow(editor, key) {
 
   return element;
 }
-function scrollIntoViewIfNeeded(editor, selectionRect, rootElement, tags) {
+function getParentElement(element) {
+  const parentElement = element.assignedSlot || element.parentElement;
+  return parentElement !== null && parentElement.nodeType === 11 ? parentElement.host : parentElement;
+}
+function scrollIntoViewIfNeeded(editor, selectionRect, rootElement) {
   const doc = rootElement.ownerDocument;
   const defaultView = doc.defaultView;
 
@@ -1307,7 +1291,11 @@ function scrollIntoViewIfNeeded(editor, selectionRect, rootElement, tags) {
       }
     }
 
-    element = element.parentElement;
+    if (isBodyElement) {
+      break;
+    }
+
+    element = getParentElement(element);
   }
 }
 function $addUpdateTag(tag) {
@@ -1427,6 +1415,15 @@ function $applyNodeReplacement(node) {
 
   return node;
 }
+function errorOnInsertTextNodeOnRoot(node, insertNode) {
+  const parentNode = node.getParent();
+
+  if ($isRootNode(parentNode) && !$isElementNode(insertNode) && !$isDecoratorNode(insertNode)) {
+    {
+      throw Error(`Only element or decorator nodes can be inserted in to the root node`);
+    }
+  }
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1815,7 +1812,7 @@ function createChildren(children, _startIndex, endIndex, dom, insertDOM) {
 function isLastChildLineBreakOrDecorator(children, nodeMap) {
   const childKey = children[children.length - 1];
   const node = nodeMap.get(childKey);
-  return $isLineBreakNode(node) || $isDecoratorNode(node);
+  return $isLineBreakNode(node) || $isDecoratorNode(node) && node.isInline();
 } // If we end an element with a LineBreakNode, then we need to add an additional <br>
 
 
@@ -2267,12 +2264,43 @@ if (CAN_USE_BEFORE_INPUT) {
 
 let lastKeyDownTimeStamp = 0;
 let lastKeyCode = 0;
+let lastBeforeInputInsertTextTimeStamp = 0;
 let rootElementsRegistered = 0;
 let isSelectionChangeFromDOMUpdate = false;
 let isSelectionChangeFromMouseDown = false;
 let isInsertLineBreak = false;
 let isFirefoxEndingComposition = false;
-let collapsedSelectionFormat = [0, 0, 'root', 0];
+let collapsedSelectionFormat = [0, 0, 'root', 0]; // This function is used to determine if Lexical should attempt to override
+// the default browser behavior for insertion of text and use its own internal
+// heuristics. This is an extremely important function, and makes much of Lexical
+// work as intended between different browsers and across word, line and character
+// boundary/formats. It also is important for text replacement, node schemas and
+// composition mechanics.
+
+function $shouldPreventDefaultAndInsertText(selection, text, timeStamp, isBeforeInput) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = anchor.getNode();
+  const domSelection = getDOMSelection();
+  const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
+  const anchorKey = anchor.key;
+  const backingAnchorElement = getActiveEditor().getElementByKey(anchorKey);
+  const textLength = text.length;
+  return anchorKey !== focus.key || // If we're working with a non-text node.
+  !$isTextNode(anchorNode) || // If we are replacing a range with a single character or grapheme, and not composing.
+  (!isBeforeInput && (!CAN_USE_BEFORE_INPUT || // We check to see if there has been
+  // a recent beforeinput event for "textInput". If there has been one in the last
+  // 50ms then we proceed as normal. However, if there is not, then this is likely
+  // a dangling `input` event caused by execCommand('insertText').
+  lastBeforeInputInsertTextTimeStamp < timeStamp + 50) || textLength < 2 || doesContainGrapheme(text)) && anchor.offset !== focus.offset && !anchorNode.isComposing() || // Any non standard text node.
+  $isTokenOrSegmented(anchorNode) || // If the text length is more than a single character and we're either
+  // dealing with this in "beforeinput" or where the node has already recently
+  // been changed (thus is dirty).
+  anchorNode.isDirty() && textLength > 1 || // If the DOM selection element is not the same as the backing node during beforeinput.
+  (isBeforeInput || !CAN_USE_BEFORE_INPUT) && backingAnchorElement !== null && !anchorNode.isComposing() && domAnchorNode !== getDOMTextNode(backingAnchorElement) || // Check if we're changing from bold to italics, or some other format.
+  anchorNode.getFormat() !== selection.format || // One last set of heuristics to check against.
+  $shouldInsertTextAfterOrBeforeTextNode(selection, anchorNode);
+}
 
 function shouldSkipSelectionChange(domNode, offset) {
   return domNode !== null && domNode.nodeValue !== null && domNode.nodeType === DOM_TEXT_TYPE && offset !== 0 && offset !== domNode.nodeValue.length;
@@ -2508,11 +2536,12 @@ function onBeforeInput(event, editor) {
         const text = event.dataTransfer.getData('text/plain');
         event.preventDefault();
         selection.insertRawText(text);
-      } else if (data != null && $shouldPreventDefaultAndInsertText(selection, data)) {
+      } else if (data != null && $shouldPreventDefaultAndInsertText(selection, data, event.timeStamp, true)) {
         event.preventDefault();
         dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
       }
 
+      lastBeforeInputInsertTextTimeStamp = event.timeStamp;
       return;
     } // Prevent the browser from carrying out
     // the input event, so we can control the
@@ -2665,7 +2694,7 @@ function onInput(event, editor) {
     const selection = $getSelection();
     const data = event.data;
 
-    if (data != null && $isRangeSelection(selection) && $shouldPreventDefaultAndInsertText(selection, data)) {
+    if (data != null && $isRangeSelection(selection) && $shouldPreventDefaultAndInsertText(selection, data, event.timeStamp, false)) {
       // 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.
@@ -2674,7 +2703,22 @@ function onInput(event, editor) {
         isFirefoxEndingComposition = false;
       }
 
-      dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      const domSelection = getDOMSelection();
+
+      if (domSelection === null) {
+        return;
+      }
+
+      const offset = anchor.offset; // If the content is the same as inserted, then don't dispatch an insertion.
+      // Given onInput doesn't take the current selection (it uses the previous)
+      // we can compare that against what the DOM currently says.
+
+      if (!CAN_USE_BEFORE_INPUT || selection.isCollapsed() || !$isTextNode(anchorNode) || domSelection.anchorNode === null || anchorNode.getTextContent().slice(0, offset) + data + anchorNode.getTextContent().slice(offset + selection.focus.offset) !== getAnchorTextFromDOM(domSelection.anchorNode)) {
+        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).
 
@@ -2779,11 +2823,6 @@ function onCompositionEnd(event, editor) {
 }
 
 function onKeyDown(event, editor) {
-  if (hasStoppedLexicalPropagation(event)) {
-    return;
-  }
-
-  stopLexicalPropagation(event);
   lastKeyDownTimeStamp = event.timeStamp;
   lastKeyCode = event.keyCode;
 
@@ -2992,10 +3031,22 @@ function addRootElementEvents(rootElement, editor) {
   for (let i = 0; i < rootElementEvents.length; i++) {
     const [eventName, onEvent] = rootElementEvents[i];
     const eventHandler = typeof onEvent === 'function' ? event => {
+      if (hasStoppedLexicalPropagation(event)) {
+        return;
+      }
+
+      stopLexicalPropagation(event);
+
       if (editor.isEditable()) {
         onEvent(event, editor);
       }
     } : event => {
+      if (hasStoppedLexicalPropagation(event)) {
+        return;
+      }
+
+      stopLexicalPropagation(event);
+
       if (editor.isEditable()) {
         switch (eventName) {
           case 'cut':
@@ -3185,6 +3236,7 @@ function selectPointOnNode(point, node) {
     if ($isTextNode(nextSibling)) {
       key = nextSibling.__key;
       offset = 0;
+      type = 'text';
     } else {
       const parentNode = node.getParent();
 
@@ -4260,8 +4312,18 @@ class RangeSelection {
             const childrenLength = children.length;
 
             if ($isElementNode(target)) {
+              let firstChild = target.getFirstChild();
+
               for (let s = 0; s < childrenLength; s++) {
-                target.append(children[s]);
+                const child = children[s];
+
+                if (firstChild === null) {
+                  target.append(child);
+                } else {
+                  firstChild.insertAfter(child);
+                }
+
+                firstChild = child;
               }
             } else {
               for (let s = childrenLength - 1; s >= 0; s--) {
@@ -4376,7 +4438,11 @@ class RangeSelection {
         if (lastChild === null) {
           target.select();
         } else if ($isTextNode(lastChild)) {
-          lastChild.select();
+          if (lastChild.getTextContent() === '') {
+            lastChild.selectPrevious();
+          } else {
+            lastChild.select();
+          }
         } else {
           lastChild.selectNext();
         }
@@ -4389,7 +4455,8 @@ class RangeSelection {
           const sibling = siblings[i];
           const prevParent = sibling.getParentOrThrow();
 
-          if ($isElementNode(target) && !$isBlockElementNode(sibling) && !($isDecoratorNode(sibling) && !sibling.isInline())) {
+          if ($isElementNode(target) && !$isBlockElementNode(sibling) && !($isDecoratorNode(sibling) && ( // Note: We are only looking for decorators that are inline and not isolated.
+          !sibling.isInline() || sibling.isIsolated()))) {
             if (originalTarget === target) {
               target.append(sibling);
             } else {
@@ -4711,7 +4778,8 @@ class RangeSelection {
     if (domSelection.rangeCount > 0) {
       const range = domSelection.getRangeAt(0); // Apply the DOM selection to our Lexical selection.
 
-      const root = $getNearestRootOrShadowRoot(this.anchor.getNode());
+      const anchorNode = this.anchor.getNode();
+      const root = $isRootNode(anchorNode) ? anchorNode : $getNearestRootOrShadowRoot(anchorNode);
       this.applyDOMRange(range);
       this.dirty = true;
 
@@ -4776,6 +4844,24 @@ class RangeSelection {
         if ($isElementNode(nextSibling) && !nextSibling.canExtractContents()) {
           return;
         }
+      } // Handle the deletion around decorators.
+
+
+      const possibleNode = $getDecoratorNode(focus, isBackward);
+
+      if ($isDecoratorNode(possibleNode) && !possibleNode.isIsolated()) {
+        // Make it possible to move selection from range selection to
+        // node selection on the node.
+        if (possibleNode.isKeyboardSelectable() && $isElementNode(anchorNode) && anchorNode.getChildrenSize() === 0) {
+          anchorNode.remove();
+          const nodeSelection = $createNodeSelection();
+          nodeSelection.add(possibleNode.__key);
+          $setSelection(nodeSelection);
+        } else {
+          possibleNode.remove();
+        }
+
+        return;
       }
 
       this.modify('extend', isBackward, 'character');
@@ -6386,6 +6472,8 @@ class LexicalNode {
     // @ts-expect-error
     this.__type = this.constructor.getType();
     this.__parent = null;
+    this.__prev = null;
+    this.__next = null;
     $setNodeKey(this, key);
 
     {
@@ -6889,6 +6977,7 @@ class LexicalNode {
 
   replace(replaceWith) {
     errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, replaceWith);
     const toReplaceKey = this.__key;
     const writableReplaceWith = replaceWith.getWritable();
     removeFromParent(writableReplaceWith);
@@ -6932,6 +7021,7 @@ class LexicalNode {
 
   insertAfter(nodeToInsert) {
     errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, nodeToInsert);
     const writableSelf = this.getWritable();
     const writableNodeToInsert = nodeToInsert.getWritable();
     const oldParent = writableNodeToInsert.getParent();
@@ -6984,6 +7074,8 @@ class LexicalNode {
   }
 
   insertBefore(nodeToInsert) {
+    errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, nodeToInsert);
     const writableSelf = this.getWritable();
     const writableNodeToInsert = nodeToInsert.getWritable();
     removeFromParent(writableNodeToInsert);
@@ -7127,10 +7219,20 @@ class ElementNode extends LexicalNode {
 
   /** @internal */
 
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
   /** @internal */
   constructor(key) {
-    super(key);
+    super(key); // TODO: remove children and switch to using first/last as part of linked list work
+
     this.__children = [];
+    this.__first = null;
+    this.__last = null;
+    this.__size = 0;
     this.__format = 0;
     this.__indent = 0;
     this.__dir = null;
@@ -7745,6 +7847,10 @@ class RootNode extends ElementNode {
     };
   }
 
+  collapseAtStart() {
+    return true;
+  }
+
 }
 function $createRootNode() {
   return new RootNode();
@@ -8349,15 +8455,24 @@ class TextNode extends LexicalNode {
 
   setMode(type) {
     const mode = TEXT_MODE_TO_TYPE[type];
+
+    if (this.__mode === mode) {
+      return this;
+    }
+
     const self = this.getWritable();
     self.__mode = mode;
     return self;
   }
 
   setTextContent(text) {
-    const writableSelf = this.getWritable();
-    writableSelf.__text = text;
-    return writableSelf;
+    if (this.__text === text) {
+      return this;
+    }
+
+    const self = this.getWritable();
+    self.__text = text;
+    return self;
   }
 
   select(_anchorOffset, _focusOffset) {
@@ -9400,7 +9515,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.6.2';
+const VERSION = '0.6.4';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/Lexical.js.flow

@@ -494,7 +494,6 @@ type TextPointType = {
   getNode: () => TextNode,
   set: (key: NodeKey, offset: number, type: 'text' | 'element') => void,
   getCharacterOffset: () => number,
-  isAtNodeEnd: () => boolean,
 };
 export type ElementPoint = ElementPointType;
 type ElementPointType = {
@@ -505,7 +504,6 @@ type ElementPointType = {
   isBefore: (PointType) => boolean,
   getNode: () => ElementNode,
   set: (key: NodeKey, offset: number, type: 'text' | 'element') => void,
-  isAtNodeEnd: () => boolean,
 };
 export type Point = PointType;
 type PointType = TextPointType | ElementPointType;
@@ -629,7 +627,8 @@ declare export class LineBreakNode extends LexicalNode {
   static importJSON(
     serializedLineBreakNode: SerializedLineBreakNode,
   ): LineBreakNode;
-  exportJSON(): SerializedLexicalNode;
+  // $FlowExpectedError[incompatible-extend] 'linebreak' is a literal string
+  exportJSON(): SerializedLineBreakNode;
 }
 declare export function $createLineBreakNode(): LineBreakNode;
 declare export function $isLineBreakNode(
@@ -757,7 +756,8 @@ declare export class ParagraphNode extends ElementNode {
   static importJSON(
     serializedParagraphNode: SerializedParagraphNode,
   ): ParagraphNode;
-  exportJSON(): SerializedElementNode;
+  // $FlowExpectedError[incompatible-extend] 'paragraph' is a literal string
+  exportJSON(): SerializedParagraphNode;
 }
 declare export function $createParagraphNode(): ParagraphNode;
 declare export function $isParagraphNode(