Fix issues with multiple TinyMCE instances in dialogs

Author: TatuLund

src/main/resources/META-INF/resources/frontend/tinymceConnector.js

@@ -105,12 +105,19 @@ window.Vaadin.Flow.tinymceConnector = {
                       ed.focus();
                     });
                     // Move aux element as child from body to element to fix menus in modal Dialog
-                    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);
-                }
+                    Array.from(document.getElementsByClassName('tox-tinymce-aux')).forEach(aux => {
+					  if (!aux.dontmove) {
+                        aux.parentElement.removeChild(aux);
+                        // Fix to allow menu grow outside Dialog
+                        aux.style.position = 'absolute';
+                        c.editor = ed;
+                        c.appendChild(aux);
+                      }
+                    });
+                } else {
+					const aux = document.getElementsByClassName('tox-tinymce-aux')[0];
+					aux.dontmove = true;
+				}
             });
 
             ed.on('change', function(e) {

src/main/resources/META-INF/resources/frontend/tinymceLumo.css

@@ -104,6 +104,10 @@ button.tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke {
   background-color: var(--lumo-primary-color-10pct);
 }
 
+.tox .tox-menu.tox-collection.tox-collection--list {
+  min-width: var(--tiny-mce-menu-width, 300px);
+}
+
 .tox-menu-nav__js.tox-collection__item.tox-collection__item {
   color: var(--lumo-body-text-color);
 }

src/test/java/org/vaadin/tinymce/EditorInDialog.java

@@ -4,33 +4,55 @@
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.Route;
 
 @Route
 public class EditorInDialog extends Div {
 
     public EditorInDialog() {
         Dialog dialog = new Dialog();
-//        dialog.setModal(false);
+        Dialog dialog2 = new Dialog();
 
         TinyMce editor = new TinyMce();
         editor.configure("plugins", "link");
 
+        TinyMce editor2 = new TinyMce();
+        editor2.configure("plugins", "link");
+
+        TinyMce editor3 = new TinyMce();
+        editor3.configure("plugins", "link");
+
+        TinyMce editor4 = new TinyMce();
+        editor4.configure("plugins", "link");
+
         editor.addValueChangeListener(e -> {
             reportValue(e.getValue());
         });
 
-        dialog.add(new Div(editor, new Button("show value", e -> {
+        dialog.add(new Div(new HorizontalLayout(editor, editor2), new Button("show value", e -> {
             reportValue(editor.getValue());
         }), new Button("close", e -> {
             dialog.close();
         })));
+
+        dialog2.add(new Div(new HorizontalLayout(editor4), new Button("show value", e -> {
+            reportValue(editor.getValue());
+        }), new Button("close", e -> {
+            dialog.close();
+        })));
+
         Button button = new Button("Open the editor dialog");
         button.addClickListener(event -> {
             dialog.open();
         });
 
-        add(button);
+        Button button2 = new Button("Open the editor dialog");
+        button2.addClickListener(event -> {
+            dialog2.open();
+        });
+
+        add(button, button2, editor3);
 
     }