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

fix chat edits with image
2025-06-14 20:11:22 +00:00 · 2025-06-05 14:52:33 +03:00 · 2025-06-05 14:52:33 +03:00 · 5024568bd1
commit 5024568bd1
parent 2e0fdafd82 6f698d2e49
12 changed files with 97 additions and 50 deletions
--- a/src/components/Chat/ChatGroup.tsx
+++ b/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();
-
-        if (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>') return;
+        let htmlContent = editorRef.current.getHTML();
+        const deleteImage =
+          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
-      .chain()
-      .focus()
-      .setContent(message?.messageText || message?.text)
-      .run();
+    try {
+      editorRef.current
+        .chain()
+        .focus()
+        .setContent(message?.messageText || message?.text || '<p></p>')
+        .run();
+    } catch (error) {
+      console.error(error);
+    }
  }, []);

  const handleReaction = useCallback(
--- a/src/components/Chat/ChatList.tsx
+++ b/src/components/Chat/ChatList.tsx
@ -280,31 +280,18 @@ export const ChatList = ({
                      reactions =
                        chatReferences[message.signature]?.reactions || null;

-                      if (
-                        chatReferences[message.signature]?.edit?.message &&
-                        message?.text
-                      ) {
+                      if (chatReferences[message.signature]?.edit) {
                        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
--- a/src/components/Chat/MessageItem.tsx
+++ b/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} />
        )}

--- a/src/components/Embeds/ImageEmbed.tsx
+++ b/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>
-        <CardContent>
+      <Box
+        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}
      >
--- a/src/i18n/locales/de/core.json
+++ b/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",
--- a/src/i18n/locales/en/core.json
+++ b/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",
--- a/src/i18n/locales/es/core.json
+++ b/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",
--- a/src/i18n/locales/fr/core.json
+++ b/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",
--- a/src/i18n/locales/it/core.json
+++ b/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",
--- a/src/i18n/locales/ja/core.json
+++ b/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": "支払いなし",
--- a/src/i18n/locales/ru/core.json
+++ b/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": "Нет платежей",
--- a/src/i18n/locales/zh/core.json
+++ b/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": "无付款",