fix: timers type in browser env (#3875)

(cherry picked from commit fc9981335b)

apps/core/src/components/affine/create-workspace-modal/index.tsx

@@ -70,7 +70,7 @@ const NameWorkspaceContent = ({
       <Input
         ref={ref => {
           if (ref) {
-            setTimeout(() => ref.focus(), 0);
+            window.setTimeout(() => ref.focus(), 0);
           }
         }}
         data-testid="create-workspace-input"

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -82,7 +82,7 @@ export const WorkspaceDeleteModal = ({
           <Input
             ref={ref => {
               if (ref) {
-                setTimeout(() => ref.focus(), 0);
+                window.setTimeout(() => ref.focus(), 0);
               }
             }}
             onChange={setDeleteStr}

apps/core/src/components/page-detail-editor.tsx

@@ -106,7 +106,7 @@ const EditorWrapper = memo(function EditorWrapper({
             const rootStore = getCurrentStore();
             const editorItems = rootStore.get(pluginEditorAtom);
             let disposes: (() => void)[] = [];
-            const renderTimeout = setTimeout(() => {
+            const renderTimeout = window.setTimeout(() => {
               disposes = Object.entries(editorItems).map(([id, editorItem]) => {
                 const div = document.createElement('div');
                 div.setAttribute('plugin-id', id);
@@ -123,7 +123,7 @@ const EditorWrapper = memo(function EditorWrapper({
             return () => {
               dispose();
               clearTimeout(renderTimeout);
-              setTimeout(() => {
+              window.setTimeout(() => {
                 disposes.forEach(dispose => dispose());
               });
             };
@@ -165,7 +165,7 @@ const PluginContentAdapter = memo<PluginContentAdapterProps>(
             };
             const dispose = addCleanup(pluginName, cl);
             abortController.signal.addEventListener('abort', () => {
-              setTimeout(() => {
+              window.setTimeout(() => {
                 dispose();
                 cl();
               });

apps/prototype/src/provider-status.tsx

@@ -25,11 +25,11 @@ const App = () => {
       <button
         data-testid="start-button"
         onClick={useCallback(() => {
-          disposeRef.current = setInterval(() => {
+          disposeRef.current = window.setInterval(() => {
             const counter = counterRef.current;
             map.set('counter', counter + 1);
             counterRef.current = counter + 1;
-          }, 0) as any;
+          }, 0);
         }, [])}
       >
         start writing

apps/storybook/src/stories/share-menu.stories.tsx

@@ -91,7 +91,7 @@ Basic.play = async ({ canvasElement }) => {
     expect(button).not.toBeNull();
     button.click();
   }
-  await new Promise(resolve => setTimeout(resolve, 100));
+  await new Promise(resolve => window.setTimeout(resolve, 100));
   {
     const button = canvasElement.querySelector(
       '[data-testid="share-menu-enable-affine-cloud-button"]'

packages/component/src/components/app-sidebar/index.tsx

@@ -35,7 +35,7 @@ export type AppSidebarProps = PropsWithChildren<
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
   useEffect(() => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       setEnable(true);
     }, 500);
   }, []);

packages/component/src/components/notification-center/index.tsx

@@ -80,7 +80,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
   const [animationKey, setAnimationKey] = useState(0);
   const animationRef = useRef<SVGAnimateElement>(null);
   const notificationRef = useRef<HTMLLIElement>(null);
-  const timerIdRef = useRef<NodeJS.Timeout>();
+  const timerIdRef = useRef<number>();
   const isFront = index === 0;
   const isVisible = index + 1 <= 3;
   const progressDuration = notification.timeout || 3000;
@@ -164,7 +164,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
     setHeights(h =>
       h.filter(height => height.notificationKey !== notification.key)
     );
-    setTimeout(() => {
+    window.setTimeout(() => {
       if (!notification.key) {
         return;
       }
@@ -177,7 +177,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
       clearTimeout(timerIdRef.current);
     }
     if (!expand) {
-      timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = window.setTimeout(() => {
         onClickRemove();
       }, duration);
     }

packages/component/src/components/workspace-avatar/default-avatar.tsx

@@ -29,7 +29,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     return colorsSchema[index % colorsSchema.length];
   }, [name]);
 
-  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const timer = useRef<number>();
 
   const [topColor, middleColor, bottomColor] = colors;
   const [isHover, setIsHover] = useState(false);
@@ -38,7 +38,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     <div
       className={DefaultAvatarContainerStyle}
       onMouseEnter={() => {
-        timer.current = setTimeout(() => {
+        timer.current = window.setTimeout(() => {
           setIsHover(true);
         }, 300);
       }}

packages/component/src/ui/popper/popper.tsx

@@ -69,7 +69,7 @@ export const Popper = ({
     }
     window.clearTimeout(pointerLeaveTimer.current);
 
-    pointerEnterTimer.current = window.setTimeout(() => {
+    pointerEnterTimer.current = window.window.setTimeout(() => {
       setVisible(true);
     }, pointerEnterDelay);
   };
@@ -81,7 +81,7 @@ export const Popper = ({
       return;
     }
     window.clearTimeout(pointerEnterTimer.current);
-    pointerLeaveTimer.current = window.setTimeout(() => {
+    pointerLeaveTimer.current = window.window.setTimeout(() => {
       setVisible(false);
     }, pointerLeaveDelay);
   };

plugins/bookmark/src/app.tsx

@@ -183,7 +183,7 @@ const BookMarkUI = ({ page }: BookMarkProps) => {
       if (!shouldShowBookmarkMenu(pastedBlocks)) {
         return;
       }
-      setTimeout(() => {
+      window.setTimeout(() => {
         setAnchor(getCurrentNativeRange());
       }, 100);
     });

plugins/image-preview/src/component/index.tsx

@@ -72,10 +72,10 @@ const ImagePreviewModalImpl = (
   const [hasPlayedAnimation, setHasPlayedAnimation] = useState<boolean>(false);
 
   useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
+    let timeoutId: number;
 
     if (!isOpen) {
-      timeoutId = setTimeout(() => {
+      timeoutId = window.setTimeout(() => {
         props.onClose();
         setIsOpen(true);
       }, 300);