lexical 0.7.1 → 0.7.3

package/Lexical.dev.js

@@ -6,6 +6,8 @@
  */
 'use strict';
 
+var lexical = require('lexical');
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -69,18 +71,6 @@ const KEY_MODIFIER_COMMAND = createCommand('KEY_MODIFIER_COMMAND');
  */
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const getSelection = () => CAN_USE_DOM ? window.getSelection() : null;
-
-var getDOMSelection = getSelection;
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -232,7 +222,7 @@ function getLastSelection(editor) {
 }
 
 function handleTextMutation(target, node, editor) {
-  const domSelection = getDOMSelection();
+  const domSelection = getDOMSelection(editor._window);
   let anchorOffset = null;
   let focusOffset = null;
 
@@ -291,7 +281,7 @@ function $flushMutations$1(editor, mutations, observer) {
           // processed outside of the Lexical engine.
           if (shouldFlushTextMutations && $isTextNode(targetNode) && shouldUpdateTextNodeFromMutation(selection, targetDOM, targetNode)) {
             handleTextMutation( // nodeType === DOM_TEXT_TYPE is a Text DOM node
-            targetDOM, targetNode);
+            targetDOM, targetNode, editor);
           }
         } else if (type === 'childList') {
           shouldRevertSelection = true; // We attempt to "undo" any changes that have occurred outside
@@ -489,7 +479,7 @@ function getNearestEditorFromDOMNode(node) {
       return editor;
     }
 
-    currentNode = currentNode.parentNode;
+    currentNode = getParentElement(currentNode);
   }
 
   return null;
@@ -750,7 +740,7 @@ function $getNearestNodeFromDOMNode(startingDOM, editorState) {
       return node;
     }
 
-    dom = dom.parentNode;
+    dom = getParentElement(dom);
   }
 
   return null;
@@ -794,6 +784,7 @@ function internalGetRoot(editorState) {
   return editorState._nodeMap.get('root');
 }
 function $setSelection(selection) {
+  errorOnReadOnly();
   const editorState = getActiveEditorState();
 
   if (selection !== null) {
@@ -848,7 +839,7 @@ dom, editor) {
       return key;
     }
 
-    node = node.parentNode;
+    node = getParentElement(node);
   }
 
   return null;
@@ -878,9 +869,9 @@ function getAnchorTextFromDOM(anchorNode) {
 
   return null;
 }
-function $updateSelectedTextFromDOM(isCompositionEnd, data) {
+function $updateSelectedTextFromDOM(isCompositionEnd, editor, data) {
   // Update the text content with the latest composition text
-  const domSelection = getDOMSelection();
+  const domSelection = getDOMSelection(editor._window);
 
   if (domSelection === null) {
     return;
@@ -1290,8 +1281,8 @@ function getElementByKeyOrThrow(editor, key) {
 
   return element;
 }
-function getParentElement(element) {
-  const parentElement = element.assignedSlot || element.parentElement;
+function getParentElement(node) {
+  const parentElement = node.assignedSlot || node.parentElement;
   return parentElement !== null && parentElement.nodeType === 11 ? parentElement.host : parentElement;
 }
 function scrollIntoViewIfNeeded(editor, selectionRect, rootElement) {
@@ -1566,6 +1557,9 @@ function updateDOMBlockCursorElement(editor, rootElement, nextSelection) {
     removeDOMBlockCursorElement(blockCursorElement, editor, rootElement);
   }
 }
+function getDOMSelection(targetWindow) {
+  return !CAN_USE_DOM ? null : (targetWindow || window).getSelection();
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -2430,7 +2424,7 @@ function getPrevElementByKeyOrThrow(key) {
  */
 const PASS_THROUGH_COMMAND = Object.freeze({});
 const ANDROID_COMPOSITION_LATENCY = 30;
-const rootElementEvents = [['keydown', onKeyDown], ['mousedown', onMouseDown], ['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]];
+const rootElementEvents = [['keydown', onKeyDown], ['pointerdown', onPointerDown], ['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', (event, editor) => onBeforeInput(event, editor)]);
@@ -2455,10 +2449,11 @@ function $shouldPreventDefaultAndInsertText(selection, text, timeStamp, isBefore
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = anchor.getNode();
-  const domSelection = getDOMSelection();
+  const editor = getActiveEditor();
+  const domSelection = getDOMSelection(editor._window);
   const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
   const anchorKey = anchor.key;
-  const backingAnchorElement = getActiveEditor().getElementByKey(anchorKey);
+  const backingAnchorElement = editor.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.
@@ -2578,7 +2573,7 @@ function onSelectionChange(domSelection, editor, isActive) {
 function onClick(event, editor) {
   updateEditor(editor, () => {
     const selection = $getSelection();
-    const domSelection = getDOMSelection();
+    const domSelection = getDOMSelection(editor._window);
     const lastSelection = $getPreviousSelection();
 
     if ($isRangeSelection(selection)) {
@@ -2595,11 +2590,12 @@ function onClick(event, editor) {
   });
 }
 
-function onMouseDown(event, editor) {
+function onPointerDown(event, editor) {
   // TODO implement text drag & drop
   const target = event.target;
+  const pointerType = event.pointerType;
 
-  if (target instanceof Node) {
+  if (target instanceof Node && pointerType !== 'touch') {
     updateEditor(editor, () => {
       // Drag & drop should not recompute selection until mouse up; otherwise the initially
       // selected content is lost.
@@ -2879,7 +2875,7 @@ function onInput(event, editor) {
 
       const anchor = selection.anchor;
       const anchorNode = anchor.getNode();
-      const domSelection = getDOMSelection();
+      const domSelection = getDOMSelection(editor._window);
 
       if (domSelection === null) {
         return;
@@ -2906,7 +2902,7 @@ function onInput(event, editor) {
         $setCompositionKey(null);
       }
     } else {
-      $updateSelectedTextFromDOM(false); // onInput always fires after onCompositionEnd for FF.
+      $updateSelectedTextFromDOM(false, editor); // onInput always fires after onCompositionEnd for FF.
 
       if (isFirefoxEndingComposition) {
         onCompositionEndImpl(editor, data || undefined);
@@ -2978,7 +2974,7 @@ function onCompositionEndImpl(editor, data) {
     }
   }
 
-  $updateSelectedTextFromDOM(true, data);
+  $updateSelectedTextFromDOM(true, editor, data);
 }
 
 function onCompositionEnd(event, editor) {
@@ -3118,7 +3114,9 @@ function getRootElementRemoveHandles(rootElement) {
 const activeNestedEditorsMap = new Map();
 
 function onDocumentSelectionChange(event) {
-  const domSelection = getDOMSelection();
+  const target = event.target;
+  const targetWindow = target == null ? null : target.nodeType === 9 ? target.defaultView : target.ownerDocument.defaultView;
+  const domSelection = getDOMSelection(targetWindow);
 
   if (domSelection === null) {
     return;
@@ -4115,7 +4113,7 @@ class RangeSelection {
         if ($isTextNode(lastNode) && !lastNode.isToken() && endOffset !== lastNode.getTextContentSize()) {
           if (lastNode.isSegmented()) {
             const textNode = $createTextNode(lastNode.getTextContent());
-            lastNode.replace(textNode, false);
+            lastNode.replace(textNode);
             lastNode = textNode;
           }
 
@@ -4203,7 +4201,7 @@ class RangeSelection {
       } else {
         const textNode = $createTextNode(text);
         textNode.select();
-        firstNode.replace(textNode, false);
+        firstNode.replace(textNode);
       } // Remove all selected nodes that haven't already been removed.
 
 
@@ -4937,13 +4935,13 @@ class RangeSelection {
       }
     }
 
-    const domSelection = getDOMSelection();
+    const editor = getActiveEditor();
+    const domSelection = getDOMSelection(editor._window);
 
     if (!domSelection) {
       return;
     }
 
-    const editor = getActiveEditor();
     const blockCursorElement = editor._blockCursorElement;
     const rootElement = editor._rootElement; // Remove the block cursor element if it exists. This will ensure selection
     // works as intended. If we leave it in the DOM all sorts of strange bugs
@@ -5025,7 +5023,8 @@ class RangeSelection {
 
       if (!isBackward && ( // Delete forward handle case
       anchor.type === 'element' && $isElementNode(anchorNode) && anchor.offset === anchorNode.getChildrenSize() || anchor.type === 'text' && anchor.offset === anchorNode.getTextContentSize())) {
-        const nextSibling = anchorNode.getNextSibling() || anchorNode.getParentOrThrow().getNextSibling();
+        const parent = anchorNode.getParent();
+        const nextSibling = anchorNode.getNextSibling() || (parent === null ? null : parent.getNextSibling());
 
         if ($isElementNode(nextSibling) && !nextSibling.canExtractContents()) {
           return;
@@ -5456,7 +5455,7 @@ function DEPRECATED_$createGridSelection() {
 function internalCreateSelection(editor) {
   const currentEditorState = editor.getEditorState();
   const lastSelection = currentEditorState._selection;
-  const domSelection = getDOMSelection();
+  const domSelection = getDOMSelection(editor._window);
 
   if ($isNodeSelection(lastSelection) || DEPRECATED_$isGridSelection(lastSelection)) {
     return lastSelection.clone();
@@ -5718,7 +5717,7 @@ function adjustPointOffsetForMergedSibling(point, isBefore, key, target, textLen
     point.offset -= 1;
   }
 }
-function updateDOMSelection(prevSelection, nextSelection, editor, domSelection, tags, rootElement, dirtyLeavesCount) {
+function updateDOMSelection(prevSelection, nextSelection, editor, domSelection, tags, rootElement, nodeCount) {
   const anchorDOMNode = domSelection.anchorNode;
   const focusDOMNode = domSelection.focusNode;
   const anchorOffset = domSelection.anchorOffset;
@@ -5803,7 +5802,7 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
       // 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) {
+      if (IS_CHROME && nodeCount > 1000) {
         window.requestAnimationFrame(() => domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset));
       } else {
         domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset);
@@ -5862,7 +5861,7 @@ const observerOptions = {
   subtree: true
 };
 function isCurrentlyReadOnlyMode() {
-  return isReadOnlyMode;
+  return isReadOnlyMode || activeEditorState !== null && activeEditorState._readOnly;
 }
 function errorOnReadOnly() {
   if (isReadOnlyMode) {
@@ -5896,6 +5895,9 @@ function getActiveEditor() {
 
   return activeEditor;
 }
+function internalGetActiveEditor() {
+  return activeEditor;
+}
 function $applyTransforms(editor, node, transformsCache) {
   const type = node.__type;
   const registeredNode = getRegisteredNodeOrThrow(editor, type);
@@ -6225,7 +6227,7 @@ function commitPendingUpdates(editor) {
   const normalizedNodes = editor._normalizedNodes;
   const tags = editor._updateTags;
   const deferred = editor._deferred;
-  const dirtyLeavesCount = dirtyLeaves.size;
+  const nodeCount = pendingEditorState._nodeMap.size;
 
   if (needsUpdate) {
     editor._dirtyType = NO_DIRTY_NODES;
@@ -6242,7 +6244,7 @@ function commitPendingUpdates(editor) {
   // Reconciliation has finished. Now update selection and trigger listeners.
   // ======
 
-  const domSelection = shouldSkipDOM ? null : getDOMSelection(); // Attempt to update the DOM selection, including focusing of the root element,
+  const domSelection = shouldSkipDOM ? null : getDOMSelection(editor._window); // Attempt to update the DOM selection, including focusing of the root element,
   // and scroll into view if needed.
 
   if (editor._editable && // domSelection will be null in headless
@@ -6262,7 +6264,7 @@ function commitPendingUpdates(editor) {
           removeDOMBlockCursorElement(blockCursorElement, editor, rootElement);
         }
 
-        updateDOMSelection(currentSelection, pendingSelection, editor, domSelection, tags, rootElement, dirtyLeavesCount);
+        updateDOMSelection(currentSelection, pendingSelection, editor, domSelection, tags, rootElement, nodeCount);
       }
 
       updateDOMBlockCursorElement(editor, rootElement, pendingSelection);
@@ -6602,9 +6604,6 @@ function updateEditor(editor, updateFn, options) {
     beginUpdate(editor, updateFn, options);
   }
 }
-function internalGetActiveEditor() {
-  return activeEditor;
-}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -6849,7 +6848,12 @@ class LexicalNode {
 
   getPreviousSiblings() {
     const siblings = [];
-    const parent = this.getParentOrThrow();
+    const parent = this.getParent();
+
+    if (parent === null) {
+      return siblings;
+    }
+
     let node = parent.getFirstChild();
 
     while (node !== null) {
@@ -6981,7 +6985,8 @@ class LexicalNode {
     }
 
     return false;
-  }
+  } // TO-DO: this function can be simplified a lot
+
 
   getNodesBetween(targetNode) {
     const isBefore = this.isBefore(targetNode);
@@ -7180,8 +7185,10 @@ class LexicalNode {
     removeNode(this, true, preserveEmptyParent);
   }
 
-  replace(replaceWith, restoreSelection = true) {
+  replace(replaceWith, includeChildren) {
     errorOnReadOnly();
+    let selection = $getSelection();
+    if (selection !== null) selection = selection.clone();
     errorOnInsertTextNodeOnRoot(this, replaceWith);
     const self = this.getLatest();
     const toReplaceKey = this.__key;
@@ -7216,9 +7223,15 @@ class LexicalNode {
     writableReplaceWith.__next = nextKey;
     writableReplaceWith.__parent = parentKey;
     writableParent.__size = size;
-    const selection = $getSelection();
 
-    if ($isRangeSelection(selection) && restoreSelection) {
+    if (includeChildren) {
+      this.getChildren().forEach(child => {
+        writableReplaceWith.append(child);
+      });
+    }
+
+    if ($isRangeSelection(selection)) {
+      $setSelection(selection);
       const anchor = selection.anchor;
       const focus = selection.focus;
 
@@ -8003,7 +8016,7 @@ class ElementNode extends LexicalNode {
     return false;
   } // A shadow root is a Node that behaves like RootNode. The shadow root (and RootNode) mark the
   // end of the hiercharchy, most implementations should treat it as there's nothing (upwards)
-  // beyond this point. For example, node.getTopElement(), when performed inside a TableCellNode
+  // beyond this point. For example, node.getTopLevelElement(), when performed inside a TableCellNode
   // will return the immediate first child underneath TableCellNode instead of RootNode.
 
 
@@ -8478,6 +8491,12 @@ function createTextInnerDOM(innerDOM, node, innerTag, format, text, config) {
     setTextThemeClassNames(innerTag, 0, format, innerDOM, textClassNames);
   }
 }
+
+function wrapElementWith(element, tag) {
+  const el = document.createElement(tag);
+  el.appendChild(element);
+  return el;
+}
 /** @noInheritDoc */
 
 
@@ -8661,43 +8680,47 @@ class TextNode extends LexicalNode {
 
   static importDOM() {
     return {
-      '#text': node => ({
+      '#text': () => ({
         conversion: convertTextDOMNode,
         priority: 0
       }),
-      b: node => ({
+      b: () => ({
         conversion: convertBringAttentionToElement,
         priority: 0
       }),
-      code: node => ({
+      br: () => ({
+        conversion: convertLineBreakToElement,
+        priority: 0
+      }),
+      code: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      em: node => ({
+      em: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      i: node => ({
+      i: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      span: node => ({
+      span: () => ({
         conversion: convertSpanElement,
         priority: 0
       }),
-      strong: node => ({
+      strong: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      sub: node => ({
+      sub: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      sup: node => ({
+      sup: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       }),
-      u: node => ({
+      u: () => ({
         conversion: convertTextFormatElement,
         priority: 0
       })
@@ -8711,6 +8734,39 @@ class TextNode extends LexicalNode {
     node.setMode(serializedNode.mode);
     node.setStyle(serializedNode.style);
     return node;
+  } // This improves Lexical's basic text output in copy+paste plus
+  // for headless mode where people might use Lexical to generate
+  // HTML content and not have the ability to use CSS classes.
+
+
+  exportDOM(editor) {
+    let {
+      element
+    } = super.exportDOM(editor); // This is the only way to properly add support for most clients,
+    // even if it's semantically incorrect to have to resort to using
+    // <b>, <u>, <s>, <i> elements.
+
+    if (element !== null) {
+      if (this.hasFormat('bold')) {
+        element = wrapElementWith(element, 'b');
+      }
+
+      if (this.hasFormat('italic')) {
+        element = wrapElementWith(element, 'i');
+      }
+
+      if (this.hasFormat('strikethrough')) {
+        element = wrapElementWith(element, 's');
+      }
+
+      if (this.hasFormat('underline')) {
+        element = wrapElementWith(element, 'u');
+      }
+    }
+
+    return {
+      element
+    };
   }
 
   exportJSON() {
@@ -9073,6 +9129,12 @@ function convertSpanElement(domNode) {
   };
 }
 
+function convertLineBreakToElement() {
+  return {
+    node: lexical.$createLineBreakNode()
+  };
+}
+
 function convertBringAttentionToElement(domNode) {
   // domNode is a <b> since we matched it by nodeName
   const b = domNode; // Google Docs wraps all copied HTML in a <b> with font-weight normal
@@ -9795,7 +9857,7 @@ class LexicalEditor {
       rootElement.blur();
     }
 
-    const domSelection = getDOMSelection();
+    const domSelection = getDOMSelection(this._window);
 
     if (domSelection !== null) {
       domSelection.removeAllRanges();
@@ -9821,15 +9883,6 @@ class LexicalEditor {
 
 }
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-const VERSION = '0.7.1';
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -9975,6 +10028,5 @@ exports.RootNode = RootNode;
 exports.SELECTION_CHANGE_COMMAND = SELECTION_CHANGE_COMMAND;
 exports.TextNode = TextNode;
 exports.UNDO_COMMAND = UNDO_COMMAND;
-exports.VERSION = VERSION;
 exports.createCommand = createCommand;
 exports.createEditor = createEditor;

package/Lexical.js.flow

@@ -846,11 +846,6 @@ declare export function $copyNode(
   offset: number,
 ): [ElementNode, ElementNode];
 
-/**
- * LexicalVersion
- */
-declare export var VERSION: string;
-
 /**
  * Serialization/Deserialization
  * */