[editable] Fix Memory Leak when switching between focused editables

[hellsan631]

Description
I've found a memory leak in slate-react where-in when you'd switch between two pages, each with their own editor instance, auto-focusing on these elements causes a memory leak, where there would be a lot of Detached HTML Element's just floating around.

At first I thought it a bunch of different bugs with chromium, but noticed that when I force removed the input elements from the dom before the component would unmount, we would still see small leak referencing "latestElement" (while simultaneously, I would still the element & children references in the IS_FOCUSED WeakMap) Looking at editable's code, I realized that we're storing state in a weird way, directly mutating it using useMemo, and React isn't removing all references (probably because its still stored in the WeakMap.).

The simple fix for this is what I've commited; using useLayoutEffect, we forcably remove the latestElement and references to it, before react unmounts the component.

Example
(Both of these examples were run using memlab, in an isolated test environment)
Before (Has Big Dom Leak)
https://github.com/ianstormtaylor/slate/assets/1474758/1ac76419-c48d-48ff-a759-994c268ea72f

After (No Memory Leak)
https://github.com/ianstormtaylor/slate/assets/1474758/e0a3961c-18cb-42d2-93a5-b01edbb3e52c

Context
We're using an older version of slate (0.91), but even when doing an upgrade in an isolated branch, we still see this issue. We're also using the most recent version of React (18.2.0).

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]

🦋 Changeset detected

Latest commit: 40aa9d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slate-react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[dylans]

Looks like a simple fix with great results. I'll land and release within the next day or two.

if you have time, please add a changeset, otherwise I will. Thanks!

[hellsan631]

ty for the changeset! 🙏

[dylans]

This one has introduced some regressions for us.

My colleague's thinking:

"If state goes, so should the reference and the element will be garbage collected.

State is updated in a weird way, mutating memo is certainly not something that should be done like this. Perhaps using memo in such a way is the thing that is introducing the memory leak, because it don't think it gets cleared deterministically, but remove shouldn't be called

It feels like the issue is useMemo."

[philicious]

@dylans this also breaks our implementation

  useEffect(() => {
    editor.children = value
    editor.onChange()

    ReactEditor.focus(editor) // this line now causes the editor to blank out!! if removed, its working but editor doesnt get initial focus
  }, [value, editor])
...
    <Slate
      editor={editor}
      initialValue={[]}
    >

[floklein]

Crash for us too on unmount.

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I recreated our setup: https://stackblitz.com/edit/react-egzyvh?file=src%2FApp.js
Created an issue: #5553

[dylans]

Reverting per the above discussion.

[philicious]

@dylans for what its worth: I tried 0.101.0 which claims to revert this #5542 but it still crashes for us on ReactEditor.focus(editor) with code seen in #5542 (comment) so I assume 0.101.0 does sth else thats also problematic