diff --git a/docs/libraries/slate-react.md b/docs/libraries/slate-react.md index 1fc56c056..c216a6a06 100644 --- a/docs/libraries/slate-react.md +++ b/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 - diff --git a/packages/slate-react/src/components/children.tsx b/packages/slate-react/src/components/children.tsx index 6bd279327..2c206c4cb 100644 --- a/packages/slate-react/src/components/children.tsx +++ b/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 = diff --git a/packages/slate-react/src/components/element.tsx b/packages/slate-react/src/components/element.tsx index bbbc27fdb..8d35cb581 100644 --- a/packages/slate-react/src/components/element.tsx +++ b/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(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 ( diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx index 82b3caa0c..37584d76b 100644 --- a/packages/slate-react/src/components/slate.tsx +++ b/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' diff --git a/packages/slate-react/src/components/string.tsx b/packages/slate-react/src/components/string.tsx index 307ec39a8..0a9228d95 100644 --- a/packages/slate-react/src/components/string.tsx +++ b/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) diff --git a/packages/slate-react/src/components/text.tsx b/packages/slate-react/src/components/text.tsx index 4778ab775..f37a0ff6a 100644 --- a/packages/slate-react/src/components/text.tsx +++ b/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(null) const leaves = SlateText.decorations(text, decorations) const key = ReactEditor.findKey(editor, text) diff --git a/packages/slate-react/src/hooks/use-editor.tsx b/packages/slate-react/src/hooks/use-editor.tsx index 5c956e27f..19bb57314 100644 --- a/packages/slate-react/src/hooks/use-editor.tsx +++ b/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(null) diff --git a/packages/slate-react/src/hooks/use-slate-static.tsx b/packages/slate-react/src/hooks/use-slate-static.tsx new file mode 100644 index 000000000..978990a99 --- /dev/null +++ b/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(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 component's context.` + ) + } + + return editor +} diff --git a/packages/slate-react/src/index.ts b/packages/slate-react/src/index.ts index 9b7d86859..911e22370 100644 --- a/packages/slate-react/src/index.ts +++ b/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' diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx index ec55e59b6..84e42f906 100644 --- a/site/examples/check-lists.tsx +++ b/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 ( diff --git a/site/examples/editable-voids.tsx b/site/examples/editable-voids.tsx index 6f836cee9..50ac677a7 100644 --- a/site/examples/editable-voids.tsx +++ b/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 (