35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { fromFormattedString } from '@xmcl/text-component'
|
|
import { ErrorBoundary } from '@zardoy/react-util'
|
|
import { formatMessage } from '../chatUtils'
|
|
import MessageFormatted from './MessageFormatted'
|
|
|
|
/** like MessageFormatted, but receives raw string or json instead, uses window.loadedData */
|
|
export default ({ message, fallbackColor, className }: {
|
|
message: string | Record<string, any> | null,
|
|
fallbackColor?: string,
|
|
className?: string
|
|
}) => {
|
|
const messageJson = useMemo(() => {
|
|
if (!message) return null
|
|
try {
|
|
const texts = formatMessage(typeof message === 'string' ? fromFormattedString(message) : message)
|
|
return texts.map(text => {
|
|
return {
|
|
...text,
|
|
color: text.color ?? fallbackColor,
|
|
}
|
|
})
|
|
} catch (err) {
|
|
console.error(err) // todo ensure its being logged
|
|
return null
|
|
}
|
|
}, [message])
|
|
|
|
return messageJson ? <ErrorBoundary renderError={(error) => {
|
|
console.error(error)
|
|
return <div>[text component crashed]</div>
|
|
}}>
|
|
<MessageFormatted parts={messageJson} className={className} />
|
|
</ErrorBoundary> : null
|
|
}
|