fix decorate bug (#4277) without adding extra layers of render tree (#4421)

* fix #4394 without adding extra layers of render tree

* oops unused import

* Add changeset

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>

.changeset/real-jobs-bow.md

@@ -0,0 +1,6 @@
+---
+'slate-react': patch
+'slate': patch
+---
+
+fix decorate bug (#4277) without adding extra layers of render tree

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

@@ -48,6 +48,10 @@ import {
   EDITOR_TO_WINDOW,
 } from '../utils/weak-maps'
 
+const Children = (props: Parameters<typeof useChildren>[0]) => (
+  <React.Fragment>{useChildren(props)}</React.Fragment>
+)
+
 /**
  * `RenderElementProps` are passed to the `renderElement` handler.
  */
@@ -1120,14 +1124,14 @@ export const Editable = (props: EditableProps) => {
             [readOnly, attributes.onPaste]
           )}
         >
-          {useChildren({
-            decorations,
-            node: editor,
-            renderElement,
-            renderPlaceholder,
-            renderLeaf,
-            selection: editor.selection,
-          })}
+          <Children
+            decorations={decorations}
+            node={editor}
+            renderElement={renderElement}
+            renderPlaceholder={renderPlaceholder}
+            renderLeaf={renderLeaf}
+            selection={editor.selection}
+          />
         </Component>
       </DecorateContext.Provider>
     </ReadOnlyContext.Provider>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Editor, Range, Element, Path, Ancestor, Descendant } from 'slate'
+import { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'
 
 import ElementComponent from '../components/element'
 import TextComponent from '../components/text'
@@ -17,67 +17,6 @@ import {
  * Children.
  */
 
-const Child = (props: {
-  decorations: Range[]
-  parent: Ancestor
-  path: Path
-  child: Descendant
-  isLast: boolean
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  selection: Range | null
-}) => {
-  const {
-    decorations,
-    parent,
-    path,
-    child,
-    isLast,
-    renderElement,
-    renderPlaceholder,
-    renderLeaf,
-    selection,
-  } = props
-  const decorate = useDecorate()
-  const editor = useSlateStatic()
-
-  const range = Editor.range(editor, path)
-  const sel = selection && Range.intersection(range, selection)
-  const ds = decorate([child, path])
-
-  for (const dec of decorations) {
-    const d = Range.intersection(dec, range)
-
-    if (d) {
-      ds.push(d)
-    }
-  }
-
-  if (Element.isElement(child)) {
-    return (
-      <ElementComponent
-        decorations={ds}
-        element={child}
-        renderElement={renderElement}
-        renderPlaceholder={renderPlaceholder}
-        renderLeaf={renderLeaf}
-        selection={sel}
-      />
-    )
-  }
-  return (
-    <TextComponent
-      decorations={ds}
-      isLast={isLast}
-      parent={parent}
-      renderPlaceholder={renderPlaceholder}
-      renderLeaf={renderLeaf}
-      text={child}
-    />
-  )
-}
-
 const useChildren = (props: {
   decorations: Range[]
   node: Ancestor
@@ -94,6 +33,7 @@ const useChildren = (props: {
     renderLeaf,
     selection,
   } = props
+  const decorate = useDecorate()
   const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, node)
   const children = []
@@ -106,21 +46,43 @@ const useChildren = (props: {
     const p = path.concat(i)
     const n = node.children[i] as Descendant
     const key = ReactEditor.findKey(editor, n)
+    const range = Editor.range(editor, p)
+    const sel = selection && Range.intersection(range, selection)
+    const ds = decorate([n, p])
 
-    children.push(
-      <Child
-        decorations={decorations}
-        parent={node}
-        path={p}
-        child={n}
-        key={key.id}
-        isLast={isLeafBlock && i === node.children.length - 1}
-        renderElement={renderElement}
-        renderPlaceholder={renderPlaceholder}
-        renderLeaf={renderLeaf}
-        selection={selection}
-      />
-    )
+    for (const dec of decorations) {
+      const d = Range.intersection(dec, range)
+
+      if (d) {
+        ds.push(d)
+      }
+    }
+
+    if (Element.isElement(n)) {
+      children.push(
+        <ElementComponent
+          decorations={ds}
+          element={n}
+          key={key.id}
+          renderElement={renderElement}
+          renderPlaceholder={renderPlaceholder}
+          renderLeaf={renderLeaf}
+          selection={sel}
+        />
+      )
+    } else {
+      children.push(
+        <TextComponent
+          decorations={ds}
+          key={key.id}
+          isLast={isLeafBlock && i === node.children.length - 1}
+          parent={node}
+          renderPlaceholder={renderPlaceholder}
+          renderLeaf={renderLeaf}
+          text={n}
+        />
+      )
+    }
 
     NODE_TO_INDEX.set(n, i)
     NODE_TO_PARENT.set(n, node)