Transform.insertNodes & Transform.insertFragment performance optimize (#5543)

* feat: insertNodes & insertFragment performance optimize * chore: change set * feat: add unit test --------- Co-authored-by: mainhanu@outlook.com <xingchi.mxc@alibaba-inc.com>
2025-09-01 19:22:35 +02:00 · 2024-02-07 20:01:16 +08:00
parent c2ae1eda91
commit 3aaf3b517c
73 changed files with 381 additions and 175 deletions
--- a/.changeset/witty-apples-return.md
+++ b/.changeset/witty-apples-return.md
@@ -0,0 +1,5 @@
+---
+'slate': minor
+---
+
+Transform.insertNodes & Transform.insertFragment performance optimize
--- a/packages/slate/src/core/apply.ts
+++ b/packages/slate/src/core/apply.ts
@@ -1,11 +1,13 @@
 import { PathRef } from '../interfaces/path-ref'
 import { PointRef } from '../interfaces/point-ref'
 import { RangeRef } from '../interfaces/range-ref'
-import { DIRTY_PATH_KEYS, DIRTY_PATHS, FLUSHING } from '../utils/weak-maps'
+import { FLUSHING } from '../utils/weak-maps'
 import { Path } from '../interfaces/path'
 import { Transforms } from '../interfaces/transforms'
 import { WithEditorFirstArg } from '../utils/types'
 import { Editor } from '../interfaces/editor'
+import { isBatchingDirtyPaths } from './batch-dirty-paths'
+import { updateDirtyPaths } from './update-dirty-paths'

 export const apply: WithEditorFirstArg<Editor['apply']> = (editor, op) => {
  for (const ref of Editor.pathRefs(editor)) {
@@ -20,41 +22,14 @@ export const apply: WithEditorFirstArg<Editor['apply']> = (editor, op) => {
    RangeRef.transform(ref, op)
  }

-  const oldDirtyPaths = DIRTY_PATHS.get(editor) || []
-  const oldDirtyPathKeys = DIRTY_PATH_KEYS.get(editor) || new Set()
-  let dirtyPaths: Path[]
-  let dirtyPathKeys: Set<string>
-
-  const add = (path: Path | null) => {
-    if (path) {
-      const key = path.join(',')
-
-      if (!dirtyPathKeys.has(key)) {
-        dirtyPathKeys.add(key)
-        dirtyPaths.push(path)
-      }
-    }
+  // update dirty paths
+  if (!isBatchingDirtyPaths(editor)) {
+    const transform = Path.operationCanTransformPath(op)
+      ? (p: Path) => Path.transform(p, op)
+      : undefined
+    updateDirtyPaths(editor, editor.getDirtyPaths(op), transform)
  }

-  if (Path.operationCanTransformPath(op)) {
-    dirtyPaths = []
-    dirtyPathKeys = new Set()
-    for (const path of oldDirtyPaths) {
-      const newPath = Path.transform(path, op)
-      add(newPath)
-    }
-  } else {
-    dirtyPaths = oldDirtyPaths
-    dirtyPathKeys = oldDirtyPathKeys
-  }
-
-  const newDirtyPaths = editor.getDirtyPaths(op)
-  for (const path of newDirtyPaths) {
-    add(path)
-  }
-
-  DIRTY_PATHS.set(editor, dirtyPaths)
-  DIRTY_PATH_KEYS.set(editor, dirtyPathKeys)
  Transforms.transform(editor, op)
  editor.operations.push(op)
  Editor.normalize(editor, {
--- a/packages/slate/src/core/batch-dirty-paths.ts
+++ b/packages/slate/src/core/batch-dirty-paths.ts
@@ -0,0 +1,24 @@
+// perf
+
+import { Editor } from '../interfaces/editor'
+
+const BATCHING_DIRTY_PATHS: WeakMap<Editor, boolean> = new WeakMap()
+
+export const isBatchingDirtyPaths = (editor: Editor) => {
+  return BATCHING_DIRTY_PATHS.get(editor) || false
+}
+
+export const batchDirtyPaths = (
+  editor: Editor,
+  fn: () => void,
+  update: () => void
+) => {
+  const value = BATCHING_DIRTY_PATHS.get(editor) || false
+  BATCHING_DIRTY_PATHS.set(editor, true)
+  try {
+    fn()
+    update()
+  } finally {
+    BATCHING_DIRTY_PATHS.set(editor, value)
+  }
+}
--- a/packages/slate/src/core/update-dirty-paths.ts
+++ b/packages/slate/src/core/update-dirty-paths.ts
@@ -0,0 +1,50 @@
+import { DIRTY_PATH_KEYS, DIRTY_PATHS } from '../utils/weak-maps'
+import { Path } from '../interfaces/path'
+import { Editor } from '../interfaces/editor'
+
+/**
+ * update editor dirty paths
+ *
+ * @param newDirtyPaths: Path[]; new dirty paths
+ * @param transform: (p: Path) => Path | null; how to transform existing dirty paths
+ */
+export function updateDirtyPaths(
+  editor: Editor,
+  newDirtyPaths: Path[],
+  transform?: (p: Path) => Path | null
+) {
+  const oldDirtyPaths = DIRTY_PATHS.get(editor) || []
+  const oldDirtyPathKeys = DIRTY_PATH_KEYS.get(editor) || new Set()
+  let dirtyPaths: Path[]
+  let dirtyPathKeys: Set<string>
+
+  const add = (path: Path | null) => {
+    if (path) {
+      const key = path.join(',')
+
+      if (!dirtyPathKeys.has(key)) {
+        dirtyPathKeys.add(key)
+        dirtyPaths.push(path)
+      }
+    }
+  }
+
+  if (transform) {
+    dirtyPaths = []
+    dirtyPathKeys = new Set()
+    for (const path of oldDirtyPaths) {
+      const newPath = transform(path)
+      add(newPath)
+    }
+  } else {
+    dirtyPaths = oldDirtyPaths
+    dirtyPathKeys = oldDirtyPathKeys
+  }
+
+  for (const path of newDirtyPaths) {
+    add(path)
+  }
+
+  DIRTY_PATHS.set(editor, dirtyPaths)
+  DIRTY_PATH_KEYS.set(editor, dirtyPathKeys)
+}
--- a/packages/slate/src/interfaces/transforms/node.ts
+++ b/packages/slate/src/interfaces/transforms/node.ts
@@ -9,6 +9,7 @@ export interface NodeInsertNodesOptions<T extends Node> {
  hanging?: boolean
  select?: boolean
  voids?: boolean
+  batchDirty?: boolean
 }

 export interface NodeTransforms {
--- a/packages/slate/src/interfaces/transforms/text.ts
+++ b/packages/slate/src/interfaces/transforms/text.ts
@@ -15,6 +15,7 @@ export interface TextInsertFragmentOptions {
  at?: Location
  hanging?: boolean
  voids?: boolean
+  batchDirty?: boolean
 }

 export interface TextInsertTextOptions {
--- a/packages/slate/src/transforms-node/insert-nodes.ts
+++ b/packages/slate/src/transforms-node/insert-nodes.ts
@@ -8,6 +8,9 @@ import { Text } from '../interfaces/text'
 import { Element } from '../interfaces/element'
 import { Path } from '../interfaces/path'
 import { getDefaultInsertLocation } from '../utils'
+import { batchDirtyPaths } from '../core/batch-dirty-paths'
+import { BaseInsertNodeOperation } from '../interfaces'
+import { updateDirtyPaths } from '../core/update-dirty-paths'

 export const insertNodes: NodeTransforms['insertNodes'] = (
  editor,
@@ -15,7 +18,12 @@ export const insertNodes: NodeTransforms['insertNodes'] = (
  options = {}
 ) => {
  Editor.withoutNormalizing(editor, () => {
-    const { hanging = false, voids = false, mode = 'lowest' } = options
+    const {
+      hanging = false,
+      voids = false,
+      mode = 'lowest',
+      batchDirty = true,
+    } = options
    let { at, match, select } = options

    if (Node.isNode(nodes)) {
@@ -91,12 +99,61 @@ export const insertNodes: NodeTransforms['insertNodes'] = (
      return
    }

-    for (const node of nodes) {
-      const path = parentPath.concat(index)
-      index++
-      editor.apply({ type: 'insert_node', path, node })
-      at = Path.next(at)
+    if (batchDirty) {
+      // PERF: batch update dirty paths
+      // batched ops used to transform existing dirty paths
+      const batchedOps: BaseInsertNodeOperation[] = []
+      const newDirtyPaths: Path[] = Path.levels(parentPath)
+      batchDirtyPaths(
+        editor,
+        () => {
+          for (const node of nodes as Node[]) {
+            const path = parentPath.concat(index)
+            index++
+
+            const op: BaseInsertNodeOperation = {
+              type: 'insert_node',
+              path,
+              node,
+            }
+            editor.apply(op)
+            at = Path.next(at as Path)
+
+            batchedOps.push(op)
+            if (!Text.isText) {
+              newDirtyPaths.push(path)
+            } else {
+              newDirtyPaths.push(
+                ...Array.from(Node.nodes(node), ([, p]) => path.concat(p))
+              )
+            }
+          }
+        },
+        () => {
+          updateDirtyPaths(editor, newDirtyPaths, p => {
+            let newPath: Path | null = p
+            for (const op of batchedOps) {
+              if (Path.operationCanTransformPath(op)) {
+                newPath = Path.transform(newPath, op)
+                if (!newPath) {
+                  return null
+                }
+              }
+            }
+            return newPath
+          })
+        }
+      )
+    } else {
+      for (const node of nodes as Node[]) {
+        const path = parentPath.concat(index)
+        index++
+
+        editor.apply({ type: 'insert_node', path, node })
+        at = Path.next(at as Path)
+      }
    }
+
    at = Path.previous(at)

    if (select) {
--- a/packages/slate/src/transforms-text/insert-fragment.ts
+++ b/packages/slate/src/transforms-text/insert-fragment.ts
@@ -15,7 +15,7 @@ export const insertFragment: TextTransforms['insertFragment'] = (
 ) => {
  Editor.withoutNormalizing(editor, () => {
    const { hanging = false, voids = false } = options
-    let { at = getDefaultInsertLocation(editor) } = options
+    let { at = getDefaultInsertLocation(editor), batchDirty = true } = options

    if (!fragment.length) {
      return
@@ -187,6 +187,7 @@ export const insertFragment: TextTransforms['insertFragment'] = (
      match: n => Text.isText(n) || Editor.isInline(editor, n),
      mode: 'highest',
      voids,
+      batchDirty,
    })

    if (isBlockEmpty && !starts.length && middles.length && !ends.length) {
@@ -198,6 +199,7 @@ export const insertFragment: TextTransforms['insertFragment'] = (
      match: n => Element.isElement(n) && Editor.isBlock(editor, n),
      mode: 'lowest',
      voids,
+      batchDirty,
    })

    Transforms.insertNodes(editor, ends, {
@@ -205,6 +207,7 @@ export const insertFragment: TextTransforms['insertFragment'] = (
      match: n => Text.isText(n) || Editor.isInline(editor, n),
      mode: 'highest',
      voids,
+      batchDirty,
    })

    if (!options.at) {
--- a/packages/slate/test/index.js
+++ b/packages/slate/test/index.js
@@ -1,6 +1,7 @@
 import assert from 'assert'
+import { cloneDeep } from 'lodash'
 import { fixtures } from '../../../support/fixtures'
-import { Editor } from 'slate'
+import { Editor, createEditor } from 'slate'
 import { createHyperscript } from 'slate-hyperscript'

 describe('slate', () => {
@@ -45,6 +46,31 @@ describe('slate', () => {
    const result = test(input)
    assert.deepEqual(result, output)
  })
+  // make sure with or without batchDirty, the normalize result is the same
+  const testBatchDirty = ({ module }) => {
+    const { input, run } = module
+
+    const input2 = createEditor()
+    input2.children = cloneDeep(input.children)
+    input2.selection = cloneDeep(input.selection)
+
+    const dirties1 = []
+    const dirties2 = []
+
+    const editor1 = withBatchTest(withTest(input), dirties1)
+    const editor2 = withBatchTest(withTest(input2), dirties2)
+
+    run(editor1, { batchDirty: true })
+    run(editor2, { batchDirty: false })
+
+    assert.equal(dirties1.join(' '), dirties2.join(' '))
+  }
+  fixtures(__dirname, 'transforms/insertNodes', ({ module }) => {
+    testBatchDirty({ module })
+  })
+  fixtures(__dirname, 'transforms/insertFragment', ({ module }) => {
+    testBatchDirty({ module })
+  })
 })
 const withTest = editor => {
  const { isInline, isVoid, isElementReadOnly, isSelectable } = editor
@@ -62,6 +88,14 @@ const withTest = editor => {
  }
  return editor
 }
+const withBatchTest = (editor, dirties) => {
+  const { normalizeNode } = editor
+  editor.normalizeNode = ([node, path]) => {
+    dirties.push(JSON.stringify(path))
+    normalizeNode([node, path])
+  }
+  return editor
+}
 export const jsx = createHyperscript({
  elements: {
    block: {},
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-empty.tsx
@@ -2,7 +2,7 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
@@ -11,7 +11,8 @@ export const run = editor => {
      </block>
      <block>two</block>
      <block>three</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-end.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-end.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>one</block>
      <block>two</block>
      <block>three</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-hanging.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-hanging.tsx
@@ -8,8 +8,8 @@ const fragment = (
    <block>two</block>
  </fragment>
 )
-export const run = editor => {
-  Transforms.insertFragment(editor, fragment)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, fragment, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-middle.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>one</block>
      <block>two</block>
      <block>three</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-nested.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-nested.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>one</block>
      <block>two</block>
      <block>three</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-blocks/block-start.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/block-start.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>one</block>
      <block>two</block>
      <block>three</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-blocks/with-inline.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-blocks/with-inline.tsx
@@ -2,7 +2,7 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
@@ -15,7 +15,8 @@ export const run = editor => {
      <block>
        seven<inline>eight</inline>nine
      </block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/block-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/block-empty.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/block-end.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/block-end.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/block-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/block-middle.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/block-start.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/block-start.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/inline-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/inline-empty.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/inline-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/inline-middle.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>fragment</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/with-multiple.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/with-multiple.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <inline>one</inline>
      <inline>two</inline>
      <inline>three</inline>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-inlines/with-text.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-inlines/with-text.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      one
      <inline>two</inline>
      three
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-lists/merge-lists.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-lists/merge-lists.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <block>
      <block>3</block>
      <block>4</block>
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-empty.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
      <text>three</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-empty2.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-empty2.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>two</block>
      <text>three</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-empty3.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-empty3.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-end.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-end.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
      <text>three</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-end2.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-end2.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-middle.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
      <text>three</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-start.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-start.tsx
@@ -2,14 +2,15 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <block>two</block>
      <text>three</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-mixed/block-start2.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-mixed/block-start2.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <block>one</block>
      <text>two</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-tables/merge-cells-with-nested-blocks.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-tables/merge-cells-with-nested-blocks.tsx
@@ -2,7 +2,7 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <block>
@@ -16,7 +16,8 @@ export const run = editor => {
          </block>
        </block>
      </block>
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-tables/merge-into-empty-cells.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-tables/merge-into-empty-cells.tsx
@@ -2,7 +2,7 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <block>
@@ -12,7 +12,8 @@ export const run = editor => {
          <block>2</block>
        </block>
      </block>
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-tables/merge-into-full-cells.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-tables/merge-into-full-cells.tsx
@@ -2,7 +2,7 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <block>
@@ -12,7 +12,8 @@ export const run = editor => {
          <block>New 2</block>
        </block>
      </block>
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/of-texts/block-across.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/block-across.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/block-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/block-empty.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/block-end.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/block-end.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/block-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/block-middle.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/block-start.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/block-start.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/inline-empty.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/inline-empty.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/inline-middle.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/inline-middle.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/of-texts/with-multiple.tsx
+++ b/packages/slate/test/transforms/insertFragment/of-texts/with-multiple.tsx
@@ -2,13 +2,14 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(
    editor,
    <fragment>
      <text>one</text>
      <text>two</text>
-    </fragment>
+    </fragment>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/voids-false/block.tsx
+++ b/packages/slate/test/transforms/insertFragment/voids-false/block.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/voids-false/inline.tsx
+++ b/packages/slate/test/transforms/insertFragment/voids-false/inline.tsx
@@ -2,8 +2,8 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
-  Transforms.insertFragment(editor, <fragment>fragment</fragment>)
+export const run = (editor, options = {}) => {
+  Transforms.insertFragment(editor, <fragment>fragment</fragment>, options)
 }
 export const input = (
  <editor>
--- a/packages/slate/test/transforms/insertFragment/voids-true/block.tsx
+++ b/packages/slate/test/transforms/insertFragment/voids-true/block.tsx
@@ -2,9 +2,10 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(editor, <fragment>fragment</fragment>, {
    voids: true,
+    ...options,
  })
 }
 export const input = (
--- a/packages/slate/test/transforms/insertFragment/voids-true/inline.tsx
+++ b/packages/slate/test/transforms/insertFragment/voids-true/inline.tsx
@@ -2,9 +2,10 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertFragment(editor, <fragment>fragment</fragment>, {
    voids: true,
+    ...options,
  })
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/block/block-empty.tsx
+++ b/packages/slate/test/transforms/insertNodes/block/block-empty.tsx
@@ -10,12 +10,13 @@ export const input = (
    <block>not empty</block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
-    </block>
+    </block>,
+    options
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/block/block-middle.tsx
+++ b/packages/slate/test/transforms/insertNodes/block/block-middle.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/block/block-void.tsx
+++ b/packages/slate/test/transforms/insertNodes/block/block-void.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/block/inline-void.tsx
+++ b/packages/slate/test/transforms/insertNodes/block/inline-void.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
-    </block>
+    </block>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/inline/block-empty.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/block-empty.tsx
@@ -9,12 +9,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/inline/block-end.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/block-end.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/inline/block-middle.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/block-middle.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/inline/block-start.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/block-start.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/inline/block-void.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/block-void.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/inline/inline-middle.tsx
+++ b/packages/slate/test/transforms/insertNodes/inline/inline-middle.tsx
@@ -2,12 +2,13 @@
 import { Transforms } from 'slate'
 import { jsx } from '../../..'

-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text />
-    </inline>
+    </inline>,
+    options
  )
 }
 export const input = (
--- a/packages/slate/test/transforms/insertNodes/path/block.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/block.tsx
@@ -10,13 +10,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
    </block>,
-    { at: [0] }
+    { at: [0], ...options }
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/path/inline.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/inline.tsx
@@ -10,13 +10,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline>
      <text />
    </inline>,
-    { at: [0, 0] }
+    { at: [0, 0], ...options }
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/path/multiple-inline-not-end.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/multiple-inline-not-end.tsx
@@ -11,13 +11,17 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
-  Transforms.insertNodes(editor, [
-    <inline>
-      <text />
-    </inline>,
-    <text>world</text>,
-  ])
+export const run = (editor, options = {}) => {
+  Transforms.insertNodes(
+    editor,
+    [
+      <inline>
+        <text />
+      </inline>,
+      <text>world</text>,
+    ],
+    options
+  )
 }
 export const output = (
  <editor>
--- a/packages/slate/test/transforms/insertNodes/path/multiple-inline.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/multiple-inline.tsx
@@ -10,13 +10,17 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
-  Transforms.insertNodes(editor, [
-    <inline>
-      <text />
-    </inline>,
-    <text>world</text>,
-  ])
+export const run = (editor, options = {}) => {
+  Transforms.insertNodes(
+    editor,
+    [
+      <inline>
+        <text />
+      </inline>,
+      <text>world</text>,
+    ],
+    options
+  )
 }
 export const output = (
  <editor>
--- a/packages/slate/test/transforms/insertNodes/path/multiple.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/multiple.tsx
@@ -10,9 +10,10 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(editor, [<block>two</block>, <block>three</block>], {
    at: [0],
+    ...options,
  })
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/path/text.tsx
+++ b/packages/slate/test/transforms/insertNodes/path/text.tsx
@@ -10,8 +10,11 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
-  Transforms.insertNodes(editor, <text>another</text>, { at: [0, 0] })
+export const run = (editor, options = {}) => {
+  Transforms.insertNodes(editor, <text>another</text>, {
+    at: [0, 0],
+    ...options,
+  })
 }
 export const output = (
  <editor>
--- a/packages/slate/test/transforms/insertNodes/select-true/block.tsx
+++ b/packages/slate/test/transforms/insertNodes/select-true/block.tsx
@@ -10,13 +10,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block>
      <text />
    </block>,
-    { at: [0], select: true }
+    { at: [0], select: true, ...options }
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/selection/none-empty.tsx
+++ b/packages/slate/test/transforms/insertNodes/selection/none-empty.tsx
@@ -3,8 +3,8 @@ import { Transforms } from 'slate'
 import { jsx } from '../../..'

 export const input = <editor />
-export const run = editor => {
-  Transforms.insertNodes(editor, <block>one</block>)
+export const run = (editor, options = {}) => {
+  Transforms.insertNodes(editor, <block>one</block>, options)
 }
 export const output = (
  <editor>
--- a/packages/slate/test/transforms/insertNodes/selection/none-end.tsx
+++ b/packages/slate/test/transforms/insertNodes/selection/none-end.tsx
@@ -7,8 +7,8 @@ export const input = (
    <block>one</block>
  </editor>
 )
-export const run = editor => {
-  Transforms.insertNodes(editor, <block>two</block>)
+export const run = (editor, options = {}) => {
+  Transforms.insertNodes(editor, <block>two</block>, options)
 }
 export const output = (
  <editor>
--- a/packages/slate/test/transforms/insertNodes/void/at-path.tsx
+++ b/packages/slate/test/transforms/insertNodes/void/at-path.tsx
@@ -10,13 +10,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block void>
      <text>two</text>
    </block>,
-    { at: [1], select: true }
+    { at: [1], select: true, ...options }
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/void/block-nested.tsx
+++ b/packages/slate/test/transforms/insertNodes/void/block-nested.tsx
@@ -10,14 +10,15 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block void>
      <block>
        <text>two</text>
      </block>
-    </block>
+    </block>,
+    options
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/void/block.tsx
+++ b/packages/slate/test/transforms/insertNodes/void/block.tsx
@@ -10,12 +10,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <block void>
      <text>two</text>
-    </block>
+    </block>,
+    options
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/void/inline.tsx
+++ b/packages/slate/test/transforms/insertNodes/void/inline.tsx
@@ -14,12 +14,13 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(
    editor,
    <inline void>
      <text>four</text>
-    </inline>
+    </inline>,
+    options
  )
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/voids-true/block.tsx
+++ b/packages/slate/test/transforms/insertNodes/voids-true/block.tsx
@@ -10,10 +10,11 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(editor, <text>two</text>, {
    at: [0, 1],
    voids: true,
+    options,
  })
 }
 export const output = (
--- a/packages/slate/test/transforms/insertNodes/voids-true/inline.tsx
+++ b/packages/slate/test/transforms/insertNodes/voids-true/inline.tsx
@@ -14,10 +14,11 @@ export const input = (
    </block>
  </editor>
 )
-export const run = editor => {
+export const run = (editor, options = {}) => {
  Transforms.insertNodes(editor, <text>four</text>, {
    at: [0, 1, 1],
    voids: true,
+    options,
  })
 }
 export const output = (