feat(NcRichText): extract styles to scss and reuse them

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 83 insertions, 45 deletions

diff --git a/src/assets/markdown.scss b/src/assets/markdown.scss
new file mode 100644
index 000000000..53bba1647
--- /dev/null
+++ b/src/assets/markdown.scss
@@ -0,0 +1,63 @@
+/*
+ * @copyright Copyright (c) 2024 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@mixin markdown {
+	// Overwrite core styles, otherwise h4 is lesser than default font-size
+	h4 {
+		font-size: 100%;
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	ul,
+	ol {
+		padding-left: 0;
+		padding-inline-start: 15px;
+	}
+
+	pre {
+		padding: 4px;
+		margin: 2px 0;
+		border-radius: var(--border-radius);
+		background-color: var(--color-background-dark);
+		overflow-x: auto;
+
+		& code {
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	code {
+		display: inline-block;
+		padding: 2px 4px;
+		margin: 2px 0;
+		border-radius: var(--border-radius);
+		background-color: var(--color-background-dark);
+	}
+
+	blockquote {
+		padding-left: 0;
+		padding-inline-start: 13px;
+		border-left: none;
+		border-inline-start: 4px solid var(--color-border);
+	}
+}
diff --git a/src/components/ConversationSettings/EditableTextField.vue b/src/components/ConversationSettings/EditableTextField.vue
index b8515f739..ddc9e4f6a 100644
--- a/src/components/ConversationSettings/EditableTextField.vue
+++ b/src/components/ConversationSettings/EditableTextField.vue
@@ -23,11 +23,13 @@
 	<div ref="editable-text-field" class="editable-text-field">
 		<NcRichText v-if="!editing"
 			class="editable-text-field__output"
+			dir="auto"
 			:text="text"
 			autolink
 			:use-markdown="useMarkdown" />
 		<NcRichContenteditable v-else
 			ref="richContenteditable"
+			dir="auto"
 			:value.sync="text"
 			:auto-complete="()=>{}"
 			:maxlength="maxLength"
@@ -256,6 +258,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/variables';
+@import '../../assets/markdown';
 
 .editable-text-field {
 	display: flex;
@@ -279,6 +282,11 @@ export default {
 	:deep(.rich-contenteditable) {
 		flex-grow: 1;
 	}
+
+	:deep(.rich-text--wrapper) {
+		text-align: start;
+		@include markdown;
+	}
 }
 
 .spinner {
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 5301df6f8..af0d451b7 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -39,10 +39,11 @@
 				</span>
 			</p>
 
-			<p class="lobby__description">
+			<div class="lobby__description">
 				<NcRichText :text="conversation.description"
+					dir="auto"
 					:autolink="true" />
-			</p>
+			</div>
 		</div>
 		<SetGuestUsername v-if="currentUserIsGuest" />
 	</div>
@@ -123,6 +124,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/variables';
+@import '../assets/markdown';
 
 .lobby {
 	display: flex;
@@ -139,6 +141,11 @@ export default {
 		margin: 0 auto;
 		margin-top: 25px;
 	}
+
+	:deep(.rich-text--wrapper) {
+		text-align: start;
+		@include markdown;
+	}
 }
 
 </style>
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index fbdc9e91a..6c4a3a403 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -416,6 +416,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../../../assets/markdown';
+
 .message-main {
 	display: flex;
 	justify-content: space-between;
@@ -471,49 +473,7 @@ export default {
 
 			:deep(.rich-text--wrapper) {
 				text-align: start;
-
-				// Overwrite core styles, otherwise h4 is lesser than default font-size
-				h4 {
-				font-size: 100%;
-				}
-
-				em {
-				font-style: italic;
-				}
-
-				ul,
-				ol {
-				padding-left: 0;
-				padding-inline-start: 15px;
-				}
-
-				pre {
-				padding: 4px;
-				margin: 2px 0;
-				border-radius: var(--border-radius);
-				background-color: var(--color-background-dark);
-				overflow-x: auto;
-
-				& code {
-					margin: 0;
-					padding: 0;
-				}
-				}
-
-				code {
-				display: inline-block;
-				padding: 2px 4px;
-				margin: 2px 0;
-				border-radius: var(--border-radius);
-				background-color: var(--color-background-dark);
-				}
-
-				blockquote {
-				padding-left: 0;
-				padding-inline-start: 13px;
-				border-left: none;
-				border-inline-start: 4px solid var(--color-border);
-				}
+				@include markdown;
 			}
 		}
 	}