Make media selection work and add more plugins and tools

frontend/src/assets/style.scss

@@ -83,7 +83,7 @@ section {
       left: 0;
       position: static;
     }
-  }    
+  }
 }
 
 .box {
@@ -205,44 +205,9 @@ body.is-noscroll {
   border: 1px solid $grey-lighter;
   border-radius: 2px;
 }
-.quill-editor {
-  background: #fff;
-  &.fullscreen {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    bottom: 10px;
-    left: 10px;
-    z-index: 100;
-  }
-  .ql-fullscreen:after {
-    content: "⤢";
-    font-weight: 600;
-    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;
-    }
-  }
-}
 
 .editor {
-  margin-bottom: 30px;  
+  margin-bottom: 30px;
 }
   .plain-editor textarea {
     height: 65vh;
@@ -276,7 +241,7 @@ body.is-noscroll {
 
 /* Modal */
 .modal {
-  z-index: 100;
+  z-index: 1350; // Needs to get above the TinyMCE modal
 }
 .modal-card-head {
   display: block;
@@ -433,7 +398,7 @@ body.is-noscroll {
     background: #fff1f0;
     border: 1px solid lighten($color, 30%);
     box-shadow: 1px 1px 0 lighten($color, 30%);
-  } 
+  }
 
   sup {
     font-weight: $weight-semibold;
@@ -445,7 +410,7 @@ body.is-noscroll {
   &.confirmed sup {
     color: #52c41a;
   }
-  
+
   &:not(body) .icon:first-child:last-child {
     margin-right: 1px;
   }
@@ -615,7 +580,7 @@ section.analytics {
 /* Campaign / template preview popup */
 .preview {
   padding: 0;
-  
+
   /* Contain the spinner background in the content area. */
   position: relative;
 
@@ -789,7 +754,7 @@ section.campaign {
 }
 .slide-leave-active, .slide-leave-to {
   transition: none;
-  display: none;  
+  display: none;
 }
 
 

frontend/src/components/Editor.vue

@@ -76,16 +76,27 @@ import 'tinymce';
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/skins/ui/oxide/skin.css';
+
+import 'tinymce/plugins/charmap';
 import 'tinymce/plugins/code';
+import 'tinymce/plugins/colorpicker';
+import 'tinymce/plugins/contextmenu';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/emoticons/js/emojis';
+import 'tinymce/plugins/fullscreen';
+import 'tinymce/plugins/help';
+import 'tinymce/plugins/hr';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/imagetools';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
+import 'tinymce/plugins/paste';
+import 'tinymce/plugins/searchreplace';
 import 'tinymce/plugins/table';
-import 'tinymce/plugins/hr';
+import 'tinymce/plugins/textcolor';
+import 'tinymce/plugins/visualblocks';
+import 'tinymce/plugins/visualchars';
 import 'tinymce/plugins/wordcount';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/anchor';
-import 'tinymce/plugins/fullscreen';
 
 import TinyMce from '@tinymce/tinymce-vue';
 import CampaignPreview from './CampaignPreview.vue';
@@ -136,16 +147,33 @@ export default {
 
       // TODO: Possibility to overwrite this config from an external source for easy customization
       tinyMceOptions: {
+        // TODO: To use `language`, you have to download your desired language pack here:
+        //   https://www.tiny.cloud/get-tiny/language-packages/, then somehow copy it into /frontend/js/langs/
         language: this.$t('settings.general.language'),
-        height: 400,
+        height: 500,
         plugins: [
-          'lists', 'link', 'image', 'charmap', 'anchor',
-          'fullscreen', 'table', 'code', 'wordcount', 'hr',
+          'charmap',
+          'code',
+          'emoticons',
+          'fullscreen',
+          'help',
+          'hr',
+          'image',
+          'imagetools',
+          'link',
+          'lists',
+          'paste',
+          'searchreplace',
+          'table',
+          'visualblocks',
+          'visualchars',
+          'wordcount',
         ],
-        // TODO: As a default config, max out all the plugins and toolbars
-        toolbar: 'undo redo | formatselect fontsizeselect | bold italic backcolor | '
+        toolbar: 'undo redo | formatselect styleselect fontsizeselect | '
+          + 'bold italic underline strikethrough forecolor backcolor subscript superscript | '
           + 'alignleft aligncenter alignright alignjustify | '
-          + 'bullist numlist table | outdent indent | removeformat | link hr',
+          + 'bullist numlist table image | outdent indent | link hr removeformat | '
+          + 'code fullscreen help',
         skin: false,
         content_css: false,
         // TODO: Get the `content_style` from an external source (to match the template styles)
@@ -154,6 +182,11 @@ export default {
           + 'img { max-width: 100%; }'
           + 'a { color: #0055d4; }'
           + 'a:hover { color: #111; }',
+        file_picker_types: 'image',
+        file_picker_callback: (callback) => {
+          this.isMediaVisible = true;
+          this.runTinyMceImageCallback = callback;
+        },
       },
     };
   },
@@ -222,9 +255,8 @@ export default {
       this.isPreviewing = !this.isPreviewing;
     },
 
-    onMediaSelect(m) {
-      // TODO: Embed image to TinyMce
-      console.log('onMediaSelect', m);
+    onMediaSelect(media) {
+      this.runTinyMceImageCallback(media.url);
     },
 
     beautifyHTML(str) {