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,16 +238,17 @@ const router = createBrowserRouter([
 	...allExamples,
 ])
 
-const rootElement = document.getElementById('root')
-const root = createRoot(rootElement!)
-
-root.render(
-	<StrictMode>
-		<ErrorBoundary
-			fallback={(error) => <DefaultErrorFallback error={error} />}
-			onError={(error) => console.error(error)}
-		>
-			<RouterProvider router={router} />
-		</ErrorBoundary>
-	</StrictMode>
-)
+document.addEventListener('DOMContentLoaded', () => {
+	const rootElement = document.getElementById('root')!
+	const root = createRoot(rootElement!)
+	root.render(
+		<StrictMode>
+			<ErrorBoundary
+				fallback={(error) => <DefaultErrorFallback error={error} />}
+				onError={(error) => console.error(error)}
+			>
+				<RouterProvider router={router} />
+			</ErrorBoundary>
+		</StrictMode>
+	)
+})