lexical 0.3.8 → 0.3.9

package/Lexical.dev.js

@@ -77,14 +77,12 @@ var getDOMSelection = getSelection;
  *
  */
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-const documentMode = // @ts-ignore
-CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
+const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
 const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
 const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
 const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
-const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && // @ts-ignore
-!window.MSStream; // Keep these in case we need to use them in the future.
+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;
@@ -496,12 +494,16 @@ function $isTokenOrInertOrSegmented(node) {
 function $isTokenOrInert(node) {
   return node.isToken() || node.isInert();
 }
+
+function isDOMNodeLexicalTextNode(node) {
+  return node.nodeType === DOM_TEXT_TYPE;
+}
+
 function getDOMTextNode(element) {
   let node = element;
 
   while (node != null) {
-    if (node.nodeType === DOM_TEXT_TYPE) {
-      // @ts-expect-error: this is a Text
+    if (isDOMNodeLexicalTextNode(node)) {
       return node;
     }
 
@@ -812,7 +814,7 @@ function getEditorsToPropagate(editor) {
 function createUID() {
   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 }
-function $updateSelectedTextFromDOM(editor, isCompositionEnd, data) {
+function $updateSelectedTextFromDOM(isCompositionEnd, data) {
   // Update the text content with the latest composition text
   const domSelection = getDOMSelection();
 
@@ -883,7 +885,7 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
       const prevSelection = $getPreviousSelection();
 
       if ($isTokenOrInert(node) || $getCompositionKey() !== null && !isComposing || // Check if character was added at the start, and we need
-      // to clear this input from occuring as that action wasn't
+      // to clear this input from occurring as that action wasn't
       // permitted.
       parent !== null && $isRangeSelection(prevSelection) && !parent.canInsertTextBefore() && prevSelection.anchor.offset === 0) {
         node.markDirty();
@@ -1073,22 +1075,22 @@ function isArrowDown(keyCode) {
   return keyCode === 40;
 }
 
-function isMoveBackward(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveBackward(keyCode, ctrlKey, altKey, metaKey) {
   return isArrowLeft(keyCode) && !ctrlKey && !metaKey && !altKey;
 }
 function isMoveToStart(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
   return isArrowLeft(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey);
 }
-function isMoveForward(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveForward(keyCode, ctrlKey, altKey, metaKey) {
   return isArrowRight(keyCode) && !ctrlKey && !metaKey && !altKey;
 }
 function isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
   return isArrowRight(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey);
 }
-function isMoveUp(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveUp(keyCode, ctrlKey, metaKey) {
   return isArrowUp(keyCode) && !ctrlKey && !metaKey;
 }
-function isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey) {
+function isMoveDown(keyCode, ctrlKey, metaKey) {
   return isArrowDown(keyCode) && !ctrlKey && !metaKey;
 }
 function isModifier(ctrlKey, shiftKey, altKey, metaKey) {
@@ -1230,7 +1232,7 @@ function getElementByKeyOrThrow(editor, key) {
 
   if (element === undefined) {
     {
-      throw Error(`Reconciliation: could not find DOM element for node key "${key}"`);
+      throw Error(`Reconciliation: could not find DOM element for node key ${key}`);
     }
   }
 
@@ -1270,6 +1272,50 @@ function scrollIntoViewIfNeeded(editor, anchor, rootElement, tags) {
     tags.add('scroll-into-view');
   }
 }
+function $maybeMoveChildrenSelectionToParent(parentNode, offset = 0) {
+  if (offset !== 0) {
+    {
+      throw Error(`TODO`);
+    }
+  }
+
+  const selection = $getSelection();
+
+  if (!$isRangeSelection(selection) || !$isElementNode(parentNode)) {
+    return selection;
+  }
+
+  const {
+    anchor,
+    focus
+  } = selection;
+  const anchorNode = anchor.getNode();
+  const focusNode = focus.getNode();
+
+  if ($hasAncestor(anchorNode, parentNode)) {
+    anchor.set(parentNode.__key, 0, 'element');
+  }
+
+  if ($hasAncestor(focusNode, parentNode)) {
+    focus.set(parentNode.__key, 0, 'element');
+  }
+
+  return selection;
+}
+
+function $hasAncestor(child, targetNode) {
+  let parent = child.getParent();
+
+  while (parent !== null) {
+    if (parent.is(targetNode)) {
+      return true;
+    }
+
+    parent = parent.getParent();
+  }
+
+  return false;
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1635,7 +1681,7 @@ function isLastChildLineBreakOrDecorator(children, nodeMap) {
   const childKey = children[children.length - 1];
   const node = nodeMap.get(childKey);
   return $isLineBreakNode(node) || $isDecoratorNode(node);
-} // If we end an element with a LinkBreakNode, then we need to add an additonal <br>
+} // If we end an element with a LinkBreakNode, then we need to add an additional <br>
 
 
 function reconcileElementTerminatingLineBreak(prevChildren, nextChildren, dom) {
@@ -2057,7 +2103,7 @@ function getPrevElementByKeyOrThrow(key) {
 
   if (element === undefined) {
     {
-      throw Error(`Reconciliation: could not find DOM element for node key "${key}"`);
+      throw Error(`Reconciliation: could not find DOM element for node key ${key}`);
     }
   }
 
@@ -2156,6 +2202,7 @@ function onSelectionChange(domSelection, editor, isActive) {
         }
       } else {
         let combinedFormat = IS_ALL_FORMATTING;
+        let hasTextNodes = false;
         const nodes = selection.getNodes();
         const nodesLength = nodes.length;
 
@@ -2163,6 +2210,7 @@ function onSelectionChange(domSelection, editor, isActive) {
           const node = nodes[i];
 
           if ($isTextNode(node)) {
+            hasTextNodes = true;
             combinedFormat &= node.getFormat();
 
             if (combinedFormat === 0) {
@@ -2171,7 +2219,7 @@ function onSelectionChange(domSelection, editor, isActive) {
           }
         }
 
-        selection.format = combinedFormat;
+        selection.format = hasTextNodes ? combinedFormat : 0;
       }
     }
 
@@ -2198,7 +2246,7 @@ function onClick(event, editor) {
         domSelection.removeAllRanges();
         selection.dirty = true;
       }
-    } else if (domSelection && $isNodeSelection(selection) && domSelection.isCollapsed) {
+    } else if (domSelection && $isNodeSelection(selection)) {
       const domAnchor = domSelection.anchorNode; // If the user is attempting to click selection back onto text, then
       // we should attempt create a range selection.
       // When we click on an empty paragraph node or the end of a paragraph that ends
@@ -2304,7 +2352,7 @@ function onBeforeInput(event, editor) {
     const anchorNode = anchor.getNode();
     const focusNode = focus.getNode();
 
-    if (inputType === 'insertText') {
+    if (inputType === 'insertText' || inputType === 'insertTranspose') {
       if (data === '\n') {
         event.preventDefault();
         dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
@@ -2496,7 +2544,7 @@ function onInput(event, editor) {
         $setCompositionKey(null);
       }
     } else {
-      $updateSelectedTextFromDOM(editor, false); // onInput always fires after onCompositionEnd for FF.
+      $updateSelectedTextFromDOM(false); // onInput always fires after onCompositionEnd for FF.
 
       if (isFirefoxEndingComposition) {
         onCompositionEndImpl(editor, data || undefined);
@@ -2568,7 +2616,7 @@ function onCompositionEndImpl(editor, data) {
     }
   }
 
-  $updateSelectedTextFromDOM(editor, true, data);
+  $updateSelectedTextFromDOM(true, data);
 }
 
 function onCompositionEnd(event, editor) {
@@ -2602,17 +2650,17 @@ function onKeyDown(event, editor) {
     altKey
   } = event;
 
-  if (isMoveForward(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  if (isMoveForward(keyCode, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
   } else if (isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_END, event);
-  } else if (isMoveBackward(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveBackward(keyCode, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_LEFT_COMMAND, event);
   } else if (isMoveToStart(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_START, event);
-  } else if (isMoveUp(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveUp(keyCode, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_UP_COMMAND, event);
-  } else if (isMoveDown(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveDown(keyCode, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event);
   } else if (isLineBreak(keyCode, shiftKey)) {
     isInsertLineBreak = true;
@@ -3733,7 +3781,13 @@ class RangeSelection {
   }
 
   formatText(formatType) {
-    // TODO I wonder if this methods use selection.extract() instead?
+    if (this.isCollapsed()) {
+      this.toggleFormat(formatType); // When changing format, we should stop composition
+
+      $setCompositionKey(null);
+      return;
+    }
+
     const selectedNodes = this.getNodes();
     const selectedTextNodes = [];
 
@@ -3744,12 +3798,8 @@ class RangeSelection {
     }
 
     const selectedTextNodesLength = selectedTextNodes.length;
-    let firstIndex = 0;
-    const lastIndex = selectedTextNodesLength - 1;
-    let firstNode = selectedTextNodes[0];
-    let lastNode = selectedTextNodes[lastIndex];
 
-    if (this.isCollapsed()) {
+    if (selectedTextNodesLength === 0) {
       this.toggleFormat(formatType); // When changing format, we should stop composition
 
       $setCompositionKey(null);
@@ -3758,98 +3808,96 @@ class RangeSelection {
 
     const anchor = this.anchor;
     const focus = this.focus;
-    const anchorOffset = anchor.offset;
-    const focusOffset = focus.offset;
-    let firstNextFormat = firstNode.getFormatFlags(formatType, null);
-    let firstNodeTextLength = firstNode.getTextContent().length;
-    const isBefore = anchor.isBefore(focus);
-    const endOffset = isBefore ? focusOffset : anchorOffset;
-    let startOffset = isBefore ? anchorOffset : focusOffset; // This is the case where the user only selected the very end of the
-    // first node so we don't want to include it in the formatting change.
+    const isBackward = this.isBackward();
+    const startPoint = isBackward ? focus : anchor;
+    const endPoint = isBackward ? anchor : focus;
+    let firstIndex = 0;
+    let firstNode = selectedTextNodes[0];
+    let startOffset = startPoint.type === 'element' ? 0 : startPoint.offset; // In case selection started at the end of text node use next text node
 
-    if (startOffset === firstNode.getTextContentSize() && selectedTextNodes.length > 1) {
-      const nextNode = selectedTextNodes[1];
-      startOffset = 0;
+    if (startPoint.type === 'text' && startOffset === firstNode.getTextContentSize()) {
       firstIndex = 1;
-      firstNode = nextNode;
-      firstNodeTextLength = nextNode.getTextContentSize();
-      firstNextFormat = nextNode.getFormatFlags(formatType, null);
-    } // This is the case where we only selected a single node
+      firstNode = selectedTextNodes[1];
+      startOffset = 0;
+    }
 
+    if (firstNode == null) {
+      return;
+    }
+
+    const firstNextFormat = firstNode.getFormatFlags(formatType, null);
+    const lastIndex = selectedTextNodesLength - 1;
+    let lastNode = selectedTextNodes[lastIndex];
+    const endOffset = endPoint.type === 'text' ? endPoint.offset : lastNode.getTextContentSize(); // Single node selected
 
     if (firstNode.is(lastNode)) {
-      if ($isTextNode(firstNode)) {
-        if (anchor.type === 'element' && focus.type === 'element') {
-          firstNode.setFormat(firstNextFormat);
-          firstNode.select(startOffset, endOffset);
-          this.format = firstNextFormat;
-          return;
-        } // No actual text is selected, so do nothing.
+      // No actual text is selected, so do nothing.
+      if (startOffset === endOffset) {
+        return;
+      } // The entire node is selected, so just format it
 
 
-        if (startOffset === endOffset) {
-          return;
-        } // The entire node is selected, so just format it
+      if (startOffset === 0 && endOffset === firstNode.getTextContentSize()) {
+        firstNode.setFormat(firstNextFormat);
+      } else {
+        // Node is partially selected, so split it into two nodes
+        // add style the selected one.
+        const splitNodes = firstNode.splitText(startOffset, endOffset);
+        const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
+        replacement.setFormat(firstNextFormat); // Update selection only if starts/ends on text node
 
+        if (startPoint.type === 'text') {
+          startPoint.set(replacement.__key, 0, 'text');
+        }
 
-        if (startOffset === 0 && endOffset === firstNodeTextLength) {
-          firstNode.setFormat(firstNextFormat);
-          firstNode.select(startOffset, endOffset);
-        } else {
-          // ndoe is partially selected, so split it into two nodes
-          // adnd style the selected one.
-          const splitNodes = firstNode.splitText(startOffset, endOffset);
-          const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
-          replacement.setFormat(firstNextFormat);
-          replacement.select(0, endOffset - startOffset);
+        if (endPoint.type === 'text') {
+          endPoint.set(replacement.__key, endOffset - startOffset, 'text');
         }
+      }
 
-        this.format = firstNextFormat;
-      } // multiple nodes selected.
+      this.format = firstNextFormat;
+      return;
+    } // Multiple nodes selected
+    // The entire first node isn't selected, so split it
 
-    } else {
-      // Note: startOffset !== firstNodeTextLength should only occur within rare programatic
-      // update functions; transforms normalization ensure there's no empty text nodes.
-      if ($isTextNode(firstNode) && startOffset !== firstNodeTextLength) {
-        if (startOffset !== 0) {
-          // the entire first node isn't selected, so split it
-          [, firstNode] = firstNode.splitText(startOffset);
-          startOffset = 0;
-        }
 
-        firstNode.setFormat(firstNextFormat);
+    if (startOffset !== 0) {
+      [, firstNode] = firstNode.splitText(startOffset);
+      startOffset = 0;
+    }
+
+    firstNode.setFormat(firstNextFormat);
+    const lastNextFormat = lastNode.getFormatFlags(formatType, firstNextFormat); // If the offset is 0, it means no actual characters are selected,
+    // so we skip formatting the last node altogether.
+
+    if (endOffset > 0) {
+      if (endOffset !== lastNode.getTextContentSize()) {
+        [lastNode] = lastNode.splitText(endOffset);
       }
 
-      let lastNextFormat = firstNextFormat;
+      lastNode.setFormat(lastNextFormat);
+    } // Process all text nodes in between
 
-      if ($isTextNode(lastNode)) {
-        lastNextFormat = lastNode.getFormatFlags(formatType, firstNextFormat);
-        const lastNodeText = lastNode.getTextContent();
-        const lastNodeTextLength = lastNodeText.length; // if the offset is 0, it means no actual characters are selected,
-        // so we skip formatting the last node altogether.
 
-        if (endOffset !== 0) {
-          // if the entire last node isn't selected, split it
-          if (endOffset !== lastNodeTextLength) {
-            [lastNode] = lastNode.splitText(endOffset);
-          }
+    for (let i = firstIndex + 1; i < lastIndex; i++) {
+      const textNode = selectedTextNodes[i];
 
-          lastNode.setFormat(lastNextFormat);
-        }
+      if (!textNode.isToken()) {
+        const nextFormat = textNode.getFormatFlags(formatType, lastNextFormat);
+        textNode.setFormat(nextFormat);
       }
+    } // Update selection only if starts/ends on text node
 
-      this.format = firstNextFormat | lastNextFormat; // deal with all the nodes in between
 
-      for (let i = firstIndex + 1; i < lastIndex; i++) {
-        const selectedNode = selectedTextNodes[i];
-        const selectedNodeKey = selectedNode.__key;
+    if (startPoint.type === 'text') {
+      startPoint.set(firstNode.__key, startOffset, 'text');
+    }
 
-        if ($isTextNode(selectedNode) && selectedNodeKey !== firstNode.__key && selectedNodeKey !== lastNode.__key && !selectedNode.isToken()) {
-          const selectedNextFormat = selectedNode.getFormatFlags(formatType, lastNextFormat);
-          selectedNode.setFormat(selectedNextFormat);
-        }
-      }
+    if (endPoint.type === 'text') {
+      endPoint.set(lastNode.__key, endOffset, 'text');
     }
+
+    this.format = firstNextFormat | lastNextFormat;
   }
 
   insertNodes(nodes, selectStart) {
@@ -3920,7 +3968,7 @@ class RangeSelection {
 
       if ($isElementNode(node) && !node.isInline()) {
         // -----
-        // Heuristics for the replacment or merging of elements
+        // Heuristics for the replacement or merging of elements
         // -----
         // If we have an incoming element node as the first node, then we'll need
         // see if we can merge any descendant leaf nodes into our existing target.
@@ -4097,7 +4145,7 @@ class RangeSelection {
           const sibling = siblings[i];
           const prevParent = sibling.getParentOrThrow();
 
-          if ($isElementNode(target) && !$isBlockElementNode(sibling)) {
+          if ($isElementNode(target) && !$isBlockElementNode(sibling) && !($isDecoratorNode(sibling) && sibling.isTopLevel())) {
             if (originalTarget === target) {
               target.append(sibling);
             } else {
@@ -5264,7 +5312,7 @@ function $normalizeAllDirtyTextNodes(editorState, editor) {
  * 2. We transform elements. If element transforms generate additional dirty nodes we repeat step 1.
  * If element transforms only generate additional dirty elements we only repeat step 2.
  *
- * Note that to keep track of newly dirty nodes and subtress we leverage the editor._dirtyNodes and
+ * Note that to keep track of newly dirty nodes and subtrees we leverage the editor._dirtyNodes and
  * editor._subtrees which we reset in every loop.
  */
 
@@ -5469,7 +5517,7 @@ function commitPendingUpdates(editor) {
   if (rootElement === null && !headless || pendingEditorState === null) {
     return;
   } // ======
-  // Reconcilation has started.
+  // Reconciliation has started.
   // ======
 
 
@@ -5489,7 +5537,7 @@ function commitPendingUpdates(editor) {
   if (!headless && needsUpdate && observer !== null) {
     activeEditor = editor;
     activeEditorState = pendingEditorState;
-    isReadOnlyMode = false; // We don't want updates to sync block the reconcilation.
+    isReadOnlyMode = false; // We don't want updates to sync block the reconciliation.
 
     editor._updating = true;
 
@@ -5564,7 +5612,7 @@ function commitPendingUpdates(editor) {
   }
 
   $garbageCollectDetachedDecorators(editor, pendingEditorState); // ======
-  // Reconcilation has finished. Now update selection and trigger listeners.
+  // Reconciliation has finished. Now update selection and trigger listeners.
   // ======
 
   const domSelection = headless ? null : getDOMSelection(); // Attempt to update the DOM selection, including focusing of the root element,
@@ -5584,7 +5632,7 @@ function commitPendingUpdates(editor) {
   }
 
   if (mutatedNodes !== null) {
-    triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes);
+    triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes, tags, dirtyLeaves);
   }
 
   if (pendingDecorators !== null) {
@@ -5615,7 +5663,7 @@ function triggerTextContentListeners(editor, currentEditorState, pendingEditorSt
   }
 }
 
-function triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes) {
+function triggerMutationListeners(editor, currentEditorState, pendingEditorState, mutatedNodes, updateTags, dirtyLeaves) {
   const listeners = Array.from(editor._listeners.mutation);
   const listenersLength = listeners.length;
 
@@ -5624,7 +5672,10 @@ function triggerMutationListeners(editor, currentEditorState, pendingEditorState
     const mutatedNodesByType = mutatedNodes.get(klass);
 
     if (mutatedNodesByType !== undefined) {
-      listener(mutatedNodesByType);
+      listener(mutatedNodesByType, {
+        dirtyLeaves,
+        updateTags
+      });
     }
   }
 }
@@ -5908,7 +5959,7 @@ function removeNode(nodeToRemove, restoreSelection, preserveEmptyParent) {
     return;
   }
 
-  const selection = $getSelection();
+  const selection = $maybeMoveChildrenSelectionToParent(nodeToRemove);
   let selectionMoved = false;
 
   if ($isRangeSelection(selection) && restoreSelection) {
@@ -6089,7 +6140,7 @@ class LexicalNode {
     while (node !== null) {
       const parent = node.getParent();
 
-      if ($isRootNode(parent) && $isElementNode(node)) {
+      if ($isRootNode(parent) && ($isElementNode(node) || $isDecoratorNode(node) && node.isTopLevel())) {
         return node;
       }
 
@@ -7026,7 +7077,7 @@ class ElementNode extends LexicalNode {
 
       if (nodeToInsert.__key === writableSelfKey) {
         {
-          throw Error(`append: attemtping to append self`);
+          throw Error(`append: attempting to append self`);
         }
       }
 
@@ -8599,7 +8650,7 @@ class LexicalEditor {
     this._nodes = nodes; // React node decorators for portals
 
     this._decorators = {};
-    this._pendingDecorators = null; // Used to optimize reconcilation
+    this._pendingDecorators = null; // Used to optimize reconciliation
 
     this._dirtyType = NO_DIRTY_NODES;
     this._cloneNotNeeded = new Set();
@@ -8919,7 +8970,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.3.8';
+const VERSION = '0.3.9';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/Lexical.js.flow

@@ -78,7 +78,10 @@ type RootListener = (
 ) => void;
 type TextContentListener = (text: string) => void;
 type ErrorHandler = (error: Error) => void;
-type MutationListener = (nodes: Map<NodeKey, NodeMutation>) => void;
+export type MutationListener = (
+  nodes: Map<NodeKey, NodeMutation>,
+  {updateTags: Set<string>, dirtyLeaves: Set<string>},
+) => void;
 export type ReadOnlyListener = (readOnly: boolean) => void;
 type Listeners = {
   decorator: Set<DecoratorListener>,