When any other dialog box in opened , when mathtype is already opened , either it should close or be underneath the dialog overlay about html-integrations HOT 6 CLOSED

Great @SIMRAN88 ! We will add this information and let you know when we start working in the issue.

from html-integrations.

Hi, Thank you for the report, we will add the issue in our list and work for it as soon as possible.
But first we will need some more information: which editor are you using and on which browser is the bug happening.

from html-integrations.

Hey @carlawiris. Thanks for your quick reply. We are using tinymce editor version 5.2.1. And we are testing in Chrome browser version 87.0.

from html-integrations.

Hi There, Any update on the issue?

from html-integrations.

Hi, @SIMRAN88

First of all, sorry for the late answer.

We've been analyzing this issue thoroughly and our conclusion is that it's more a feature request than a bug, itself.

At the same time, we understand your situation and we bring you a specific solution for this overlapping issue with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.

In fact, we offer you three different options for you to choose. 🥳

Let me explain myself, then. :)

01. The Problem

All TinyMCE plugins, both core and third-party, use HTML5 modal dialog windows to show their UI to the user.

This modal window allow developers to add dialogs to the HTML editor UX like for lightboxes, user notifications, forms or completely custom content.

While TinyMCE core plugins use their own Dialog UI component, other third-party plugins, like MathType, use their own implementation and UX abstraction.

These different implementations cause potential conflicts between the UI of some of the plugins activated on a TinyMCE editor instance.

02. How to mitigate this issue

These are some changes that can be considered in your project in order to mitigate and/or fix this issue.

A. Activate draggable_modal TinyMCE UI option

Recommended solution.

There is a TinyMCE user interface configuration option that could help fix and/or mitigate this issue.

Setting the draggable_modal option to true will enable dragging for any core plugin modal dialog: image, link, media, ....

Activating this will help users to share the screen viewport between TinyMCE and MathType modal windows without conflict.

Reference.

B. Activate wiriseditormodalwindowfullscreen MathType UI option

The default behaviour of MathType allows the user to interact with the web page under the MathType dialog window.

This is considered a feature since a lot of web projects using MathType depend on this UX abstraction to keep their users' process.

At the same time, this behaviour can be changed using the wiriseditormodalwindowfullscreen parameter.

It can take work on two modes: Normal and Maximized.

The Normal mode allows the user to interact with the elements on the page and it's the default behavior.

By setting the wiriseditormodalwindowfullscreen configuration setting to true the MathType Modal window will appear Maximized. This is the same default as the TinyMCE dialog modal windows.

This change will fix this issue since it will be impossible for the user to interact with the TinyMCE toolbar and, therefore, the issue can't be reproduced anymore.

Reference

C. A CSS fix on your application

Both Dialog UI component implementations, TinyMCE's and MathType's, use the z-index css property to control the modal windows visibility in terms of layer position.

While the TinyMCE sets the z-index value to 2, as defined by the CSS class tox-dialog.

.tox .tox-dialog {
    ...
    z-index: 2;
}

MathType sets the z-index value of is modal dialog box to 99999.

Therefore, by changing this value the MathType window will appear behind any TinyMCE Modal dialog component and the issue won't be reproducible, either.

To do that, add this CSS directive to your project:

.wrs_modal_dialogContainer {
    z-index: 2 !important   ;
}

That would be all..

Please, let me know if this information is helpful to you, so we could proceed to close the issue.

Again, many thanks for your patience.

Kind regards,

D.

from html-integrations.

Hola @SIMRAN88

I proceed to close the issue.

Kind regards.

from html-integrations.