Switch away from nesting React trees and mangling the DOM (#29586)

* Switch away from nesting React trees and mangling the DOM By parsing HTML events and manipulating the AST before passing it to React Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use MatrixClientContext in Pill now that we are in the main React tree Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing import Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Break import cycles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Minimise Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Docs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-11-06 06:28:27 +00:00 · 2025-03-26 20:25:03 +00:00
parent 89e22e00fb
commit 3f47487472
37 changed files with 1488 additions and 1134 deletions
@@ -77,40 +77,38 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
  dir="auto"
 >
  Chat with 
-  <span>
-    <bdi>
-      <a
-        class="mx_Pill mx_UserPill"
-        href="https://matrix.to/#/@user:example.com"
+  <bdi>
+    <a
+      class="mx_Pill mx_UserPill"
+      href="https://matrix.to/#/@user:example.com"
+    >
+      <span
+        aria-hidden="true"
+        aria-label="Profile picture"
+        class="_avatar_1qbcf_8 mx_BaseAvatar"
+        data-color="2"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 16px;"
      >
-        <span
-          aria-hidden="true"
-          aria-label="Profile picture"
-          class="_avatar_1qbcf_8 mx_BaseAvatar"
-          data-color="2"
-          data-testid="avatar-img"
+        <img
+          alt=""
+          class="_image_1qbcf_41"
          data-type="round"
-          style="--cpd-avatar-size: 16px;"
-        >
-          <img
-            alt=""
-            class="_image_1qbcf_41"
-            data-type="round"
-            height="16px"
-            loading="lazy"
-            referrerpolicy="no-referrer"
-            src="mxc://avatar.url/image.png"
-            width="16px"
-          />
-        </span>
-        <span
-          class="mx_Pill_text"
-        >
-          Member
-        </span>
-      </a>
-    </bdi>
-  </span>
+          height="16px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="mxc://avatar.url/image.png"
+          width="16px"
+        />
+      </span>
+      <span
+        class="mx_Pill_text"
+      >
+        Member
+      </span>
+    </a>
+  </bdi>
 </div>
 `;

@@ -124,40 +122,38 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
      dir="auto"
    >
      See this message 
-      <span>
-        <bdi>
-          <a
-            class="mx_Pill mx_EventPill"
-            href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
+      <bdi>
+        <a
+          class="mx_Pill mx_EventPill"
+          href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
+        >
+          <span
+            aria-hidden="true"
+            aria-label="Avatar"
+            class="_avatar_1qbcf_8 mx_BaseAvatar"
+            data-color="1"
+            data-testid="avatar-img"
+            data-type="round"
+            style="--cpd-avatar-size: 16px;"
          >
-            <span
-              aria-hidden="true"
-              aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
-              data-color="1"
-              data-testid="avatar-img"
+            <img
+              alt=""
+              class="_image_1qbcf_41"
              data-type="round"
-              style="--cpd-avatar-size: 16px;"
-            >
-              <img
-                alt=""
-                class="_image_1qbcf_41"
-                data-type="round"
-                height="16px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="mxc://avatar.url/room.png"
-                width="16px"
-              />
-            </span>
-            <span
-              class="mx_Pill_text"
-            >
-              Message in room name
-            </span>
-          </a>
-        </bdi>
-      </span>
+              height="16px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="mxc://avatar.url/room.png"
+              width="16px"
+            />
+          </span>
+          <span
+            class="mx_Pill_text"
+          >
+            Message in room name
+          </span>
+        </a>
+      </bdi>
    </div>
  </div>
 </DocumentFragment>
@@ -173,40 +169,38 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
      dir="auto"
    >
      A 
-      <span>
-        <bdi>
-          <a
-            class="mx_Pill mx_RoomPill"
-            href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
+      <bdi>
+        <a
+          class="mx_Pill mx_RoomPill"
+          href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
+        >
+          <span
+            aria-hidden="true"
+            aria-label="Avatar"
+            class="_avatar_1qbcf_8 mx_BaseAvatar"
+            data-color="1"
+            data-testid="avatar-img"
+            data-type="round"
+            style="--cpd-avatar-size: 16px;"
          >
-            <span
-              aria-hidden="true"
-              aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
-              data-color="1"
-              data-testid="avatar-img"
+            <img
+              alt=""
+              class="_image_1qbcf_41"
              data-type="round"
-              style="--cpd-avatar-size: 16px;"
-            >
-              <img
-                alt=""
-                class="_image_1qbcf_41"
-                data-type="round"
-                height="16px"
-                loading="lazy"
-                referrerpolicy="no-referrer"
-                src="mxc://avatar.url/room.png"
-                width="16px"
-              />
-            </span>
-            <span
-              class="mx_Pill_text"
-            >
-              room name
-            </span>
-          </a>
-        </bdi>
-      </span>
+              height="16px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="mxc://avatar.url/room.png"
+              width="16px"
+            />
+          </span>
+          <span
+            class="mx_Pill_text"
+          >
+            room name
+          </span>
+        </a>
+      </bdi>
       with vias
    </div>
  </div>
@@ -287,40 +281,38 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
  dir="auto"
 >
  Hey 
-  <span>
-    <bdi>
-      <a
-        class="mx_Pill mx_UserPill"
-        href="https://matrix.to/#/@user:server"
+  <bdi>
+    <a
+      class="mx_Pill mx_UserPill"
+      href="https://matrix.to/#/@user:server"
+    >
+      <span
+        aria-hidden="true"
+        aria-label="Profile picture"
+        class="_avatar_1qbcf_8 mx_BaseAvatar"
+        data-color="2"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 16px;"
      >
-        <span
-          aria-hidden="true"
-          aria-label="Profile picture"
-          class="_avatar_1qbcf_8 mx_BaseAvatar"
-          data-color="2"
-          data-testid="avatar-img"
+        <img
+          alt=""
+          class="_image_1qbcf_41"
          data-type="round"
-          style="--cpd-avatar-size: 16px;"
-        >
-          <img
-            alt=""
-            class="_image_1qbcf_41"
-            data-type="round"
-            height="16px"
-            loading="lazy"
-            referrerpolicy="no-referrer"
-            src="mxc://avatar.url/image.png"
-            width="16px"
-          />
-        </span>
-        <span
-          class="mx_Pill_text"
-        >
-          Member
-        </span>
-      </a>
-    </bdi>
-  </span>
+          height="16px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="mxc://avatar.url/image.png"
+          width="16px"
+        />
+      </span>
+      <span
+        class="mx_Pill_text"
+      >
+        Member
+      </span>
+    </a>
+  </bdi>
 </div>
 `;

@@ -466,25 +458,21 @@ exports[`<TextualBody /> renders formatted m.text correctly spoilers get injecte
  dir="auto"
 >
  Hey 
-  <span>
-    <button
-      class="mx_EventTile_spoiler"
+  <button
+    class="mx_EventTile_spoiler"
+  >
+    <span
+      class="mx_EventTile_spoiler_reason"
    >
-      <span
-        class="mx_EventTile_spoiler_reason"
-      >
-        (movie)
-      </span>
-       
-      <span
-        class="mx_EventTile_spoiler_content"
-      >
-        <span>
-          the movie was awesome
-        </span>
-      </span>
-    </button>
-  </span>
+      (movie)
+    </span>
+     
+    <span
+      class="mx_EventTile_spoiler_content"
+    >
+      the movie was awesome
+    </span>
+  </button>
 </div>
 `;

@@ -522,9 +510,9 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
 </div>
 `;

-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi>"`;

-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi>"`;

 exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
 <div
@@ -532,32 +520,30 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
  dir="auto"
 >
  Visit 
-  <span>
-    <bdi>
-      <a
-        class="mx_Pill mx_EventPill"
-        href="https://matrix.to/#/!room1:example.com/!abc123"
+  <bdi>
+    <a
+      class="mx_Pill mx_EventPill"
+      href="https://matrix.to/#/!room1:example.com/!abc123"
+    >
+      <svg
+        class="mx_Pill_LinkIcon mx_BaseAvatar"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
      >
-        <svg
-          class="mx_Pill_LinkIcon mx_BaseAvatar"
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
-          />
-        </svg>
-        <span
-          class="mx_Pill_text"
-        >
-          Message
-        </span>
-      </a>
-    </bdi>
-  </span>
+        <path
+          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+        />
+      </svg>
+      <span
+        class="mx_Pill_text"
+      >
+        Message
+      </span>
+    </a>
+  </bdi>
 </div>
 `;