Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 6x 102x 102x 108x 4x 104x 9x 95x | import { SxProps } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { parseMentionsAndSearch } from "../utils";
import {
ChatMentionedText,
ChatSearchMatchText,
} from "./ChatStyledTexts";
export interface ParsedTextRendererProps {
text?: string;
searchWord?: string;
isLoggedInUser?: boolean;
textVariant?: string;
textColor?: string;
fontWeight?: number | string;
component?: React.ElementType;
useParse?: boolean;
sx?: SxProps;
mentionedTextSx?: SxProps;
searchMatchTextSx?: SxProps;
id?: number;
}
/**
* A reusable component that renders text with parsed mentions and search highlights
* This consolidates the repetitive pattern used across multiple components
*/
export const ParsedTextRenderer = ({
text = "",
searchWord = "",
isLoggedInUser,
textColor,
fontWeight = 400,
component = "span",
useParse = true,
sx,
mentionedTextSx,
searchMatchTextSx,
id,
}: ParsedTextRendererProps) => {
const segments = parseMentionsAndSearch(text, searchWord);
return (
<>
{segments.map((segment, index) => {
if (segment.isMention) {
return (
<ChatMentionedText
key={index}
isLoggedInUser={isLoggedInUser}
component={component}
useParse={useParse}
sx={mentionedTextSx}
data-testid={`give-conversation-mentioned-text-${id}-${index}`}
>
{segment.text}
</ChatMentionedText>
);
}
if (segment.isSearchMatch) {
return (
<ChatSearchMatchText
key={index}
isLoggedInUser={isLoggedInUser}
component={component}
useParse={useParse}
sx={searchMatchTextSx}
data-testid={`give-conversation-search-match-text-${id}-${index}`}
>
{segment.text}
</ChatSearchMatchText>
);
}
return (
<GiveText
key={index}
component={component}
useParse={useParse}
color={textColor}
fontWeight={fontWeight}
sx={sx}
>
{segment.text}
</GiveText>
);
})}
</>
);
};
|