From f347bafe623581ffeae23baf5713caa4c457ca9f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 09:32:01 +0000
Subject: [PATCH] Add custom styles for code blocks and block quotes in rich
 text editor and preview

---
 .../bbui/src/Markdown/MarkdownViewer.svelte   |  4 +++
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 25 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index 26a716690c..ae9213cca7 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -64,4 +64,8 @@
   .markdown-viewer :global(.editor-preview-full > :last-child) {
     margin-bottom: 0;
   }
+  /* Code blocks in preview */
+  .markdown-viewer :global(.editor-preview-full pre) {
+    background: var(--spectrum-global-color-gray-200);
+  }
 </style>
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 2e80a7d198..1331210341 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -71,7 +71,7 @@
   }
   /* Text selections */
   :global(.EasyMDEContainer .CodeMirror-selectedtext) {
-    background: var(--spectrum-global-color-gray-400);
+    background: var(--spectrum-global-color-gray-400) !important;
   }
   /* Background of lines containing selected text */
   :global(.EasyMDEContainer .CodeMirror-selected) {
@@ -93,4 +93,27 @@
   :global(.EasyMDEContainer .editor-preview) {
     border: 1px solid var(--spectrum-alias-border-color);
   }
+  /* Code blocks in editor */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  /* Code blocks in preview */
+  :global(.EasyMDEContainer .editor-preview pre) {
+    background: var(--spectrum-global-color-gray-100);
+    padding: 4px;
+    border-radius: 4px;
+  }
+  :global(.EasyMDEContainer .editor-preview code) {
+    color: #e83e8c;
+  }
+  :global(.EasyMDEContainer .editor-preview pre code) {
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Block quotes */
+  :global(.EasyMDEContainer .editor-preview blockquote) {
+    border-left: 4px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-global-color-gray-700);
+    margin-left: 0;
+    padding-left: 20px;
+  }
 </style>