Fix table overflow for TinyMCE [SCI-7782]

app/assets/javascripts/my_modules/protocols.js

@@ -18,6 +18,10 @@ function initEditMyModuleDescription() {
     if ($(this).hasClass('record-info-link')) return;
     e.stopPropagation();
   });
+
+  setTimeout(function() {
+    TinyMCE.wrapTables(viewObject);
+  }, 100);
 }
 
 function initEditProtocolDescription() {

app/javascript/packs/tiny_mce.js

@@ -1,4 +1,4 @@
-/* global I18n hljs GLOBAL_CONSTANTS HelperModule SmartAnnotation */
+/* global I18n hljs GLOBAL_CONSTANTS HelperModule SmartAnnotation TinyMCE */
 
 import tinyMCE from 'tinymce/tinymce';
 import 'tinymce/models/dom';
@@ -329,6 +329,7 @@ window.TinyMCE = (() => {
                 editorForm.find('.tinymce-status-badge').removeClass('hidden');
                 editor.remove();
                 editorForm.find('.tinymce-view').html(data.html).removeClass('hidden');
+                TinyMCE.wrapTables(editorForm.find('.tinymce-view'));
                 editor.plugins.autosave.removeDraft();
                 removeDraft(editor, textAreaObject);
                 if (options.onSaveCallback) { options.onSaveCallback(data); }
@@ -455,7 +456,16 @@ window.TinyMCE = (() => {
     makeItDirty: (editor) => {
       makeItDirty(editor);
     },
-    highlight: initHighlightjs
+    highlight: initHighlightjs,
+    wrapTables: (container) => {
+      container.find('table').toArray().forEach((table) => {
+        if ($(table).parent().hasClass('table-wrapper')) return;
+
+        $(table).css('float', 'none').wrapAll(`
+          <div class="table-wrapper" style="overflow: auto; width: ${container.width()}px"></div>
+        `);
+      });
+    }
   };
 })();
 

app/javascript/vue/shared/tinymce.vue

@@ -136,6 +136,7 @@
                 this.$emit('update', data.data)
               }
               this.$emit('editingDisabled');
+              this.wrapTables();
             },
             afterInitCallback: () => {
               this.active = true;
@@ -151,9 +152,7 @@
       },
       wrapTables() {
         this.$nextTick(() => {
-          $(this.$el).find('.tinymce-view table').toArray().forEach((table) => {
-            $(table).css('float', 'none').wrapAll('<div style="overflow: auto"></div>');
-          })
+          TinyMCE.wrapTables($(this.$el).find('.tinymce-view'));
         });
       },
       initCharacterCount() {