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`

playwright/integration/examples/code-highlighting.test.ts

@@ -30,7 +30,8 @@ test.describe('code highlighting', () => {
 
 // it also tests if select and code block button works the right way
 async function setText(page: Page, text: string, language: string) {
-  await page.locator('[data-slate-editor]').fill('') // clear editor
+  await page.locator('[data-slate-editor]').selectText()
+  await page.keyboard.press('Backspace') // clear editor
   await page.getByTestId('code-block-button').click() // convert first and the only one paragraph to code block
   await page.getByTestId('language-select').selectOption({ value: language }) // select the language option
 

playwright/integration/examples/huge-document.test.ts

@@ -1,18 +1,13 @@
 import { test, expect } from '@playwright/test'
 
 test.describe('huge document example', () => {
-  const elements = [
-    { tag: '#__next h1', count: 100 },
-    { tag: '#__next p', count: 700 },
-  ]
-
   test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:3000/examples/huge-document')
   })
 
-  test('contains image', async ({ page }) => {
-    for (const { tag, count } of elements) {
-      await expect(page.locator(tag)).toHaveCount(count)
-    }
+  test('uses chunking', async ({ page }) => {
+    await expect(page.getByLabel('Blocks')).toHaveValue('10000')
+    await expect(page.getByLabel('Chunk size')).toHaveValue('1000')
+    await expect(page.locator('[data-slate-chunk]')).toHaveCount(10)
   })
 })

playwright/integration/examples/shadow-dom.test.ts

@@ -24,7 +24,9 @@ test.describe('shadow-dom example', () => {
     await expect(textbox).toHaveCount(1)
 
     // Clear any existing text and type new text into the textbox
-    await textbox.fill('Hello, Playwright!')
+    await page.locator('[data-slate-editor]').selectText()
+    await page.keyboard.press('Backspace')
+    await page.keyboard.type('Hello, Playwright!')
 
     // Assert that the textbox contains the correct text
     await expect(textbox).toHaveText('Hello, Playwright!')