Decorate re-render optimize to not re-render all elements. (#4138)

* Decorate re-render optimize to not re-render all elements.

* Move provider one level up due to Children no longer component.

* lint fix

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

@@ -22,7 +22,6 @@ import { RenderElementProps, RenderLeafProps } from './editable'
  */
 
 const Element = (props: {
-  decorate: (entry: NodeEntry) => Range[]
   decorations: Range[]
   element: SlateElement
   renderElement?: (props: RenderElementProps) => JSX.Element
@@ -30,7 +29,6 @@ const Element = (props: {
   selection: Range | null
 }) => {
   const {
-    decorate,
     decorations,
     element,
     renderElement = (p: RenderElementProps) => <DefaultElement {...p} />,
@@ -44,7 +42,6 @@ const Element = (props: {
   const key = ReactEditor.findKey(editor, element)
 
   let children: JSX.Element | null = useChildren({
-    decorate,
     decorations,
     node: element,
     renderElement,
@@ -131,7 +128,6 @@ const Element = (props: {
 
 const MemoizedElement = React.memo(Element, (prev, next) => {
   return (
-    prev.decorate === next.decorate &&
     prev.element === next.element &&
     prev.renderElement === next.renderElement &&
     prev.renderLeaf === next.renderLeaf &&

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

@@ -5,6 +5,7 @@ import ElementComponent from '../components/element'
 import TextComponent from '../components/text'
 import { ReactEditor } from '..'
 import { useSlateStatic } from './use-slate-static'
+import { useDecorate } from './use-decorate'
 import { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'
 import { RenderElementProps, RenderLeafProps } from '../components/editable'
 
@@ -13,21 +14,14 @@ import { RenderElementProps, RenderLeafProps } from '../components/editable'
  */
 
 const useChildren = (props: {
-  decorate: (entry: NodeEntry) => Range[]
   decorations: Range[]
   node: Ancestor
   renderElement?: (props: RenderElementProps) => JSX.Element
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
   selection: Range | null
 }) => {
-  const {
-    decorate,
-    decorations,
-    node,
-    renderElement,
-    renderLeaf,
-    selection,
-  } = props
+  const { decorations, node, renderElement, renderLeaf, selection } = props
+  const decorate = useDecorate()
   const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, node)
   const children = []
@@ -55,7 +49,6 @@ const useChildren = (props: {
     if (Element.isElement(n)) {
       children.push(
         <ElementComponent
-          decorate={decorate}
           decorations={ds}
           element={n}
           key={key.id}

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

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+import { Range, NodeEntry } from 'slate'
+
+/**
+ * A React context for sharing the `decorate` prop of the editable.
+ */
+
+export const DecorateContext = createContext<(entry: NodeEntry) => Range[]>(
+  () => []
+)
+
+/**
+ * Get the current `decorate` prop of the editable.
+ */
+
+export const useDecorate = (): ((entry: NodeEntry) => Range[]) => {
+  return useContext(DecorateContext)
+}