react-froala-wysiwyg icon indicating copy to clipboard operation
react-froala-wysiwyg copied to clipboard

Going to fullscreen doesn't update the toolbar buttons

Open trainbolt opened this issue 5 years ago • 2 comments

If you have a small editor and use the toolbarButtonsXS with only a few buttons, but have all/or more buttons for toolbarButtons/SM/MD and you click on the fullscreen button the editor does not update to show the full buttons, it will instead keep the few from toolbarButtonsXS. If you resize the window slightly it then snaps in the correct buttons. Returning from fullscreen then does not get updated back to what it should be.

Please see this fiddle for reproducing - https://jsfiddle.net/2svxfek4/

I've tried this sort of thing - does not work. "commands.before": function (cmd) { if (cmd === "fullscreen") { this.size.refresh(); } },

Also, that brings up another issue. commands.after never passes "fullscreen" so that's why I had to use commands.before which does. Should fix that as well.

Thanks.

trainbolt avatar Apr 02 '20 05:04 trainbolt

The only workaround for right now is (afaik):

  1. Make updates to the files mentioned here: https://github.com/froala/wysiwyg-editor/issues/3803#issuecomment-608960423

  2. Trigger a window resize event... setTimeout 0 to run it after the current event loop tick.

"commands.before": function(cmd) {
  if (cmd === "fullscreen") {
    setTimeout(() => window.dispatchEvent(new Event("resize")), 0);
  }
}

trainbolt avatar Apr 04 '20 05:04 trainbolt

The toolbar does not show buttons listed for a larger window when the editor is initiated in a smaller window and resized to a larger window.

When searching the documentation, I could not find an event for toolbar screen size changes. Kindly consider adding one, this could be helpful in some cases.

Link to fiddle to reproduce this issue. https://jsfiddle.net/yga6djec/2/

Vignesh-Manogar-E3433 avatar Sep 15 '22 06:09 Vignesh-Manogar-E3433