From c89aea3c1ecffa788d39e3dd51197b750ef9f885 Mon Sep 17 00:00:00 2001
From: Jay2k1 <Jay2k1@users.noreply.github.com>
Date: Sat, 3 Aug 2019 14:35:13 +0200
Subject: [PATCH] add bidi support to messages, actions, previews etc

---
 client/components/ChatInput.vue         |  1 +
 client/components/LinkPreview.vue       |  5 ++--
 client/components/Message.vue           |  6 ++---
 client/css/style.css                    |  2 ++
 client/js/libs/handlebars/parse.js      | 34 ++++++++++++++++---------
 test/client/js/libs/handlebars/parse.js | 28 ++++++++++----------
 6 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 17872a57..d10f0305 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -4,6 +4,7 @@
 		<textarea
 			id="input"
 			ref="input"
+			dir="auto"
 			:value="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index 03e8447e..298ec998 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -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"
 						>
diff --git a/client/components/Message.vue b/client/components/Message.vue
index 4b8163a4..1ce71927 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -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" />&#32;<ParsedMessage
+			<span class="content" dir="auto">
+				<Username :user="message.from" dir="auto" />&#32;<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"
diff --git a/client/css/style.css b/client/css/style.css
index 50b94b64..37efc06e 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -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 {
diff --git a/client/js/libs/handlebars/parse.js b/client/js/libs/handlebars/parse.js
index f89a343c..e7b3048c 100644
--- a/client/js/libs/handlebars/parse.js
+++ b/client/js/libs/handlebars/parse.js
@@ -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,
 					},
 				},
diff --git a/test/client/js/libs/handlebars/parse.js b/test/client/js/libs/handlebars/parse.js
index 1354216e..08160801 100644
--- a/test/client/js/libs/handlebars/parse.js
+++ b/test/client/js/libs/handlebars/parse.js
@@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: '#&">bug',
 				expected:
-					'<span role="button" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
+					'<span role="button" dir="auto" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;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="#&quot;testa" class="inline-channel">' +
+					'<span role="button" dir="auto" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' +
 					'<span class="irc-fg12">#&quot;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>"
 		);