add ability to enter html for public group chat

This commit is contained in:
PhilReact 2025-05-29 21:19:49 +03:00
parent 5b7c4e5224
commit a58818b042
3 changed files with 42 additions and 32 deletions

View File

@ -39,6 +39,7 @@ import { ContextMenuMentions } from "../ContextMenuMentions";
import { convert } from "html-to-text";
import { generateHTML } from "@tiptap/react";
import ErrorBoundary from "../../common/ErrorBoundary";
import { isHtmlString } from "../../utils/chat";
const extractTextFromHTML = (htmlString = "") => {
return convert(htmlString, {
@ -71,19 +72,22 @@ export const ChatOptions = ({
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,
]);
transformedMessage = isHtml
? item?.messageText
: generateHTML(item?.messageText, [
StarterKit,
Underline,
Highlight,
Mention,
]);
return {
...item,
messageText: transformedMessage,
};
} catch (error) {
// error
console.log(error);
}
} else return item;
});

View File

@ -33,7 +33,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()){
@ -92,35 +92,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/${
@ -500,7 +498,17 @@ 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 (
<Box
sx={{
@ -537,13 +545,7 @@ export const ReplyPreview = ({message, isEdit})=> {
{message?.messageText && (
<MessageDisplay
htmlContent={generateHTML(message?.messageText, [
StarterKit,
Underline,
Highlight,
Mention,
TextStyle
])}
htmlContent={replyMessageText}
/>
)}
{message?.decryptedData?.type === "notification" ? (

View File

@ -20,3 +20,7 @@ export const messageHasImage = (message) => {
message.images[0]?.service
);
};
export function isHtmlString(value) {
return typeof value === 'string' && /<[^>]+>/.test(value.trim());
}