add bidi support to messages, actions, previews etc
This commit is contained in:
parent
2aa5ed44ad
commit
c89aea3c1e
@ -4,6 +4,7 @@
|
||||
<textarea
|
||||
id="input"
|
||||
ref="input"
|
||||
dir="auto"
|
||||
:value="channel.pendingMessage"
|
||||
:placeholder="getInputPlaceholder(channel)"
|
||||
:aria-label="getInputPlaceholder(channel)"
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview">
|
||||
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview" dir="ltr">
|
||||
<div
|
||||
ref="content"
|
||||
:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
|
||||
@ -22,7 +22,7 @@
|
||||
@load="onPreviewReady"
|
||||
/>
|
||||
</a>
|
||||
<div class="toggle-text">
|
||||
<div class="toggle-text" dir="auto">
|
||||
<div class="head">
|
||||
<div class="overflowable">
|
||||
<a
|
||||
@ -38,6 +38,7 @@
|
||||
v-if="showMoreButton"
|
||||
:aria-expanded="isContentShown"
|
||||
:aria-label="moreButtonLabel"
|
||||
dir="auto"
|
||||
class="more"
|
||||
@click="onMoreClick"
|
||||
>
|
||||
|
@ -19,8 +19,8 @@
|
||||
</template>
|
||||
<template v-else-if="message.type === 'action'">
|
||||
<span class="from"><span class="only-copy">* </span></span>
|
||||
<span class="content">
|
||||
<Username :user="message.from" /> <ParsedMessage
|
||||
<span class="content" dir="auto">
|
||||
<Username :user="message.from" dir="auto" /> <ParsedMessage
|
||||
:network="network"
|
||||
:message="message"
|
||||
/>
|
||||
@ -47,7 +47,7 @@
|
||||
<span class="only-copy">- </span>
|
||||
</template>
|
||||
</span>
|
||||
<span class="content">
|
||||
<span class="content" dir="auto">
|
||||
<ParsedMessage :network="network" :message="message" />
|
||||
<LinkPreview
|
||||
v-for="preview in message.previews"
|
||||
|
@ -1300,6 +1300,7 @@ background on hover (unless active) */
|
||||
padding-right: 6px;
|
||||
border-left: 1px solid #f6f6f6;
|
||||
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
|
||||
text-align: left; /* so RTL text will still be aligned left, not right */
|
||||
}
|
||||
|
||||
#chat .unhandled .from {
|
||||
@ -1537,6 +1538,7 @@ background on hover (unless active) */
|
||||
#chat .toggle-content .toggle-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
#chat .toggle-content.opened .toggle-text {
|
||||
|
@ -113,19 +113,27 @@ module.exports = function parse(createElement, text, message = undefined, networ
|
||||
return link;
|
||||
}
|
||||
|
||||
return [
|
||||
link,
|
||||
createElement(
|
||||
LinkPreviewToggle,
|
||||
{
|
||||
class: ["toggle-button", "toggle-preview"],
|
||||
props: {
|
||||
link: preview,
|
||||
},
|
||||
return createElement(
|
||||
"span",
|
||||
{
|
||||
attrs: {
|
||||
dir: "auto",
|
||||
},
|
||||
fragments
|
||||
),
|
||||
];
|
||||
},
|
||||
[
|
||||
link,
|
||||
createElement(
|
||||
LinkPreviewToggle,
|
||||
{
|
||||
class: ["toggle-button", "toggle-preview"],
|
||||
props: {
|
||||
link: preview,
|
||||
},
|
||||
},
|
||||
fragments
|
||||
),
|
||||
]
|
||||
);
|
||||
} else if (textPart.channel) {
|
||||
return createElement(
|
||||
"span",
|
||||
@ -133,6 +141,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
|
||||
class: ["inline-channel"],
|
||||
attrs: {
|
||||
role: "button",
|
||||
dir: "auto",
|
||||
tabindex: 0,
|
||||
"data-chan": textPart.channel,
|
||||
},
|
||||
@ -164,6 +173,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
|
||||
class: ["user", colorClass(textPart.nick)],
|
||||
attrs: {
|
||||
role: "button",
|
||||
dir: "auto",
|
||||
"data-name": textPart.nick,
|
||||
},
|
||||
},
|
||||
|
@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
|
||||
{
|
||||
input: '#&">bug',
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#&">bug" class="inline-channel">#&">bug</span>',
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#&">bug" class="inline-channel">#&">bug</span>',
|
||||
},
|
||||
];
|
||||
|
||||
@ -184,21 +184,21 @@ describe("parse Handlebars helper", () => {
|
||||
{
|
||||
input: "#a",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
|
||||
"#a" +
|
||||
"</span>",
|
||||
},
|
||||
{
|
||||
input: "#test",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#test" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#test" class="inline-channel">' +
|
||||
"#test" +
|
||||
"</span>",
|
||||
},
|
||||
{
|
||||
input: "#äöü",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#äöü" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#äöü" class="inline-channel">' +
|
||||
"#äöü" +
|
||||
"</span>",
|
||||
},
|
||||
@ -206,7 +206,7 @@ describe("parse Handlebars helper", () => {
|
||||
input: "inline #channel text",
|
||||
expected:
|
||||
"inline " +
|
||||
'<span role="button" tabindex="0" data-chan="#channel" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#channel" class="inline-channel">' +
|
||||
"#channel" +
|
||||
"</span>" +
|
||||
" text",
|
||||
@ -214,7 +214,7 @@ describe("parse Handlebars helper", () => {
|
||||
{
|
||||
input: "#1,000",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#1,000" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#1,000" class="inline-channel">' +
|
||||
"#1,000" +
|
||||
"</span>",
|
||||
},
|
||||
@ -222,7 +222,7 @@ describe("parse Handlebars helper", () => {
|
||||
input: "@#a",
|
||||
expected:
|
||||
"@" +
|
||||
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
|
||||
"#a" +
|
||||
"</span>",
|
||||
},
|
||||
@ -358,7 +358,7 @@ describe("parse Handlebars helper", () => {
|
||||
input: "test, MaxLeiter",
|
||||
expected:
|
||||
"test, " +
|
||||
'<span role="button" data-name="MaxLeiter" class="user color-12">' +
|
||||
'<span role="button" dir="auto" data-name="MaxLeiter" class="user color-12">' +
|
||||
"MaxLeiter" +
|
||||
"</span>",
|
||||
},
|
||||
@ -378,7 +378,7 @@ describe("parse Handlebars helper", () => {
|
||||
users: ["MaxLeiter, test"],
|
||||
input: "#test-channelMaxLeiter",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
|
||||
"#test-channelMaxLeiter" +
|
||||
"</span>",
|
||||
},
|
||||
@ -414,7 +414,7 @@ describe("parse Handlebars helper", () => {
|
||||
{
|
||||
input: "\x02#\x038,9thelounge",
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
|
||||
'<span class="irc-bold">#</span>' +
|
||||
'<span class="irc-bold irc-fg8 irc-bg9">thelounge</span>' +
|
||||
"</span>",
|
||||
@ -477,7 +477,7 @@ describe("parse Handlebars helper", () => {
|
||||
input: "#i❤️thelounge",
|
||||
// FIXME: Emoji in text should be `<span class="emoji">❤️</span>`. See https://github.com/thelounge/thelounge/issues/1784
|
||||
expected:
|
||||
'<span role="button" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
|
||||
},
|
||||
].forEach((item) => {
|
||||
// TODO: In Node v6+, use `{name, input, expected}`
|
||||
@ -493,7 +493,7 @@ describe("parse Handlebars helper", () => {
|
||||
'test \x0312#\x0312\x0312"te\x0312st\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312a',
|
||||
expected:
|
||||
"test " +
|
||||
'<span role="button" tabindex="0" data-chan="#"testa" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#"testa" class="inline-channel">' +
|
||||
'<span class="irc-fg12">#"testa</span>' +
|
||||
"</span>",
|
||||
},
|
||||
@ -554,7 +554,7 @@ describe("parse Handlebars helper", () => {
|
||||
|
||||
expect(actual).to.equal(
|
||||
'Url: <a href="http://example.com/path" target="_blank" rel="noopener">http://example.com/path</a> ' +
|
||||
'Channel: <span role="button" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
|
||||
'Channel: <span role="button" dir="auto" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
|
||||
);
|
||||
});
|
||||
|
||||
@ -563,7 +563,7 @@ describe("parse Handlebars helper", () => {
|
||||
const actual = getParsedMessageContents(input);
|
||||
|
||||
expect(actual).to.equal(
|
||||
'<span role="button" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
|
||||
"#test-https://example.com" +
|
||||
"</span>"
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user