(feat) add code text formatting

Author: antoine92190

README.md

@@ -199,6 +199,23 @@ textMessages="{
 | Underline         | `° °`           | `°This text is underlined°`            | <ins>This text is underlined</ins>     |
 | Nested formatting | `* *` and `_ _` | `*This text is _extremely_ important*` | **This text is _extremely_ important** |
 
+**Inline Code**
+
+Example: \`This is inline code\`
+
+Output: `This is inline code`
+
+**Multiline Code**
+
+Example: \```This is multiline code\```
+
+Output:
+
+```bash
+This is
+multiline code
+```
+
 (9) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
 
 (10) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
@@ -283,6 +300,13 @@ styles="{
     colorReactionCounterMe: '#0b59b3'
   },
 
+  markdown: {
+    background: 'rgba(239, 239, 239, 0.7)',
+    border: 'rgba(212, 212, 212, 0.9)',
+    color: '#e01e5a',
+    colorMulti: '#0a0a0a'
+  },
+
   room: {
     colorUsername: '#0a0a0a',
     colorMessage: '#67717a',

src/ChatWindow/FormatMessage.vue

@@ -15,7 +15,11 @@
 						'text-bold': checkType(message, 'bold'),
 						'text-italic': checkType(message, 'italic'),
 						'text-strike': checkType(message, 'strike'),
-						'text-underline': checkType(message, 'underline')
+						'text-underline': checkType(message, 'underline'),
+						'text-inline-code':
+							!singleLine && checkType(message, 'inline-code'),
+						'text-multiline-code':
+							!singleLine && checkType(message, 'multiline-code')
 					}"
 					:href="message.href"
 					target="_blank"

src/styles/helper.scss

@@ -67,3 +67,23 @@
 .text-underline {
 	text-decoration: underline;
 }
+
+.text-inline-code {
+	font-size: 12px;
+	color: var(--chat-markdown-color);
+	background: var(--chat-markdown-bg);
+	border: 1px solid var(--chat-markdown-border);
+	border-radius: 3px;
+	padding: 2px 3px;
+}
+
+.text-multiline-code {
+	display: block;
+	font-size: 12px;
+	color: var(--chat-markdown-color-multi);
+	background: var(--chat-markdown-bg);
+	border: 1px solid var(--chat-markdown-border);
+	border-radius: 3px;
+	margin: 4px 0;
+	padding: 7px;
+}

src/themes/index.js

@@ -75,6 +75,13 @@ export const defaultThemeStyles = {
 			colorReactionCounterMe: '#0b59b3'
 		},
 
+		markdown: {
+			background: 'rgba(239, 239, 239, 0.7)',
+			border: 'rgba(212, 212, 212, 0.9)',
+			color: '#e01e5a',
+			colorMulti: '#0a0a0a'
+		},
+
 		room: {
 			colorUsername: '#0a0a0a',
 			colorMessage: '#67717a',
@@ -186,6 +193,13 @@ export const defaultThemeStyles = {
 			colorReactionCounterMe: '#fff'
 		},
 
+		markdown: {
+			background: 'rgba(239, 239, 239, 0.7)',
+			border: 'rgba(212, 212, 212, 0.9)',
+			color: '#e01e5a',
+			colorMulti: '#0a0a0a'
+		},
+
 		room: {
 			colorUsername: '#fff',
 			colorMessage: '#6c7278',
@@ -232,6 +246,7 @@ export const cssThemeVars = ({
 	content,
 	dropdown,
 	message,
+	markdown,
 	room,
 	emoji,
 	icons
@@ -306,6 +321,12 @@ export const cssThemeVars = ({
 			message.borderStyleReactionHoverMe,
 		'--chat-message-color-reaction-counter-me': message.colorReactionCounterMe,
 
+		// markdown
+		'--chat-markdown-bg': markdown.background,
+		'--chat-markdown-border': markdown.border,
+		'--chat-markdown-color': markdown.color,
+		'--chat-markdown-color-multi': markdown.colorMulti,
+
 		// room
 		'--chat-room-color-username': room.colorUsername,
 		'--chat-room-color-message': room.colorMessage,

src/utils/formatString.js

@@ -34,17 +34,17 @@ const pseudo_markdown = {
 		end: '°',
 		allowed_chars: '.',
 		type: 'underline'
+	},
+	'```': {
+		end: '```',
+		allowed_chars: '(.|\n)',
+		type: 'multiline-code'
+	},
+	'`': {
+		end: '`',
+		allowed_chars: '.',
+		type: 'inline-code'
 	}
-	// '```': {
-	// 	end: '```',
-	// 	allowed_chars: '(.|\n)',
-	// 	object: child => `<div class="multiline-code">${child}</div>`
-	// },
-	// '`': {
-	// 	end: '`',
-	// 	allowed_chars: '.',
-	// 	object: child => `<div class="inline-code">${child}</div>`
-	// }
 	// ':': {
 	// 	allowed_chars: '[a-z_]',
 	// 	end: ':',