WYSIWYG Insert Link, Insert Image, and Insert Audio Menus Close Too Quickly

[tk-roark]

• Winter CMS Build: 1.2.1
• Pages Plugin Version: 2.1.2
• PHP Version: 8.2.0

Description:

The Insert Link, Insert Image, and Insert Audio menus close quickly when attempting to use these menus more than once without refreshing the page. Here is an example of this happening with the Insert Link menu.

When editing an existing link the closes quickly on the first try, but a second attempt is usually successful and seems to reset the behavior for this menu and the menu displayed when using the Insert Link button on the WYSIWYG menu bar. Here is an example that shows how I was able to create a new link, but the Edit Link window closes quickly on the first attempt to edit the link. The window remains open on the second attempt.

The window also closes quickly after I update a value in one of the inputs in the link menu and then attempt to update the value in the other input.

The Insert Video and Insert Audio menus seem to behave in a similar fashion.

Steps To Reproduce:

• Open a static page
• Select the text and then create a link using the Insert Link button in the WYSIWYG menu bar
• Try to repeat the above step or attempt to edit the existing link.

[damsfx]

I can confirm this behavior, and I notice that when hitting the "save" button the page is saved, the flash message appears, but in the left column, the page icon still had an "unsaved" badge.

[LukeTowers]

@damsfx are you able to test if this behaviour exists in v2.0.3?

[damsfx]

@damsfx are you able to test if this behaviour exists in v2.0.3?

@LukeTowers I've just test the v2.0.3 and the behavior is the one expected.

In v2.1.2, I can't add more than two images, the third time I hint the insert image icon, the related modal disappear after 1~2s.
In the same time, when the modal disappear, a unsaved badge is added to the left page icon.

The unsaved badge is added each time a modal related to an editor icon is pressed, event if nothing is done.

[LukeTowers]

@jaxwilko can you take a look at this? I'm thinking this might be because of the new live preview functionality

[gviabcua]

Have a same problem after upgrade to 2.1.2

Winter CMS Build: 1.2.1
Pages Plugin Version: 2.1.2
PHP Version: 8.1.0

[ivang76]

I have a similar problem also with the "insert file" feature.

If I click on the first icon on the left (the black one in the screenshot), nothing happen, the media widget is not shown anymore.

(WinterCMS and Pages updated at the latest versions available)

[ivang76]

Hi @LukeTowers and @jaxwilko, sorry I don't wanna push but is there some timeline about the solving of this issue?

and btw, always related to the WYSIWYG editor I probably found another bug. When I'm in the html mode if I insert a <form> tag, it is removed when I save even if it is in the "allowed tags" list (backend editor settings). Does it happen only on my side?

thank you for your time

Ivan

[LukeTowers]

@ivang76 the fastest way for the issue to be solved is for you to submit a PR fixing it. While we appreciate issue reports and try to take care of any reported issues whenever we can the simple fact of the matter is that we have a limited amount of time to accomplish everything on our todo lists, and if we're not running into the issue ourselves or getting a lot of complaints about it there's simply too many other high priority tasks to deal with before we get to this.

[ivang76]

Hi Luke, yes I understand the situation... the problem is that at the moment I haven't yet find a solution for both the issues I reported (do you have some inputs or ideas maybe?). But if I'll find something before of you, for sure I'll try to help and will submit a PR.

[LukeTowers]

It looks like it's happening because froala is triggering a change event on an input element inside of the popup ($popup.find('input.fr-link-attr').trigger('change');) when attempting to refresh it with _refreshInsertPopup(). This change event then propagates to the richeditor field itself, which triggers the dependsOn logic on the preview field / tab which then somehow triggers the richeditor field to partially refresh.

[ivang76]

ok, thanks that you pointed out me with that details... and in your opinion what could be the reason (or where I can investigate) of the removing of <form> tag in the code editor even if is listed as allowed?

[LukeTowers]

Why are you trying to put a <form> tag in the code editor?

[ivang76]

Becasue I need to insert a form that let a user to login on another remote system, showing input fields and submit button in a section of a wintercms static page. Normally I would insert these elements via "html" mode of the rich text editor.

[mauserrifle]

Same issue here with the closing popups when adding text color or a link. Surprised it hasn't been fixed yet. I got like 10 clients suffering this bug. Searching a quick fix for now. Any update on this?

Edit: I disabled the preview functionality in Plugin.php below the comment "Add the Preview tab". This works as a temporary solution.

[LukeTowers]

@mauserrifle do you have any time to look a bit further into why the preview tab updating is causing the richeditor to partially refresh?

[mauserrifle]

Not in the short term but is on my todo. My guess and gut feeling is that there is some js event that is triggering because of a too broad element selector.

[LukeTowers]

Should be fixed by https://github.com/wintercms/winter/commit/23ba829f19e6062932f61efb390e36c91b8bc497 now; ran into this issue myself and got suitably annoyed by it to find a solution 😂

[LukeTowers]

@bennothommo if you'd care to review it that would be appreciated

[bennothommo]

@LukeTowers LGTM :+1:

[mauserrifle]

Great stuff! :smiley:

[AIC-BV]

Had this issue too, thanks for the fix! @LukeTowers I added your changes to my files but its not working (not even after hard refresh or open JS console). Am I missing something?

Test is being logged but box is still being closed in my richeditor field

this.editor.$box.on('change',function(e){console.log('----test');e.stopPropagation()});if(this.options.readOnly){this.editor.edit.off()}this.$el.on('keydown','.fr-view figure',this.proxy(this.onFigureKeydown))

---

1. Create a grouped repeater
2. Add a block with a richeditor
3. Try adding a link to the richeditor text => Popup keeps closing.

[LukeTowers]

Hmm, I'm not sure @AIC-BV. Are you able to replicate the issue on a fresh install of the winter develop branch?

[AIC-BV]

Hmm, I'm not sure @AIC-BV. Are you able to replicate the issue on a fresh install of the winter develop branch?

It works perfectly fine on StaticPages, it does not work in custom plugin

OK I found it... Plugin from someone else is doing post requests, every time the post request happens, the popup closes

window.setInterval(function () {
    $(form).request('onLockRecord');
}, 5000);

[LukeTowers]

Not sure how / if I can help you with that @AIC-BV, if it's not happening with any of the core plugins or the core itself I can't help.

[AIC-BV]

Not sure how / if I can help you with that @AIC-BV, if it's not happening with any of the core plugins or the core itself I can't help.

It was fixed in the plugin by the developer :)