[Bug]: Preview mode & automatic components borders toggling
Question
Hello again :)
Our team recently started customising the editor & removing the webpage preset, and we might have found some bugs related to the preview mode:
- When exiting preview mode, an error can be raised if the default
optionspanel has been removed, or if thesw-visibilitybutton has been removed from it (from here, ifeditor.Panels.getButton('options', 'sw-visibility')yieldsnull, cf #2589)
A proposed solution would be to loop through the panels collection (retrieved via editor.Panels.getPanels) to find the sw-visibility button, as well as adding null-checks to avoid errors.
- When the
preview& thesw-visibilitybuttons are in the same panel, the behaviour introduced by #2589 breaks, this seems to come from theButtonView'sactivechange listener, which deactivates all active buttons in the panel. So if the preview is activated, it deactivates thesw-visibilitybutton before running the command, which later breaks its active check.
I'm afraid I cannot propose a solution regarding this point 2. due to my lack of knowledge on possible side effects modifying the buttons active change listener. But I could work your suggestions in a PR if needed.
I'd be happy to open a PR, or since this is pretty closely related to #2636, fix both issues in one.
Cheers :)
Answers (3)
button would already be deactivated by the time Preview's run would be executed no matter what, is that correct ?
oh yeah, right 🤦♂
From your reply on the linked issue, I understand this behaviour is intended, so maybe the solution is simply to separate the two buttons contexts as you suggested ?
Ok, it might actually work... being in a different context it will not be stopped by other buttons, and you can also stop relying on buttons at all (as you said I can place it in another panel) and check instead the state of the command by using Commands.getActive API
if ('sw-visibility' in editor.Commands.getActive()) {
// sw-visibility is active
}
Thanks @mcottret for all the references, really well-written issue :)
When the preview & the sw-visibility buttons are in the same panel, the behaviour introduced by #2589 breaks, this seems to come from the ButtonView's active change listener , which deactivates all active buttons in the panel. So if the preview is activated, it deactivates the sw-visibility button before running the command, which later breaks its active check.
I think, in this case, we should actually create a variable flag by checking if the sw-visibility is active, before doing this:
https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/commands/view/Preview.js#L20
Then on stop, we check the variable stored on start (instead of the button)
Thanks for the reply @artf !
I'm sorry but I'm not sure how to make this work, from what I understand the active change listener gets executed before the Preview's run, so the sw-visibility button would already be deactivated by the time Preview's run would be executed no matter what, is that correct ?
From your reply on the linked issue, I understand this behaviour is intended, so maybe the solution is simply to separate the two buttons contexts as you suggested ?
What do you think about point 1. & my proposed solution ? I already added the safeguard in case the sw-visibility button would have been removed in this PR, but it does not handle a case where the sw-visibility button would be present in another / custom panel (with an id not equal to 'options').
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2636
[Bug]: Custom panels not hidden in preview mode
Hello again :) Our team recently started customising the editor & removing the webpage preset, and we might have found some bugs related to...
Issue #2863
[Bug]: Programmatic retrieval of layers' visibility always returns `true`
Hello again :) Our team might have found a bug while using the Layer Manager API: every call to component.viewLayer.isVisible() seems to al...
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
Issue #1745
[Feature]: Allow to import HTML documents
Hi Team, We are using grapesjs newsletter plugin in our project for importing and preview the template. We are facing some difficulty in re...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.