Link popup partially hidden

[krajncmitja]

HI!

First of all I would like to say great extension! I am trying to build a form with your html editor and I found an interesting bug. The popup for editing link can sometimes be hidden or partially visible. This happens if you select text on far left side of editor and click on link button. This causes the popup for link to be partially hidden. This can be reproduced on your demo website.

[erinnmclaughlin]

Looks like this is (at least partly) due to overflow styling on the editor. Setting the overflow to hidden is currently required for the resize option to work, but does have this unwanted side-effect.

Will look into a better solution soon. Tagged this as help wanted so if anyone else wants to take a stab at this before I get to it!

[whyleee]

I found a way to fix link popup visibility by adding overflow: visible to the editor like @erinnmclaughlin suggested:

.html-editor .ql-container
{
    overflow: visible;
}

But to make it work in the rich-text editor inside MudBlazor dialog, you also need to pass bounds: '.mud-dialog' option to the Quill constructor. Unfortunately, there is no way to pass such options using MudHtmlEditor component, so you need to copy-paste the entire component and update one line in MudHtmlEditor.razor.js file.