lexical 0.6.4 → 0.6.5

package/Lexical.dev.js

@@ -95,8 +95,8 @@ const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentM
 const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
 const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; // Keep these in case we need to use them in the future.
 // export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
-// export const IS_CHROME: boolean = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
-// export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
+
+const IS_CHROME = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent); // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -133,7 +133,9 @@ const IS_UNMERGEABLE = 1 << 1; // Element node formatting
 const IS_ALIGN_LEFT = 1;
 const IS_ALIGN_CENTER = 2;
 const IS_ALIGN_RIGHT = 3;
-const IS_ALIGN_JUSTIFY = 4; // Reconciliation
+const IS_ALIGN_JUSTIFY = 4;
+const IS_ALIGN_START = 5;
+const IS_ALIGN_END = 6; // Reconciliation
 
 const NON_BREAKING_SPACE = '\u00A0';
 const ZERO_WIDTH_SPACE = '\u200b'; // For iOS/Safari we use a non breaking space, otherwise the cursor appears
@@ -165,15 +167,19 @@ const DETAIL_TYPE_TO_DETAIL = {
 };
 const ELEMENT_TYPE_TO_FORMAT = {
   center: IS_ALIGN_CENTER,
+  end: IS_ALIGN_END,
   justify: IS_ALIGN_JUSTIFY,
   left: IS_ALIGN_LEFT,
-  right: IS_ALIGN_RIGHT
+  right: IS_ALIGN_RIGHT,
+  start: IS_ALIGN_START
 };
 const ELEMENT_FORMAT_TO_TYPE = {
   [IS_ALIGN_CENTER]: 'center',
+  [IS_ALIGN_END]: 'end',
   [IS_ALIGN_JUSTIFY]: 'justify',
   [IS_ALIGN_LEFT]: 'left',
-  [IS_ALIGN_RIGHT]: 'right'
+  [IS_ALIGN_RIGHT]: 'right',
+  [IS_ALIGN_START]: 'start'
 };
 const TEXT_MODE_TO_TYPE = {
   normal: IS_NORMAL,
@@ -455,19 +461,18 @@ const scheduleMicroTask = typeof queueMicrotask === 'function' ? queueMicrotask
 };
 function $isSelectionCapturedInDecorator(node) {
   return $isDecoratorNode($getNearestNodeFromDOMNode(node));
-} // TODO change to $ function
-
+}
 function isSelectionCapturedInDecoratorInput(anchorDOM) {
   const activeElement = document.activeElement;
   const nodeName = activeElement !== null ? activeElement.nodeName : null;
-  return !$isDecoratorNode($getNearestNodeFromDOMNode(anchorDOM)) || nodeName !== 'INPUT' && nodeName !== 'TEXTAREA';
+  return $isDecoratorNode($getNearestNodeFromDOMNode(anchorDOM)) && (nodeName === 'INPUT' || nodeName === 'TEXTAREA');
 }
 function isSelectionWithinEditor(editor, anchorDOM, focusDOM) {
   const rootElement = editor.getRootElement();
 
   try {
     return rootElement !== null && rootElement.contains(anchorDOM) && rootElement.contains(focusDOM) && // Ignore if selection is within nested editor
-    anchorDOM !== null && isSelectionCapturedInDecoratorInput(anchorDOM) && getNearestEditorFromDOMNode(anchorDOM) === editor;
+    anchorDOM !== null && !isSelectionCapturedInDecoratorInput(anchorDOM) && getNearestEditorFromDOMNode(anchorDOM) === editor;
   } catch (error) {
     return false;
   }
@@ -601,6 +606,7 @@ function removeFromParent(writableNode) {
 
     internalMarkSiblingsAsDirty(writableNode);
     children.splice(index, 1);
+    writableNode.__parent = null;
   }
 } // Never use this function directly! It will break
 // the cloning heuristic. Instead use node.getWritable().
@@ -1156,8 +1162,15 @@ function setMutatedNode(mutatedNodes, registeredNodes, mutationListeners, node,
     mutatedNodes.set(klass, mutatedNodesByType);
   }
 
-  if (!mutatedNodesByType.has(nodeKey)) {
-    mutatedNodesByType.set(nodeKey, mutation);
+  const prevMutation = mutatedNodesByType.get(nodeKey); // If the node has already been "destroyed", yet we are
+  // re-making it, then this means a move likely happened.
+  // We should change the mutation to be that of "updated"
+  // instead.
+
+  const isMove = prevMutation === 'destroyed' && mutation === 'created';
+
+  if (prevMutation === undefined || isMove) {
+    mutatedNodesByType.set(nodeKey, isMove ? 'updated' : mutation);
   }
 }
 function $nodesOfType(klass) {
@@ -1424,6 +1437,17 @@ function errorOnInsertTextNodeOnRoot(node, insertNode) {
     }
   }
 }
+function $getNodeByKeyOrThrow(key) {
+  const node = $getNodeByKey(key);
+
+  if (node === null) {
+    {
+      throw Error(`Expected node with key ${key} to exist but it's not in the nodeMap.`);
+    }
+  }
+
+  return node;
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1689,6 +1713,10 @@ function setElementFormat(dom, format) {
     setTextAlign(domStyle, 'right');
   } else if (format === IS_ALIGN_JUSTIFY) {
     setTextAlign(domStyle, 'justify');
+  } else if (format === IS_ALIGN_START) {
+    setTextAlign(domStyle, 'start');
+  } else if (format === IS_ALIGN_END) {
+    setTextAlign(domStyle, 'end');
   }
 }
 
@@ -5523,7 +5551,7 @@ function adjustPointOffsetForMergedSibling(point, isBefore, key, target, textLen
     point.offset -= 1;
   }
 }
-function updateDOMSelection(prevSelection, nextSelection, editor, domSelection, tags, rootElement) {
+function updateDOMSelection(prevSelection, nextSelection, editor, domSelection, tags, rootElement, dirtyLeavesCount) {
   const anchorDOMNode = domSelection.anchorNode;
   const focusDOMNode = domSelection.focusNode;
   const anchorOffset = domSelection.anchorOffset;
@@ -5531,7 +5559,7 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
   const activeElement = document.activeElement; // TODO: make this not hard-coded, and add another config option
   // that makes this configurable.
 
-  if (tags.has('collaboration') && activeElement !== rootElement) {
+  if (tags.has('collaboration') && activeElement !== rootElement || activeElement !== null && isSelectionCapturedInDecoratorInput(activeElement)) {
     return;
   }
 
@@ -5587,7 +5615,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 (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
+    if (activeElement === null || !rootElement.contains(activeElement)) {
       rootElement.focus({
         preventScroll: true
       });
@@ -5596,28 +5624,39 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
     if (anchor.type !== 'element') {
       return;
     }
-  } // Apply the updated selection to the DOM. Note: this will trigger
-  // a "selectionchange" event, although it will be asynchronous.
-
-
-  try {
-    domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset);
-
-    if (!tags.has('skip-scroll-into-view') && nextSelection.isCollapsed() && rootElement !== null && rootElement === activeElement) {
-      const selectionTarget = nextSelection instanceof RangeSelection && nextSelection.anchor.type === 'element' ? nextAnchorNode.childNodes[nextAnchorOffset] || null : domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null;
+  }
 
-      if (selectionTarget !== null) {
-        // @ts-ignore Text nodes do have getBoundingClientRect
-        const selectionRect = selectionTarget.getBoundingClientRect();
-        scrollIntoViewIfNeeded(editor, selectionRect, rootElement);
+  if (!tags.has('skip-scroll-into-view')) // Apply the updated selection to the DOM. Note: this will trigger
+    // a "selectionchange" event, although it will be asynchronous.
+    try {
+      // When updating more than 1000 nodes on Chrome, it's actually better to defer
+      // updating the selection till the next frame. This is because Chrome's
+      // Blink engine has hard limit on how many DOM nodes it can redraw in
+      // a single cycle, so keeping it to the next frame improves performance.
+      // The downside is that is makes the computation within Lexical more
+      // complex, as now, we've sync update the DOM, but selection no longer
+      // matches.
+      if (IS_CHROME && dirtyLeavesCount > 1000) {
+        window.requestAnimationFrame(() => domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset));
+      } else {
+        domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset);
       }
+    } catch (error) {// If we encounter an error, continue. This can sometimes
+      // occur with FF and there's no good reason as to why it
+      // should happen.
     }
 
-    markSelectionChangeFromDOMUpdate();
-  } catch (error) {// If we encounter an error, continue. This can sometimes
-    // occur with FF and there's no good reason as to why it
-    // should happen.
+  if (!tags.has('skip-scroll-into-view') && nextSelection.isCollapsed() && rootElement !== null && rootElement === document.activeElement) {
+    const selectionTarget = nextSelection instanceof RangeSelection && nextSelection.anchor.type === 'element' ? nextAnchorNode.childNodes[nextAnchorOffset] || null : domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null;
+
+    if (selectionTarget !== null) {
+      // @ts-ignore Text nodes do have getBoundingClientRect
+      const selectionRect = selectionTarget.getBoundingClientRect();
+      scrollIntoViewIfNeeded(editor, selectionRect, rootElement);
+    }
   }
+
+  markSelectionChangeFromDOMUpdate();
 }
 function $insertNodes(nodes, selectStart) {
   let selection = $getSelection();
@@ -6018,6 +6057,7 @@ function commitPendingUpdates(editor) {
   const normalizedNodes = editor._normalizedNodes;
   const tags = editor._updateTags;
   const deferred = editor._deferred;
+  const dirtyLeavesCount = dirtyLeaves.size;
 
   if (needsUpdate) {
     editor._dirtyType = NO_DIRTY_NODES;
@@ -6043,7 +6083,7 @@ function commitPendingUpdates(editor) {
     activeEditorState = pendingEditorState;
 
     try {
-      updateDOMSelection(currentSelection, pendingSelection, editor, domSelection, tags, rootElement);
+      updateDOMSelection(currentSelection, pendingSelection, editor, domSelection, tags, rootElement, dirtyLeavesCount);
     } finally {
       activeEditor = previousActiveEditor;
       activeEditorState = previousActiveEditorState;
@@ -6421,10 +6461,9 @@ function removeNode(nodeToRemove, restoreSelection, preserveEmptyParent) {
     }
   }
 
-  internalMarkSiblingsAsDirty(nodeToRemove);
-  parentChildren.splice(index, 1);
   const writableNodeToRemove = nodeToRemove.getWritable();
-  writableNodeToRemove.__parent = null;
+  internalMarkSiblingsAsDirty(nodeToRemove);
+  removeFromParent(writableNodeToRemove);
 
   if ($isRangeSelection(selection) && restoreSelection && !selectionMoved) {
     $updateElementSelectionOnCreateDeleteNode(selection, parent, index, -1);
@@ -6438,17 +6477,6 @@ function removeNode(nodeToRemove, restoreSelection, preserveEmptyParent) {
     parent.selectEnd();
   }
 }
-function $getNodeByKeyOrThrow(key) {
-  const node = $getNodeByKey(key);
-
-  if (node === null) {
-    {
-      throw Error(`Expected node with key ${key} to exist but it's not in the nodeMap.`);
-    }
-  }
-
-  return node;
-}
 class LexicalNode {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   // Flow doesn't support abstract classes unfortunately, so we can't _force_
@@ -6898,9 +6926,14 @@ class LexicalNode {
 
     const mutableNode = constructor.clone(latestNode);
     mutableNode.__parent = parent;
+    mutableNode.__next = latestNode.__next;
+    mutableNode.__prev = latestNode.__prev;
 
     if ($isElementNode(latestNode) && $isElementNode(mutableNode)) {
       mutableNode.__children = Array.from(latestNode.__children);
+      mutableNode.__first = latestNode.__first;
+      mutableNode.__last = latestNode.__last;
+      mutableNode.__size = latestNode.__size;
       mutableNode.__indent = latestNode.__indent;
       mutableNode.__format = latestNode.__format;
       mutableNode.__dir = latestNode.__dir;
@@ -7601,33 +7634,16 @@ class ElementNode extends LexicalNode {
       if ($isRangeSelection(selection)) {
         const nodesToRemoveKeySet = new Set(nodesToRemoveKeys);
         const nodesToInsertKeySet = new Set(nodesToInsertKeys);
-
-        const isPointRemoved = point => {
-          let node = point.getNode();
-
-          while (node) {
-            const nodeKey = node.__key;
-
-            if (nodesToRemoveKeySet.has(nodeKey) && !nodesToInsertKeySet.has(nodeKey)) {
-              return true;
-            }
-
-            node = node.getParent();
-          }
-
-          return false;
-        };
-
         const {
           anchor,
           focus
         } = selection;
 
-        if (isPointRemoved(anchor)) {
+        if (isPointRemoved(anchor, nodesToRemoveKeySet, nodesToInsertKeySet)) {
           moveSelectionPointToSibling(anchor, anchor.getNode(), this, nodeBeforeRange, nodeAfterRange);
         }
 
-        if (isPointRemoved(focus)) {
+        if (isPointRemoved(focus, nodesToRemoveKeySet, nodesToInsertKeySet)) {
           moveSelectionPointToSibling(focus, focus.getNode(), this, nodeBeforeRange, nodeAfterRange);
         } // Unlink removed nodes from current parent
 
@@ -7741,6 +7757,22 @@ function $isElementNode(node) {
   return node instanceof ElementNode;
 }
 
+function isPointRemoved(point, nodesToRemoveKeySet, nodesToInsertKeySet) {
+  let node = point.getNode();
+
+  while (node) {
+    const nodeKey = node.__key;
+
+    if (nodesToRemoveKeySet.has(nodeKey) && !nodesToInsertKeySet.has(nodeKey)) {
+      return true;
+    }
+
+    node = node.getParent();
+  }
+
+  return false;
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -8383,6 +8415,14 @@ class TextNode extends LexicalNode {
         conversion: convertTextFormatElement,
         priority: 0
       }),
+      sub: node => ({
+        conversion: convertTextFormatElement,
+        priority: 0
+      }),
+      sup: node => ({
+        conversion: convertTextFormatElement,
+        priority: 0
+      }),
       u: node => ({
         conversion: convertTextFormatElement,
         priority: 0
@@ -8804,6 +8844,8 @@ const nodeNameToTextFormat = {
   em: 'italic',
   i: 'italic',
   strong: 'bold',
+  sub: 'subscript',
+  sup: 'superscript',
   u: 'underline'
 };
 
@@ -9191,7 +9233,7 @@ class LexicalEditor {
     // Doing so, causes e2e tests around the lock to fail.
 
     this._editable = true;
-    this._headless = false;
+    this._headless = parentEditor !== null && parentEditor._headless;
     this._window = null;
   }
 
@@ -9515,7 +9557,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.6.4';
+const VERSION = '0.6.5';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/Lexical.js.flow

@@ -661,7 +661,14 @@ declare export function $isRootNode(
 /**
  * LexicalElementNode
  */
-export type ElementFormatType = 'left' | 'center' | 'right' | 'justify' | '';
+export type ElementFormatType =
+  | 'left'
+  | 'start'
+  | 'center'
+  | 'right'
+  | 'end'
+  | 'justify'
+  | '';
 declare export class ElementNode extends LexicalNode {
   __children: Array<NodeKey>;
   __format: number;