From 1ec51d256234e24a2f0df4f3789e4de184891830 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 09:46:30 +0000
Subject: [PATCH] Add custom styles for HRs, tables and link colors in rich
 text editor and preview

---
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 1331210341..3dc8c9e28a 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -98,22 +98,39 @@
     background: var(--spectrum-global-color-gray-100);
   }
   /* Code blocks in preview */
-  :global(.EasyMDEContainer .editor-preview pre) {
+  :global(.EasyMDEContainer pre) {
     background: var(--spectrum-global-color-gray-100);
     padding: 4px;
     border-radius: 4px;
   }
-  :global(.EasyMDEContainer .editor-preview code) {
+  :global(.EasyMDEContainer code) {
     color: #e83e8c;
   }
-  :global(.EasyMDEContainer .editor-preview pre code) {
+  :global(.EasyMDEContainer pre code) {
     color: var(--spectrum-alias-text-color);
   }
   /* Block quotes */
-  :global(.EasyMDEContainer .editor-preview blockquote) {
+  :global(.EasyMDEContainer blockquote) {
     border-left: 4px solid var(--spectrum-global-color-gray-400);
     color: var(--spectrum-global-color-gray-700);
     margin-left: 0;
     padding-left: 20px;
   }
+  /* HR's */
+  :global(.EasyMDEContainer hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
+  }
+  /*  Tables */
+  :global(.EasyMDEContainer td, .EasyMDEContainer th) {
+    border-color: var(--spectrum-alias-border-color) !important;
+  }
+  /*  Links */
+  :global(.EasyMDEContainer a) {
+    color: var(--primaryColor);
+  }
+  :global(.EasyMDEContainer a:hover) {
+    color: var(--primaryColorHover);
+  }
 </style>