add support for bidi text

src/components/Controls.vue

@@ -24,7 +24,9 @@
 	<div class="controls">
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
-			<h2>{{ overviewName }}</h2>
+			<h2 dir="auto">
+				{{ overviewName }}
+			</h2>
 			<NcActions>
 				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
@@ -36,7 +38,9 @@
 		</div>
 		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
-			<h2>{{ board.title }}</h2>
+			<h2 dir="auto">
+				{{ board.title }}
+			</h2>
 			<p v-if="showArchived">
 				({{ t('deck', 'Archived cards') }})
 			</p>

src/components/board/DeletedTabSidebar.vue

@@ -4,7 +4,7 @@
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
-				<div class="title">
+				<div class="title" dir="auto">
 					<span>{{ deletedStack.title }}</span>
 					<span class="timestamp">{{ relativeDate(deletedStack.deletedAt*1000) }}</span>
 				</div>
@@ -18,7 +18,7 @@
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
-				<div class="title">
+				<div class="title" dir="auto">
 					<span>{{ deletedCard.title }}</span>
 					<span class="timestamp">{{ relativeDate(deletedCard.deletedAt*1000) }}</span>
 				</div>

src/components/board/Stack.vue

@@ -34,6 +34,7 @@
 				</h3>
 				<h3 v-else-if="!editing"
 					v-tooltip="stack.title"
+					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
 					class="stack__title"
@@ -48,6 +49,7 @@
 					@keyup.esc="cancelEdit">
 					<input v-model="copiedStack.title"
 						v-focus
+						dir="auto"
 						type="text"
 						required="required">
 					<input v-tooltip="t('deck', 'Edit list title')"

src/components/card/CommentForm.vue

@@ -41,6 +41,7 @@
 					</span>
 				</template>
 				<div ref="contentEditable"
+					dir="auto"
 					class="comment-form__contenteditable"
 					contenteditable
 					@keydown.enter="handleKeydown"

src/components/card/CommentItem.vue

@@ -13,6 +13,7 @@
 				</NcActions>
 			</div>
 			<NcRichText class="comment--content"
+				dir="auto"
 				:text="richText(comment)"
 				:arguments="richArgs(comment)"
 				:autolink="true" />
@@ -57,11 +58,15 @@
 		<CommentItem v-if="comment.replyTo" :reply="true" :comment="comment.replyTo" />
 		<div v-show="!edit" ref="richTextElement">
 			<NcRichText class="comment--content"
+				dir="auto"
 				:text="richText(comment)"
 				:arguments="richArgs(comment)"
 				:autolink="true" />
 		</div>
-		<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
+		<CommentForm v-if="edit"
+			v-model="commentMsg"
+			dir="auto"
+			@submit="updateComment" />
 	</li>
 </template>
 

src/components/card/Description.vue

@@ -55,8 +55,9 @@
 		<template v-else>
 			<div v-if="!descriptionEditing && hasDescription"
 				id="description-preview"
+				dir="auto"
 				@click="clickedPreview"
 				v-html="renderedDescription" />
 			<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
 				{{ t('deck', 'Write a description …') }}
 			</p>

src/components/cards/CardItem.vue

@@ -31,15 +31,16 @@
 			class="card"
 			@click="openCard">
 			<div v-if="standalone" class="card-related">
-				<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
+				<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" dir="auto" />
 				{{ board.title }} » {{ stack.title }}
 			</div>
 			<CardCover v-if="showCardCover" :card-id="card.id" />
 			<div class="card-upper">
-				<h3 v-if="inlineEditingBlocked">
+				<h3 v-if="inlineEditingBlocked" dir="auto">
 					{{ card.title }}
 				</h3>
 				<h3 v-else-if="!editing"
+					dir="auto"
 					tabindex="0"
 					class="editable"
 					:aria-label="t('deck', 'Edit card title')"
@@ -55,6 +56,7 @@
 					@submit.prevent="finishedEdit(card)">
 					<input v-model="copiedCard.title"
 						v-focus
+						dir="auto"
 						type="text"
 						autocomplete="off"
 						required

src/components/dashboard/Card.vue

@@ -5,12 +5,12 @@
 		class="card">
 		<div class="card--header">
 			<DueDate class="right" :card="card" />
-			<span class="title">{{ card.title }}</span>
+			<span class="title" dir="auto">{{ card.title }}</span>
 		</div>
 		<ul v-if="card.labels && card.labels.length"
 			class="labels">
 			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
-				<span>{{ label.title }}</span>
+				<span dir="auto">{{ label.title }}</span>
 			</li>
 		</ul>
 	</a>

src/components/navigation/AppNavigationBoard.vue

@@ -134,6 +134,7 @@
 		<form @submit.prevent.stop="applyEdit">
 			<input v-model="editTitle"
 				v-focus
+				dir="auto"
 				type="text"
 				required>
 			<input type="submit" value="" class="icon-confirm">