Capture element selections through useSelected (#4365)

* Capture element selections (ianstormtaylor#4338)

* Rebase

* Add changeset

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

@@ -5,7 +5,6 @@ import { Editor, Node, Range, NodeEntry, Element as SlateElement } from 'slate'
 import Text from './text'
 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'
 import {
   NODE_TO_ELEMENT,
@@ -131,11 +130,7 @@ const Element = (props: {
     }
   })
 
-  return (
-    <SelectedContext.Provider value={!!selection}>
-      {renderElement({ attributes, children, element })}
-    </SelectedContext.Provider>
-  )
+  return renderElement({ attributes, children, element })
 }
 
 const MemoizedElement = React.memo(Element, (prev, next) => {

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

@@ -12,6 +12,7 @@ import {
   RenderLeafProps,
   RenderPlaceholderProps,
 } from '../components/editable'
+import { SelectedContext } from './use-selected'
 
 /**
  * Children.
@@ -60,15 +61,17 @@ const useChildren = (props: {
 
     if (Element.isElement(n)) {
       children.push(
-        <ElementComponent
-          decorations={ds}
-          element={n}
-          key={key.id}
-          renderElement={renderElement}
-          renderPlaceholder={renderPlaceholder}
-          renderLeaf={renderLeaf}
-          selection={sel}
-        />
+        <SelectedContext.Provider value={!!sel}>
+          <ElementComponent
+            decorations={ds}
+            element={n}
+            key={key.id}
+            renderElement={renderElement}
+            renderPlaceholder={renderPlaceholder}
+            renderLeaf={renderLeaf}
+            selection={sel}
+          />
+        </SelectedContext.Provider>
       )
     } else {
       children.push(