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`

Author: 12joan

.changeset/chatty-flies-pay.md

@@ -0,0 +1,5 @@
+---
+'slate-dom': minor
+---
+
+- Add `splitDecorationsByChild` to split an array of decorated ranges by child index.

.changeset/silly-crabs-sort.md

@@ -0,0 +1,5 @@
+---
+'slate': patch
+---
+
+- PERF: Use pure JS instead of Immer for applying operations and transforming points and ranges. Immer is now used only for producing fragments.

.changeset/tiny-scissors-yell.md

@@ -0,0 +1,14 @@
+---
+'slate-react': minor
+---
+
+- Implement experimental chunking optimization (disabled by default, see https://docs.slatejs.org/walkthroughs/09-performance).
+- Add `useElement` and `useElementIf` hooks to get the current element.
+- **BREAKING CHANGE:** Decorations are no longer recomputed when a node's parent re-renders, only when the node itself re-renders or when the `decorate` function is changed.
+  - Ensure that `decorate` is a pure function of the node passed into it. Depending on the node's parent may result in decorations not being recomputed when you expect them to be.
+  - If this change impacts you, consider changing your `decorate` function to work on the node's parent instead.
+  - For example, if your `decorate` function decorates a `code-line` based on the parent `code-block`'s language, decorate the `code-block` instead.
+  - This is unlikely to result in any performance detriment, since in previous versions of `slate-react`, the decorations of all siblings were recomputed when one sibling was modified.
+- Increase minimum `slate-dom` version to `0.116.0`.
+- Deprecate the `useSlateWithV` hook
+- PERF: Use subscribable pattern for `useSlate`, `useSelected` and decorations to reduce re-renders.

.github/workflows/ci.yml

@@ -34,3 +34,11 @@ jobs:
         run: yarn && yarn build && yarn ${{ matrix.command }}
         env:
           CI: true
+
+      - name: Upload Playwright test results
+        if: ${{ !cancelled() && matrix.command == 'test:integration' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: test-results
+          retention-days: 30

.gitignore

@@ -10,6 +10,7 @@ packages/*/yarn.lock
 site/out/
 tmp/
 test-results/
+coverage
 .DS_Store
 
 # Recommendation from https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored (not using Zero-installs)

.yarn/sdks/integrations.yml

@@ -2,4 +2,5 @@
 # Manual changes might be lost!
 
 integrations:
+  - vim
   - vscode

docs/Summary.md

@@ -11,7 +11,8 @@
 - [Executing Commands](walkthroughs/05-executing-commands.md)
 - [Saving to a Database](walkthroughs/06-saving-to-a-database.md)
 - [Enabling Collaborative Editing](walkthroughs/07-enabling-collaborative-editing.md)
-- [Using the Bundled Source](walkthroughs/xx-using-the-bundled-source.md)
+- [Using the Bundled Source](walkthroughs/08-using-the-bundled-source.md)
+- [Improving Performance](walkthroughs/09-performance.md)
 
 ## Concepts
 

docs/concepts/09-rendering.md

@@ -192,3 +192,7 @@ It is also possible to apply custom styles with a stylesheet and `className`. Ho
 - Provide your styles using the `style` prop instead of a stylesheet, which overrides the default inline styles.
 - Pass the `disableDefaultStyles` prop to the `<Editable>` component.
 - Use `!important` in your stylesheet declarations to make them override the inline styles.
+
+## Performance
+
+See [Improving Performance](../walkthroughs/09-performance.md) for ways to improve the rendering performance of the editor.

docs/images/performance/firefox-inp.png

@@ -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: