(fix) TinyMCE issues - Code samples & Wide tables [SCI-10076]

app/assets/javascripts/my_modules/protocols.js

@@ -8,7 +8,6 @@
 // Currently selected row in "load from protocol" modal
 var selectedRow = null;
 
-
 function initEditMyModuleDescription() {
   var viewObject = $('#my_module_description_view');
   viewObject.on('click', function(e) {
@@ -361,3 +360,11 @@ function init() {
 }
 
 init();
+
+const viewMode = new URLSearchParams(window.location.search).get('view_mode');
+if (viewMode === 'archived') {
+  setTimeout(() => {
+    const notesContainerEl = document.getElementById('notes-container');
+    window.wrapTables(notesContainerEl);
+  }, 100);
+}

app/assets/javascripts/sitewide/utils.js

@@ -135,3 +135,30 @@ $.fn.initSubmitModal = function(modalID, modelName) {
     })
     .animateSpinner();
 };
+
+/**
+ * Wraps tables in HTML with a specified wrapper.
+ * @param {string || Element} htmlStringOrDomEl - HTML containing tables to be wrapped.
+ * @returns {string} - HTML with tables wrapped.
+ */
+function wrapTables(htmlStringOrDomEl) {
+  if (typeof htmlStringOrDomEl === 'string') {
+    const container = $(`<span class="text-base">${htmlStringOrDomEl}</span>`);
+    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: 100%"></div>
+        `);
+    });
+    return container.prop('outerHTML');
+  }
+  // Check if the value is a DOM element
+  if (htmlStringOrDomEl instanceof Element) {
+    const tableElement = $(htmlStringOrDomEl).find('table');
+    if (tableElement.length > 0) {
+      tableElement.wrap('<div class="table-wrapper" style="overflow: auto; width: 100%"></div>');
+      const updatedHtml = $(htmlStringOrDomEl).html();
+      $(htmlStringOrDomEl).replaceWith(updatedHtml);
+    }
+  }
+}

app/javascript/packs/vue/legacy/datetime_picker.js

@@ -9,6 +9,12 @@ import { mountWithTurbolinks } from '../helpers/turbolinks.js';
 */
 
 window.initDateTimePickerComponent = (id) => {
+  const elementWithIdPresent = document.querySelector(id);
+  if (!elementWithIdPresent) {
+    console.warn("datetime_picker.js -> window.initDateTimePickerComponent: couldn't find element with id: ", id);
+    return;
+  }
+
   const app = createApp({
     data() {
       return {
@@ -78,4 +84,4 @@ document.addEventListener('turbolinks:load', () => {
   dateTimePickers.forEach((dateTimePicker) => {
     window.initDateTimePickerComponent(`#${dateTimePicker.id}`);
   });
-})
+})

app/javascript/vue/protocol/container.vue

@@ -111,7 +111,7 @@
                 @update="updateDescription"
               />
             </div>
-            <div v-else-if="protocol.attributes.description_view" v-html="protocol.attributes.description_view"></div>
+            <div v-else-if="protocol.attributes.description_view" v-html="wrappedTables" class="view-text-element"></div>
             <div v-else class="empty-protocol-description">
               {{ i18n.t("protocols.no_text_placeholder") }}
             </div>
@@ -252,6 +252,9 @@ export default {
   },
   mixins: [UtilsMixin, stackableHeadersMixin, moduleNameObserver, AssetPasteMixin],
   computed: {
+    wrappedTables() {
+      return window.wrapTables(this.protocol.attributes.description_view);
+    },
     inRepository() {
       return this.protocol.attributes.in_repository;
     },

app/javascript/vue/shared/content/text.vue

@@ -48,7 +48,7 @@
         @editingDisabled="disableEditMode"
         @editingEnabled="enableEditMode"
       />
-      <div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="wrapTables"></div>
+      <div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="wrappedTables"></div>
       <div v-else class="text-sn-grey">
         {{ i18n.t("protocols.steps.text.empty_text") }}
       </div>
@@ -108,21 +108,18 @@ export default {
     if (this.isNew) {
       this.enableEditMode();
     }
-
     this.$nextTick(() => {
-      this.highlightText();
+      const textElements = document.querySelectorAll('.view-text-element');
+      if (textElements.length > 0) {
+        textElements.forEach((textElement) => {
+          this.highlightText(textElement);
+        });
+      }
     });
   },
   computed: {
-    wrapTables() {
-      const container = $(`<span class="text-base">${this.element.attributes.orderable.text_view}</span>`);
-      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: 100%"></div>
-          `);
-      });
-      return container.prop('outerHTML');
+    wrappedTables() {
+      return window.wrapTables(this.element.attributes.orderable.text_view);
     },
     actionMenu() {
       const menu = [];
@@ -184,11 +181,8 @@ export default {
       this.element.attributes.orderable.updated_at = data.attributes.updated_at;
       this.$emit('update', this.element, true);
     },
-    highlightText() {
-      const textElement = $('.results-list')[0];
-      if (textElement) {
-        Prism.highlightAllUnder(textElement);
-      }
+    highlightText(textElToHighlight) {
+      Prism.highlightAllUnder(textElToHighlight);
     }
   }
 };