Merge pull request #622 from magento/618_wysiwyg_toolbar

#618: Tabbing through Text Options Toolbar and exiting PageBuilder full screen does not close the toolbar

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js

@@ -12,7 +12,7 @@
          if="!isSnapshot()">
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>
-        <i click="function() { toggleFullScreen({animate:true}); }"
+        <i click="toggleFullScreen.bind($data, {animate:true})"
            css="'icon-pagebuilder-fullscreen': !isFullScreen(), 'icon-pagebuilder-fullscreen-exit': isFullScreen()"
            attr="{title: isFullScreen() ? $t('Close Full Screen') : $t('Open in Full Screen')}">
         </i>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js

@@ -92,7 +92,7 @@ export default class PageBuilder implements PageBuilderInterface {
      *
      * @param {StageToggleFullScreenParamsInterface} args
      */
-    public toggleFullScreen(args: StageToggleFullScreenParamsInterface): void {
+    public toggleFullScreen(args: StageToggleFullScreenParamsInterface): boolean {
         if (args.animate === false) {
             this.isFullScreen(!this.isFullScreen());
             return;
@@ -186,6 +186,8 @@ export default class PageBuilder implements PageBuilderInterface {
                 this.previousPanelHeight = null;
             }, 350);
         }
+
+        return true;
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -123,6 +123,26 @@ export default class Wysiwyg implements WysiwygInterface {
 
         // Update content in our stage preview wysiwyg after its slideout counterpart gets updated
         events.on(`form:${this.contentTypeId}:saveAfter`, this.setContentFromDataStoreToWysiwyg.bind(this));
+
+        events.on(`stage:${this.stageId}:fullScreenModeChangeAfter`, this.toggleFullScreen.bind(this));
+    }
+
+    /**
+     * Hide TinyMce inline toolbar options after fullscreen exit
+     */
+    public toggleFullScreen()
+    {
+        const $editor = $(`#${this.elementId}`);
+        // wait for fullscreen to close
+        _.defer(() => {
+            if (!checkStageFullScreen(this.stageId) &&
+                this.config.adapter_config.mode === "inline" &&
+                $editor.hasClass("mce-edit-focus")
+            ) {
+                $editor.removeClass("mce-edit-focus");
+                this.onBlur();
+            }
+        });
     }
 
     /**