Differentiate between useSlate and useEditor hooks (#3941)

* Rename useEditor function to useSlateStatic

* Expose useEditor hook with deprecated flag

* Clarify useEditor deprecation in file and in docs

docs/libraries/slate-react.md

@@ -18,11 +18,11 @@ React components for rendering Slate editors
 
 The main Slate editor.
 
-###### `DefaultElement(props: RenderElementProps)` 
+###### `DefaultElement(props: RenderElementProps)`
 
 The default element renderer.
 
-###### `DefaultLeaf(props: RenderLeafProps)` 
+###### `DefaultLeaf(props: RenderLeafProps)`
 
 The default custom leaf renderer.
 
@@ -34,10 +34,6 @@ A wrapper around the provider to handle `onChange` events, because the editor is
 
 React hooks for Slate editors
 
-###### `useEditor`
-
-Get the current editor object from the React context.
-
 ###### `useFocused`
 
 Get the current `focused` state of the editor.
@@ -52,7 +48,11 @@ Get the current `selected` state of an element.
 
 ###### `useSlate`
 
-Get the current editor object from the React context.
+Get the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
+
+###### `useSlateStatic`
+
+Get the current editor object from the React context. A version of useSlate that does not re-render the context. Previously called `useEditor`.
 
 ## ReactEditor
 
@@ -137,4 +137,3 @@ Adds React and DOM specific behaviors to the editor.
 ## Utils
 
 Private convenience modules
-

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

@@ -4,7 +4,7 @@ import { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'
 import ElementComponent from './element'
 import TextComponent from './text'
 import { ReactEditor } from '..'
-import { useEditor } from '../hooks/use-editor'
+import { useSlateStatic } from '../hooks/use-slate-static'
 import { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'
 import { RenderElementProps, RenderLeafProps } from './editable'
 
@@ -28,7 +28,7 @@ const Children = (props: {
     renderLeaf,
     selection,
   } = props
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, node)
   const children = []
   const isLeafBlock =

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

@@ -4,7 +4,7 @@ import { Editor, Node, Range, NodeEntry, Element as SlateElement } from 'slate'
 
 import Text from './text'
 import Children from './children'
-import { ReactEditor, useEditor, useReadOnly } from '..'
+import { ReactEditor, useSlateStatic, useReadOnly } from '..'
 import { SelectedContext } from '../hooks/use-selected'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
 import {
@@ -37,7 +37,7 @@ const Element = (props: {
     selection,
   } = props
   const ref = useRef<HTMLElement>(null)
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const readOnly = useReadOnly()
   const isInline = editor.isInline(element)
   const key = ReactEditor.findKey(editor, element)
@@ -150,7 +150,7 @@ const MemoizedElement = React.memo(Element, (prev, next) => {
 
 export const DefaultElement = (props: RenderElementProps) => {
   const { attributes, children, element } = props
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const Tag = editor.isInline(element) ? 'span' : 'div'
   return (
     <Tag {...attributes} style={{ position: 'relative' }}>

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

@@ -3,7 +3,7 @@ import { Node } from 'slate'
 
 import { ReactEditor } from '../plugin/react-editor'
 import { FocusedContext } from '../hooks/use-focused'
-import { EditorContext } from '../hooks/use-editor'
+import { EditorContext } from '../hooks/use-slate-static'
 import { SlateContext } from '../hooks/use-slate'
 import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Editor, Text, Path, Element, Node } from 'slate'
 
-import { ReactEditor, useEditor } from '..'
+import { ReactEditor, useSlateStatic } from '..'
 
 /**
  * Leaf content strings.
@@ -14,7 +14,7 @@ const String = (props: {
   text: Text
 }) => {
   const { isLast, leaf, parent, text } = props
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, text)
   const parentPath = Path.parent(path)
 

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

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import { Range, Element, Text as SlateText } from 'slate'
 
 import Leaf from './leaf'
-import { ReactEditor, useEditor } from '..'
+import { ReactEditor, useSlateStatic } from '..'
 import { RenderLeafProps } from './editable'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
 import {
@@ -23,7 +23,7 @@ const Text = (props: {
   text: SlateText
 }) => {
   const { decorations, isLast, parent, renderLeaf, text } = props
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const ref = useRef<HTMLSpanElement>(null)
   const leaves = SlateText.decorations(text, decorations)
   const key = ReactEditor.findKey(editor, text)

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

@@ -4,6 +4,7 @@ import { ReactEditor } from '../plugin/react-editor'
 
 /**
  * A React context for sharing the editor object.
+ * @deprecated Use useSlateStatic instead.
  */
 
 export const EditorContext = createContext<ReactEditor | null>(null)

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

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react'
+
+import { ReactEditor } from '../plugin/react-editor'
+
+/**
+ * A React context for sharing the editor object.
+ */
+
+export const EditorContext = createContext<ReactEditor | null>(null)
+
+/**
+ * Get the current editor object from the React context.
+ */
+
+export const useSlateStatic = () => {
+  const editor = useContext(EditorContext)
+
+  if (!editor) {
+    throw new Error(
+      `The \`useSlateStatic\` hook must be used inside the <Slate> component's context.`
+    )
+  }
+
+  return editor
+}

packages/slate-react/src/index.ts

@@ -9,7 +9,7 @@ export { DefaultLeaf } from './components/leaf'
 export { Slate } from './components/slate'
 
 // Hooks
-export { useEditor } from './hooks/use-editor'
+export { useSlateStatic } from './hooks/use-slate-static'
 export { useFocused } from './hooks/use-focused'
 export { useReadOnly } from './hooks/use-read-only'
 export { useSelected } from './hooks/use-selected'

site/examples/check-lists.tsx

@@ -3,7 +3,7 @@ import {
   Slate,
   Editable,
   withReact,
-  useEditor,
+  useSlateStatic,
   useReadOnly,
   ReactEditor,
 } from 'slate-react'
@@ -75,7 +75,7 @@ const Element = props => {
 }
 
 const CheckListItemElement = ({ attributes, children, element }) => {
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const readOnly = useReadOnly()
   const { checked } = element
   return (

site/examples/editable-voids.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react'
 import { Transforms, createEditor, Node } from 'slate'
-import { Slate, Editable, useEditor, withReact } from 'slate-react'
+import { Slate, Editable, useSlateStatic, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
@@ -114,7 +114,7 @@ const EditableVoidElement = ({ attributes, children, element }) => {
 }
 
 const InsertEditableVoidButton = () => {
-  const editor = useEditor()
+  const editor = useSlateStatic()
   return (
     <Button
       onMouseDown={event => {

site/examples/embeds.tsx

@@ -4,7 +4,7 @@ import {
   Slate,
   Editable,
   withReact,
-  useEditor,
+  useSlateStatic,
   ReactEditor,
   useFocused,
   useSelected,
@@ -40,7 +40,7 @@ const Element = props => {
 }
 
 const VideoElement = ({ attributes, children, element }) => {
-  const editor = useEditor()
+  const editor = useSlateStatic()
   const { url } = element
   return (
     <div {...attributes}>

site/examples/images.tsx

@@ -5,7 +5,7 @@ import { Node, Transforms, createEditor } from 'slate'
 import {
   Slate,
   Editable,
-  useEditor,
+  useSlateStatic,
   useSelected,
   useFocused,
   withReact,
@@ -109,7 +109,7 @@ const ImageElement = ({ attributes, children, element }) => {
 }
 
 const InsertImageButton = () => {
-  const editor = useEditor()
+  const editor = useSlateStatic()
   return (
     <Button
       onMouseDown={event => {