Error in devtools console while opening message edits modal

[lieuwex]

Steps to reproduce

Room where participant sent one message, with the (server) JSON:

{
 "auth_events": [
   "$qozVyftB2OCEepfQgJkM7KYUBQRhgQ_pSFcJbRvkk4M",
   "$VBZTDd--AZXQSNX26FqA6mfVZETs8Ne7OOyxQ9mGLqo",
   "$0sC5sH9bkh-cXuxmsI-ZRGr-oo41i1ZrlPEFCrN9pK4"
 ],
 "content": {
   "body": "${☃️}^\\infty$",
   "format": "org.matrix.custom.html",
   "formatted_body": "{☃️}^\\infty",
   "msgtype": "m.text",
   "org.matrix.msc1767.message": [
     {
       "body": "${☃️}^\\infty$",
       "mimetype": "text/plain"
     },
     {
       "body": "{☃️}^\\infty",
       "mimetype": "text/html"
     }
   ]
 },
 "depth": 58060,
 "hashes": {
   "sha256": "wx+AGLrEQKsC5k3wr++V9vHMs0LqTIgzyoL7KHM0W4M"
 },
 "origin": "example.com",
 "origin_server_ts": 1667252612932,
 "prev_events": [
   "$egII9G2SpcZyZg2xDgz0pnhNpWVnuGMAaI5Nd_fMbqQ"
 ],
 "room_id": "!RoOmID:example.com",
 "sender": "@hank:example.com",
 "type": "m.room.message",
 "signatures": {
   "example.com": {
     "ed25519:TU917FYa": "dZT3NVY5+0xmRDneUZi6kGSE4gJ5QTM+t4e4jptSnO90swyvxTGD77xOYWuOonFFqwqs2kC5/ogQxLY+NI0NAQ"
   }
 },
 "unsigned": {}
}

After this an edit, with the (server) JSON:

{
  "auth_events": [
    "$qozVyftB2OCEepfQgJkM7KYUBQRhgQ_pSFcJbRvkk4M",
    "$VBZTDd--AZXQSNX26FqA6mfVZETs8Ne7OOyxQ9mGLqo",
    "$0sC5sH9bkh-cXuxmsI-ZRGr-oo41i1ZrlPEFCrN9pK4"
  ],
  "content": {
    "body": " * \\({😃}^\\infty\\)",
    "format": "org.matrix.custom.html",
    "formatted_body": " * {😃}^\\infty",
    "m.new_content": {
      "body": "\\({😃}^\\infty\\)",
      "format": "org.matrix.custom.html",
      "formatted_body": "{😃}^\\infty",
      "msgtype": "m.text",
      "org.matrix.msc1767.message": [
        {
          "body": "\\({😃}^\\infty\\)",
          "mimetype": "text/plain"
        },
        {
          "body": "{😃}^\\infty",
          "mimetype": "text/html"
        }
      ]
    },
    "m.relates_to": {
      "event_id": "$8XROHzfjlweqdQmRb7P-xpKvhm-CUQQsUhLUmfdL76c",
      "rel_type": "m.replace"
    },
    "msgtype": "m.text",
    "org.matrix.msc1767.message": [
      {
        "body": " *\\({😃}^\\infty\\)",
        "mimetype": "text/plain"
      },
      {
        "body": " * {😃}^\\infty",
        "mimetype": "text/html"
      }
    ]
  },
  "depth": 58061,
  "hashes": {
    "sha256": "pzmDyyXOO8QE59iDH72/lXZ5sciBZHlXMIfeB3W+OtQ"
  },
  "origin": "example.com",
  "origin_server_ts": 1667252618525,
  "prev_events": [
    "$8XROHzfjlweqdQmRb7P-xpKvhm-CUQQsUhLUmfdL76c"
  ],
  "room_id": "!RoOmID:example.com",
  "sender": "@hank:example.com",
  "type": "m.room.message",
  "signatures": {
    "example.com": {
      "ed25519:TU917FYa": "y/HNhpE4lNC1joUgZ43qogPje51yEnUJiyb2fbQ2ZOY9dZQ8nbSHyc4P08SX1o334w+/AxXany9SwRZ6vdViBQ"
    }
  },
  "unsigned": {}
}

Clicking the "(edited)" link to open the edit modal.

Outcome

What did you expect?

To have the modal open.

What happened instead?

It opened, started loading, and closed immediately.
When I look in the devtools console I see:

MessageDiffUtils.tsx:164 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'parentNode')
    at renderDifferenceInDOM (MessageDiffUtils.tsx:164:21)
    at editBodyDiffToHtml (MessageDiffUtils.tsx:276:9)
    at EditHistoryMessage_EditHistoryMessage.render (EditHistoryMessage.tsx:162:35)
    at qi (react-dom.production.min.js:187:125)
    at pi (react-dom.production.min.js:186:166)
    at ck (react-dom.production.min.js:269:357)
    at bk (react-dom.production.min.js:250:341)
    at ak (react-dom.production.min.js:250:277)
    at Tj (react-dom.production.min.js:250:138)
    at Lj (react-dom.production.min.js:243:146)

Operating system

Fedora Linux 36

Browser information

Version 107.0.5304.87 (Official Build) (64-bit)

URL for webapp

develop.element.io

Application version

Element version: a3659d8-react-fed759ec0e7c-js-9fa661605232 Olm version: 3.2.12

Homeserver

Synapse 1.70.0rc1

Will you send logs?

Yes

[lieuwex]

I just discovered that reloading the page fixes the problem with the modal not opening, but the modal is wrong:

[weeman1337]

Hi @lieuwex thanks for reporting the issue. Unfortunately with the information provided I am unable to reproduce the issue.

Instead of sending the JSON content, can you try to create a guide „I type XYZ, then I click ABC“ etc. ?

[lieuwex]

I looked more into it, and the event JSON doesn't tell the whole story (it misses data-mx-maths properties?).

Anyways, step for step to reproduce this exact issue:

1. Enable "Render LaTeX maths in messages" in labs settings. (I forgot to include this, sorry)
2. Type ${☃️}^\infty$ in the "Send a message..." prompt. Send it by pressing enter.
3. Edit the sent message using the edit button, replace ☃️ by 😃, leaving \({😃}^\infty\) in the prompt.
4. Send the message by pressing enter.
5. Click on the "(edited)" button to open the "Message edits" modal, but this fails. Resulting in an error in the devtools console.

I did however also note the following related bug:

1. Disable "Render LaTeX maths in messages" in labs settings.
2. Type ${☃️}^\infty$ in the "Send a message..." prompt. Send it by pressing enter.
3. Edit the sent message using the edit button, replace ☃️ by 😃, leaving ${😃}^\\infty$ in the prompt.
4. Send the message by pressing enter.
5. Click on the "(edited)" button to open the "Message edits" modal,
6. The model opens, but the results seem incorrect (see first attached screenshot). It looks like the final message contains both 😃 and ☃️. But it does not, the final message is ${😃}^\infty$ (see second attached screenshot).

[lieuwex]

Actual, even further testing seems to indicate the edit modal seems wrong in similar ways more often. Here the swapped the blockquote "test" and the text line "rip", but this swapping is not indicated in the edit history modal.

Edit modal:

Final message:

[weeman1337]

Thanks for the info @lieuwex . I can now reproduce it.