From 2f5549b6c4fce4113ad00a10d0bc4d3a9765b8b5 Mon Sep 17 00:00:00 2001
From: brecert <11599528+Brecert@users.noreply.github.com>
Date: Tue, 12 Nov 2019 18:12:19 -0500
Subject: [PATCH] changed the way styling works for the markdown component

---
 src/components/app/MessageTemplate.vue  | 34 +----------------------
 src/components/app/SimpleMarkdown.vue   | 36 ++++++++++++++++++++++++-
 src/utils/markdown-rules/customEmoji.js |  2 +-
 src/utils/markdown-rules/link.js        |  2 +-
 src/utils/markdown-rules/strikeout.js   |  4 ++-
 src/utils/markdown-rules/underline.js   |  4 ++-
 src/utils/messageFormatter.js           |  5 ++++
 7 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 9609f27..65447b8 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -505,36 +505,4 @@ export default {
 
 @media (max-width: 468px) {
 }
-</style>
-
-<style>
-.code-inline {
-  background: rgba(0, 0, 0, 0.322);
-}
-.msg-link {
-  color: rgb(86, 159, 253);
-}
-
-pre {
-  padding: 0;
-  margin: 0;
-}
-
-.codeblock {
-  background-color: rgba(0, 0, 0, 0.397);
-  padding: 5px;
-  border-radius: 5px;
-  word-wrap: break-word;
-  word-break: break-word;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.content-message img.emoji {
-  object-fit: contain;
-  height: 2em;
-  width: 2em;
-  margin: 1px;
-  vertical-align: -9px;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/app/SimpleMarkdown.vue b/src/components/app/SimpleMarkdown.vue
index 1272ee2..393abdb 100644
--- a/src/components/app/SimpleMarkdown.vue
+++ b/src/components/app/SimpleMarkdown.vue
@@ -18,4 +18,38 @@
 			}
 		}
 	}
-</script>
\ No newline at end of file
+</script>
+
+<style>
+	pre {
+	  padding: 0;
+	  margin: 0;
+	}
+
+	.codeblock {
+	  background-color: rgba(0, 0, 0, 0.397);
+	  padding: 5px;
+	  border-radius: 5px;
+	  word-wrap: break-word;
+	  word-break: break-word;
+	  white-space: pre-wrap;
+	  overflow-wrap: anywhere;
+	}
+
+	.content-message img.emoji {
+	  object-fit: contain;
+	  height: 2em;
+	  width: 2em;
+	  margin: 1px;
+	  vertical-align: -9px;
+	}
+
+
+	.inline-code {
+		background: rgba(0, 0, 0, 0.322);
+	}
+
+	.link {
+	  color: rgb(86, 159, 253);
+	}
+</style>
\ No newline at end of file
diff --git a/src/utils/markdown-rules/customEmoji.js b/src/utils/markdown-rules/customEmoji.js
index 7ef9852..626468a 100644
--- a/src/utils/markdown-rules/customEmoji.js
+++ b/src/utils/markdown-rules/customEmoji.js
@@ -15,7 +15,7 @@ export default (order) => { return {
 	},
 	html: function(node, output) {
 		return SimpleMarkdown.htmlTag('img', '', {
-			class: "emoji",
+			class: "emoji custom-emoji",
 			title: node.name,
 			src: `${config.domain}/media/${node.id}`,
 			alt: node.name
diff --git a/src/utils/markdown-rules/link.js b/src/utils/markdown-rules/link.js
index 413394e..423bd2a 100644
--- a/src/utils/markdown-rules/link.js
+++ b/src/utils/markdown-rules/link.js
@@ -34,7 +34,7 @@ export default (order) => { return {
 	html: function(node, output) {
 		return SimpleMarkdown.htmlTag("a", output(node.content), {
 			href: node.url,
-			class: "msg-link",
+			class: "link",
 			target: "_blank"
 		})
 	}
diff --git a/src/utils/markdown-rules/strikeout.js b/src/utils/markdown-rules/strikeout.js
index 1b1a449..8aa5b1e 100644
--- a/src/utils/markdown-rules/strikeout.js
+++ b/src/utils/markdown-rules/strikeout.js
@@ -13,6 +13,8 @@ export default (order) => { return {
 	},
 
 	html: function(node, output) {
-		return SimpleMarkdown.htmlTag("s", output(node.content))
+		return SimpleMarkdown.htmlTag("s", output(node.content), {
+			class: "strikeout"
+		})
 	}
 }}
\ No newline at end of file
diff --git a/src/utils/markdown-rules/underline.js b/src/utils/markdown-rules/underline.js
index 56f9319..6f9358f 100644
--- a/src/utils/markdown-rules/underline.js
+++ b/src/utils/markdown-rules/underline.js
@@ -13,6 +13,8 @@ export default (order) => { return {
 	},
 
 	html: function(node, output) {
-		return SimpleMarkdown.htmlTag("u", output(node.content))
+		return SimpleMarkdown.htmlTag("u", output(node.content), {
+			class: "underline"
+		})
 	}
 }}
\ No newline at end of file
diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js
index 3ebc6a0..65a558e 100644
--- a/src/utils/messageFormatter.js
+++ b/src/utils/messageFormatter.js
@@ -33,6 +33,11 @@ const rules = {
 
     inlineCode: Object.assign({}, SimpleMarkdown.defaultRules.inlineCode, {
         order: order++,
+        html: function(node, parse, state) {
+          return SimpleMarkdown.htmlTag("code", SimpleMarkdown.sanitizeText(node.content), {
+            class: "inline-code"
+          }) 
+        }
     }),
 
     text: Object.assign({}, SimpleMarkdown.defaultRules.text, {