Add bidirectonal isolation for pills

src/components/views/elements/Pill.tsx

@@ -256,15 +256,14 @@ export default class Pill extends React.Component<IProps, IState> {
                 tip = <Tooltip label={resource} alignment={Alignment.Right} />;
             }
 
-            return <MatrixClientContext.Provider value={this.matrixClient}>
+            return <bdi><MatrixClientContext.Provider value={this.matrixClient}>
                 { this.props.inMessage ?
                     <a
                         className={classes}
                         href={href}
                         onClick={onClick}
                         onMouseOver={this.onMouseOver}
                         onMouseLeave={this.onMouseLeave}
-                        dir="auto"
                     >
                         { avatar }
                         <span className="mx_Pill_linkText">{ linkText }</span>
@@ -274,13 +273,12 @@ export default class Pill extends React.Component<IProps, IState> {
                         className={classes}
                         onMouseOver={this.onMouseOver}
                         onMouseLeave={this.onMouseLeave}
-                        dir="auto"
                     >
                         { avatar }
                         <span className="mx_Pill_linkText">{ linkText }</span>
                         { tip }
                     </span> }
-            </MatrixClientContext.Provider>;
+            </MatrixClientContext.Provider></bdi>;
         } else {
             // Deliberately render nothing if the URL isn't recognised
             return null;

test/components/views/messages/TextualBody-test.tsx

@@ -329,13 +329,13 @@ describe("<TextualBody />", () => {
             const content = wrapper.find(".mx_EventTile_body");
             expect(content.html()).toBe(
                 '<span class="mx_EventTile_body markdown-body" dir="auto">' +
-                'A <span><a class="mx_Pill mx_RoomPill" ' +
+                'A <span><bdi><a class="mx_Pill mx_RoomPill" ' +
                 'href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com' +
-                '?via=example.com&amp;via=bob.com" dir="auto"' +
+                '?via=example.com&amp;via=bob.com"' +
                 '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
                 'src="mxc://avatar.url/room.png" ' +
                 'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
-                '<span class="mx_Pill_linkText">room name</span></a></span> with vias</span>',
+                '<span class="mx_Pill_linkText">room name</span></a></bdi></span> with vias</span>',
             );
         });
 

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
 </span>"
 `;
 
-exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><a class=\\"mx_Pill mx_UserPill\\" dir=\\"auto\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></span></span>"`;
+exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><bdi><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></bdi></span></span>"`;