From 906e5af1b1af07454da0a93490fca70b58fd9986 Mon Sep 17 00:00:00 2001
From: Samarjeet <samarsault@gmail.com>
Date: Thu, 12 Aug 2021 19:33:22 +0530
Subject: [PATCH] Capture element selections through useSelected (#4365)

* Capture element selections (ianstormtaylor#4338)

* Rebase

* Add changeset
---
 .changeset/tender-crabs-begin.md              |  5 +++++
 .../slate-react/src/components/element.tsx    |  7 +------
 .../slate-react/src/hooks/use-children.tsx    | 21 +++++++++++--------
 3 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/tender-crabs-begin.md

diff --git a/.changeset/tender-crabs-begin.md b/.changeset/tender-crabs-begin.md
new file mode 100644
index 000000000..6fee5572b
--- /dev/null
+++ b/.changeset/tender-crabs-begin.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+fix a bug where element selections were not captured by useSelected
diff --git a/packages/slate-react/src/components/element.tsx b/packages/slate-react/src/components/element.tsx
index 1fb5b8912..591655fef 100644
--- a/packages/slate-react/src/components/element.tsx
+++ b/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) => {
diff --git a/packages/slate-react/src/hooks/use-children.tsx b/packages/slate-react/src/hooks/use-children.tsx
index 812c1ae0a..fe1b34cee 100644
--- a/packages/slate-react/src/hooks/use-children.tsx
+++ b/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(