From 13cf136ca445bae33a7157850ec780b8ff8e9b28 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Thu, 1 Dec 2022 15:20:23 +0100
Subject: [PATCH] Make overflowing tables in TinyMCE scrollable [SCI-7238]

---
 app/javascript/vue/shared/tinymce.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/javascript/vue/shared/tinymce.vue b/app/javascript/vue/shared/tinymce.vue
index ad33e90c1..b3c44738a 100644
--- a/app/javascript/vue/shared/tinymce.vue
+++ b/app/javascript/vue/shared/tinymce.vue
@@ -85,6 +85,8 @@
       inEditMode() {
         if (this.inEditMode) {
           this.initTinymce();
+        } else {
+          this.wrapTables();
         }
       },
       characterCount() {
@@ -113,6 +115,8 @@
     mounted() {
       if (this.inEditMode) {
         this.initTinymce();
+      } else {
+        this.wrapTables();
       }
     },
     methods: {
@@ -130,7 +134,7 @@
           if (data) {
             this.$emit('update', data)
           }
-          this.$emit('editingDisabled')
+          this.$emit('editingDisabled');
         }).then(() => {
           this.active = true;
           this.initCharacterCount();
@@ -140,6 +144,9 @@
       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;