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

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'