chore: render TypedMessageCashTrending

src/components/InjectedComponents/PostDummy.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import { usePostInfoDetails } from '../DataSource/usePostInfo'
 import { DefaultTypedMessageRenderer } from './TypedMessageRenderer'
+import { PluginUI } from '../../plugins/plugin'
 
 export interface PostDummyProps {}
 
 export function PostDummy(props: PostDummyProps) {
     const postMessage = usePostInfoDetails('parsedPostContent')
-
-    console.log(postMessage)
-    return <DefaultTypedMessageRenderer message={postMessage}></DefaultTypedMessageRenderer>
+    const processedPostMessage = Array.from(PluginUI.values()).reduce(
+        (x, plugin) => (plugin.postMessageProcessor ? plugin.postMessageProcessor(x) : x),
+        postMessage,
+    )
+    return <DefaultTypedMessageRenderer message={processedPostMessage}></DefaultTypedMessageRenderer>
 }

src/components/InjectedComponents/TypedMessageRenderer.tsx

@@ -46,7 +46,11 @@ export const DefaultTypedMessageTextRenderer = React.memo(function DefaultTypedM
 ) {
     return renderWithMetadata(
         props,
-        <Typography color="textPrimary" variant="body1" style={{ lineBreak: 'anywhere' }} data-testid="text_payload">
+        <Typography
+            color="textPrimary"
+            variant="body1"
+            style={{ lineBreak: 'anywhere', display: 'inline' }}
+            data-testid="text_payload">
             <RenderText text={props.message.content}></RenderText>
         </Typography>,
     )
@@ -63,7 +67,7 @@ export const DefaultTypedMessageAnchorRenderer = React.memo(function DefaultType
     const { content, href } = props.message
     return renderWithMetadata(
         props,
-        <Typography variant="body1" style={{ lineBreak: 'anywhere' }} data-testid="anchor_payload">
+        <Typography variant="body1" style={{ lineBreak: 'anywhere', display: 'inline' }} data-testid="anchor_payload">
             <Link color="textPrimary" target="_blank" rel="noopener noreferrer" href={href}>
                 {content}
             </Link>

src/plugins/Trader/define.tsx

@@ -1,11 +1,23 @@
 import React from 'react'
 import type { PluginConfig } from '../plugin'
-import { TypedMessage, isTypedMessgaeAnchor } from '../../protocols/typed-message'
+import {
+    TypedMessage,
+    isTypedMessgaeAnchor,
+    TypedMessageAnchor,
+    TypedMessageCompound,
+} from '../../protocols/typed-message'
+import { makeTypedMessageCashTrending } from './messages/TypedMessageCashTrending'
 
-const isCashTagMessage = (m: TypedMessage) => isTypedMessgaeAnchor(m) && m.category === 'cash'
+const isCashTagMessage = (m: TypedMessage): m is TypedMessageAnchor => isTypedMessgaeAnchor(m) && m.category === 'cash'
 
 export const TraderPluginDefine: PluginConfig = {
     pluginName: 'Trader',
     identifier: 'co.maskbook.trader',
     postDialogMetadataBadge: new Map([['com.maskbook.trader:1', (meta) => 'no metadata']]),
+    postMessageProcessor(message: TypedMessageCompound) {
+        return {
+            ...message,
+            items: message.items.map((m: TypedMessage) => (isCashTagMessage(m) ? makeTypedMessageCashTrending(m) : m)),
+        }
+    },
 }

src/plugins/Trader/messages/TypedMessageCashTrending.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { TypedMessage, TypedMessageAnchor, registerTypedMessageRenderer } from '../../../protocols/typed-message'
 
 export interface TypedMessageCashTrending extends TypedMessage {
@@ -20,5 +21,5 @@ registerTypedMessageRenderer('anchor/cash_trending', {
 })
 
 function DefaultTypedMessageCashTrendingRenderer() {
-    return null
+    return <a href="https://maskbook.com">MASKBOOK!</a>
 }

src/plugins/plugin.ts

@@ -1,4 +1,4 @@
-import type { TypedMessage } from '../protocols/typed-message'
+import type { TypedMessage, TypedMessageCompound } from '../protocols/typed-message'
 
 type PluginInjectFunction<T> =
     | {
@@ -11,6 +11,7 @@ export interface PluginConfig {
     pluginName: string
     identifier: string
     successDecryptionInspector?: PluginInjectFunction<{ message: TypedMessage }>
+    postMessageProcessor?: (message: TypedMessageCompound) => TypedMessageCompound
     postInspector?: PluginInjectFunction<{}>
     postDialogMetadataBadge?: Map<string, (metadata: any) => string>
 }

src/social-network-provider/twitter.com/ui/fetch.ts

@@ -131,6 +131,9 @@ const registerPostCollector = (self: SocialNetworkUI) => {
             info.postContent.addListener((newValue) => {
                 info.postPayload.value = deconstructPayload(newValue, self.payloadDecoder)
             })
+            info.parsedPostContent.addListener((newValue) => {
+                // info.parsedPostContent.value =
+            })
             injectMaskbookIconToPost(info)
             self.posts.set(proxy, info)
             return {
@@ -190,9 +193,7 @@ function collectPostInfo(tweetNode: HTMLDivElement | null, info: PostInfo, self:
     const images = untilElementAvailable(postsImageSelector(tweetNode), 10000)
         .then(() => postImagesParser(tweetNode))
         .then((urls) => {
-            for (const url of urls) {
-                info.postMetadataImages.add(url)
-            }
+            for (const url of urls) info.postMetadataImages.add(url)
             if (urls.length) return makeTypedMessageFromList(...urls.map((x) => makeTypedMessageImage(x)))
             return makeTypedMessageEmpty()
         })

src/social-network/PostInfo.ts

@@ -1,7 +1,12 @@
 import { DOMProxy, LiveSelector, ValueRef } from '@holoflows/kit/es'
 import { ProfileIdentifier, PostIdentifier, Identifier } from '../database/type'
 import type { Payload } from '../utils/type-transform/Payload'
-import { TypedMessage, makeTypedMessageCompound, isTypedMessageEqual } from '../protocols/typed-message'
+import {
+    TypedMessage,
+    makeTypedMessageCompound,
+    isTypedMessageEqual,
+    TypedMessageCompound,
+} from '../protocols/typed-message'
 import { Result, Err } from 'ts-results'
 import { ObservableSet, ObservableMap } from '../utils/ObservableMapSet'
 import { parseURL } from '../utils/utils'
@@ -41,7 +46,7 @@ export abstract class PostInfo {
      * The un-decrypted post content.
      * It MUST be the original result (but can be updated by the original parser).
      */
-    readonly parsedPostContent = new ValueRef<TypedMessage>(makeTypedMessageCompound([]), isTypedMessageEqual)
+    readonly parsedPostContent = new ValueRef<TypedMessageCompound>(makeTypedMessageCompound([]), isTypedMessageEqual)
     /**
      * The un-decrypted post content after transformation.
      */