Use children (#4152)

* useChildren

* path fix

* Revert .github files

* Revert .github files to earlier version

Co-authored-by: Radim Malota <radim.malota@suitu.cz>

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

@@ -13,7 +13,7 @@ import { HistoryEditor } from 'slate-history'
 import throttle from 'lodash/throttle'
 import scrollIntoView from 'scroll-into-view-if-needed'
 
-import Children from './children'
+import useChildren from '../hooks/use-children'
 import Hotkeys from '../utils/hotkeys'
 import {
   IS_FIREFOX,
@@ -986,14 +986,14 @@ export const Editable = (props: EditableProps) => {
           [readOnly, attributes.onPaste]
         )}
       >
-        <Children
+        {useChildren({
-          decorate={decorate}
+          decorate,
-          decorations={decorations}
+          decorations,
-          node={editor}
+          node: editor,
-          renderElement={renderElement}
+          renderElement,
-          renderLeaf={renderLeaf}
+          renderLeaf,
-          selection={editor.selection}
+          selection: editor.selection,
-        />
+        })}
       </Component>
     </ReadOnlyContext.Provider>
   )

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

@@ -3,7 +3,7 @@ import getDirection from 'direction'
 import { Editor, Node, Range, NodeEntry, Element as SlateElement } from 'slate'
 
 import Text from './text'
-import Children from './children'
+import useChildren from '../hooks/use-children'
 import { ReactEditor, useSlateStatic, useReadOnly } from '..'
 import { SelectedContext } from '../hooks/use-selected'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
@@ -42,16 +42,14 @@ const Element = (props: {
   const isInline = editor.isInline(element)
   const key = ReactEditor.findKey(editor, element)
 
-  let children: JSX.Element | null = (
+  let children: JSX.Element | null = useChildren({
-    <Children
+    decorate,
-      decorate={decorate}
+    decorations,
-      decorations={decorations}
+    node: element,
-      node={element}
+    renderElement,
-      renderElement={renderElement}
+    renderLeaf,
-      renderLeaf={renderLeaf}
+    selection,
-      selection={selection}
+  })
-    />
-  )
 
   // Attributes that the developer must mix into the element in their
   // custom node renderer component.

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

@@ -1,18 +1,18 @@
 import React from 'react'
 import { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'
 
-import ElementComponent from './element'
+import ElementComponent from '../components/element'
-import TextComponent from './text'
+import TextComponent from '../components/text'
 import { ReactEditor } from '..'
-import { useSlateStatic } from '../hooks/use-slate-static'
+import { useSlateStatic } from './use-slate-static'
 import { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'
-import { RenderElementProps, RenderLeafProps } from './editable'
+import { RenderElementProps, RenderLeafProps } from '../components/editable'
 
 /**
  * Children.
  */
 
-const Children = (props: {
+const useChildren = (props: {
   decorate: (entry: NodeEntry) => Range[]
   decorations: Range[]
   node: Ancestor
@@ -81,7 +81,7 @@ const Children = (props: {
     NODE_TO_PARENT.set(n, node)
   }
 
-  return <React.Fragment>{children}</React.Fragment>
+  return children
 }
 
-export default Children
+export default useChildren