OD-378 [Feature] Upgrade TinyMCE 4 to TinyMCE 5 for Form component

js/components/wysiwyg.js

@@ -27,6 +27,9 @@ Fliplet.FormBuilder.field('wysiwyg', {
   computed: {
     isInterface: function() {
       return Fliplet.Env.get('interface');
+    },
+    isInteract: function() {
+      return Fliplet.Env.get('interact');
     }
   },
   watch: {
@@ -132,46 +135,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: ''
+      },
+      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') {
@@ -221,7 +249,9 @@ Fliplet.FormBuilder.field('wysiwyg', {
         field: this,
         config: config
       }).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() {

vendor/tinymce/plugins/pasteplaintext/plugin.min.js

@@ -0,0 +1,59 @@
+// Paste as Plain Text plugin
+if (tinymce && tinymce.majorVersion === '5') {
+	tinymce.PluginManager.add('pasteplaintext', function (editor, url) {
+		var openDialog = function () {
+			return editor.windowManager.open({
+				title: 'Paste as Plain Text',
+				body: {
+					type: 'panel',
+					items: [
+						{
+							type: 'htmlpanel',
+							html: '<p>Please paste inside the following box using the keyboard (<strong style="font-weight:600">Cmd/Ctrl + V</strong>) and hit <strong style="font-weight:600">Paste</strong>.<br></p><style>.tox .tox-form__group--stretched { height: 240px; }</style>'
+						},
+						{
+							type: 'textarea',
+							name: 'text'
+						}
+					]
+				},
+				buttons: [
+					{
+						type: 'cancel',
+						text: 'Cancel'
+					},
+					{
+						type: 'submit',
+						text: 'Paste',
+						primary: true
+					}
+				],
+				onSubmit: function (api) {
+					var data = api.getData();
+
+					/* Insert content when the window form is submitted */
+					editor.insertContent(data.text.replace(/(?:\r\n|\r|\n)/g, '<br>'));
+					api.close();
+				}
+			});
+		};
+
+		/* Add a button that opens a window */
+		editor.ui.registry.addButton('pasteplaintext', {
+			icon: 'paste-text',
+			tooltip: 'Paste as Plain Text',
+			onAction: function () {
+				openDialog();
+			}
+		});
+
+		/* Return the metadata for the plugin */
+		return {
+			getMetadata: function () {
+				return {
+					name: 'Paste as Plain Text'
+				};
+			}
+		};
+	});
+}

widget.json

@@ -93,7 +93,7 @@
       "fliplet-media",
       "font-awesome",
       "moment",
-      "tinymce",
+      { "name": "tinymce:5.7.0", "interact": false },
       "fliplet-session"
     ],
     "assets": [
@@ -130,6 +130,10 @@
       "js/components/signature.js",
       "js/components/wysiwyg.js",
 
+      "vendor/tinymce/icons/default/icons.min.js",
+      "vendor/tinymce/themes/silver/theme.min.js",
+      "vendor/tinymce/plugins/pasteplaintext/plugin.min.js",
+
       "js/libs/form.js",
       "css/form.css"
     ]