[lexical][lexical-selection][lexical-utils] Refactor: Consolidate ancestor lookup via findMatchingParent (#7814)

Co-authored-by: Bob Ippolito <bob@redivi.com>

Author: cnaples79

packages/lexical-link/src/index.ts

@@ -645,7 +645,7 @@ export function $toggleLink(
     const firstNode = nodes[0];
     // if the first node is a LinkNode or if its
     // parent is a LinkNode, we update the URL, target and rel.
-    const linkNode = $getAncestor(firstNode, $isLinkNode);
+    const linkNode = $findMatchingParent(firstNode, $isLinkNode);
     if (linkNode !== null) {
       return updateLinkNode(linkNode);
     }
@@ -657,7 +657,7 @@ export function $toggleLink(
       if (!node.isAttached()) {
         continue;
       }
-      const parentLinkNode = $getAncestor(node, $isLinkNode);
+      const parentLinkNode = $findMatchingParent(node, $isLinkNode);
       if (parentLinkNode) {
         updateLinkNode(parentLinkNode);
         continue;
@@ -701,17 +701,6 @@ export function $toggleLink(
 /** @deprecated renamed to {@link $toggleLink} by @lexical/eslint-plugin rules-of-lexical */
 export const toggleLink = $toggleLink;
 
-function $getAncestor<NodeType extends LexicalNode = LexicalNode>(
-  node: LexicalNode,
-  predicate: (ancestor: LexicalNode) => ancestor is NodeType,
-) {
-  let parent = node;
-  while (parent !== null && parent.getParent() !== null && !predicate(parent)) {
-    parent = parent.getParentOrThrow();
-  }
-  return predicate(parent) ? parent : null;
-}
-
 const PHONE_NUMBER_REGEX = /^\+?[0-9\s()-]{5,}$/;
 
 /**

packages/lexical-selection/src/range-selection.ts

@@ -21,6 +21,7 @@ import {
   $caretFromPoint,
   $createRangeSelection,
   $extendCaretToRange,
+  $findMatchingParent,
   $getPreviousSelection,
   $getSelection,
   $hasAncestor,
@@ -84,8 +85,11 @@ export function $setBlocksType<T extends ElementNode>(
     newSelection = $createRangeSelection();
     newSelection.anchor.set(anchor.key, anchor.offset, anchor.type);
     newSelection.focus.set(focus.key, focus.offset, focus.type);
-    const anchorBlock = $getAncestor(anchor.getNode(), INTERNAL_$isBlock);
-    const focusBlock = $getAncestor(focus.getNode(), INTERNAL_$isBlock);
+    const anchorBlock = $findMatchingParent(
+      anchor.getNode(),
+      INTERNAL_$isBlock,
+    );
+    const focusBlock = $findMatchingParent(focus.getNode(), INTERNAL_$isBlock);
     if ($isElementNode(anchorBlock)) {
       blockMap.set(anchorBlock.getKey(), anchorBlock);
     }
@@ -97,7 +101,7 @@ export function $setBlocksType<T extends ElementNode>(
     if ($isElementNode(node) && INTERNAL_$isBlock(node)) {
       blockMap.set(node.getKey(), node);
     } else if (anchorAndFocus === null) {
-      const ancestorBlock = $getAncestor(node, INTERNAL_$isBlock);
+      const ancestorBlock = $findMatchingParent(node, INTERNAL_$isBlock);
       if ($isElementNode(ancestorBlock)) {
         blockMap.set(ancestorBlock.getKey(), ancestorBlock);
       }
@@ -641,14 +645,3 @@ export function $getSelectionStyleValueForProperty(
 
   return styleValue === null ? defaultValue : styleValue;
 }
-
-export function $getAncestor<NodeType extends LexicalNode = LexicalNode>(
-  node: LexicalNode,
-  predicate: (ancestor: LexicalNode) => ancestor is NodeType,
-) {
-  let parent = node;
-  while (parent !== null && parent.getParent() !== null && !predicate(parent)) {
-    parent = parent.getParentOrThrow();
-  }
-  return predicate(parent) ? parent : null;
-}

packages/lexical-utils/src/index.ts

@@ -10,6 +10,7 @@ import {
   $caretFromPoint,
   $cloneWithProperties,
   $createParagraphNode,
+  $findMatchingParent,
   $getAdjacentChildCaret,
   $getAdjacentSiblingOrParentSiblingCaret,
   $getCaretInDirection,
@@ -69,6 +70,7 @@ export {default as mergeRegister} from './mergeRegister';
 export {default as positionNodeOnRange} from './positionNodeOnRange';
 export {default as selectionAlwaysOnDisplay} from './selectionAlwaysOnDisplay';
 export {
+  $findMatchingParent,
   $getAdjacentSiblingOrParentSiblingCaret,
   $splitNode,
   isBlockDomNode,
@@ -407,40 +409,6 @@ export type DOMNodeToLexicalConversionMap = Record<
   DOMNodeToLexicalConversion
 >;
 
-/**
- * Starts with a node and moves up the tree (toward the root node) to find a matching node based on
- * the search parameters of the findFn. (Consider JavaScripts' .find() function where a testing function must be
- * passed as an argument. eg. if( (node) => node.__type === 'div') ) return true; otherwise return false
- * @param startingNode - The node where the search starts.
- * @param findFn - A testing function that returns true if the current node satisfies the testing parameters.
- * @returns A parent node that matches the findFn parameters, or null if one wasn't found.
- */
-export const $findMatchingParent: {
-  <T extends LexicalNode>(
-    startingNode: LexicalNode,
-    findFn: (node: LexicalNode) => node is T,
-  ): T | null;
-  (
-    startingNode: LexicalNode,
-    findFn: (node: LexicalNode) => boolean,
-  ): LexicalNode | null;
-} = (
-  startingNode: LexicalNode,
-  findFn: (node: LexicalNode) => boolean,
-): LexicalNode | null => {
-  let curr: ElementNode | LexicalNode | null = startingNode;
-
-  while (curr !== $getRoot() && curr != null) {
-    if (findFn(curr)) {
-      return curr;
-    }
-
-    curr = curr.getParent();
-  }
-
-  return null;
-};
-
 /**
  * Attempts to resolve nested element nodes of the same type into a single node of that type.
  * It is generally used for marks/commenting

packages/lexical/src/LexicalUtils.ts

@@ -1764,23 +1764,6 @@ export function $splitNode(
   return [leftTree, rightTree];
 }
 
-export function $findMatchingParent(
-  startingNode: LexicalNode,
-  findFn: (node: LexicalNode) => boolean,
-): LexicalNode | null {
-  let curr: ElementNode | LexicalNode | null = startingNode;
-
-  while (curr !== $getRoot() && curr != null) {
-    if (findFn(curr)) {
-      return curr;
-    }
-
-    curr = curr.getParent();
-  }
-
-  return null;
-}
-
 /**
  * @param x - The element being tested
  * @returns Returns true if x is an HTML anchor tag, false otherwise
@@ -2141,3 +2124,37 @@ export function $create<T extends LexicalNode>(klass: Klass<T>): T {
   );
   return new registeredNode.klass() as T;
 }
+
+/**
+ * Starts with a node and moves up the tree (toward the root node) to find a matching node based on
+ * the search parameters of the findFn. (Consider JavaScripts' .find() function where a testing function must be
+ * passed as an argument. eg. if( (node) => node.__type === 'div') ) return true; otherwise return false
+ * @param startingNode - The node where the search starts.
+ * @param findFn - A testing function that returns true if the current node satisfies the testing parameters.
+ * @returns `startingNode` or one of its ancestors that matches the `findFn` predicate and is not the `RootNode`, or `null` if no match was found.
+ */
+export const $findMatchingParent: {
+  <T extends LexicalNode>(
+    startingNode: LexicalNode,
+    findFn: (node: LexicalNode) => node is T,
+  ): T | null;
+  (
+    startingNode: LexicalNode,
+    findFn: (node: LexicalNode) => boolean,
+  ): LexicalNode | null;
+} = (
+  startingNode: LexicalNode,
+  findFn: (node: LexicalNode) => boolean,
+): LexicalNode | null => {
+  let curr: ElementNode | LexicalNode | null = startingNode;
+
+  while (curr != null && !$isRootNode(curr)) {
+    if (findFn(curr)) {
+      return curr;
+    }
+
+    curr = curr.getParent();
+  }
+
+  return null;
+};

packages/lexical/src/index.ts

@@ -236,6 +236,7 @@ export {
   $cloneWithProperties,
   $copyNode,
   $create,
+  $findMatchingParent,
   $getAdjacentNode,
   $getEditor,
   $getNearestNodeFromDOMNode,