scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 23:16:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix MarvinJS image toolbar [SCI-7934]

Browse source
This commit is contained in:
Martin Artnik 2023-02-17 15:43:57 +01:00
parent ed76fac640
commit fbf7e69100
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/application.js.erb
View file

@ -300,7 +300,7 @@ window.I18n = I18n
// Multiple modal support
// https://stackoverflow.com/a/24914782
$(document).on('shown.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
const zIndex = 2040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

27
app/javascript/packs/tinymce/image_toolbar/plugin.js
View file

@ -39,8 +39,33 @@ tinymce.PluginManager.add('custom_image_toolbar', (editor) => {
return elem.dataset.sourceType === 'marvinjs';
}
// This method removes image edit button groups if the selected image is a MarvinJS image
// Since there is no appropriate TinyMCE event to catch the render of the toolbar
// we need to rely on a MutationObserver, which will watch the TinyMCE context toolbar element,
// and then remove the two image editing groups.
function removeImageEditButtons() {
const tinyMceAuxNode = document.getElementsByClassName('tox-tinymce-aux')[0];
const tinyMceAuxNodeObserver = new MutationObserver(() => {
let toxPop = document.getElementsByClassName('tox-pop')[0];
if (!toxPop) return;
let toolbarGroups = toxPop.getElementsByClassName('tox-toolbar__group');
if (toolbarGroups[3]) {
toolbarGroups[2].classList.add('hidden');
toolbarGroups[3].classList.add('hidden');
}
});
tinyMceAuxNodeObserver.observe(tinyMceAuxNode, { attributes: false, childList: true, subtree: false });
// We can stop observing once the toolbar was loaded and changed.
setTimeout(() => { tinyMceAuxNodeObserver.disconnect() }, 100);
return true;
}
editor.ui.registry.addContextToolbar('marvinJsToolbar', {
predicate: (node) => isMarvinJs(node),
predicate: (node) => isMarvinJs(node) && removeImageEditButtons(),
items: 'marvinjs_edit',
position: 'node',
scope: 'node'