Feat: Added missing Asciidoc blockquotes to markdown editor

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

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

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;
+      left: -39px;
-      color: rgba(255, 255, 255, .7);
+      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;
       }
     }