OD-383 [Feature] Mention plugin for TinyMCE v5

css/form.css

@@ -1107,6 +1107,12 @@ input[type='time']::-webkit-clear-button {
   background-position: center;
 }
 
+.rte-autocomplete.dropdown-menu li a {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 @media screen and (min-width: 640px) {
   .row > div.multiple-images-item {
     width: calc(33.33% - 7.5px);

js/components/wysiwyg.js

@@ -27,6 +27,15 @@ Fliplet.FormBuilder.field('wysiwyg', {
   computed: {
     isInterface: function() {
       return Fliplet.Env.get('interface');
+    },
+    isInteract: function() {
+      return Fliplet.Env.get('interact');
+    },
+    widgetId: function() {
+      return parseInt(Fliplet.Widget.getDefaultId(), 10);
+    },
+    widgetUuid: function() {
+      return Fliplet.Widget.getUUID(this.widgetId);
     }
   },
   watch: {
@@ -132,46 +141,71 @@ Fliplet.FormBuilder.field('wysiwyg', {
 
     var config = {
       target: this.$refs.textarea,
-      theme: 'modern',
       readonly: this.readonly,
-      mobile: {
-        theme: this.readonly
-          ? 'silver'
-          : 'mobile',
-        plugins: [ 'autosave', 'lists', 'autolink' ],
-        toolbar: [ 'bold', 'italic', 'underline', 'bullist', 'numlist', 'removeformat' ]
+      height: lineHeight * this.rows,
+      menubar: false,
+      formats: {
+        removeformat: [
+          // Remove block containers
+          {
+            selector: 'div,main,article,aside,header,footer',
+            remove: 'all',
+            split: false,
+            expand: false,
+            block_expand: true,
+            deep: true
+          },
+          // Remove inline containers
+          {
+            selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins,span',
+            remove: 'all',
+            split: true,
+            expand: false,
+            deep: true
+          },
+          // Remove attributes
+          {
+            selector: '*',
+            attributes: ['style', 'class', 'id'],
+            split: false,
+            expand: false,
+            deep: true
+          }
+        ]
       },
-      plugins: [
-        'advlist autolink lists link directionality',
-        'autoresize fullscreen code paste'
-      ].join(' '),
-      toolbar: this.readonly
+      plugins: $vm.isInterface
         ? false
-        : [
-          'bold italic underline',
-          'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
-          'ltr rtl | link | removeformat code fullscreen'
-        ].join(' | '),
-      image_advtab: true,
-      menubar: false,
+        : ['advlist autolink lists link searchreplace print directionality',
+          'table paste pasteplaintext code'],
       statusbar: false,
+      toolbar: this.readonly || $vm.isInterface
+        ? ['bold italic underline alignleft aligncenter alignright alignjustify'].join(' | ')
+        : ['bold italic underline | alignleft aligncenter alignright alignjustify',
+          'bullist numlist outdent indent | ltr rtl',
+          'link | pasteplaintext removeformat | code | formatselect'].join(' | '),
+      mobile: {
+        toolbar_mode: 'sliding',
+        plugins: 'mention'
+      },
+      paste_preprocess: function(plugin, args) {
+        // Clean up content before pasting
+        args.content = args.content
+          .replace(/ contenteditable="(true|false)"/g, '');
+      },
       // Prevent URLs from being altered
       // https://stackoverflow.com/questions/3796942
       relative_urls: false,
       remove_script_host: false,
-      convert_urls: true,
-      inline: false,
-      resize: false,
-      autoresize_bottom_margin: 0,
-      autoresize_max_height: lineHeight * this.rows,
-      autoresize_min_height: lineHeight * this.rows,
-      autofocus: false,
+      convert_urls: false,
       branding: false,
       setup: function(editor) {
         $vm.editor = editor;
 
         editor.on('init', function() {
-          $vm.addPlaceholder();
+          if ($vm.isInterface) {
+            $vm.addPlaceholder();
+          }
+
           $vm.addBulletedListShortcutsWindows();
 
           if ($vm.defaultValueSource !== 'default') {
@@ -218,10 +252,14 @@ Fliplet.FormBuilder.field('wysiwyg', {
     // Allow custom code to register hooks before this runs
     Fliplet().then(function() {
       Fliplet.Hooks.run('beforeRichFieldInitialize', {
-        field: this,
-        config: config
+        field: $vm,
+        config: config,
+        id: $vm.widgetId,
+        uuid: $vm.widgetUuid
       }).then(function() {
-        tinymce.init(config);
+        if (tinymce && !$vm.isInteract) {
+          tinymce.init(config);
+        }
       });
     });
 

js/libs/builder.js

@@ -799,7 +799,6 @@ new Vue({
         }
       });
     },
-
     // Converts @event attributes to v-on:event
     convertVueEventAttributes: function(html) {
       var $html = $('<div/>').append(html);
@@ -874,8 +873,8 @@ new Vue({
       if (value === 'settings') {
         $vm.setupCodeEditor();
         changeSelectText();
-      } else {
-        tinymce.remove();
+      } else if ($vm.$refs.resulthtml) {
+        $($vm.$refs.resulthtml).tinymce().remove();
       }
     },
     'settings.dataStore': function(value) {
@@ -983,29 +982,6 @@ new Vue({
         $(selector).removeClass('is-loading');
       }
 
-      $($vm.$refs.templateDescription).tinymce({
-        plugins: [
-          'lists advlist image charmap hr code',
-          'searchreplace wordcount insertdatetime table textcolor colorpicker'
-        ],
-        toolbar: [
-          'formatselect |',
-          'bold italic underline strikethrough |',
-          'forecolor backcolor |',
-          'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |',
-          'blockquote subscript superscript | table insertdatetime charmap hr |',
-          'removeformat | code'
-        ].join(' '),
-        menubar: false,
-        statusbar: false,
-        min_height: 300,
-        setup: function(ed) {
-          $vm.editor = ed;
-          $vm.editor.on('keyup paste', function() {
-            $vm.settings.description = $vm.editor.getContent();
-          });
-        }
-      });
 
       if ($vm.chooseTemplate && $vm.$refs.templateGallery) {
         setTimeout(function() {