Avoid overly-cautious type guards in favor of more performant type discriminators (#5982)

* add `isEditorNode`, `isElementNode`, and `isTextNode` and switch to using them whenever possible.
also switch to `node === editor` checks where it makes sense
also add a comment to a confusing failure state of `Node.parent`
also remove a superfluous call to `Editor.nodes` in certain codepaths of `Editor.wrapNodes`

* fix deep checking for `isEditor` and check for new properties from #5307

* convert all instances of `Element.isAncestor` and a few I missed before

* changeset

* fix pretter complaint in changeset

* use new guards in other packages and examples

* revert wrap nodes change (keeping new guards)

* add other packages to changeset

* preemptively update peerDependencies

* renamed isXNode functions to Node.isX

* replaced a few places where isText is passed as a value directly

* removed unneeded imports

* update yarn lock so tests can pass

* added `Node.isAncestor` sugar function

* update jsx examples

Author: nabbydude

.changeset/rich-cheetahs-battle.md

@@ -0,0 +1,9 @@
+---
+'slate': minor
+'slate-react': patch
+'slate-dom': patch
+---
+
+Add `Node.isEditor`, `Node.isElement`, and `Node.isText` as alternative type guards for when we already know the object is a node.
+Use these new functions instead of `Editor.isEditor`, `Element.isElement`, and `Text.isText` whenever possible, the classic functions are only necessary for typechecking an entirely unknown object.
+===

packages/slate-dom/package.json

@@ -34,7 +34,7 @@
     "source-map-loader": "^4.0.1"
   },
   "peerDependencies": {
-    "slate": ">=0.99.0"
+    "slate": ">=0.121.0"
   },
   "umdGlobals": {
     "slate": "Slate"

packages/slate-dom/src/plugin/dom-editor.ts

@@ -1,7 +1,6 @@
 import {
   BaseEditor,
   Editor,
-  Element,
   Node,
   Path,
   Point,
@@ -329,7 +328,7 @@ export const DOMEditor: DOMEditorInterface = {
     // If the drop target is inside a void node, move it into either the
     // next or previous node, depending on which side the `x` and `y`
     // coordinates are closest to.
-    if (Element.isElement(node) && Editor.isVoid(editor, node)) {
+    if (Node.isElement(node) && Editor.isVoid(editor, node)) {
       const rect = target.getBoundingClientRect()
       const isPrev = editor.isInline(node)
         ? x - rect.left < rect.left + rect.width - x
@@ -396,7 +395,7 @@ export const DOMEditor: DOMEditorInterface = {
       const parent = NODE_TO_PARENT.get(child)
 
       if (parent == null) {
-        if (Editor.isEditor(child)) {
+        if (child === editor) {
           return path
         } else {
           break
@@ -548,21 +547,22 @@ export const DOMEditor: DOMEditorInterface = {
 
   isTargetInsideNonReadonlyVoid: (editor, target) => {
     if (IS_READ_ONLY.get(editor)) return false
+    if (!DOMEditor.hasTarget(editor, target)) return false
 
-    const slateNode =
-      DOMEditor.hasTarget(editor, target) &&
-      DOMEditor.toSlateNode(editor, target)
-    return Element.isElement(slateNode) && Editor.isVoid(editor, slateNode)
+    const slateNode = DOMEditor.toSlateNode(editor, target)
+    return Node.isElement(slateNode) && Editor.isVoid(editor, slateNode)
   },
 
   setFragmentData: (editor, data, originEvent) =>
     editor.setFragmentData(data, originEvent),
 
   toDOMNode: (editor, node) => {
-    const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor)
-    const domNode = Editor.isEditor(node)
-      ? EDITOR_TO_ELEMENT.get(editor)
-      : KEY_TO_ELEMENT?.get(DOMEditor.findKey(editor, node))
+    const domNode =
+      node === editor
+        ? EDITOR_TO_ELEMENT.get(editor)
+        : EDITOR_TO_KEY_TO_ELEMENT.get(editor)?.get(
+            DOMEditor.findKey(editor, node)
+          )
 
     if (!domNode) {
       throw new Error(

packages/slate-dom/src/plugin/with-dom.ts

@@ -1,7 +1,6 @@
 import {
   BaseEditor,
   Editor,
-  Element,
   Node,
   Operation,
   Path,
@@ -97,7 +96,7 @@ export const withDOM = <T extends BaseEditor>(
 
     if (e.selection && Range.isCollapsed(e.selection)) {
       const parentBlockEntry = Editor.above(e, {
-        match: n => Element.isElement(n) && Editor.isBlock(e, n),
+        match: n => Node.isElement(n) && Editor.isBlock(e, n),
         at: e.selection,
       })
 

packages/slate-dom/src/utils/diff-text.ts

@@ -1,13 +1,4 @@
-import {
-  Editor,
-  Node,
-  Operation,
-  Path,
-  Point,
-  Range,
-  Text,
-  Element,
-} from 'slate'
+import { Editor, Node, Operation, Path, Point, Range } from 'slate'
 import { EDITOR_TO_PENDING_DIFFS } from './weak-maps'
 
 export type StringDiff = {
@@ -33,7 +24,7 @@ export function verifyDiffState(editor: Editor, textDiff: TextDiff): boolean {
   }
 
   const node = Node.get(editor, path)
-  if (!Text.isText(node)) {
+  if (!Node.isText(node)) {
     return false
   }
 
@@ -49,7 +40,7 @@ export function verifyDiffState(editor: Editor, textDiff: TextDiff): boolean {
   }
 
   const nextNode = Node.get(editor, nextPath)
-  return Text.isText(nextNode) && nextNode.text.startsWith(diff.text)
+  return Node.isText(nextNode) && nextNode.text.startsWith(diff.text)
 }
 
 export function applyStringDiff(text: string, ...diffs: StringDiff[]) {
@@ -170,12 +161,12 @@ export function normalizePoint(editor: Editor, point: Point): Point | null {
   }
 
   let leaf = Node.get(editor, path)
-  if (!Text.isText(leaf)) {
+  if (!Node.isText(leaf)) {
     return null
   }
 
   const parentBlock = Editor.above(editor, {
-    match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+    match: n => Node.isElement(n) && Editor.isBlock(editor, n),
     at: path,
   })
 
@@ -184,7 +175,7 @@ export function normalizePoint(editor: Editor, point: Point): Point | null {
   }
 
   while (offset > leaf.text.length) {
-    const entry = Editor.next(editor, { at: path, match: Text.isText })
+    const entry = Editor.next(editor, { at: path, match: Node.isText })
     if (!entry || !Path.isDescendant(entry[1], parentBlock[1])) {
       return null
     }

packages/slate-react/package.json

@@ -42,8 +42,8 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "slate": ">=0.114.0",
-    "slate-dom": ">=0.119.0"
+    "slate": ">=0.121.0",
+    "slate-dom": ">=0.119.1"
   },
   "umdGlobals": {
     "react": "React",

packages/slate-react/src/components/editable.tsx

@@ -669,7 +669,7 @@ export const Editable = forwardRef(
               ) {
                 const block = Editor.above(editor, {
                   at: anchor.path,
-                  match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+                  match: n => Node.isElement(n) && Editor.isBlock(editor, n),
                 })
 
                 if (block && Node.string(block[0]).includes('\t')) {
@@ -1186,7 +1186,7 @@ export const Editable = forwardRef(
                         relatedTarget
                       )
 
-                      if (Element.isElement(node) && !editor.isVoid(node)) {
+                      if (Node.isElement(node) && !editor.isVoid(node)) {
                         return
                       }
                     }
@@ -1234,13 +1234,12 @@ export const Editable = forwardRef(
                         let blockPath = path
                         if (
                           !(
-                            Element.isElement(node) &&
-                            Editor.isBlock(editor, node)
+                            Node.isElement(node) && Editor.isBlock(editor, node)
                           )
                         ) {
                           const block = Editor.above(editor, {
                             match: n =>
-                              Element.isElement(n) && Editor.isBlock(editor, n),
+                              Node.isElement(n) && Editor.isBlock(editor, n),
                             at: path,
                           })
 
@@ -1435,10 +1434,7 @@ export const Editable = forwardRef(
                       // default, and calling `preventDefault` hides the cursor.
                       const node = ReactEditor.toSlateNode(editor, event.target)
 
-                      if (
-                        Element.isElement(node) &&
-                        Editor.isVoid(editor, node)
-                      ) {
+                      if (Node.isElement(node) && Editor.isVoid(editor, node)) {
                         event.preventDefault()
                       }
                     }
@@ -1455,8 +1451,7 @@ export const Editable = forwardRef(
                       const node = ReactEditor.toSlateNode(editor, event.target)
                       const path = ReactEditor.findPath(editor, node)
                       const voidMatch =
-                        (Element.isElement(node) &&
-                          Editor.isVoid(editor, node)) ||
+                        (Node.isElement(node) && Editor.isVoid(editor, node)) ||
                         Editor.void(editor, { at: path, voids: true })
 
                       // If starting a drag on a void node, make sure it is selected
@@ -1836,7 +1831,7 @@ export const Editable = forwardRef(
                             )
 
                             if (
-                              Element.isElement(currentNode) &&
+                              Node.isElement(currentNode) &&
                               Editor.isVoid(editor, currentNode) &&
                               (Editor.isInline(editor, currentNode) ||
                                 Editor.isBlock(editor, currentNode))

packages/slate-react/src/hooks/android-input-manager/android-input-manager.ts

@@ -1,5 +1,5 @@
 import { DebouncedFunc } from 'lodash'
-import { Editor, Node, Path, Point, Range, Text, Transforms } from 'slate'
+import { Editor, Node, Path, Point, Range, Transforms } from 'slate'
 import { ReactEditor } from '../../plugin/react-editor'
 import {
   applyStringDiff,
@@ -404,7 +404,7 @@ export function createAndroidInputManager({
         if (leaf.text.length === start.offset && end.offset === 0) {
           const next = Editor.next(editor, {
             at: start.path,
-            match: Text.isText,
+            match: Node.isText,
           })
           if (next && Path.equals(next[1], end.path)) {
             // when deleting a linebreak, targetRange will span across the break (ie start in the node before and end in the node after)

packages/slate-react/src/hooks/use-children.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react'
-import { Ancestor, Editor, Element, DecoratedRange, Text } from 'slate'
+import { Ancestor, Editor, Element, DecoratedRange, Text, Node } from 'slate'
 import { Key, isElementDecorationsEqual } from 'slate-dom'
 import {
   RenderChunkProps,
@@ -48,8 +48,7 @@ const useChildren = (props: {
   const editor = useSlateStatic()
   IS_NODE_MAP_DIRTY.set(editor as ReactEditor, false)
 
-  const isEditor = Editor.isEditor(node)
-  const isBlock = !isEditor && Element.isElement(node) && !editor.isInline(node)
+  const isBlock = Node.isElement(node) && !editor.isInline(node)
   const isLeafBlock = isBlock && Editor.hasInlines(editor, node)
   const chunkSize = isLeafBlock ? null : editor.getChunkSize(node)
   const chunking = !!chunkSize
@@ -119,7 +118,7 @@ const useChildren = (props: {
 
   if (!chunking) {
     return node.children.map((n, i) =>
-      Text.isText(n) ? renderTextComponent(n, i) : renderElementComponent(n, i)
+      Node.isText(n) ? renderTextComponent(n, i) : renderElementComponent(n, i)
     )
   }
 

packages/slate-react/src/hooks/use-decorations.ts

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext, useMemo, useRef } from 'react'
-import { DecoratedRange, Descendant, NodeEntry, Text } from 'slate'
+import { DecoratedRange, Descendant, Node, NodeEntry } from 'slate'
 import { isTextDecorationsEqual, isElementDecorationsEqual } from 'slate-dom'
 import { useSlateStatic } from './use-slate-static'
 import { ReactEditor } from '../plugin/react-editor'
@@ -31,7 +31,7 @@ export const useDecorations = (
     return decorate([node, path])
   }
 
-  const equalityFn = Text.isText(node)
+  const equalityFn = Node.isText(node)
     ? isTextDecorationsEqual
     : isElementDecorationsEqual