Fix html encoding characters

package-lock.json

@@ -21,6 +21,7 @@
         "file-saver": "2.0.5",
         "flux": "4.0.3",
         "formik": "2.2.9",
+        "he": "1.2.0",
         "html-react-parser": "3.0.4",
         "katex": "0.16.4",
         "linkify-html": "4.0.2",
@@ -3117,6 +3118,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "formik": "2.2.9",
+    "he": "1.2.0",
     "html-react-parser": "3.0.4",
     "katex": "0.16.4",
     "linkify-html": "4.0.2",

src/client/state/RoomsInput.js

@@ -1,6 +1,7 @@
 import EventEmitter from 'events';
 import encrypt from 'browser-encrypt-attachment';
 import { encode } from 'blurhash';
+import { decode } from 'he';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
 import { getBlobSafeMimeType } from '../../util/mimetypes';
 import { sanitizeText } from '../../util/sanitize';
@@ -109,9 +110,10 @@ class RoomsInput extends EventEmitter {
 
   cleanEmptyEntry(roomId) {
     const input = this.getInput(roomId);
-    const isEmpty = typeof input.attachment === 'undefined'
+    const isEmpty =
-      && typeof input.replyTo === 'undefined'
+      typeof input.attachment === 'undefined' &&
-      && (typeof input.message === 'undefined' || input.message === '');
+      typeof input.replyTo === 'undefined' &&
+      (typeof input.message === 'undefined' || input.message === '');
     if (isEmpty) {
       this.roomIdToInput.delete(roomId);
     }
@@ -208,7 +210,7 @@ class RoomsInput extends EventEmitter {
 
     if (!body.onlyPlain || reply) {
       content.format = 'org.matrix.custom.html';
-      content.formatted_body = body.html;
+      content.formatted_body = decode(body.html);
     }
 
     if (edit) {
@@ -221,7 +223,7 @@ class RoomsInput extends EventEmitter {
       const isReply = edit.getWireContent()['m.relates_to']?.['m.in_reply_to'];
       if (isReply) {
         content.format = 'org.matrix.custom.html';
-        content.formatted_body = body.html;
+        content.formatted_body = decode(body.html);
       }
 
       content.body = ` * ${content.body}`;
@@ -234,7 +236,8 @@ class RoomsInput extends EventEmitter {
 
         const eFBody = edit.getContent().formatted_body;
         const fReplyHead = eFBody.substring(0, eFBody.indexOf('</mx-reply>'));
-        if (fReplyHead) content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
+        if (fReplyHead)
+          content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
       }
     }
 
@@ -247,9 +250,15 @@ class RoomsInput extends EventEmitter {
 
       content.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}\n\n${content.body}`;
 
-      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(roomId)}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
+      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(
-      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(reply.userId)}">${sanitizeText(reply.userId)}</a>`;
+        roomId
-      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${reply.formattedBody || sanitizeText(reply.body)}</blockquote></mx-reply>`;
+      )}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
+      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(
+        reply.userId
+      )}">${sanitizeText(reply.userId)}</a>`;
+      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${
+        reply.formattedBody || sanitizeText(reply.body)
+      }</blockquote></mx-reply>`;
       content.formatted_body = fallback + content.formatted_body;
     }
 
@@ -331,7 +340,12 @@ class RoomsInput extends EventEmitter {
         info.h = video.videoHeight;
         info[blurhashField] = encodeBlurhash(video);
 
-        const thumbnailData = await getVideoThumbnail(video, video.videoWidth, video.videoHeight, 'image/jpeg');
+        const thumbnailData = await getVideoThumbnail(
+          video,
+          video.videoWidth,
+          video.videoHeight,
+          'image/jpeg'
+        );
         const thumbnailUploadData = await this.uploadFile(roomId, thumbnailData.thumbnail);
         info.thumbnail_info = thumbnailData.info;
         if (this.matrixClient.isRoomEncrypted(roomId)) {
@@ -378,9 +392,11 @@ class RoomsInput extends EventEmitter {
 
     if (isEncryptedRoom) {
       const dataBuffer = await file.arrayBuffer();
-      if (typeof this.getInput(roomId).attachment === 'undefined') throw new Error('Attachment canceled');
+      if (typeof this.getInput(roomId).attachment === 'undefined')
+        throw new Error('Attachment canceled');
       const encryptedResult = await encrypt.encryptAttachment(dataBuffer);
-      if (typeof this.getInput(roomId).attachment === 'undefined') throw new Error('Attachment canceled');
+      if (typeof this.getInput(roomId).attachment === 'undefined')
+        throw new Error('Attachment canceled');
       encryptInfo = encryptedResult.info;
       encryptBlob = new Blob([encryptedResult.data]);
     }
@@ -414,7 +430,7 @@ class RoomsInput extends EventEmitter {
       { msgType: mEvent.getWireContent().msgtype },
       editedBody,
       null,
-      mEvent,
+      mEvent
     );
     this.matrixClient.sendMessage(roomId, content);
   }