Merge pull request #4704 from artoscinote/ma_SCI_7574

Upgrade TinyMCE to 6.3, fix issues [SCI-7574]

app/assets/javascripts/tinymce/plugins/placeholder/plugin.js

@@ -5,8 +5,8 @@ tinymce.PluginManager.add('placeholder', function(editor) {
     var editorForm = $(editor.getContainer()).closest('form');
     var editorToolbar = editorForm.find('.mce-top-part');
     var placeholderText = editor.getElement().getAttribute('placeholder') || editor.settings.placeholder;
-    var placeholderAttrs = editor.settings.placeholder_attrs || {
-      style: {
+    var placeholderAttrs = {
+      style: `
         position: 'absolute',
         top: (editorToolbar.height()) + 'px',
         left: 0,
@@ -15,7 +15,7 @@ tinymce.PluginManager.add('placeholder', function(editor) {
         width: 'calc(100% - 50px)',
         overflow: 'hidden',
         'white-space': 'pre-wrap'
-      }
+      `
     };
     var contentAreaContainer = editor.getContentAreaContainer();
 

app/assets/stylesheets/tiny_mce.scss

@@ -38,6 +38,16 @@
   position: relative !important;
 }
 
+.tox.tox-tinymce {
+  left: -100000px;
+  position: absolute;
+
+  &.tox-tinymce--loaded {
+    left: 0;
+    position: relative;
+  }
+}
+
 .tinymce-placeholder {
   background: $color-concrete;
   opacity: .7;
@@ -45,8 +55,15 @@
   width: 100%;
 }
 
-.tinymce-save-button,
-.tinymce-cancel-button {
+.tox-edit-area {
+  label {
+    color: $color-silver-chalice !important;
+    padding: 5px !important;
+  }
+}
+
+.tinymce-save-button.tox-mbtn,
+.tinymce-cancel-button.tox-mbtn {
   cursor: pointer;
 
   .fas {
@@ -54,6 +71,10 @@
     font-weight: 900;
     margin-top: 3px;
   }
+
+  &:hover {
+    background: transparent !important;
+  }
 }
 
 .tinymce-save-controls {

app/javascript/packs/tiny_mce.js

@@ -183,9 +183,10 @@ window.TinyMCE = (() => {
         }
 
         return tinyMCE.init({
-          cache_suffix: '?v=6.1.2', // This suffix should be changed any time library is updated
+          cache_suffix: '?v=6.3.1', // This suffix should be changed any time library is updated
           selector,
           convert_urls: false,
+          promotion: false,
           menu: {
             insert: { title: 'Insert', items: 'link codesample inserttable | charmap hr | nonbreaking anchor | insertdatetime customimageuploader marvinjs' },
           },
@@ -193,7 +194,7 @@ window.TinyMCE = (() => {
           toolbar: 'undo redo restoredraft | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | link | forecolor backcolor | codesample | customimageuploader marvinjs | help',
           plugins,
           autoresize_bottom_margin: 20,
-          // placeholder: options.placeholder,
+          placeholder: options.placeholder,
           skin: false,
           content_css: false,
           toolbar_sticky: true,
@@ -272,13 +273,14 @@ window.TinyMCE = (() => {
             }
           ],
           init_instance_callback: (editor) => {
-            const editorForm = $(editor.getContainer()).closest('form');
+
+            const editorContainer = $(editor.getContainer());
+            const editorForm = editorContainer.closest('form');
             const menuBar = editorForm.find('.tox-menubar');
 
             $('.tinymce-placeholder').css('height', `${$(editor.editorContainer).height()}px`);
-            $(editor.editorContainer).css('max-height', '0').css('opacity', '0')
             setTimeout(() => {
-              $(editor.editorContainer).css('max-height', '').css('opacity', '')
+              editorContainer.addClass('tox-tinymce--loaded');
               $('.tinymce-placeholder').remove();
             }, 400);
 
@@ -351,6 +353,8 @@ window.TinyMCE = (() => {
             SmartAnnotation.init($(editor.contentDocument.activeElement));
             SmartAnnotation.preventPropagation('.atwho-user-popover');
             initHighlightjsIframe($(editor.iframeElement).contents());
+
+            if (options.afterInitCallback) { options.afterInitCallback(); }
           },
           setup: (editor) => {
             editor.on('keydown', (e) => {

app/javascript/packs/tinymce/placeholder/plugin.js

@@ -6,7 +6,7 @@ tinymce.PluginManager.add('placeholder', (editor) => {
     // const editorToolbar = editorForm.find('.tox-editor-header');
     const placeholderText = editor.getElement().getAttribute('placeholder');
     const placeholderAttrs = {
-      style: {
+      style: `
         position: 'absolute',
         top: '0px',
         left: '0px',
@@ -15,7 +15,7 @@ tinymce.PluginManager.add('placeholder', (editor) => {
         width: 'calc(100% - 50px)',
         overflow: 'hidden',
         'white-space': 'pre-wrap'
-      }
+      `
     };
     const contentAreaContainer = editor.getContentAreaContainer();
 

app/javascript/vue/protocol/container.vue

@@ -204,7 +204,7 @@
         });
       },
       updateDescription(protocol) {
-        this.protocol.attributes = protocol.data.attributes
+        this.protocol.attributes = protocol.attributes
       },
       addStep(position) {
         $.post(this.urls.add_step_url, {position: position}, (result) => {

app/javascript/vue/protocol/step_elements/text.vue

@@ -79,17 +79,17 @@
     methods: {
       enableEditMode() {
         if (!this.element.attributes.orderable.urls.update_url) return
-        if (this.inEditMode == true) return
+        if (this.inEditMode) return
         this.inEditMode = true
       },
       disableEditMode() {
         this.inEditMode = false
       },
       update(data) {
-        this.element.attributes.orderable.text_view = data.data.attributes.text_view
-        this.element.attributes.orderable.text = data.data.attributes.text
-        this.element.attributes.orderable.name = data.data.attributes.name
-        this.element.attributes.orderable.updated_at = data.data.attributes.updated_at
+        this.element.attributes.orderable.text_view = data.attributes.text_view
+        this.element.attributes.orderable.text = data.attributes.text
+        this.element.attributes.orderable.name = data.attributes.name
+        this.element.attributes.orderable.updated_at = data.attributes.updated_at
         this.$emit('update', this.element, true)
       }
     }

app/javascript/vue/shared/tinymce.vue

@@ -4,13 +4,13 @@
       <form class="tiny-mce-editor" role="form" :action="updateUrl" accept-charset="UTF-8" data-remote="true" method="post">
         <input type="hidden" name="_method" value="patch">
         <div class="hidden tinymce-cancel-button tox-mbtn" tabindex="-1">
-          <button type="button" tabindex="-1">
-            <span class="fas fa-times"></span>
-            <span class="mce-txt">{{ i18n.t('general.cancel')  }}</span>
-          </button>
+        <button type="button" tabindex="-1">
+          <span class="fas fa-times"></span>
+          <span class="mce-txt">{{ i18n.t('general.cancel') }}</span>
+        </button>
         </div>
         <div class="hidden tinymce-save-button tox-mbtn" tabindex="-1">
-          <button type="button" tabindex="-1">
+          <button type="button" tabindex="-1" >
             <span class="fas fa-check"></span>
             <span class="mce-txt">{{ i18n.t('general.save') }}</span>
           </button>
@@ -19,6 +19,7 @@
           <i class="fas fa-check-circle"></i>
           <span>{{ i18n.t('tiny_mce.saved_label') }}</span>
         </div>
+
         <div :id="`${objectType}_view_${objectId}`"
             @click="initTinymce"
             v-html="value_html"
@@ -85,6 +86,8 @@
       inEditMode() {
         if (this.inEditMode) {
           this.initTinymce();
+        } else {
+          this.wrapTables();
         }
       },
       characterCount() {
@@ -94,9 +97,6 @@
       }
     },
     computed: {
-      editorInstance() {
-        return tinyMCE.activeEditor;
-      },
       error() {
         if(this.characterLimit && this.characterCount > this.characterLimit) {
           return(
@@ -116,13 +116,13 @@
     mounted() {
       if (this.inEditMode) {
         this.initTinymce();
+      } else {
+        this.wrapTables();
       }
     },
     methods: {
       initTinymce(e) {
         let textArea = `#${this.objectType}_textarea_${this.objectId}`;
-        const vueTinyMce = this;
-
 
         if (this.active) return
         if (e && $(e.target).prop("tagName") === 'A') return
@@ -130,31 +130,34 @@
         if (e && $(e.target).hasClass('record-info-link')) return
         if (e && $(e.target).parent().hasClass('atwho-inserted')) return
 
-        TinyMCE.init(
-          textArea,
-          {
-            onSaveCallback(data) {
-              if (data) {
-                vueTinyMce.$emit('update', data)
+        TinyMCE.init(textArea, {
+            onSaveCallback: (data) => {
+              if (data.data) {
+                this.$emit('update', data.data)
               }
-              vueTinyMce.$emit('editingDisabled');
-            }
+              this.$emit('editingDisabled');
+            },
+            afterInitCallback: () => {
+              this.active = true;
+              this.initCharacterCount();
+              this.$emit('editingEnabled');
+            },
+            placeholder: this.placeholder
           }
-        ).then(() => {
-          this.active = true;
-          this.initCharacterCount();
-          this.$emit('editingEnabled');
-        });
+        )
       },
       getStaticUrl(name) {
         return $(`meta[name=\'${name}\']`).attr('content');
       },
+      wrapTables() {
+        $(this.$el).find('.tinymce-view table').wrapAll('<div style="overflow: auto"></div>');
+      },
       initCharacterCount() {
         if (!this.editorInstance()) return;
 
-        this.characterCount = $(this.editorInstance().getContent()).text().length;
+        this.characterCount = this.editorInstance().plugins.wordcount.body.getCharacterCount();
         this.editorInstance().on('input change paste keydown', (e) => {
-          e.currentTarget && (this.characterCount = (e.currentTarget).innerText.length);
+          e.currentTarget && (this.characterCount = this.editorInstance().plugins.wordcount.body.getCharacterCount());
         });
 
         this.editorInstance().on('remove', () => this.active = false);
@@ -165,7 +168,7 @@
         });
       },
       editorInstance() {
-        return tinyMCE.editors[0];
+        return tinyMCE.activeEditor;
       }
     }
   }

yarn.lock

@@ -10687,9 +10687,9 @@ tiny-warning@^1.0.0:
   integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
 
 tinymce@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.1.2.tgz"
-  integrity sha512-tl4KbEKdPzyPTatJkblN2AqzRj9jaRGyATnwaSnsLFGKb4AI6B+4e0Gc8dUDXuqAjgSnHokhzamrQJLbSn4CmQ==
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.3.1.tgz#cc5cf2b9f702d429cf5d1d21ed62245d768bfc4f"
+  integrity sha512-+oCwXuTxAdJXVJ0130OxQz0JDNsqg3deuzgeUo8X5Vb27EzCJgXwO5eWvCxvkxpQo4oiHMVlM4tUIpTUHufHGQ==
 
 tmp@^0.0.33:
   version "0.0.33"