From 54888d03bce502960b8ee98d337c74e538b75309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <xnpiochv@gmail.com>
Date: Tue, 19 Nov 2024 18:32:47 -0500
Subject: [PATCH] fix: TinyMce aux modal issues in text editors (#1500) (#1520)

The following bugs were found with the TinyMCE aux modal (used in emoticons, formulas and embed iframe):

* The TinyMCE aux modal and the Editor modal close when clicking on any content in the aux modal.
* When the user opens the Edit Source Code modal, this adds data-focus-on-hidden to the TinyMce aux modal, making it unusable (not clickable).
* Since they are two separate modals, the focus remains on the editor modal, making it impossible to use scrolling or inputs from the modal aux.

Solution: Move the aux modal inside the editor modal.

One discarded solution: Block the modal editor from closing when interacting with the modal aux. The modal editor still retained focus.
---
 .../sharedComponents/TinyMceWidget/hooks.js   | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
index 9f959f1638..8439b6bcd3 100644
--- a/src/editors/sharedComponents/TinyMceWidget/hooks.js
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -219,7 +219,32 @@ export const setupCustomBehavior = ({
       if (newContent) { updateContent(newContent); }
     });
   }
-  editor.on('ExecCommand', (e) => {
+
+  editor.on('init', /* istanbul ignore next */ () => {
+    // Moving TinyMce aux modal inside the Editor modal
+    // if the editor is on modal mode.
+    // This is to avoid issues using the aux modal:
+    // * Avoid close aux modal when clicking the content inside.
+    // * When the user opens the `Edit Source Code` modal, this adds `data-focus-on-hidden`
+    //   to the TinyMce aux modal, making it unusable.
+    const modalLayer = document.querySelector('.pgn__modal-layer');
+    const tinymceAux = document.querySelector('.tox.tox-tinymce-aux');
+
+    if (modalLayer && tinymceAux) {
+      modalLayer.appendChild(tinymceAux);
+    }
+  });
+
+  editor.on('ExecCommand', /* istanbul ignore next */ (e) => {
+    // Remove `data-focus-on-hidden` and `aria-hidden` on TinyMce aux modal used on emoticons, formulas, etc.
+    // When using the Editor in modal mode, it may happen that the editor modal is rendered
+    // before the TinyMce aux modal, which adds these attributes, making the TinyMce aux modal unusable.
+    const modalElement = document.querySelector('.tox.tox-silver-sink.tox-tinymce-aux');
+    if (modalElement) {
+      modalElement.removeAttribute('data-focus-on-hidden');
+      modalElement.removeAttribute('aria-hidden');
+    }
+
     if (editorType === 'text' && e.command === 'mceFocus') {
       const initialContent = editor.getContent();
       const newContent = module.replaceStaticWithAsset({