mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-01-17 13:38:37 +01:00
Code Issues Releases Wiki Activity

Do not try to batch updates in React >= 18 (#5460)

Browse Source 
* Do not try to batch updates in React >= 18

* Linter fixes

* Add changeset
This commit is contained in:
Joe Anderson 2023-06-21 19:09:32 +01:00 committed by GitHub
parent 4b8ba512e7
commit 53395449e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nice-shirts-flash.md Normal file
View File

@ -0,0 +1,5 @@
---
'slate-react': patch
---
Do not attempt to batch updates manually in React >= 18

4
packages/slate-react/src/components/slate.tsx
View File

@ -9,7 +9,7 @@ import {
} from '../hooks/use-slate-selector'
import { EditorContext } from '../hooks/use-slate-static'
import { ReactEditor } from '../plugin/react-editor'
import { IS_REACT_VERSION_17_OR_ABOVE } from '../utils/environment'
import { REACT_MAJOR_VERSION } from '../utils/environment'
import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
/**
@ -78,7 +78,7 @@ export const Slate = (props: {
useIsomorphicLayoutEffect(() => {
const fn = () => setIsFocused(ReactEditor.isFocused(editor))
if (IS_REACT_VERSION_17_OR_ABOVE) {
if (REACT_MAJOR_VERSION >= 17) {
// In React >= 17 onFocus and onBlur listen to the focusin and focusout events during the bubbling phase.
// Therefore in order for <Editable />'s handlers to run first, which is necessary for ReactEditor.isFocused(editor)
// to return the correct value, we have to listen to the focusin and focusout events without useCapture here.

15
packages/slate-react/src/plugin/with-react.ts
View File

@ -36,6 +36,7 @@ import {
NODE_TO_KEY,
} from '../utils/weak-maps'
import { ReactEditor } from './react-editor'
import { REACT_MAJOR_VERSION } from '../utils/environment'
/**
* `withReact` adds React and DOM specific behaviors to the editor.
@ -324,11 +325,17 @@ export const withReact = <T extends BaseEditor>(
}
e.onChange = options => {
// COMPAT: React doesn't batch `setState` hook calls, which means that the
// children and selection can get out of sync for one render pass. So we
// have to use this unstable API to ensure it batches them. (2019/12/03)
// COMPAT: React < 18 doesn't batch `setState` hook calls, which means
// that the children and selection can get out of sync for one render
// pass. So we have to use this unstable API to ensure it batches them.
// (2019/12/03)
// https://github.com/facebook/react/issues/14259#issuecomment-439702367
ReactDOM.unstable_batchedUpdates(() => {
const maybeBatchUpdates =
REACT_MAJOR_VERSION < 18
? ReactDOM.unstable_batchedUpdates
: (callback: () => void) => callback()
maybeBatchUpdates(() => {
const onContextChange = EDITOR_TO_ON_CHANGE.get(e)
if (onContextChange) {

3
packages/slate-react/src/utils/environment.ts
View File

@ -1,7 +1,6 @@
import React from 'react'
export const IS_REACT_VERSION_17_OR_ABOVE =
parseInt(React.version.split('.')[0], 10) >= 17
export const REACT_MAJOR_VERSION = parseInt(React.version.split('.')[0], 10)
export const IS_IOS =
typeof navigator !== 'undefined' &&