Fix: Edit history modal crash

src/utils/MessageDiffUtils.tsx

@@ -104,8 +104,10 @@ function diffTreeToDOM(desc: Text | HTMLElement): Node {
         for (const [key, value] of Object.entries(desc.attributes)) {
             node.setAttribute(key, value.value);
         }
-        for (const childDesc of desc.childNodes) {
-            node.appendChild(diffTreeToDOM(childDesc as Text | HTMLElement));
+        if (desc.childNodes) {
+            for (const childDesc of desc.childNodes) {
+                node.appendChild(diffTreeToDOM(childDesc as Text | HTMLElement));
+            }
         }
         return node;
     }

test/utils/MessageDiffUtils-test.tsx

@@ -49,6 +49,7 @@ describe("editBodyDiffToHtml", () => {
         ["attribute modifications", `<a href="#hi">hi</a>`, `<a href="#bye">hi</a>`],
         ["attribute deletions", `<a href="#hi">hi</a>`, `<a>hi</a>`],
         ["attribute additions", `<a>hi</a>`, `<a href="#/room/!123">hi</a>`],
+        ["handles empty tags", `<a>hi</a>`, `<a><h1></h1></a> hi`],
     ])("renders %s", (_label, before, after) => {
         const { container } = renderDiff(before, after);
         expect(container).toMatchSnapshot();

test/utils/__snapshots__/MessageDiffUtils-test.tsx.snap

@@ -365,6 +365,37 @@ exports[`editBodyDiffToHtml renders element replacements 1`] = `
 </div>
 `;
 
+exports[`editBodyDiffToHtml renders handles empty tags 1`] = `
+<div>
+  <span
+    class="mx_EventTile_body markdown-body"
+    dir="auto"
+  >
+    <a
+      rel="noreferrer noopener"
+    >
+      <span>
+        <span
+          class="mx_EditHistoryMessage_deletion"
+        >
+          hi
+        </span>
+        <div
+          class="mx_EditHistoryMessage_insertion"
+        >
+          <h1 />
+        </div>
+      </span>
+    </a>
+    <span
+      class="mx_EditHistoryMessage_insertion"
+    >
+       hi
+    </span>
+  </span>
+</div>
+`;
+
 exports[`editBodyDiffToHtml renders inline element additions 1`] = `
 <div>
   <span