From 8039f22340d6707af22ce82f11aeb8b1bb89c89f Mon Sep 17 00:00:00 2001
From: Brian Powell Jr <b.powell.jr@outlook.com>
Date: Tue, 15 Oct 2024 21:08:54 -0400
Subject: [PATCH] Feat: Added missing Asciidoc blockquotes to markdown editor

---
 client/components/editor/editor-asciidoc.vue |  9 ++--
 client/components/editor/editor-markdown.vue | 10 ++++
 client/themes/default/scss/app.scss          | 54 +++++++++++++++++---
 3 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue
index 296b2414..27f815a4 100644
--- a/client/components/editor/editor-asciidoc.vue
+++ b/client/components/editor/editor-asciidoc.vue
@@ -51,12 +51,12 @@
             v-list-item(@click='insertBeforeEachLine({ content: `NOTE: `})')
               v-list-item-action
                 v-icon(color='blue') mdi-alpha-n-box-outline
-              v-list-item-title {{'Note blockquote'}}
+              v-list-item-title {{'Note Blockquote'}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `TIP: `})')
               v-list-item-action
                 v-icon(color='success') mdi-alpha-t-box-outline
-              v-list-item-title {{'Tip blockquote'}}
+              v-list-item-title {{'Tip Blockquote'}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `WARNING: `})')
               v-list-item-action
@@ -66,11 +66,12 @@
             v-list-item(@click='insertBeforeEachLine({ content: `CAUTION: `})')
               v-list-item-action
                 v-icon(color='purple') mdi-alpha-c-box-outline
-              v-list-item-title {{'Caution blockquote'}}
+              v-list-item-title {{'Caution Blockquote'}}
+            v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `IMPORTANT: `})')
               v-list-item-action
                 v-icon(color='error') mdi-alpha-i-box-outline
-              v-list-item-title {{'Important blockquote'}}
+              v-list-item-title {{'Important Blockquote'}}
             v-divider
         template(v-if='$vuetify.breakpoint.mdAndUp')
           v-spacer
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 4ca6e192..32071f87 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -63,11 +63,21 @@
                 v-icon(color='success') mdi-alpha-s-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteSuccess')}}
             v-divider
+            v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-tip}`})')
+              v-list-item-action
+                v-icon(color='success') mdi-alpha-t-box-outline
+              v-list-item-title {{'Tip Blockquote'}}
+            v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
               v-list-item-action
                 v-icon(color='warning') mdi-alpha-w-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteWarning')}}
             v-divider
+            v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-caution}`})')
+              v-list-item-action
+                v-icon(color='purple') mdi-alpha-c-box-outline
+              v-list-item-title {{'Caution Blockquote'}}
+            v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
               v-list-item-action
                 v-icon(color='error') mdi-alpha-e-box-outline
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index c01faf12..8a36b873 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -242,9 +242,9 @@
   }
 
   blockquote {
-    padding: 0 1rem 1rem 1rem;
+    padding: 0 1rem 0.8rem 1rem;
     background-color: mc('blue-grey', '50');
-    border-left: 55px solid mc('blue-grey', '500');
+    border-left: 52px solid mc('blue-grey', '500');
     border-radius: .5rem;
     margin: 1rem 0;
     position: relative;
@@ -255,12 +255,12 @@
 
     &::before {
       display: inline-block;
-      font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
+      font: normal normal normal 28px/1 "Material Design Icons", sans-serif;
       position: absolute;
       margin-top: -12px;
       top: 50%;
-      left: -38px;
-      color: rgba(255, 255, 255, .7);
+      left: -39px;
+      color: rgba(255, 255, 255, 0.85);
       content: "\F0757";
     }
 
@@ -354,6 +354,46 @@
         border-color: mc('green', '500');
       }
     }
+    &.is-tip {
+      background-color: mc('green', '50');
+      border-color: mc('green', '300');
+      color: mc('green', '900');
+
+      &::before {
+        content: "\F0335";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('green', '50');
+        color: mc('green', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: mc('green', '900');
+        color: mc('green', '50');
+        border-color: mc('green', '500');
+      }
+    }
+    &.is-caution {
+      background-color: mc('purple', '50');
+      border-color: mc('purple', '300');
+      color: mc('purple', '900');
+
+      &::before {
+        content: "\f0238";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('purple', '50');
+        color: mc('purple', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: mc('purple', '900');
+        color: mc('purple', '50');
+        border-color: mc('purple', '500');
+      }
+    }
   }
 
   // ---------------------------------
@@ -378,7 +418,7 @@
 
       &::before {
         display: inline-block;
-        font: normal normal normal 24px/1 "Material Design Icons", sans-serif !important;
+        font: normal normal normal 28px/1 "Material Design Icons", sans-serif !important;
       }
     }
 
@@ -685,7 +725,7 @@
         display:inline-block;
         vertical-align:top;
         padding-top:0;
-        
+
         &:first-child {
           width: 100%;
         }