lexical 0.6.1-next.0 → 0.6.3

package/Lexical.dev.js

@@ -1258,38 +1258,64 @@ function getElementByKeyOrThrow(editor, key) {
 
   return element;
 }
-function scrollIntoViewIfNeeded(editor, anchor, rootElement, tags) {
-  let anchorNode = anchor.getNode();
-
-  if ($isElementNode(anchorNode)) {
-    const descendantNode = anchorNode.getDescendantByIndex(anchor.offset);
+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;
 
-    if (descendantNode !== null) {
-      anchorNode = descendantNode;
-    }
+  if (defaultView === null) {
+    return;
   }
 
-  const element = editor.getElementByKey(anchorNode.__key);
+  let {
+    top: currentTop,
+    bottom: currentBottom
+  } = selectionRect;
+  let targetTop = 0;
+  let targetBottom = 0;
+  let element = rootElement;
+
+  while (element !== null) {
+    const isBodyElement = element === doc.body;
+
+    if (isBodyElement) {
+      targetTop = 0;
+      targetBottom = getWindow(editor).innerHeight;
+    } else {
+      const targetRect = element.getBoundingClientRect();
+      targetTop = targetRect.top;
+      targetBottom = targetRect.bottom;
+    }
 
-  if (element !== null) {
-    const rect = element.getBoundingClientRect();
+    let diff = 0;
 
-    if (rect.bottom > getWindow(editor).innerHeight) {
-      element.scrollIntoView(false);
-    } else if (rect.top < 0) {
-      element.scrollIntoView();
-    } else {
-      const rootRect = rootElement.getBoundingClientRect(); // Rects can returning decimal numbers that differ due to rounding
-      // differences. So let's normalize the values.
+    if (currentTop < targetTop) {
+      diff = -(targetTop - currentTop);
+    } else if (currentBottom > targetBottom) {
+      diff = currentBottom - targetBottom;
+    }
 
-      if (Math.floor(rect.bottom) > Math.floor(rootRect.bottom)) {
-        element.scrollIntoView(false);
-      } else if (Math.floor(rect.top) < Math.floor(rootRect.top)) {
-        element.scrollIntoView();
+    if (diff !== 0) {
+      if (isBodyElement) {
+        // Only handles scrolling of Y axis
+        defaultView.scrollBy(0, diff);
+      } else {
+        const scrollTop = element.scrollTop;
+        element.scrollTop += diff;
+        const yOffset = element.scrollTop - scrollTop;
+        currentTop -= yOffset;
+        currentBottom -= yOffset;
       }
     }
 
-    tags.add('scroll-into-view');
+    if (isBodyElement) {
+      break;
+    }
+
+    element = getParentElement(element);
   }
 }
 function $addUpdateTag(tag) {
@@ -1375,6 +1401,49 @@ function $getNearestRootOrShadowRoot(node) {
 function $isRootOrShadowRoot(node) {
   return $isRootNode(node) || $isElementNode(node) && node.isShadowRoot();
 }
+function $copyNode(node) {
+  // @ts-ignore
+  const copy = node.constructor.clone(node);
+  $setNodeKey(copy, null);
+  return copy;
+}
+function $applyNodeReplacement(node) {
+  const editor = getActiveEditor();
+  const nodeType = node.constructor.getType();
+
+  const registeredNode = editor._nodes.get(nodeType);
+
+  if (registeredNode === undefined) {
+    {
+      throw Error(`$initializeNode failed. Ensure node has been registered to the editor. You can do this by passing the node class via the "nodes" array in the editor config.`);
+    }
+  }
+
+  const replaceFunc = registeredNode.replace;
+
+  if (replaceFunc !== null) {
+    const replacementNode = replaceFunc(node);
+
+    if (!(replacementNode instanceof node.constructor)) {
+      {
+        throw Error(`$initializeNode failed. Ensure replacement node is a subclass of the original node.`);
+      }
+    }
+
+    return replacementNode;
+  }
+
+  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.
@@ -1763,7 +1832,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>
 
 
@@ -2727,11 +2796,6 @@ function onCompositionEnd(event, editor) {
 }
 
 function onKeyDown(event, editor) {
-  if (hasStoppedLexicalPropagation(event)) {
-    return;
-  }
-
-  stopLexicalPropagation(event);
   lastKeyDownTimeStamp = event.timeStamp;
   lastKeyCode = event.keyCode;
 
@@ -2940,10 +3004,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':
@@ -4337,7 +4413,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 {
@@ -4659,7 +4736,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;
 
@@ -4724,6 +4802,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');
@@ -5453,12 +5549,9 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
       rootElement.focus({
         preventScroll: true
       });
-    } // In Safari/iOS if we have selection on an element, then we also
-    // need to additionally set the DOM selection, otherwise a selectionchange
-    // event will not fire.
-
+    }
 
-    if (!(IS_IOS || IS_SAFARI) || anchor.type !== 'element') {
+    if (anchor.type !== 'element') {
       return;
     }
   } // Apply the updated selection to the DOM. Note: this will trigger
@@ -5469,7 +5562,13 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
     domSelection.setBaseAndExtent(nextAnchorNode, nextAnchorOffset, nextFocusNode, nextFocusOffset);
 
     if (!tags.has('skip-scroll-into-view') && nextSelection.isCollapsed() && rootElement !== null && rootElement === activeElement) {
-      scrollIntoViewIfNeeded(editor, anchor, rootElement, tags);
+      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();
@@ -6112,7 +6211,7 @@ function beginUpdate(editor, updateFn, options) {
   let editorStateWasCloned = false;
 
   if (pendingEditorState === null || pendingEditorState._readOnly) {
-    pendingEditorState = editor._pendingEditorState = cloneEditorState(currentEditorState);
+    pendingEditorState = editor._pendingEditorState = cloneEditorState(pendingEditorState || currentEditorState);
     editorStateWasCloned = true;
   }
 
@@ -6834,6 +6933,7 @@ class LexicalNode {
 
   replace(replaceWith) {
     errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, replaceWith);
     const toReplaceKey = this.__key;
     const writableReplaceWith = replaceWith.getWritable();
     removeFromParent(writableReplaceWith);
@@ -6877,6 +6977,7 @@ class LexicalNode {
 
   insertAfter(nodeToInsert) {
     errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, nodeToInsert);
     const writableSelf = this.getWritable();
     const writableNodeToInsert = nodeToInsert.getWritable();
     const oldParent = writableNodeToInsert.getParent();
@@ -6929,6 +7030,8 @@ class LexicalNode {
   }
 
   insertBefore(nodeToInsert) {
+    errorOnReadOnly();
+    errorOnInsertTextNodeOnRoot(this, nodeToInsert);
     const writableSelf = this.getWritable();
     const writableNodeToInsert = nodeToInsert.getWritable();
     removeFromParent(writableNodeToInsert);
@@ -7690,6 +7793,10 @@ class RootNode extends ElementNode {
     };
   }
 
+  collapseAtStart() {
+    return true;
+  }
+
 }
 function $createRootNode() {
   return new RootNode();
@@ -7861,7 +7968,7 @@ function convertLineBreakElement(node) {
 }
 
 function $createLineBreakNode() {
-  return new LineBreakNode();
+  return $applyNodeReplacement(new LineBreakNode());
 }
 function $isLineBreakNode(node) {
   return node instanceof LineBreakNode;
@@ -8659,7 +8766,7 @@ function convertTextFormatElement(domNode) {
 }
 
 function $createTextNode(text = '') {
-  return new TextNode(text);
+  return $applyNodeReplacement(new TextNode(text));
 }
 function $isTextNode(node) {
   return node instanceof TextNode;
@@ -8799,7 +8906,7 @@ function convertParagraphElement() {
 }
 
 function $createParagraphNode() {
-  return new ParagraphNode();
+  return $applyNodeReplacement(new ParagraphNode());
 }
 function $isParagraphNode(node) {
   return node instanceof ParagraphNode;
@@ -8902,7 +9009,15 @@ function createEditor(editorConfig) {
     registeredNodes = new Map();
 
     for (let i = 0; i < nodes.length; i++) {
-      const klass = nodes[i]; // Ensure custom nodes implement required methods.
+      let klass = nodes[i];
+      let replacementClass = null;
+
+      if (typeof klass !== 'function') {
+        const options = klass;
+        klass = options.replace;
+        replacementClass = options.with;
+      } // Ensure custom nodes implement required methods.
+
 
       {
         const name = klass.name;
@@ -8944,6 +9059,7 @@ function createEditor(editorConfig) {
       const type = klass.getType();
       registeredNodes.set(type, {
         klass,
+        replace: replacementClass,
         transforms: new Set()
       });
     }
@@ -9336,7 +9452,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.4.1';
+const VERSION = '0.6.3';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -9390,6 +9506,8 @@ function DEPRECATED_$isGridRowNode(node) {
 }
 
 exports.$addUpdateTag = $addUpdateTag;
+exports.$applyNodeReplacement = $applyNodeReplacement;
+exports.$copyNode = $copyNode;
 exports.$createLineBreakNode = $createLineBreakNode;
 exports.$createNodeSelection = $createNodeSelection;
 exports.$createParagraphNode = $createParagraphNode;

package/Lexical.js.flow

@@ -266,7 +266,10 @@ declare export function createEditor(editorConfig?: {
   namespace: string,
   theme?: EditorThemeClasses,
   parentEditor?: LexicalEditor,
-  nodes?: $ReadOnlyArray<Class<LexicalNode>>,
+  nodes?: $ReadOnlyArray<
+    | Class<LexicalNode>
+    | {replace: Class<LexicalNode>, with: (node: LexicalNode) => LexicalNode},
+  >,
   onError: (error: Error) => void,
   disableEvents?: boolean,
   editable?: boolean,
@@ -354,9 +357,9 @@ declare export class LexicalNode {
   isParentOf(targetNode: LexicalNode): boolean;
   getNodesBetween(targetNode: LexicalNode): Array<LexicalNode>;
   isDirty(): boolean;
-  // $FlowFixMe
+  // $FlowFixMe[incompatible-type]
   getLatest<T: LexicalNode>(this: T): T;
-  // $FlowFixMe
+  // $FlowFixMe[incompatible-type]
   getWritable<T: LexicalNode>(this: T): T;
   getTextContent(includeDirectionless?: boolean): string;
   getTextContentSize(includeDirectionless?: boolean): number;
@@ -458,7 +461,7 @@ declare export class RangeSelection implements BaseSelection {
     focusOffset: number,
   ): void;
   getTextContent(): string;
-  // $FlowFixMe DOM API
+  // $FlowFixMe[cannot-resolve-name] DOM API
   applyDOMRange(range: StaticRange): void;
   clone(): RangeSelection;
   toggleFormat(format: TextFormatType): void;
@@ -825,6 +828,10 @@ declare export function $hasAncestor(
   child: LexicalNode,
   targetNode: LexicalNode,
 ): boolean;
+declare export function $copyNode(
+  node: ElementNode,
+  offset: number,
+): [ElementNode, ElementNode];
 
 /**
  * LexicalVersion
@@ -845,6 +852,10 @@ declare export function $parseSerializedNode(
   serializedNode: InternalSerializedNode,
 ): LexicalNode;
 
+declare export function $applyNodeReplacement<N: LexicalNode>(
+  node: LexicalNode,
+): N;
+
 export type SerializedLexicalNode = {
   type: string,
   version: number,