Experimental chunking optimisation and other performance improvements (#5871)

* Chunking optimization

* Fix comments

* Remove redundant `insertionsMinusRemovals` variable

* Fix typo

* Unblock Netlify builds

* Add placeholder

* Upgrade Playwright (fixes crash when debugging)

* Fix `autoFocus` not working

* Fix huge document test

* Fix the previous issue without changing `useSlateSelector`

* Retry `test:integration`

* Re-implement `useSlateWithV`

* Retry `test:integration`

* Update docs

* Update JS examples to match TS examples

* Upload Playwright's `test-results` directory in CI to access traces

* Change trace mode to `retain-on-first-failure`

* Fix: `Locator.fill(text)` is flaky on Editable

* Add changesets

* Increase minimum `slate-dom` version

* Update changeset

* Update 09-performance.md

* Deprecate the `useSlateWithV` hook

* Fix errors and improve clarity in 09-performance.md

* Minimum `slate-dom` version is now 0.116

* Update `yarn.lock`

docs/libraries/slate-react/hooks.md

@@ -1,19 +1,19 @@
 # Slate React Hooks
 
-- [Check hooks](hooks.md#check-hooks)
-- [Editor hooks](hooks.md#editor-hooks)
-- [Selection hooks](hooks.md#selection-hooks)
-
-### Check hooks
-
-React hooks for Slate editors
-
 #### `useComposing(): boolean`
 
 Get the current `composing` state of the editor. It deals with `compositionstart`, `compositionupdate`, `compositionend` events.
 
 Composition events are triggered by typing (composing) with a language that uses a composition character (e.g. Chinese, Japanese, Korean, etc.) [example](https://en.wikipedia.org/wiki/Input_method#/media/File:Typing_%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4_in_Dubeolsik_keyboard_layout.gif).
 
+#### `useElement(): Element`
+
+Get the current element object. Re-renders whenever the element or any of its descendants changes.
+
+#### `useElementIf(): Element | null`
+
+The same as `useElement()` but returns `null` instead of throwing an error when not inside an element.
+
 #### `useFocused(): boolean`
 
 Get the current `focused` state of the editor.
@@ -24,35 +24,27 @@ Get the current `readOnly` state of the editor.
 
 #### `useSelected(): boolean`
 
-Get the current `selected` state of an element.
-
-### Editor hooks
+Get the current `selected` state of an element. An element is selected if `editor.selection` exists and overlaps any part of the element.
 
 #### `useSlate(): Editor`
 
-Get the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
-
-#### `useSlateWithV(): { editor: Editor, v: number }`
-
-The same as `useSlate()` but includes a version counter which you can use to prevent re-renders.
+Get the current editor object. Re-renders whenever changes occur in the editor.
 
 #### `useSlateStatic(): Editor`
 
 Get the current editor object from the React context. A version of useSlate that does not re-render the context. Previously called `useEditor`.
 
-### Selection hooks
-
 #### `useSlateSelection(): (BaseRange & { placeholder?: string | undefined; onPlaceholderResize?: ((node: HTMLElement | null) => void) | undefined }) | null`
 
-Get the current editor selection from the React context. Only re-renders when the selection changes.
+Get the current editor selection. Only re-renders when the selection changes.
 
 #### `useSlateSelector<T>(selector: (editor: Editor) => T, equalityFn?: (a: T, b: T) => boolean): T`
 
-Similar to `useSlateSelection` but uses redux style selectors to prevent rerendering on every keystroke.
+Use redux style selectors to prevent re-rendering on every keystroke.
 
-Returns a subset of the full selection value based on the `selector`.
+Bear in mind re-rendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function.
 
-Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function for the `equalityFn` argument.
+If `selector` is memoized using `useCallback`, then it will only be called when it or the editor state changes. Otherwise, `selector` will be called every time the component renders.
 
 Example: