scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-30 00:45:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix displaying of long tinymce tables [SCI-11241]

Browse source
This commit is contained in:
Andrej 2024-11-07 15:47:51 +01:00
parent 83150f59c0
commit 7231224d84
4 changed files with 23 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/javascripts/my_modules/protocols.js
View file

@ -29,7 +29,8 @@ function initEditMyModuleDescription() {
}); });
setTimeout(function() { setTimeout(function() {
TinyMCE.wrapTables(viewObject); const notesContainerEl = document.getElementById('notes-container');
window.wrapTables(notesContainerEl);
}, 100); }, 100);
} }
@ -327,16 +328,6 @@ function initAccessModal() {
}); });
} }
function initWrapTables() {
const viewMode = new URLSearchParams(window.location.search).get('view_mode');
if (['archived', 'locked'].includes(viewMode)) {
setTimeout(() => {
const notesContainerEl = document.getElementById('notes-container');
window.wrapTables(notesContainerEl);
}, 100);
}
}
/** /**
* Initializes page * Initializes page
*/ */
@ -348,7 +339,6 @@ function init() {
initProtocolSectionOpenEvent(); initProtocolSectionOpenEvent();
initDetailsDropdown(); initDetailsDropdown();
initAccessModal(); initAccessModal();
initWrapTables();
} }
init(); init();

21
app/assets/javascripts/shareable_links/handson_table_wraping.js
View file

@ -1,17 +1,12 @@
/* global */ /* global */
(function () { (function () {
const rtf = $('.rtf-view').toArray(); $('.rtf-view').toArray().forEach((rtf) => {
for (let i = 0; i < rtf.length; i += 1) { $(rtf).find('table').toArray().forEach((table) => {
const container = $(rtf[i]).find('table').toArray(); if ($(table).parents('table').length === 0) {
$(table).css('float', 'none')
for (let j = 0; j < container.length; j += 1) { .wrapAll('<div class="table-wrapper w-full" style="overflow: auto"></div>');
const table = $(container[j]); }
if ($(table).parent().hasClass('table-wrapper')) return; });
});
$(table).wrap(`
<div class="table-wrapper w-full" style="overflow: auto;"></div>
`);
}
}
}()); }());

27
app/assets/javascripts/sitewide/utils.js
View file

@ -142,23 +142,14 @@ $.fn.initSubmitModal = function(modalID, modelName) {
* @returns {string} - HTML with tables wrapped. * @returns {string} - HTML with tables wrapped.
*/ */
function wrapTables(htmlStringOrDomEl) { function wrapTables(htmlStringOrDomEl) {
if (typeof htmlStringOrDomEl === 'string') { const htmlContent = `<span class="text-base">${htmlStringOrDomEl}</span>`;
const container = $(`<span class="text-base">${htmlStringOrDomEl}</span>`); const container = typeof htmlStringOrDomEl === 'string' ? $(htmlContent) : $(htmlStringOrDomEl);
container.find('table').toArray().forEach((table) => {
if ($(table).parent().hasClass('table-wrapper')) return; container.find('table').toArray().forEach((table) => {
$(table).css('float', 'none').wrapAll(` if ($(table).parents('table').length === 0) {
<div class="table-wrapper" style="overflow: auto; width: 100%"></div> $(table).css('float', 'none')
`); .wrapAll('<div class="table-wrapper w-full" style="overflow: auto"></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);
} }
} });
return container.prop('outerHTML');
} }

9
app/javascript/packs/tiny_mce.js vendored
View file

@ -489,11 +489,10 @@ window.TinyMCE = (() => {
}, },
wrapTables: (container) => { wrapTables: (container) => {
container.find('table').toArray().forEach((table) => { container.find('table').toArray().forEach((table) => {
if ($(table).parent().hasClass('table-wrapper')) return; if ($(table).parents('table').length === 0) {
$(table).css('float', 'none')
$(table).css('float', 'none').wrapAll(` .wrapAll('<div class="table-wrapper w-full" style="overflow: auto"></div>');
<div class="table-wrapper" style="overflow: auto; width: ${container.width()}px"></div> }
`);
}); });
} }
}; };