OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add bidirectonal isolation for pills (#8985)

pull/28788/head^2
sha-265 2022-07-05 14:37:35 +03:00 committed by GitHub
parent 74a059b520
commit a009f8001a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/elements/Pill.tsx
View File

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

6
test/components/views/messages/TextualBody-test.tsx
View File

@ -329,13 +329,13 @@ describe("<TextualBody />", () => {
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe( expect(content.html()).toBe(
'<span class="mx_EventTile_body markdown-body" dir="auto">' + '<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' + '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" ' + '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
'src="mxc://avatar.url/room.png" ' + 'src="mxc://avatar.url/room.png" ' +
'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' + '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>',
); );
}); });

2
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View File

@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</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><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>"`;