Merge pull request #11282 from jibees/11025-white-label-trix-quotes-code-and-links-cant-be-identified-in-the-editor

White label: Customize rendering inside the trix-editor, to match the shopfront rendering

app/views/shopping_shared/tabs/_custom.html.haml

@@ -1,4 +1,4 @@
 .content
   .row
-    .columns
+    .columns.custom-tab
       = sanitize(@distributor.custom_tab&.content, scrubber: TrixScrubber.new)

app/webpacker/css/admin/trix.scss

@@ -2,9 +2,25 @@ trix-toolbar [data-trix-button-group="file-tools"] {
   display: none;
 }
 
+// Match the rendering into the shopfront
 trix-editor {
+  color: $darker-grey;
+
   ol,
   ul {
     margin-left: 1.5em;
   }
+
+  a {
+    color: $ofn-brand;
+  }
+
+  // Copy/pasted from _type.scss
+  blockquote {
+    line-height: 1.6;
+    color: #6f6f6f;
+    margin: 0 0 1.25rem;
+    padding: 0.5625rem 1.25rem 0 1.1875rem;
+    border-left: 1px solid #dddddd;
+  }
 }

app/webpacker/css/darkswarm/shop_tabs.scss

@@ -119,6 +119,20 @@
         margin-top: 0.75rem;
         margin-bottom: 2px;
       }
+
+      .custom-tab {
+        ol, ul {
+          margin-left: 1.5em;
+        }
+
+        ol {
+          list-style-type: decimal;
+        }
+
+        ul {
+          list-style-type: disc;
+        }
+      }
     }
 
     &.with-darker-background {