[WIP] Replace Trix with Quill editor

Notes:
* Considering Quill as a replacement for Trix, because of [a desire to have more semantically-correct markup](#53) as the final output.
* Quill is nice, but has its own set of issues. Namely, it inserts `<p><br></p>` tags.
* The `matchVisual` [workaround](slab/quill#1379) has since been removed from Quill.
* We _could_ strip `<p><br></p>` from the HTML before rendering, but I worry that storing those tags in the DB would make it harder to transition away from Quill down the road.

assets/dashboard/javascripts/dashboard.pack.js

@@ -6,7 +6,6 @@ Turbolinks.start();
 
 // TODO: Include as packages
 require('../vendor/semantic-ui/semantic.min');
-require('../vendor/trix/trix');
 require('../vendor/jquery.tablesort');
 
 require('./dashboard/ace');
@@ -17,6 +16,7 @@ require('./dashboard/semantic');
 require('./dashboard/sidebar');
 require('./dashboard/sortable');
 require('./dashboard/websocket');
+require('./dashboard/wysiwyg');
 
 // CSRF
 $.ajaxSetup({

assets/dashboard/javascripts/dashboard/wysiwyg.js

@@ -0,0 +1,26 @@
+const Quill = require('quill');
+
+const options = {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline', 'strike'],
+      ['link', 'blockquote', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+    ],
+  },
+  theme: 'snow',
+};
+
+document.addEventListener("turbolinks:load", () => {
+  const editors = document.querySelectorAll('.wysiwyg');
+
+  [].forEach.call(editors, (editor) => {
+    const quill = new Quill(editor, options);
+    const input = editor.nextElementSibling;
+
+    quill.on('text-change', (delta, oldDelta, source) => {
+      input.value = editor.firstChild.innerHTML;
+    });
+  });
+});

assets/dashboard/stylesheets/_forms.scss

@@ -1,11 +1,13 @@
 .form {
-  input {
+  input,
+  textarea,
+  .wysiwyg {
     font-family: inherit;
     font-size: inherit;
-    outline: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    outline: none;
   }
 
   input:not(.button),
@@ -22,14 +24,20 @@
     &:-moz-placeholder { color: $grey; }
   }
 
-  .ace_editor,
-  trix-editor {
+  .wysiwyg,
+  .ace_editor {
+    font-size: inherit;
+    min-height: 20rem;
     border: 1px solid $grey-light;
     border-radius: $border-radius;
   }
 
-  textarea {
-    min-height: 20rem;
+  .ql-toolbar {
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  .wysiwyg {
+    border-radius: 0 0 $border-radius $border-radius;
   }
 
   .field,
@@ -96,7 +104,7 @@
     }
 
     &.error {
-      trix-editor,
+      .wysiwyg,
       .ace_editor,
       .previewable,
       .dropdown.selection,
@@ -105,6 +113,12 @@
         background-color: $red-lighter;
         border-color: $red;
       }
+
+      .ql-toolbar {
+        border-top-color: $red;
+        border-right-color: $red;
+        border-left-color: $red;
+      }
     }
   }
 

assets/dashboard/stylesheets/dashboard.pack.scss

@@ -1,4 +1,4 @@
-@import url(/dashboard/vendor/trix/trix.css);
+@import "../../../node_modules/quill/dist/quill.snow";
 
 @import "variables";
 @import "mixins";