Fix Quill setup to use inline CSS styles instead of classes

frontend/src/assets/style.scss

@@ -191,6 +191,24 @@ section {
     font-size: 1.2rem;
     line-height: 0.95rem;
   }
+  .ql-toolbar.ql-snow .ql-picker.ql-size {
+    .ql-picker-item[data-value="11px"]::before {
+      content: 'Small';
+      font-size: 11px !important;
+    }
+    .ql-picker-item[data-value="13px"]::before {
+      content: 'Normal';
+      font-size: 13px !important;
+    }
+    .ql-picker-item[data-value="22px"]::before {
+      content: 'Big';
+      font-size: 20px !important;
+    }
+    .ql-picker-item[data-value="32px"]::before {
+      content: 'Huge';
+      font-size: 32px !important;
+    }
+  }
 }
 
 /* Table colors and padding */
@@ -224,7 +242,7 @@ section {
 }
 
 
-/* Fix for button primary colour. */
+/* Fix for input colours */
 .button.is-primary {
   background: $primary;
   &:hover {
@@ -271,6 +289,11 @@ section {
   margin-bottom: 0;
 }
 
+/* Tabs */
+.b-tabs .tab-content {
+  padding-top: 2rem;
+}
+
 /* Tags */
 .tag {
   min-width: 75px;
@@ -561,9 +584,6 @@ section.campaign {
   .disabled {
     opacity: 0.30;
   }
-  .tab-content {
-    padding-top: 30px;
-  }
   .box {
     margin-bottom: 30px;
   }

frontend/src/components/Editor.vue

@@ -60,12 +60,37 @@
 import 'quill/dist/quill.snow.css';
 import 'quill/dist/quill.core.css';
 
-import { quillEditor } from 'vue-quill-editor';
+import { quillEditor, Quill } from 'vue-quill-editor';
 import CodeFlask from 'codeflask';
 
 import CampaignPreview from './CampaignPreview.vue';
 import Media from '../views/Media.vue';
 
+// Setup Quill to use inline CSS style attributes instead of classes.
+Quill.register(Quill.import('attributors/attribute/direction'), true);
+Quill.register(Quill.import('attributors/style/align'), true);
+Quill.register(Quill.import('attributors/style/background'), true);
+Quill.register(Quill.import('attributors/style/color'), true);
+Quill.register(Quill.import('formats/indent'), true);
+
+const quillFontSizes = Quill.import('attributors/style/size');
+quillFontSizes.whitelist = ['11px', '13px', '22px', '32px'];
+Quill.register(quillFontSizes, true);
+
+// Custom class to override the default indent behaviour to get inline CSS
+// style instead of classes.
+class IndentAttributor extends Quill.import('parchment').Attributor.Style {
+  multiplier = 30;
+
+  add(node, value) {
+    return super.add(node, `${value * this.multiplier}px`);
+  }
+
+  value(node) {
+    return parseFloat(super.value(node)) / this.multiplier || undefined;
+  }
+}
+
 export default {
   components: {
     Media,
@@ -120,7 +145,7 @@ export default {
             container: [
               [{ header: [1, 2, 3, false] }],
               ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code'],
-              [{ color: [] }, { background: [] }, { size: [] }],
+              [{ color: [] }, { background: [] }, { size: quillFontSizes.whitelist }],
               [
                 { list: 'ordered' },
                 { list: 'bullet' },
@@ -182,7 +207,7 @@ export default {
       el.shadowRoot.innerHTML = `
         <style>
           .codeflask .codeflask__flatten { font-size: 15px; }
-          .codeflask .codeflask__lines { background: #fafafa; }
+          .codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
         </style>
         <div id="area"></area>
       `;
@@ -190,7 +215,7 @@ export default {
 
       const flask = new CodeFlask(el.shadowRoot.getElementById('area'), {
         language: 'html',
-        lineNumbers: true,
+        lineNumbers: false,
         styleParent: el.shadowRoot,
         readonly: this.disabled,
       });
@@ -258,6 +283,15 @@ export default {
   },
 
   mounted() {
+    // Initialize the Quill indentation plugin.
+    const levels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const multiplier = 30;
+    const indentStyle = new IndentAttributor('indent', 'margin-left', {
+      scope: Quill.import('parchment').Scope.BLOCK,
+      whitelist: levels.map((value) => `${value * multiplier}px`),
+    });
+
+    Quill.register(indentStyle);
   },
 };
 </script>