Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Correctly align messages in right to left languages #5453

Closed
wants to merge 4 commits into from
Closed

Correctly align messages in right to left languages #5453

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b320e37
Correctly align messages in right to left languages
aaronraimist Nov 29, 2020
2cbd1ad
Change mx_EventTile_body and mx_EventTile_content from span to div
aaronraimist Dec 1, 2020
136b55a
Fix tests
aaronraimist Dec 1, 2020
b8c7adc
Merge branch 'develop' into align-rtl-messages
aaronraimist Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,14 +289,15 @@ $left-gutter: 64px;
/~https://github.com/vector-im/vector-web/issues/1154
*/
.mx_EventTile_content {
display: block;
overflow-y: hidden;
overflow-x: hidden;
margin-right: 34px;
}

/* De-zalgoing */
.mx_EventTile_body {
text-align: start;

/* De-zalgoing */
overflow-y: hidden;
}

Expand Down
4 changes: 2 additions & 2 deletions src/HtmlUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,13 +475,13 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
});

return isDisplayedWithHtml ?
<span
<div
key="body"
ref={opts.ref}
className={className}
dangerouslySetInnerHTML={{ __html: safeBody }}
dir="auto"
/> : <span key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</span>;
/> : <div key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</div>;
}

/**
Expand Down
8 changes: 4 additions & 4 deletions src/components/views/messages/TextualBody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ export default class TextualBody extends React.Component {
switch (content.msgtype) {
case "m.emote":
return (
<span className="mx_MEmoteBody mx_EventTile_content">
<div className="mx_MEmoteBody mx_EventTile_content">
*&nbsp;
<span
className="mx_MEmoteBody_sender"
Expand All @@ -448,14 +448,14 @@ export default class TextualBody extends React.Component {
&nbsp;
{ body }
{ widgets }
</span>
</div>
);
case "m.notice":
return (
<span className="mx_MNoticeBody mx_EventTile_content">
<div className="mx_MNoticeBody mx_EventTile_content">
{ body }
{ widgets }
</span>
</div>
);
default: // including "m.text"
return (
Expand Down
22 changes: 11 additions & 11 deletions test/components/views/messages/TextualBody-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe("* sender winks");
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">winks</span>');
expect(content.html()).toBe('<div class="mx_EventTile_body" dir="auto">winks</div>');
});

it("renders m.notice correctly", () => {
Expand All @@ -77,7 +77,7 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
expect(content.html()).toBe(`<div class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</div>`);
});

describe("renders plain-text m.text correctly", () => {
Expand All @@ -104,7 +104,7 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
expect(content.html()).toBe(`<div class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</div>`);
});

// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
Expand All @@ -123,9 +123,9 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">' +
expect(content.html()).toBe('<div class="mx_EventTile_body" dir="auto">' +
'Visit <a href="https://matrix.org/" class="linkified" target="_blank" rel="noreferrer noopener">' +
'https://matrix.org/</a></span>');
'https://matrix.org/</a></div>');
});
});

Expand Down Expand Up @@ -159,8 +159,8 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe("foo baz bar del u");
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
ev.getContent().formatted_body + '</span>');
expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
ev.getContent().formatted_body + '</div>');
});

it("spoilers get injected properly into the DOM", () => {
Expand All @@ -180,12 +180,12 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe("Hey (movie) the movie was awesome");
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
'Hey <span>' +
'<span class="mx_EventTile_spoiler">' +
'<span class="mx_EventTile_spoiler_reason">(movie)</span>&nbsp;' +
'<span class="mx_EventTile_spoiler_content"><span>the movie was awesome</span></span>' +
'</span></span></span>');
'</span></span></div>');
});

// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
Expand All @@ -206,12 +206,12 @@ describe("<TextualBody />", () => {
const wrapper = mount(<TextualBody mxEvent={ev} />);
expect(wrapper.text()).toBe("Hey Member");
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
'Hey <span>' +
'<a class="mx_Pill mx_UserPill" title="@user:server">' +
'<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' +
'style="width: 16px; height: 16px;" title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
'</span></span>');
'</span></div>');
});
});

Expand Down