refactor: post modifier dirty detection (#12205)

Author: swkatmask

packages/mask/content-script/components/InjectedComponents/PostReplacer.tsx

@@ -1,33 +1,34 @@
-import { useEffect, useMemo, useState } from 'react'
-import { produce } from 'immer'
+import {
+    usePostInfoAuthor,
+    usePostInfoPostIVIdentifier,
+    usePostInfoRawMessage,
+    usePostInfoURL,
+} from '@masknet/plugin-infra/content-script'
+import { DirtyDetection, useDirtyDetection } from '@masknet/plugin-infra/dom'
+import {
+    EXIST_EVM_ADDRESS_RE,
+    EXIST_SOLANA_ADDRESS_RE,
+    EXIST_TORN_ADDRESS_RE,
+    MaskMessages,
+} from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import {
     type TransformationContext,
     type TypedMessage,
-    isTypedMessageEqual,
     emptyTransformationContext,
     FlattenTypedMessage,
     forEachTypedMessageChild,
     isTypedMessageAnchor,
-    makeTypedMessageText,
+    isTypedMessageEqual,
     isTypedMessageText,
+    makeTypedMessageText,
 } from '@masknet/typed-message'
-import {
-    EXIST_EVM_ADDRESS_RE,
-    EXIST_SOLANA_ADDRESS_RE,
-    EXIST_TORN_ADDRESS_RE,
-    MaskMessages,
-} from '@masknet/shared-base'
 import { TypedMessageRender, useTransformedValue } from '@masknet/typed-message-react'
-import {
-    usePostInfoAuthor,
-    usePostInfoPostIVIdentifier,
-    usePostInfoRawMessage,
-    usePostInfoURL,
-} from '@masknet/plugin-infra/content-script'
+import { produce } from 'immer'
+import { useEffect, useMemo, useState } from 'react'
 import { TypedMessageRenderContext } from '../../../shared-ui/TypedMessageRender/context.js'
-import { useCurrentIdentity } from '../DataSource/useActivatedUI.js'
 import { activatedSiteAdaptorUI } from '../../site-adaptor-infra/ui.js'
+import { useCurrentIdentity } from '../DataSource/useActivatedUI.js'
 
 const useStyles = makeStyles()({
     root: {
@@ -75,7 +76,9 @@ export function PostReplacer(props: PostReplacerProps) {
                 textResizer={activatedSiteAdaptorUI!.networkIdentifier !== 'twitter.com'}
                 renderFragments={activatedSiteAdaptorUI?.customization.componentOverwrite?.RenderFragments}
                 context={initialTransformationContext}>
-                <Transformer {...props} message={postMessage} />
+                <DirtyDetection>
+                    <Transformer {...props} message={postMessage} />
+                </DirtyDetection>
             </TypedMessageRenderContext>
         </span>
     )
@@ -90,7 +93,7 @@ function Transformer({
 } & PostReplacerProps) {
     const after = useTransformedValue(message)
 
-    const shouldReplace = useMemo(() => {
+    const staticGuess = useMemo(() => {
         const flatten = FlattenTypedMessage(message, emptyTransformationContext)
         if (!isTypedMessageEqual(flatten, after)) return true
         if (hasCashOrHashTag(after)) return true
@@ -99,14 +102,22 @@ function Transformer({
         return false
     }, [message, after])
 
+    const { isDirty, isPending } = useDirtyDetection()
+
+    const shouldReplace = staticGuess ? isPending || isDirty : false
     useEffect(() => {
+        if (isPending) return
         if (shouldReplace) zip?.()
         else unzip?.()
 
         return () => unzip?.()
-    }, [])
+    }, [shouldReplace, isPending])
 
-    if (shouldReplace) return <TypedMessageRender message={after} />
+    if (shouldReplace || isDirty) {
+        const rendered = <TypedMessageRender message={after} />
+        if (isPending) return <div style={{ display: 'none' }}>{rendered}</div>
+        return rendered
+    }
     return null
 }
 function hasCashOrHashTag(message: TypedMessage): boolean {

packages/mask/content-script/site-adaptors/twitter.com/injection/PostReplacer.tsx

@@ -41,11 +41,21 @@ export async function injectPostReplacerAtTwitter(signal: AbortSignal, current:
                 [
                     'a[role="link"][href*="cashtag_click"]',
                     'a[role="link"][href*="hashtag_click"]',
-                    'a[role="link"][href*="/hashtag/"][href*="/i/communities/"]', // tag in community
+                    // in communities post <a href="/i/communities/1722516678070972815/hashtag/BTC" />
+                    'a[role="link"][href*="/i/communities/"][href*="/hashtag/"]',
                 ].join(','),
             ) ?? [],
         )
-        if (!tags.length) return
+        const mentions = Array.from(
+            rootNode.querySelectorAll<HTMLAnchorElement>(
+                [
+                    'a[href^="/"]:not([role="link"][href*="mention_click"])',
+                    'a[href^="/"]:not([role="link"][href*="/i/communities/"][href*="/mention/"])',
+                    'a[href^="/"]:not([role="link"][href*="/i/communities/"][href*="/hashtag/"])',
+                ].join(','),
+            ) ?? [],
+        ).filter((x) => x.textContent?.startsWith('@'))
+        if (!tags.length && !mentions.length) return
     }
 
     return injectPostReplacer({

packages/plugin-infra/src/dom/DirtyDetectionContext.tsx

@@ -0,0 +1,67 @@
+import { isEqual, noop } from 'lodash-es'
+import {
+    createContext,
+    memo,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type Dispatch,
+    type PropsWithChildren,
+    type SetStateAction,
+} from 'react'
+
+interface Dependency {
+    id: string
+    status: boolean
+    pending: boolean
+}
+
+interface Options {
+    setDependencies: Dispatch<SetStateAction<Dependency[]>>
+    isDirty: boolean
+    isPending: boolean
+}
+
+export const DirtyDetectionContext = createContext<Options>({
+    setDependencies: noop,
+    isDirty: false,
+    isPending: false,
+})
+DirtyDetectionContext.displayName = 'DirtyDetectionContext'
+
+export const DirtyDetection = memo<PropsWithChildren>(function DirtyDetection({ children }) {
+    const [deps, setDeps] = useState<Dependency[]>([])
+
+    const contextValue = useMemo(() => {
+        const isDirty = deps.some((dep) => dep.status)
+        const isPending = !deps.length || deps.some((dep) => dep.pending)
+        return {
+            setDependencies: setDeps,
+            isDirty,
+            isPending,
+        }
+    }, [deps])
+
+    return <DirtyDetectionContext value={contextValue}>{children}</DirtyDetectionContext>
+})
+
+export function useDirtyDetection() {
+    const context = useContext(DirtyDetectionContext)
+    return context
+}
+
+export function useDirtyDetectionDependency(status: boolean, pending: boolean, dependencyId: string) {
+    const { setDependencies } = useDirtyDetection()
+
+    useEffect(() => {
+        setDependencies((deps) => {
+            if (!deps.some((dep) => dep.id === dependencyId)) {
+                return [...deps, { id: dependencyId, status, pending }]
+            }
+            const dep = deps.find((dep) => dep.id === dependencyId)
+            if (isEqual(dep, { id: dependencyId, status, pending })) return deps
+            return deps.map((dep) => (dep.id === dependencyId ? { ...dep, status, pending } : dep))
+        })
+    }, [status, dependencyId, pending])
+}

packages/plugin-infra/src/dom/index.ts

@@ -3,3 +3,4 @@ export { PluginTransFieldRender, type PluginTransFieldRenderProps, usePluginTran
 
 export { type PluginWrapperMethods, type PluginWrapperComponentProps, usePluginWrapper } from './usePluginWrapper.js'
 export { __setUIContext__, type __UIContext__ } from './context.js'
+export * from './DirtyDetectionContext.js'

packages/plugins/ScamWarning/src/SiteAdaptor/components/TextModifier.tsx

@@ -6,6 +6,7 @@ import { extractAddresses } from '../../utils.js'
 import { usePopoverControl } from './usePopoverControl.js'
 import { WarningCard } from './WarningCard.js'
 import { useDetectAddress } from '../hooks/useDetectAddress.js'
+import { useDirtyDetectionDependency } from '@masknet/plugin-infra/dom'
 
 const useStyles = makeStyles()((theme) => ({
     text: {
@@ -97,6 +98,8 @@ export const TextModifier = memo<TextModifierProps>(function TextModifier({ fall
         segments.push({ type: 'text', value: fullText.slice(offset) })
         return segments
     }, [addresses, fullText])
+    const isDirty = !!addresses.length && !segments.length
+    useDirtyDetectionDependency(isDirty, false, fullText)
 
     if (addresses.length === 0 || segments.length === 0) return fallback
 

packages/plugins/Trader/src/SiteAdaptor/components/MentionModifier.tsx

@@ -1,4 +1,5 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { useDirtyDetectionDependency } from '@masknet/plugin-infra/dom'
 import { PluginTraderMessages } from '@masknet/plugin-trader'
 import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
@@ -34,7 +35,7 @@ type TagSearchResult =
 export const MentionModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['MentionModifier']>>(
     function MentionModifier({ children, href }) {
         const { classes } = useStyles()
-        const { data } = useQuery({
+        const { data, isLoading } = useQuery({
             queryKey: ['mention', children],
             queryFn: async () => {
                 return DSearch.search<TagSearchResult>(
@@ -44,6 +45,9 @@ export const MentionModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['Menti
             },
         })
         const timerRef = useRef<NodeJS.Timeout>(undefined)
+
+        const isDirty = !!data?.length && !isLoading
+        useDirtyDetectionDependency(isDirty, isLoading, children)
         if (data?.length) {
             return (
                 <span

packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx

@@ -1,4 +1,5 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { useDirtyDetectionDependency } from '@masknet/plugin-infra/dom'
 import { PluginTraderMessages } from '@masknet/plugin-trader'
 import { Image } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
@@ -26,7 +27,8 @@ const useStyles = makeStyles()(() => ({
         overflow: 'hidden',
         objectFit: 'cover',
     },
-    failedImage: {
+    imageContainer: {
+        display: 'contents',
         borderRadius: 16,
         overflow: 'hidden',
     },
@@ -41,12 +43,15 @@ export const TagModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['TagModifi
     href,
 }) {
     const { classes } = useStyles()
-    const { data } = useQuery({
+    const { data, isLoading } = useQuery({
         queryKey: ['tag', children],
         queryFn: async () => {
             return DSearch.search<TagSearchResult>(children)
         },
     })
+    const isDirty = !!data?.length && !isLoading
+    useDirtyDetectionDependency(isDirty, isLoading, children)
+
     const timerRef = useRef<NodeJS.Timeout>(undefined)
     if (data?.length) {
         return (
@@ -68,7 +73,7 @@ export const TagModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['TagModifi
                 }}>
                 <Image
                     size={16}
-                    classes={{ failed: classes.failedImage }}
+                    classes={{ container: classes.imageContainer, image: classes.icon }}
                     className={classes.icon}
                     src={data[0].logoURL}
                     fallback={

packages/shared/src/UI/components/Image/index.tsx

@@ -43,7 +43,7 @@ const MASK_LIGHT_FALLBACK = new URL('./mask-light.png', import.meta.url).href
 
 export interface ImageProps
     extends ImgHTMLAttributes<HTMLImageElement>,
-        withClasses<'container' | 'fallbackImage' | 'imageLoading' | 'failed'> {
+        withClasses<'container' | 'fallbackImage' | 'imageLoading' | 'failed' | 'image'> {
     size?: number | string
     rounded?: boolean
     fallback?: string | JSX.Element | null