Patch TinyMCE to work with modal Dialogs

parttio · Feb 2, 2024 · 2496f44 · 2496f44
1 parent a1185f5
commit 2496f44
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 25 deletions.
diff --git a/src/main/resources/META-INF/resources/frontend/tinymceConnector.js b/src/main/resources/META-INF/resources/frontend/tinymceConnector.js
@@ -34,19 +34,8 @@ window.Vaadin.Flow.tinymceConnector = {
               readonlyTimeout = setTimeout(() => {
                 this.editor.mode.set(enabled ? 'design' : 'readonly');
               }, 20);
-            },
-            isInDialog: function() {
-                let inDialog = false;
-                let parent = c.parentElement;
-                while(parent != null) {
-                    if(parent.tagName.toLowerCase().indexOf("vaadin-dialog") == 0) {
-                        inDialog = true;
-                        break;
-                    }
-                    parent = parent.parentElement;
-                }
-                return inDialog;
             }
+
           };
         }
 
@@ -94,22 +83,20 @@ window.Vaadin.Flow.tinymceConnector = {
             c.dispatchEvent(event);
           });
 
-          if(c.$connector.isInDialog()) {
-              // This is inside a shadowroot (Dialog in Vaadin)
-              // and needs some hacks to make this nagigateable with keyboard
-              if(!c.tabIndex) {
-                  // make the wrapping element also focusable
-                  c.setAttribute("tabindex", 0);
-              }
-              // on focus to wrapping element, pass forward to editor
-              c.addEventListener("focus", e=> {
-                ed.focus();
-              });
-          }
         };
 
         ta.innerHTML = initialContent;
 
+        // Move aux element as child to fix Dialog issues, TinyMCE is slow
+        // to init, thus timeout needed        
+        setTimeout(() => {
+          const aux = document.getElementsByClassName('tox-tinymce-aux')[0];
+          aux.parentElement.removeChild(aux);
+          // Fix to allow menu grow outside Dialog
+          aux.style.position = 'absolute';
+          c.appendChild(aux);
+        }, 500);
+
         tinymce.init(baseconfig);
 
     }

diff --git a/src/test/java/org/vaadin/tinymce/EditorInDialog.java b/src/test/java/org/vaadin/tinymce/EditorInDialog.java
@@ -11,7 +11,7 @@ public class EditorInDialog extends Div {
 
     public EditorInDialog() {
         Dialog dialog = new Dialog();
-        dialog.setModal(false);
+//        dialog.setModal(false);
 
         TinyMce editor = new TinyMce();
         editor.configure("plugins", "link");