fix: plugin wrapper

packages/mask/src/components/CompositionDialog/CompositionUI.tsx

@@ -106,8 +106,7 @@ export const CompositionDialogUI = forwardRef<CompositionRef, CompositionProps>(
         })
     }, [])
 
-    useImperativeHandle(
-        ref,
+    const refItem = useMemo(
         (): CompositionRef => ({
             setMessage: (msg) => {
                 if (Editor.current) Editor.current.value = msg
@@ -119,6 +118,8 @@ export const CompositionDialogUI = forwardRef<CompositionRef, CompositionProps>(
         [reset],
     )
 
+    useImperativeHandle(ref, () => refItem, [refItem])
+
     const context = useMemo(
         (): CompositionContext => ({
             attachMetadata: (meta, data) => Editor.current?.attachMetadata(meta, data),

packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx

@@ -12,7 +12,7 @@ import { RedPacketPluginID } from '../../plugins/RedPacket/constants'
 import { ITO_PluginID } from '../../plugins/ITO/constants'
 import { ClickableChip } from '../shared/SelectRecipients/ClickableChip'
 import { makeStyles } from '@masknet/theme'
-import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle } from 'react'
+import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle, useMemo } from 'react'
 import { useChainId } from '@masknet/web3-shared-evm'
 import { Trans } from 'react-i18next'
 const useStyles = makeStyles()({
@@ -60,8 +60,7 @@ export const PluginEntryRender = memo(
 
 function useSetPluginEntryRenderRef(ref: React.ForwardedRef<PluginEntryRenderRef>) {
     const pluginRefs = useRef<Record<string, PluginRef | undefined | null>>({})
-    useImperativeHandle(
-        ref,
+    const refItem: PluginEntryRenderRef = useMemo(
         () => ({
             openPlugin: function openPlugin(id: string, tryTimes = 4) {
                 const ref = pluginRefs.current[id]
@@ -74,13 +73,15 @@ function useSetPluginEntryRenderRef(ref: React.ForwardedRef<PluginEntryRenderRef
         }),
         [],
     )
+    useImperativeHandle(ref, () => refItem, [refItem])
     const trackPluginRef = (pluginID: string) => (ref: PluginRef | null) => {
         pluginRefs.current = { ...pluginRefs.current, [pluginID]: ref }
     }
     return [trackPluginRef]
 }
 function useSetPluginRef(ref: React.ForwardedRef<PluginRef>, onClick: () => void) {
-    useImperativeHandle(ref, () => ({ open: onClick }), [onClick])
+    const refItem = useMemo(() => ({ open: onClick }), [onClick])
+    useImperativeHandle(ref, () => refItem, [refItem])
 }
 
 type PluginRef = { open(): void }

packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx

@@ -8,7 +8,7 @@ import {
 } from '@masknet/typed-message'
 import { makeStyles } from '@masknet/theme'
 import { InputBase, Alert, Button } from '@mui/material'
-import { useCallback, useImperativeHandle, useState, useRef, forwardRef, memo } from 'react'
+import { useCallback, useImperativeHandle, useState, useRef, forwardRef, memo, useMemo } from 'react'
 import { useI18N } from '../../utils'
 import { BadgeRenderer } from './BadgeRenderer'
 
@@ -81,30 +81,27 @@ export const TypedMessageEditor = memo(
             },
             [setMessage],
         )
-        useImperativeHandle(
-            ref,
-            (): TypedMessageEditorRef => {
-                return {
-                    get estimatedLength() {
-                        // TODO: we should count metadata into the estimated size
-                        if (isTypedMessageText(currentValue.current)) return currentValue.current.content.length
-                        return 0
-                    },
-                    get value() {
-                        return currentValue.current
-                    },
-                    set value(val) {
-                        setMessage(val)
-                    },
-                    reset: () => setMessage(emptyMessage),
-                    attachMetadata(meta, data) {
-                        setMessage(editTypedMessageMeta(currentValue.current, (map) => map.set(meta, data)))
-                    },
-                    dropMetadata: deleteMetaID,
-                }
-            },
-            [setMessage, deleteMetaID],
-        )
+        const refItem = useMemo((): TypedMessageEditorRef => {
+            return {
+                get estimatedLength() {
+                    // TODO: we should count metadata into the estimated size
+                    if (isTypedMessageText(currentValue.current)) return currentValue.current.content.length
+                    return 0
+                },
+                get value() {
+                    return currentValue.current
+                },
+                set value(val) {
+                    setMessage(val)
+                },
+                reset: () => setMessage(emptyMessage),
+                attachMetadata(meta, data) {
+                    setMessage(editTypedMessageMeta(currentValue.current, (map) => map.set(meta, data)))
+                },
+                dropMetadata: deleteMetaID,
+            }
+        }, [setMessage, deleteMetaID])
+        useImperativeHandle(ref, () => refItem, [refItem])
 
         if (!isTypedMessageText(value)) {
             const reset = () => setAsText('')

packages/mask/src/components/shared/Image.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react'
+import { useRef, useEffect, forwardRef, useImperativeHandle, useState, useMemo } from 'react'
 import { useAsync } from 'react-use'
 import Services from '../../extension/service'
 import { Skeleton, SkeletonProps } from '@mui/material'
@@ -78,7 +78,8 @@ export const Image = forwardRef<ImageRef, ImageProps>(function Image(props, outg
 
     const url: string | undefined = blobURL || (typeof src === 'string' ? src : undefined)
     useEffect(() => void (url && onURL?.(url)), [onURL, url])
-    useImperativeHandle(outgoingRef, () => ({ canvas: canvasRef.current, img: imgRef.current }), [])
+    const outgoingRefItem = useMemo(() => ({ canvas: canvasRef.current, img: imgRef.current }), [])
+    useImperativeHandle(outgoingRef, () => outgoingRefItem, [outgoingRefItem])
 
     // TODO: handle image loading error
     const { loading, error, value } = useAsync(

packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, forwardRef, useImperativeHandle } from 'react'
+import { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo } from 'react'
 import type { InputBaseComponentProps } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useDebounce } from 'react-use'
@@ -80,11 +80,15 @@ export const RegionSelect = forwardRef(({ value = [], onRegionChange, ...props }
     }, [])
     const [minPopoverWidth, setMinPopoverWidth] = useState(0)
 
-    useImperativeHandle(ref, () => ({
-        focus: () => {
-            displayRef.current?.focus()
-        },
-    }))
+    const refItem = useMemo(
+        () => ({
+            focus: () => {
+                displayRef.current?.focus()
+            },
+        }),
+        [],
+    )
+    useImperativeHandle(ref, () => refItem, [refItem])
 
     const [filterText, setFilterText] = useState('')
     const [filteredRegions, setFilteredRegions] = useState(allRegions)

packages/mask/src/plugins/MaskPluginWrapper.tsx

@@ -7,7 +7,13 @@ import { isTwitter } from '../social-network-adaptor/twitter.com/base'
 import { usePersonaConnectStatus } from '../components/DataSource/usePersonaConnectStatus'
 import { useI18N } from '../utils'
 import { Box } from '@mui/system'
-import { usePluginI18NField, PluginI18NFieldRender, PluginWrapperComponent, Plugin } from '@masknet/plugin-infra'
+import {
+    usePluginI18NField,
+    PluginI18NFieldRender,
+    PluginWrapperComponent,
+    Plugin,
+    PluginWrapperMethods,
+} from '@masknet/plugin-infra'
 
 interface PluginWrapperProps extends React.PropsWithChildren<{}> {
     title: string
@@ -137,7 +143,15 @@ export const MaskPostExtraPluginWrapper: PluginWrapperComponent<Plugin.SNSAdapto
         const [open, setOpen] = useState<boolean>(false)
         const [title, setTitle] = useState<string | undefined>(undefined)
 
-        useImperativeHandle(ref, () => ({ setWidth, setWrap: setOpen, setWrapperName: setTitle }), [])
+        const refItem = useMemo((): PluginWrapperMethods => {
+            return {
+                setWidth,
+                setWrap: setOpen,
+                setWrapperName: setTitle,
+            }
+        }, [])
+
+        useImperativeHandle(ref, () => refItem, [refItem])
 
         if (!open) return <>{props.children}</>
         return (

packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts

@@ -157,7 +157,7 @@ export const bioPageUserNickNameSelector = () =>
         .map((x) => x.parentElement?.parentElement?.previousElementSibling)
         .querySelector<HTMLDivElement>('div[dir]')
 export const bioPageUserIDSelector = (selector: () => LiveSelector<HTMLSpanElement, true>) =>
-    selector().map((x) => (x.parentElement?.nextElementSibling as HTMLElement).innerText.replace('@', ''))
+    selector().map((x) => (x.parentElement?.nextElementSibling as HTMLElement)?.innerText?.replace('@', ''))
 export const floatingBioCardSelector = () =>
     querySelector<HTMLSpanElement>(
         '[style~="left:"] a[role=link] > div:first-child > div:first-child > div:first-child[dir="auto"]',

packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx

@@ -3,7 +3,7 @@ import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { ShadowRootIsolation } from '@masknet/theme'
 import type { Plugin } from '../types'
 import { usePluginI18NField, PluginWrapperComponent, PluginWrapperMethods } from '../hooks'
-import { emptyPluginWrapperMethods, PluginWrapperMethodsContext } from '../hooks/usePluginWrapper'
+import { PluginWrapperMethodsContext } from '../hooks/usePluginWrapper'
 
 type Inject<T> = Plugin.InjectUI<T>
 type Raw<T> = Plugin.InjectUIRaw<T>
@@ -18,10 +18,12 @@ export function createInjectHooksRenderer<PluginDefinition extends Plugin.Shared
         const [ref, setRef] = useState<PluginWrapperMethods | null>(null)
         if (PluginWrapperComponent) {
             return (
-                <PluginWrapperComponent definition={plugin} ref={(r) => (ref === r ? void 0 : setRef(ref))}>
-                    <PluginWrapperMethodsContext.Provider value={ref || emptyPluginWrapperMethods}>
-                        {element}
-                    </PluginWrapperMethodsContext.Provider>
+                <PluginWrapperComponent definition={plugin} ref={setRef}>
+                    {ref ? (
+                        <PluginWrapperMethodsContext.Provider value={ref}>
+                            {element}
+                        </PluginWrapperMethodsContext.Provider>
+                    ) : null}
                 </PluginWrapperComponent>
             )
         }