docs: fix the edit link example jumping page scroll. Fixes #1571 (#1589)

autoFocus within a floating wrapper appears to cause a page scroll, add workaround

packages/storybook-react/stories/extension-link/edit-dialog.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import type { ChangeEvent, HTMLProps, KeyboardEvent } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from 'remirror/extensions';
 import {
   ComponentItem,
@@ -109,6 +110,26 @@ function useFloatingLinkState() {
   );
 }
 
+const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [autoFocus]);
+
+  return <input ref={inputRef} {...rest} />;
+};
+
 const FloatingLinkToolbar = () => {
   const { isEditing, linkPositioner, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
     useFloatingLinkState();
@@ -149,13 +170,13 @@ const FloatingLinkToolbar = () => {
         enabled={isEditing}
         renderOutsideEditor
       >
-        <input
+        <DelayAutoFocusInput
           style={{ zIndex: 20 }}
           autoFocus
           placeholder='Enter link...'
-          onChange={(event) => setHref(event.target.value)}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => setHref(event.target.value)}
           value={href}
-          onKeyPress={(event) => {
+          onKeyPress={(event: KeyboardEvent<HTMLInputElement>) => {
             const { code } = event;
 
             if (code === 'Enter') {