bugfix: moves EDITOR_TO_ON_CHANGE.set(editor, onContextChange) into useEffect

[Cspeisman]

Description
With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component. This change in behavior results in the EDITOR_TO_ON_CHANGE map getting set to a NoOp function due to the unmount call and does not reset to the correct callback function until the next state change happens within the Slate component.

The fix for this is to put EDITOR_TO_ON_CHANGE.set(editor, onContextChange) into useEffect so that the correct onContextChange callback gets added back into the EDITOR_TO_ON_CHANGE map when effects get re-created on a mounted component.

Link to read more about this change in React 18.

Example

This is what the EDITOR_TO_ON_CHANGE callbacks look like within the lifecycle before the fix:

After the fix:

Checks

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7421d1d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dylans]

Thanks @Cspeisman . Seemingly unrelated CI tests are failing, so I'm going to land this.

[Cspeisman]

Thanks @dylans, any ideas on what's causing the flakey playwright tests? I saw a handful of PRs were running into the same issue but with different failing tests. I can take a look at some point but was curious if you all had a suspicion of where to start?

Thanks again!

[etrepum]

Per #5289 the reason this causes an issue is that the useEffect needs to have onContextChange in its dependency array. This kind of bug can be avoided with React's eslint plugin https://reactjs.org/docs/hooks-rules.html#eslint-plugin

diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
index 0a03ed82..4a1b8829 100644
--- a/packages/slate-react/src/components/slate.tsx
+++ b/packages/slate-react/src/components/slate.tsx
@@ -68,7 +68,7 @@ export const Slate = (props: {
       EDITOR_TO_ON_CHANGE.set(editor, () => {})
       unmountRef.current = true
     }
-  }, [])
+  }, [onContextChange])
 
   const [isFocused, setIsFocused] = useState(ReactEditor.isFocused(editor))