fix: mf-5996 should paste into compose dialog when it's open (#11302)

* fix: mf-5996 should paste into compose dialog when it's open

* fix: mf-5996 back to compose dialog with correct compositionType

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

@@ -36,9 +36,10 @@ export function injectPostDialogHintAtTwitter(signal: AbortSignal) {
         missingReportRule: { name: 'PostDialog hint timeline', rule: 'https://twitter.com/home' },
     })
 
+    const composeWithEditor = isCompose() && hasEditor()
     renderPostDialogHintTo(
         'popup',
-        postEditorInPopupSelector().map((x) => (isCompose() && hasEditor() ? x : emptyNode)),
+        postEditorInPopupSelector().map((x) => (composeWithEditor ? x : emptyNode)),
         {
             signal,
             missingReportRule: {

packages/mask/content-script/site-adaptors/twitter.com/utils/postBox.ts

@@ -9,7 +9,7 @@ export function getEditorContent() {
 }
 
 export function isCompose() {
-    return globalThis.location.pathname.includes('compose')
+    return globalThis.location.pathname === '/compose/tweet'
 }
 
 export function hasFocus(x: LiveSelector<HTMLElement, true>) {

packages/mask/content-script/site-adaptors/twitter.com/utils/selector.ts

@@ -309,8 +309,8 @@ export function searchRetweetAvatarSelector() {
 }
 
 export function searchReplyToolbarSelector() {
-    return querySelector<E>('div[data-testid="primaryColumn"] div[data-testid="toolBar"]').querySelector<E>(
-        '[role="presentation"]:has(> div[data-testid="geoButton"])',
+    return querySelector<E>(
+        'div[data-testid="primaryColumn"] div[data-testid="toolBar"] [role="presentation"]:has(> div[data-testid="geoButton"])',
     )
 }
 

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import * as web3_utils from /* webpackDefer: true */ 'web3-utils'
 import { DialogContent, Tab, useTheme } from '@mui/material'
 import { TabContext, TabPanel } from '@mui/lab'
@@ -27,6 +27,7 @@ import { RedPacketPast } from './RedPacketPast.js'
 import { RedPacketERC20Form } from './RedPacketERC20Form.js'
 import { RedPacketERC721Form } from './RedPacketERC721Form.js'
 import { openComposition } from './openComposition.js'
+import { CompositionTypeContext } from './RedPacketInjection.js'
 
 const useStyles = makeStyles<{ scrollY: boolean; isDim: boolean }>()((theme, { isDim }) => {
     // it's hard to set dynamic color, since the background color of the button is blended transparent
@@ -104,6 +105,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const senderName =
         lastRecognized?.identifier?.userId ?? currentIdentity?.identifier?.userId ?? linkedPersona?.nickname
 
+    const compositionType = useContext(CompositionTypeContext)
     const onCreateOrSelect = useCallback(
         async (payload: RedPacketJSONPayload) => {
             if (payload.password === '') {
@@ -126,12 +128,12 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
             }
 
             senderName && (payload.sender.name = senderName)
-            openComposition(RedPacketMetaKey, reduceUselessPayloadInfo(payload))
+            openComposition(RedPacketMetaKey, reduceUselessPayloadInfo(payload), compositionType)
             Telemetry.captureEvent(EventType.Access, EventID.EntryAppLuckCreate)
             ApplicationBoardModal.close()
             handleClose()
         },
-        [senderName, handleClose],
+        [senderName, handleClose, compositionType],
     )
 
     const onBack = useCallback(() => {

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInjection.tsx

@@ -1,18 +1,25 @@
-import { useCallback, useEffect, useState } from 'react'
 import { CrossIsolationMessages, type PluginID } from '@masknet/shared-base'
+import { createContext, useCallback, useEffect, useState } from 'react'
 
-import RedPacketDialog from './RedPacketDialog.js'
+import type { CompositionType } from '@masknet/plugin-infra/content-script'
 import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
+import RedPacketDialog from './RedPacketDialog.js'
+
+export const CompositionTypeContext = createContext<CompositionType>('timeline')
 
 export function RedPacketInjection() {
     const [open, setOpen] = useState(false)
     const [source, setSource] = useState<PluginID>()
+    const [compositionType, setCompositionType] = useState<CompositionType>('timeline')
 
     useEffect(() => {
-        return CrossIsolationMessages.events.redpacketDialogEvent.on(({ open, source: pluginId }) => {
-            setOpen(open)
-            setSource(pluginId)
-        })
+        return CrossIsolationMessages.events.redpacketDialogEvent.on(
+            ({ open, source: pluginId, compositionType = 'timeline' }) => {
+                setCompositionType(compositionType)
+                setOpen(open)
+                setSource(pluginId)
+            },
+        )
     }, [])
 
     const handleClose = useCallback(() => {
@@ -22,7 +29,9 @@ export function RedPacketInjection() {
     if (!open) return null
     return (
         <EVMWeb3ContextProvider>
-            <RedPacketDialog open onClose={handleClose} source={source} />
+            <CompositionTypeContext.Provider value={compositionType}>
+                <RedPacketDialog open onClose={handleClose} source={source} />
+            </CompositionTypeContext.Provider>
         </EVMWeb3ContextProvider>
     )
 }

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketPast.tsx

@@ -7,11 +7,12 @@ import type { NonFungibleCollection } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { TabPanel } from '@mui/lab'
 import { Box } from '@mui/material'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useContext } from 'react'
 import { RedPacketNftMetaKey } from '../constants.js'
 import { NftRedPacketHistoryList } from './NftRedPacketHistoryList.js'
 import { RedPacketHistoryList } from './RedPacketHistoryList.js'
 import { openComposition } from './openComposition.js'
+import { CompositionTypeContext } from './RedPacketInjection.js'
 
 const useStyles = makeStyles()((theme) => ({
     tabWrapper: {
@@ -32,25 +33,30 @@ export const RedPacketPast = memo(function RedPacketPast({ onSelect, onClose, ta
     const linkedPersona = useCurrentLinkedPersona()
 
     const senderName = currentIdentity?.identifier?.userId ?? linkedPersona?.nickname ?? 'Unknown User'
+    const compositionType = useContext(CompositionTypeContext)
     const handleSendNftRedpacket = useCallback(
         (history: NftRedPacketJSONPayload, collection: NonFungibleCollection<ChainId, SchemaType>) => {
             const { rpid, txid, duration, sender, password, chainId } = history
-            openComposition(RedPacketNftMetaKey, {
-                id: rpid,
-                txid,
-                duration,
-                message: sender.message,
-                senderName,
-                contractName: collection.name,
-                contractAddress: collection.address,
-                contractTokenURI: collection.iconURL ?? '',
-                privateKey: password,
-                chainId,
-            })
+            openComposition(
+                RedPacketNftMetaKey,
+                {
+                    id: rpid,
+                    txid,
+                    duration,
+                    message: sender.message,
+                    senderName,
+                    contractName: collection.name,
+                    contractAddress: collection.address,
+                    contractTokenURI: collection.iconURL ?? '',
+                    privateKey: password,
+                    chainId,
+                },
+                compositionType,
+            )
             ApplicationBoardModal.close()
             onClose?.()
         },
-        [senderName],
+        [senderName, compositionType],
     )
 
     return (

packages/plugins/RedPacket/src/SiteAdaptor/RedpacketNftConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useCallback, useState, memo } from 'react'
+import { useMemo, useCallback, useState, memo, useContext } from 'react'
 import { makeStyles, ActionButton } from '@masknet/theme'
 import {
     formatEthereumAddress,
@@ -26,6 +26,7 @@ import { useCreateNftRedpacketCallback } from './hooks/useCreateNftRedpacketCall
 import { RedPacketNftMetaKey } from '../constants.js'
 import { RedPacketRPC } from '../messages.js'
 import { openComposition } from './openComposition.js'
+import { CompositionTypeContext } from './RedPacketInjection.js'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -194,24 +195,29 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
         onClose()
     }, [publicKey])
 
+    const compositionType = useContext(CompositionTypeContext)
     const onSendPost = useCallback(
         (id: string) => {
-            openComposition(RedPacketNftMetaKey, {
-                id,
-                transactionId,
-                duration,
-                message,
-                senderName,
-                contractName: contract.name,
-                contractAddress: contract.address,
-                contractTokenURI: contract.iconURL ?? '',
-                contractVersion: 1,
-                privateKey,
-                chainId: contract.chainId,
-            })
+            openComposition(
+                RedPacketNftMetaKey,
+                {
+                    id,
+                    transactionId,
+                    duration,
+                    message,
+                    senderName,
+                    contractName: contract.name,
+                    contractAddress: contract.address,
+                    contractTokenURI: contract.iconURL ?? '',
+                    contractVersion: 1,
+                    privateKey,
+                    chainId: contract.chainId,
+                },
+                compositionType,
+            )
             ApplicationBoardModal.close()
         },
-        [duration, message, senderName, contract, privateKey, transactionId],
+        [duration, message, senderName, contract, privateKey, transactionId, compositionType],
     )
 
     return (

packages/plugins/RedPacket/src/SiteAdaptor/emitter.ts

@@ -1,5 +1,6 @@
+import type { CompositionType } from '@masknet/plugin-infra/content-script'
 import { CrossIsolationMessages } from '@masknet/shared-base'
 
-export function openDialog() {
-    CrossIsolationMessages.events.redpacketDialogEvent.sendToLocal({ open: true })
+export function openDialog(compositionType: CompositionType = 'timeline') {
+    CrossIsolationMessages.events.redpacketDialogEvent.sendToLocal({ open: true, compositionType })
 }

packages/plugins/RedPacket/src/SiteAdaptor/index.tsx

@@ -10,7 +10,6 @@ import { memo } from 'react'
 import { Trans } from 'react-i18next'
 import { base } from '../base.js'
 import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants.js'
-import RedPacketDialog from './RedPacketDialog.js'
 import { RedPacketInPost } from './RedPacketInPost.js'
 import { RedPacketInjection } from './RedPacketInjection.js'
 import { RedPacketNftInPost } from './RedPacketNftInPost.js'
@@ -89,13 +88,15 @@ const site: Plugin.SiteAdaptor.Definition = {
     ]),
     GlobalInjection: RedPacketInjection,
     CompositionDialogEntry: {
-        dialog: RedPacketDialog,
         label: (
             <>
                 <Icons.RedPacket size={16} />
                 <Trans ns={PluginID.RedPacket} i18nKey="name" />
             </>
         ),
+        onClick: ({ compositionType }) => {
+            openDialog(compositionType)
+        },
     },
     ApplicationEntries: [
         (() => {
@@ -116,7 +117,9 @@ const site: Plugin.SiteAdaptor.Definition = {
                             {...EntryComponentProps}
                             icon={icon}
                             onClick={() => {
-                                EntryComponentProps.onClick ? EntryComponentProps.onClick(openDialog) : openDialog()
+                                EntryComponentProps.onClick ?
+                                    EntryComponentProps.onClick(() => openDialog('timeline'))
+                                :   openDialog()
                                 Telemetry.captureEvent(EventType.Access, EventID.EntryAppLuckOpen)
                             }}
                         />

packages/plugins/RedPacket/src/SiteAdaptor/openComposition.ts

@@ -1,10 +1,10 @@
 import { CrossIsolationMessages } from '@masknet/shared-base'
 
-export function openComposition(metadataKey: string, payload: unknown) {
+export function openComposition(metadataKey: string, payload: unknown, reason: 'popup' | 'timeline' = 'timeline') {
     // Close the duplicated dialog if already opened by clicking the mask compose icon.
     CrossIsolationMessages.events.compositionDialogEvent.sendToLocal({ reason: 'popup', open: false })
     CrossIsolationMessages.events.compositionDialogEvent.sendToLocal({
-        reason: 'timeline',
+        reason,
         open: true,
         options: {
             initialMetas: {

packages/shared-base/src/Messages/Events.ts

@@ -157,6 +157,8 @@ interface SettingsUpdateEvent {
 
 export interface redpacketDialogEvent {
     open: boolean
+    // CompositionType from '@masknet/plugin-infra/content-script'
+    compositionType?: 'popup' | 'timeline'
     source?: PluginID
 }