Fix hmr. (#2303)

Fixes HMR (keyboard shortcuts should be working after making changes
after this).

Looks like the issue was that we were recreating the root using the same
element. Used a solution similar to
[this](https://stackoverflow.com/a/72139826/1810018) to prevent that
from happening.


![image](https://github.com/tldraw/tldraw/assets/2523721/f684868e-fb0b-4882-bd66-6fa4ccd33edc)

It caused other issues as well

![image](https://github.com/tldraw/tldraw/assets/2523721/ac19582e-f043-4c01-823c-cc815a808894)

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fixes HMR in local dev.

apps/examples/src/index.tsx

@@ -238,9 +238,9 @@ const router = createBrowserRouter([
 	...allExamples,
 ])
 
-const rootElement = document.getElementById('root')
+document.addEventListener('DOMContentLoaded', () => {
+	const rootElement = document.getElementById('root')!
 	const root = createRoot(rootElement!)
-
 	root.render(
 		<StrictMode>
 			<ErrorBoundary
@@ -251,3 +251,4 @@ root.render(
 			</ErrorBoundary>
 		</StrictMode>
 	)
+})