lexical 0.7.6 → 0.7.8

package/Lexical.dev.js

@@ -6,6 +6,8 @@
  */
 'use strict';
 
+var utils = require('@lexical/utils');
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -113,7 +115,8 @@ const IS_UNDERLINE = 1 << 3;
 const IS_CODE = 1 << 4;
 const IS_SUBSCRIPT = 1 << 5;
 const IS_SUPERSCRIPT = 1 << 6;
-const IS_ALL_FORMATTING = IS_BOLD | IS_ITALIC | IS_STRIKETHROUGH | IS_UNDERLINE | IS_CODE | IS_SUBSCRIPT | IS_SUPERSCRIPT; // Text node details
+const IS_HIGHLIGHT = 1 << 7;
+const IS_ALL_FORMATTING = IS_BOLD | IS_ITALIC | IS_STRIKETHROUGH | IS_UNDERLINE | IS_CODE | IS_SUBSCRIPT | IS_SUPERSCRIPT | IS_HIGHLIGHT; // Text node details
 
 const IS_DIRECTIONLESS = 1;
 const IS_UNMERGEABLE = 1 << 1; // Element node formatting
@@ -143,6 +146,7 @@ const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']');
 const TEXT_TYPE_TO_FORMAT = {
   bold: IS_BOLD,
   code: IS_CODE,
+  highlight: IS_HIGHLIGHT,
   italic: IS_ITALIC,
   strikethrough: IS_STRIKETHROUGH,
   subscript: IS_SUBSCRIPT,
@@ -892,7 +896,33 @@ function $updateSelectedTextFromDOM(isCompositionEnd, editor, data) {
     const node = $getNearestNodeFromDOMNode(anchorNode);
 
     if (textContent !== null && $isTextNode(node)) {
-      // Data is intentionally truthy, as we check for boolean, null and empty string.
+      if (node.canContainTabs()) {
+        const hasTabCharacter = textContent.includes('\t'); // At present, this condition is primarily used for code highlights when
+        // grouped together in lines (divs). If a code highlight includes a tab,
+        // the newly typed character may be missing from the DOM's textContent.
+        // Let's take an example. If a LinedCodeNode looked roughly like this:
+        // <code><div><codeHighlight /><codeHighlight /></div></code>,
+        // the following could occur when using tabs:
+        // a. /tconst --type--> 'd' at offset 1 --get--> /tconst
+        //    - Missing 'd'
+        // b. /tconst --type--> 'd' at offset 3 --get--> /tcondst
+        //    --type--> 'd' at offset 3 --get--> /tcondst
+        //    - Missing second 'd'
+        // In these cases, we can fix the problem by manually inserting the
+        // newly typed character where we know it should have been.
+
+        if (data && data.length > 0 && hasTabCharacter) {
+          const selectionOffset = data.length;
+          const insertionOffset = anchorOffset + selectionOffset - 1;
+          const beforeInsertion = textContent.slice(0, insertionOffset);
+          const afterInsertion = textContent.slice(insertionOffset, textContent.length);
+          textContent = `${beforeInsertion}${data}${afterInsertion}`;
+          anchorOffset += selectionOffset;
+          focusOffset += selectionOffset;
+        }
+      } // Data is intentionally truthy, as we check for boolean, null and empty string.
+
+
       if (textContent === COMPOSITION_SUFFIX && data) {
         const offset = data.length;
         textContent = data;
@@ -1873,12 +1903,6 @@ function createNode(key, parentDOM, insertDOM) {
       const endIndex = childrenSize - 1;
       const children = createChildrenArray(node, activeNextNodeMap);
       createChildrenWithDirection(children, endIndex, node, dom);
-
-      if ($textContentRequiresDoubleLinebreakAtEnd(node)) {
-        subTreeTextContent += DOUBLE_LINE_BREAK; // @ts-expect-error: internal field
-
-        dom.__lexicalTextContent = subTreeTextContent;
-      }
     }
 
     const format = node.__format;
@@ -1944,18 +1968,22 @@ function createNode(key, parentDOM, insertDOM) {
 function createChildrenWithDirection(children, endIndex, element, dom) {
   const previousSubTreeDirectionedTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
-  createChildren(children, 0, endIndex, dom, null);
+  createChildren(children, element, 0, endIndex, dom, null);
   reconcileBlockDirection(element, dom);
   subTreeDirectionedTextContent = previousSubTreeDirectionedTextContent;
 }
 
-function createChildren(children, _startIndex, endIndex, dom, insertDOM) {
+function createChildren(children, element, _startIndex, endIndex, dom, insertDOM) {
   const previousSubTreeTextContent = subTreeTextContent;
   subTreeTextContent = '';
   let startIndex = _startIndex;
 
   for (; startIndex <= endIndex; ++startIndex) {
     createNode(children[startIndex], dom, insertDOM);
+  }
+
+  if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
+    subTreeTextContent += DOUBLE_LINE_BREAK;
   } // @ts-expect-error: internal field
 
 
@@ -2106,7 +2134,7 @@ function reconcileChildren(prevElement, nextElement, dom) {
 
     if (prevChildrenSize === 0) {
       if (nextChildrenSize !== 0) {
-        createChildren(nextChildren, 0, nextChildrenSize - 1, dom, null);
+        createChildren(nextChildren, nextElement, 0, nextChildrenSize - 1, dom, null);
       }
     } else if (nextChildrenSize === 0) {
       if (prevChildrenSize !== 0) {
@@ -2121,7 +2149,7 @@ function reconcileChildren(prevElement, nextElement, dom) {
         }
       }
     } else {
-      reconcileNodeChildren(prevChildren, nextChildren, prevChildrenSize, nextChildrenSize, dom);
+      reconcileNodeChildren(nextElement, prevChildren, nextChildren, prevChildrenSize, nextChildrenSize, dom);
     }
   }
 
@@ -2287,7 +2315,7 @@ function getNextSibling(element) {
   return nextSibling;
 }
 
-function reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, dom) {
+function reconcileNodeChildren(nextElement, prevChildren, nextChildren, prevChildrenLength, nextChildrenLength, dom) {
   const prevEndIndex = prevChildrenLength - 1;
   const nextEndIndex = nextChildrenLength - 1;
   let prevChildrenSet;
@@ -2353,7 +2381,7 @@ function reconcileNodeChildren(prevChildren, nextChildren, prevChildrenLength, n
   if (appendNewChildren && !removeOldChildren) {
     const previousNode = nextChildren[nextEndIndex + 1];
     const insertDOM = previousNode === undefined ? null : activeEditor$1.getElementByKey(previousNode);
-    createChildren(nextChildren, nextIndex, nextEndIndex, dom, insertDOM);
+    createChildren(nextChildren, nextElement, nextIndex, nextEndIndex, dom, insertDOM);
   } else if (removeOldChildren && !appendNewChildren) {
     destroyChildren(prevChildren, prevIndex, prevEndIndex, dom);
   }
@@ -2473,7 +2501,7 @@ function $shouldPreventDefaultAndInsertText(selection, text, timeStamp, isBefore
   // 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.
+  lastBeforeInputInsertTextTimeStamp < timeStamp + 50) || anchorNode.isDirty() && 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).
@@ -2914,7 +2942,8 @@ function onInput(event, editor) {
         $setCompositionKey(null);
       }
     } else {
-      $updateSelectedTextFromDOM(false, editor); // onInput always fires after onCompositionEnd for FF.
+      const characterData = data !== null ? data : undefined;
+      $updateSelectedTextFromDOM(false, editor, characterData); // onInput always fires after onCompositionEnd for FF.
 
       if (isFirefoxEndingComposition) {
         onCompositionEndImpl(editor, data || undefined);
@@ -3815,7 +3844,13 @@ class RangeSelection {
     }
 
     if ($isElementNode(lastNode)) {
-      const lastNodeDescendant = lastNode.getDescendantByIndex(focus.offset);
+      let lastNodeDescendant = lastNode.getDescendantByIndex(focus.offset); // We don't want to over-select, as node selection infers the child before
+      // the last descendant, not including that descendant.
+
+      if (lastNodeDescendant !== null && lastNodeDescendant !== firstNode && lastNode.getChildAtIndex(focus.offset) === lastNodeDescendant) {
+        lastNodeDescendant = lastNodeDescendant.getPreviousSibling();
+      }
+
       lastNode = lastNodeDescendant != null ? lastNodeDescendant : lastNode;
     }
 
@@ -3882,7 +3917,9 @@ class RangeSelection {
 
           if (node === firstNode) {
             if (node === lastNode) {
-              text = anchorOffset < focusOffset ? text.slice(anchorOffset, focusOffset) : text.slice(focusOffset, anchorOffset);
+              if (anchor.type !== 'element' || focus.type !== 'element' || focus.offset === anchor.offset) {
+                text = anchorOffset < focusOffset ? text.slice(anchorOffset, focusOffset) : text.slice(focusOffset, anchorOffset);
+              }
             } else {
               text = isBefore ? text.slice(anchorOffset) : text.slice(focusOffset);
             }
@@ -4441,7 +4478,7 @@ class RangeSelection {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
 
-      if (!$isDecoratorNode(target) && $isElementNode(node) && !node.isInline()) {
+      if (!$isRootOrShadowRoot(target) && !$isDecoratorNode(target) && $isElementNode(node) && !node.isInline()) {
         // -----
         // Heuristics for the replacement or merging of elements
         // -----
@@ -4581,8 +4618,27 @@ class RangeSelection {
           }
         }
       } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && !target.isInline()) {
-        lastNode = node;
-        target = target.insertAfter(node, false);
+        lastNode = node; // when pasting top level node in the middle of paragraph
+        // we need to split paragraph instead of placing it inline
+
+        if ($isRangeSelection(this) && $isDecoratorNode(node) && ($isElementNode(target) || $isTextNode(target)) && !node.isInline()) {
+          let splitNode;
+          let splitOffset;
+
+          if ($isTextNode(target)) {
+            splitNode = target.getParentOrThrow();
+            const [textNode] = target.splitText(anchorOffset);
+            splitOffset = textNode.getIndexWithinParent() + 1;
+          } else {
+            splitNode = target;
+            splitOffset = anchorOffset;
+          }
+
+          const [, rightTree] = utils.$splitNode(splitNode, splitOffset);
+          target = rightTree.insertBefore(node);
+        } else {
+          target = target.insertAfter(node, false);
+        }
       } else {
         const nextTarget = target.getParentOrThrow(); // if we're inserting an Element after a LineBreak, we want to move the target to the parent
         // and remove the LineBreak so we don't have empty space.
@@ -5096,7 +5152,16 @@ class RangeSelection {
       }
     }
 
+    const wasCollapsed = this.isCollapsed();
     this.removeText();
+
+    if (isBackward && !wasCollapsed && this.isCollapsed() && this.anchor.type === 'element' && this.anchor.offset === 0) {
+      const anchorNode = this.anchor.getNode();
+
+      if (anchorNode.isEmpty() && $isRootNode(anchorNode.getParent())) {
+        anchorNode.collapseAtStart(this);
+      }
+    }
   }
 
   deleteLine(isBackward) {
@@ -6733,14 +6798,14 @@ class LexicalNode {
     return false;
   }
 
-  isSelected() {
-    const selection = $getSelection();
+  isSelected(selection) {
+    const targetSelection = selection || $getSelection();
 
-    if (selection == null) {
+    if (targetSelection == null) {
       return false;
     }
 
-    const isSelected = selection.getNodes().some(n => n.__key === this.__key);
+    const isSelected = targetSelection.getNodes().some(n => n.__key === this.__key);
 
     if ($isTextNode(this)) {
       return isSelected;
@@ -6748,7 +6813,7 @@ class LexicalNode {
     // Without this change the image will be selected if the cursor is before or after it.
 
 
-    if ($isRangeSelection(selection) && selection.anchor.type === 'element' && selection.focus.type === 'element' && selection.anchor.key === selection.focus.key && selection.anchor.offset === selection.focus.offset) {
+    if ($isRangeSelection(targetSelection) && targetSelection.anchor.type === 'element' && targetSelection.focus.type === 'element' && targetSelection.anchor.key === targetSelection.focus.key && targetSelection.anchor.offset === targetSelection.focus.offset) {
       return false;
     }
 
@@ -7361,6 +7426,14 @@ class LexicalNode {
     return nodeToInsert;
   }
 
+  isParentRequired() {
+    return false;
+  }
+
+  createParentElementNode() {
+    return $createParagraphNode();
+  }
+
   selectPrevious(anchorOffset, focusOffset) {
     errorOnReadOnly();
     const prevSibling = this.getPreviousSibling();
@@ -8369,6 +8442,10 @@ function getElementOuterTag(node, format) {
     return 'code';
   }
 
+  if (format & IS_HIGHLIGHT) {
+    return 'mark';
+  }
+
   if (format & IS_SUBSCRIPT) {
     return 'sub';
   }
@@ -8937,6 +9014,10 @@ class TextNode extends LexicalNode {
     return true;
   }
 
+  canContainTabs() {
+    return false;
+  }
+
   splitText(...splitOffsets) {
     errorOnReadOnly();
     const self = this.getLatest();
@@ -9260,7 +9341,7 @@ class ParagraphNode extends ElementNode {
     return dom;
   }
 
-  updateDOM(prevNode, dom) {
+  updateDOM(prevNode, dom, config) {
     return false;
   }
 
@@ -9356,9 +9437,20 @@ class ParagraphNode extends ElementNode {
 
 }
 
-function convertParagraphElement() {
+function convertParagraphElement(element) {
+  const node = $createParagraphNode();
+
+  if (element.style) {
+    node.setFormat(element.style.textAlign);
+    const indent = parseInt(element.style.textIndent, 10) / 20;
+
+    if (indent > 0) {
+      node.setIndent(indent);
+    }
+  }
+
   return {
-    node: $createParagraphNode()
+    node
   };
 }
 
@@ -10051,3 +10143,4 @@ exports.TextNode = TextNode;
 exports.UNDO_COMMAND = UNDO_COMMAND;
 exports.createCommand = createCommand;
 exports.createEditor = createEditor;
+exports.isSelectionWithinEditor = isSelectionWithinEditor;