Merge pull request #74 from Qortal/bugfix/chat-edits

fix chat edits with image

src/components/Chat/ChatGroup.tsx

@@ -299,17 +299,15 @@ export const ChatGroup = ({
                 const formatted = combineUIAndExtensionMsgs
                   .filter((rawItem) => !rawItem?.chatReference)
                   .map((item) => {
-                    const message = (
-                      <p>
-                        {t('group:message.generic.group_key_created', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </p>
-                    );
                     const additionalFields =
                       item?.data === 'NDAwMQ==' // TODO put magic string somewhere in a file
                         ? {
-                            text: message,
+                            text: `<p>${t(
+                              'group:message.generic.group_key_created',
+                              {
+                                postProcess: 'capitalizeFirstChar',
+                              }
+                            )}</p>`,
                           }
                         : {};
                     return {
@@ -450,17 +448,15 @@ export const ChatGroup = ({
                 const formatted = combineUIAndExtensionMsgs
                   .filter((rawItem) => !rawItem?.chatReference)
                   .map((item) => {
-                    const message = (
-                      <p>
-                        {t('group:message.generic.group_key_created', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </p>
-                    );
                     const additionalFields =
                       item?.data === 'NDAwMQ=='
                         ? {
-                            text: message,
+                            text: `<p>${t(
+                              'group:message.generic.group_key_created',
+                              {
+                                postProcess: 'capitalizeFirstChar',
+                              }
+                            )}</p>`,
                           }
                         : {};
                     const divide =
@@ -818,13 +814,28 @@ export const ChatGroup = ({
         );
       pauseAllQueues();
       if (editorRef.current) {
-        const htmlContent = editorRef.current.getHTML();
+        let htmlContent = editorRef.current.getHTML();
-
+        const deleteImage =
-        if (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>') return;
+          onEditMessage && isDeleteImage && messageHasImage(onEditMessage);
 
+        const hasImage =
+          chatImagesToSave?.length > 0 || onEditMessage?.images?.length > 0;
+        if (
+          (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>') &&
+          !hasImage &&
+          !deleteImage
+        )
+          return;
+        if (htmlContent?.trim() === '<p></p>') {
+          htmlContent = null;
+        }
         setIsSending(true);
         const message =
-          isPrivate === false ? editorRef.current.getJSON() : htmlContent;
+          isPrivate === false
+            ? !htmlContent
+              ? '<p></p>'
+              : editorRef.current.getJSON()
+            : htmlContent;
         const secretKeyObject = await getSecretKey(false, true);
 
         let repliedTo = replyMessage?.signature;
@@ -849,8 +860,6 @@ export const ChatGroup = ({
         }
 
         const imagesToPublish: ImageToPublish[] = [];
-        const deleteImage =
-          onEditMessage && isDeleteImage && messageHasImage(onEditMessage);
 
         if (deleteImage) {
           const fee = await getFee('ARBITRARY');
@@ -931,7 +940,6 @@ export const ChatGroup = ({
           [isPrivate ? 'message' : 'messageText']: message,
           version: 3,
         };
-
         const message64: any = await objectToBase64(objectMessage);
 
         const encryptSingle =
@@ -1042,11 +1050,15 @@ export const ChatGroup = ({
   const onEdit = useCallback((message) => {
     setOnEditMessage(message);
     setReplyMessage(null);
-    editorRef.current
+    try {
-      .chain()
+      editorRef.current
-      .focus()
+        .chain()
-      .setContent(message?.messageText || message?.text)
+        .focus()
-      .run();
+        .setContent(message?.messageText || message?.text || '<p></p>')
+        .run();
+    } catch (error) {
+      console.error(error);
+    }
   }, []);
 
   const handleReaction = useCallback(

src/components/Chat/ChatList.tsx

@@ -280,31 +280,18 @@ export const ChatList = ({
                       reactions =
                         chatReferences[message.signature]?.reactions || null;
 
-                      if (
+                      if (chatReferences[message.signature]?.edit) {
-                        chatReferences[message.signature]?.edit?.message &&
-                        message?.text
-                      ) {
                         message.text =
                           chatReferences[message.signature]?.edit?.message;
-                        message.isEdit = true;
-                        message.editTimestamp =
-                          chatReferences[message.signature]?.edit?.timestamp;
-                      }
-                      if (
-                        chatReferences[message.signature]?.edit?.messageText &&
-                        message?.messageText
-                      ) {
                         message.messageText =
                           chatReferences[message.signature]?.edit?.messageText;
+                        message.images =
+                          chatReferences[message.signature]?.edit?.images;
+
                         message.isEdit = true;
                         message.editTimestamp =
                           chatReferences[message.signature]?.edit?.timestamp;
                       }
-                      if (chatReferences[message.signature]?.edit?.images) {
-                        message.images =
-                          chatReferences[message.signature]?.edit?.images;
-                        message.isEdit = true;
-                      }
                     }
 
                     // Check if message is updating

src/components/Chat/MessageItem.tsx

@@ -47,6 +47,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 CommentsDisabledIcon from '@mui/icons-material/CommentsDisabled';
 import {
   buildImageEmbedLink,
   isHtmlString,
@@ -186,6 +187,13 @@ export const MessageItem = memo(
       'tutorial',
     ]);
 
+    const hasNoMessage =
+      (!message.decryptedData?.data?.message ||
+        message.decryptedData?.data?.message === '<p></p>') &&
+      (message?.images || [])?.length === 0 &&
+      (!message?.messageText || message?.messageText === '<p></p>') &&
+      (!message?.text || message?.text === '<p></p>');
+
     return (
       <>
         {message?.divide && (
@@ -390,15 +398,33 @@ export const MessageItem = memo(
                 </>
               )}
 
-              {htmlText && <MessageDisplay htmlContent={htmlText} />}
+              {htmlText && !hasNoMessage && (
+                <MessageDisplay htmlContent={htmlText} />
+              )}
 
               {message?.decryptedData?.type === 'notification' ? (
                 <MessageDisplay
                   htmlContent={message.decryptedData?.data?.message}
                 />
-              ) : (
+              ) : hasNoMessage ? null : (
                 <MessageDisplay htmlContent={message.text} />
               )}
+              {hasNoMessage && (
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                  }}
+                >
+                  <CommentsDisabledIcon color="primary" />
+                  <Typography color="primary">
+                    {t('core:message.generic.no_message', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                </Box>
+              )}
               {message?.images && messageHasImage(message) && (
                 <Embed embedLink={buildImageEmbedLink(message.images[0])} />
               )}
@@ -637,6 +663,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
   ]);
 
   const replyMessageText = useMemo(() => {
+    if (!message?.messageText) return null;
     const isHtml = isHtmlString(message?.messageText);
     if (isHtml) return message?.messageText;
     return generateHTML(message?.messageText, [
@@ -692,7 +719,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
           </Typography>
         )}
 
-        {message?.messageText && (
+        {message?.replyMessageText && (
           <MessageDisplay htmlContent={replyMessageText} />
         )}
 

src/components/Embeds/ImageEmbed.tsx

@@ -52,6 +52,8 @@ export const ImageCard = ({
         backgroundColor: theme.palette.background.default,
         height: height,
         transition: 'height 0.6s ease-in-out',
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       <Box
@@ -188,8 +190,18 @@ export const ImageCard = ({
         )}
       </Box>
 
-      <Box>
+      <Box
-        <CardContent>
+        sx={{
+          maxHeight: '100%',
+          flexGrow: 1,
+          overflow: 'hidden',
+        }}
+      >
+        <CardContent
+          sx={{
+            height: '100%',
+          }}
+        >
           <ImageViewer src={image} />
         </CardContent>
       </Box>
@@ -212,6 +224,7 @@ export function ImageViewer({ src, alt = '' }) {
           display: 'flex',
           justifyContent: 'center',
           maxWidth: '100%', // Prevent horizontal overflow
+          height: '100%',
         }}
         onClick={handleOpenFullscreen}
       >

src/i18n/locales/de/core.json

@@ -245,6 +245,7 @@
       "no_data_image": "Keine Daten für das Bild",
       "no_description": "Keine Beschreibung",
       "no_messages": "Keine Nachrichten",
+      "no_message": "keine nachricht",
       "no_minting_details": "müngungsdetails auf dem Gateway können nicht angezeigt werden",
       "no_notifications": "Keine neuen Benachrichtigungen",
       "no_payments": "Keine Zahlungen",

src/i18n/locales/en/core.json

@@ -249,6 +249,7 @@
       "no_data_image": "no data for image",
       "no_description": "no description",
       "no_messages": "no messages",
+      "no_message": "no message",
       "no_minting_details": "cannot view minting details on the gateway",
       "no_notifications": "no new notifications",
       "no_payments": "no payments",

src/i18n/locales/es/core.json

@@ -246,6 +246,7 @@
       "no_data_image": "no hay datos para la imagen",
       "no_description": "sin descripción",
       "no_messages": "sin mensajes",
+      "no_message": "sin mensaje",
       "no_minting_details": "no se puede ver los detalles de acuñado en la puerta de enlace",
       "no_notifications": "no hay nuevas notificaciones",
       "no_payments": "sin pagos",

src/i18n/locales/fr/core.json

@@ -247,6 +247,7 @@
       "no_data_image": "aucune donnée pour l'image",
       "no_description": "aucune description",
       "no_messages": "pas de messages",
+      "no_message": "aucun message",
       "no_minting_details": "impossible d'afficher les détails de la passerelle sur la passerelle",
       "no_notifications": "pas de nouvelles notifications",
       "no_payments": "aucun paiement",

src/i18n/locales/it/core.json

@@ -249,6 +249,7 @@
       "no_data_image": "nessun dato per l'immagine",
       "no_description": "nessuna descrizione",
       "no_messages": "nessun messaggio",
+      "no_message": "nessun messaggio",
       "no_minting_details": "impossibile visualizzare i dettagli di minire sul gateway",
       "no_notifications": "nessuna nuova notifica",
       "no_payments": "nessun pagamento",

src/i18n/locales/ja/core.json

@@ -246,6 +246,7 @@
       "no_data_image": "画像のデータはありません",
       "no_description": "説明なし",
       "no_messages": "メッセージはありません",
+      "no_message": "メッセージなし",
       "no_minting_details": "ゲートウェイでミントの詳細を表示できません",
       "no_notifications": "新しい通知はありません",
       "no_payments": "支払いなし",

src/i18n/locales/ru/core.json

@@ -247,6 +247,7 @@
       "no_data_image": "Нет данных для изображения",
       "no_description": "Нет описания",
       "no_messages": "Нет сообщений",
+      "no_message": "нет сообщения",
       "no_minting_details": "Не могу просматривать детали маттинга на шлюзе",
       "no_notifications": "Нет новых уведомлений",
       "no_payments": "Нет платежей",

src/i18n/locales/zh/core.json

@@ -246,6 +246,7 @@
       "no_data_image": "没有图像数据",
       "no_description": "没有描述",
       "no_messages": "没有消息",
+      "no_message": "没有消息",
       "no_minting_details": "无法在网关上查看薄荷细节",
       "no_notifications": "没有新的通知",
       "no_payments": "无付款",