docs(user-event): add example to prepend text with type (#952)

* docs(user-event): fix formatting

Run `prettier --write --parser=mdx docs/ecosystem-user-event.mdx` to fix
the file's formatting.

* docs(user-event): add example to prepend text with `type`

Add an example that shows how to prepend text with `type`. By default,
`type` appends to the existing text. To prepend text, you should reset
the element's selection range and provide the `initialSelectionStart`
and `initialSelectionEnd` options to `type`.

* docs(user-event): simplify 'prepend text' example

Co-authored-by: Philipp Fritsche <[email protected]>

Co-authored-by: Philipp Fritsche <[email protected]>

Author: msmolens

docs/ecosystem-user-event.mdx

@@ -210,6 +210,29 @@ test('delete characters within the selectedRange', () => {
   userEvent.type(input, '{backspace}good')
 
   expect(input).toHaveValue('This is a good example')
+```
+
+By default, `type` appends to the existing text. To prepend text, reset the
+element's selection range and provide the `initialSelectionStart` and
+`initialSelectionEnd` options:
+
+```jsx
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+test('prepend text', () => {
+  render(<input defaultValue="World!"/>)
+  const element = screen.getByRole('textbox')
+
+  // Prepend text
+  element.setSelectionRange(0, 0)
+  userEvent.type(element, 'Hello, ', {
+    initialSelectionStart: 0,
+    initialSelectionEnd: 0,
+  })
+
+  expect(element).toHaveValue('Hello, World!')
 })
 ```