diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js index 6262bb0c3..0c8b96f46 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js @@ -27,18 +27,21 @@ const TPL = `\ } body.mobile .classic-toolbar-widget.visible { - display: block; + display: flex; + align-items: flex-end; position: absolute; left: 0; bottom: 0; right: 0; + height: 50vh; overflow-x: auto; - background: var(--main-background-color); + background: transparent; z-index: 500; } body.mobile .classic-toolbar-widget .ck.ck-toolbar { position: absolute; + background-color: var(--main-background-color); } `; diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index 24585d5db..ac9a91726 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -228,11 +228,19 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { $classicToolbarWidget.addClass("visible"); }); + // Hide the formatting toolbar this.$editor.on("focusout", (e) => { setTimeout(() => { - if (document.activeElement !== this.$editor[0]) { - $classicToolbarWidget.removeClass("visible"); + if (document.activeElement === this.$editor[0]) { + // Editor has been refocused. + return; } + + if ($classicToolbarWidget[0].contains(document.activeElement)) { + return; + } + + $classicToolbarWidget.removeClass("visible"); }, 100); }); }