diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index dda58e5..cdd3757 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -39,6 +39,7 @@ import StarterKit from "@tiptap/starter-kit"; import Underline from "@tiptap/extension-underline"; import { generateHTML } from "@tiptap/react"; import ErrorBoundary from "../../common/ErrorBoundary"; +import { isHtmlString } from "../../utils/chat"; const extractTextFromHTML = (htmlString = '') => { return convert(htmlString, { @@ -59,27 +60,30 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem const parentRefMentions = useRef(); const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null) const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value - const messages = useMemo(()=> { - return untransformedMessages?.map((item)=> { - if(item?.messageText){ - let transformedMessage = item?.messageText + const messages = useMemo(() => { + return untransformedMessages?.map((item) => { + if (item?.messageText) { + let transformedMessage = item?.messageText; + const isHtml = isHtmlString(item?.messageText); try { - transformedMessage = generateHTML(item?.messageText, [ - StarterKit, - Underline, - Highlight, - Mention - ]) - return { - ...item, - messageText: transformedMessage - } + transformedMessage = isHtml + ? item?.messageText + : generateHTML(item?.messageText, [ + StarterKit, + Underline, + Highlight, + Mention, + ]); + return { + ...item, + messageText: transformedMessage, + }; } catch (error) { - // error + console.log(error); } - } else return item - }) - }, [untransformedMessages]) + } else return item; + }); + }, [untransformedMessages]); const getTimestampMention = async () => { try { diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx index 5fc742b..c134d1d 100644 --- a/src/components/Chat/MessageItem.tsx +++ b/src/components/Chat/MessageItem.tsx @@ -34,7 +34,7 @@ import level8Img from "../../assets/badges/level-8.png" import level9Img from "../../assets/badges/level-9.png" import level10Img from "../../assets/badges/level-10.png" import { Embed } from "../Embeds/Embed"; -import { buildImageEmbedLink, messageHasImage } from "../../utils/chat"; +import { buildImageEmbedLink, isHtmlString, messageHasImage } from "../../utils/chat"; const getBadgeImg = (level)=> { switch(level?.toString()){ @@ -104,35 +104,33 @@ useEffect(()=> { getInfo() }, [message?.sender, getIndividualUserInfo]) -const htmlText = useMemo(()=> { - - if(message?.messageText){ +const htmlText = useMemo(() => { + if (message?.messageText) { + const isHtml = isHtmlString(message?.messageText); + if (isHtml) return message?.messageText; return generateHTML(message?.messageText, [ StarterKit, Underline, Highlight, Mention, - TextStyle - ]) + TextStyle, + ]); } - -}, [message?.editTimestamp]) +}, [message?.editTimestamp]); - - -const htmlReply = useMemo(()=> { - - if(reply?.messageText){ +const htmlReply = useMemo(() => { + if (reply?.messageText) { + const isHtml = isHtmlString(reply?.messageText); + if (isHtml) return reply?.messageText; return generateHTML(reply?.messageText, [ StarterKit, Underline, Highlight, Mention, - TextStyle - ]) + TextStyle, + ]); } - -}, [reply?.editTimestamp]) +}, [reply?.editTimestamp]); const userAvatarUrl = useMemo(()=> { return message?.senderName ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${ @@ -524,6 +522,18 @@ const onSeenFunc = useCallback(()=> { export const ReplyPreview = ({message, isEdit})=> { + const replyMessageText = useMemo(() => { + const isHtml = isHtmlString(message?.messageText); + if (isHtml) return message?.messageText; + return generateHTML(message?.messageText, [ + StarterKit, + Underline, + Highlight, + Mention, + TextStyle, + ]); + }, [message?.messageText]); + return ( { {message?.messageText && ( )} {message?.decryptedData?.type === "notification" ? ( diff --git a/src/utils/chat.ts b/src/utils/chat.ts index c7099c0..a655e2a 100644 --- a/src/utils/chat.ts +++ b/src/utils/chat.ts @@ -20,3 +20,7 @@ export const messageHasImage = (message) => { message.images[0]?.service ); }; + +export function isHtmlString(value) { + return typeof value === 'string' && /<[^>]+>/.test(value.trim()); +} \ No newline at end of file