add message text rtl support

provided for: Quote component, system messages, user messages (markdown), NewMessage input Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Oct 12, 2023 · 46f6b22 · 46f6b22
1 parent d8a7580
commit 46f6b22
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -54,13 +54,15 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 					<CallButton />
 				</div>
 				<div v-else-if="showResultsButton || isSystemMessage" class="message-body__main__text system-message">
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 					<!-- Displays only the "see results" button with the results modal -->
 					<Poll v-if="showResultsButton"
@@ -73,6 +75,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 				</div>
 				<div v-else
@@ -83,6 +86,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:use-markdown="markdown"
 						:reference-limit="1" />
 
@@ -992,6 +996,10 @@ export default {
 				display: flex;
 				border-radius: var(--border-radius-large);
 				align-items: center;
+				:deep(.rich-text--wrapper) {
+					flex-grow: 1;
+					text-align: start;
+				}
 			}
 
 			&--quote {
@@ -1120,17 +1128,18 @@ export default {
 }
 
 .message-body__main__text--markdown {
-  position: relative;
+	position: relative;
 
-  .message-copy-code {
-    position: absolute;
-    top: 0;
-    right: 4px;
-    margin-top: 4px;
-    background-color: var(--color-background-dark);
-  }
+	.message-copy-code {
+		position: absolute;
+		top: 0;
+		right: 4px;
+		margin-top: 4px;
+		background-color: var(--color-background-dark);
+	}
 
 	:deep(.rich-text--wrapper) {
+    text-align: start;
 		// Overwrite core styles, otherwise h4 is lesser than default font-size
 		h4 {
 			font-size: 100%;
@@ -1140,6 +1149,12 @@ export default {
 			font-style: italic;
 		}
 
+		ul,
+		ol {
+			padding-left: 0;
+			padding-inline-start: 15px;
+		}
+
 		pre {
 			padding: 4px;
 			margin: 2px 0;
@@ -1162,20 +1177,15 @@ export default {
 		}
 
 		blockquote {
-			position: relative;
+			padding-left: 0;
+			padding-inline-start: 13px;
 			border-left: none;
-
-			&::before {
-				content: ' ';
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				width: 4px;
-				border-radius: 2px;
-				background-color: var(--color-border);
-			}
+			border-inline-start: 4px solid var(--color-border);
 		}
 	}
 }
+
+:deep(.rich-text--component) {
+	direction: ltr;
+}
 </style>
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -91,6 +91,7 @@
 					:menu-container="containerElement"
 					:placeholder="placeholderText"
 					:aria-label="placeholderText"
+					dir="auto"
 					@shortkey="focusInput"
 					@keydown.esc="handleInputEsc"
 					@tribute-active-true.native="isTributePickerActive = true"

diff --git a/src/components/Quote.vue b/src/components/Quote.vue
@@ -49,7 +49,7 @@ components.
 			</div>
 			<blockquote v-else
 				class="quote__main__text">
-				<p>{{ shortenedQuoteMessage }}</p>
+				<p dir="auto">{{ shortenedQuoteMessage }}</p>
 			</blockquote>
 		</div>
 		<div v-if="isNewMessageQuote" class="quote__main__right">
@@ -313,6 +313,7 @@ export default {
 				display: -webkit-box;
 				-webkit-line-clamp: 1;
 				-webkit-box-orient: vertical;
+				text-align: start;
 			}
 		}
 	}