Elastic: Fix bug where it was possible to switch editor mode when 'htmleditor' was in 'dont_override' (#7143)

3 files changed, 15 insertions, 20 deletions

diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index d2f536b86..5e602c13f 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -27,6 +27,11 @@
     .mce-panel {
         border-color: @color-input-border;
     }
+
+    &.focused {
+        border-color: @color-input-border-focus !important;
+        box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
+    }
 }
 
 .mce-top-part::before,
@@ -904,11 +909,6 @@ html.touch .mce-grid td {
     #composebody_ifr {
         min-height: 30em;
     }
-
-    & > .mce-tinymce.focused {
-        border-color: @color-input-border-focus;
-        box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
-    }
 }
 
 
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index 34f0f9983..2accc102c 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -60,14 +60,6 @@
 				</div>
 			</div>
 			<roundcube:endif />
-			<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
-				<div class="form-group row hidden">
-					<label for="editor-selector" class="col-form-label col-6"><roundcube:label name="editortype" /></label>
-					<div class="col-6">
-						<roundcube:object name="editorSelector" id="editor-selector" editorid="composebody" noform="true" tabindex="2" />
-					</div>
-				</div>
-			<roundcube:endif />
 		</div>
 	</div>
 </div>
@@ -215,6 +207,9 @@
 		<div id="composebodycontainer">
 			<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
 			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
+			<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
+			<roundcube:object name="editorSelector" id="editor-selector" editorid="composebody" noform="true" class="hidden" />
+			<roundcube:endif />
 		</div>
 		</form>
 		<div class="formbuttons">
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index a82e3079a..d4553c181 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -235,7 +235,7 @@ function rcube_elastic_ui()
         // Image upload widget
         $('.image-upload').each(function() { image_upload_input(this); });
 
-        // Add HTML/Plain tabs (switch) on top of textarea with TinyMCE editor
+        // Add HTML/Plain switcher on top of textarea with TinyMCE editor
         $('textarea[data-html-editor]').each(function() { html_editor_init(this); });
 
         $('#dragmessage-menu,#dragcontact-menu').each(function() {
@@ -1351,7 +1351,7 @@ function rcube_elastic_ui()
     function tinymce_init(o)
     {
         var onload = [],
-            is_editor = $('#' + o.id).is('[data-html-editor]');
+            is_editor = $('#' + o.id).parent().is('.html-editor');
 
         // Enable autoresize plugin
         o.config.plugins += ' autoresize';
@@ -3655,7 +3655,7 @@ function rcube_elastic_ui()
     function html_editor_init(obj)
     {
         // Here we support two structures
-        // 1. <div><textarea></textarea><select name="editorSelector"></div>
+        // 1. <div><textarea></textarea><select class="hidden"></div>
         // 2. <tr><td><td><td><textarea></textarea></td></tr>
         //    <tr><td><td><td><input type="checkbox"></td></tr>
 
@@ -3682,9 +3682,12 @@ function rcube_elastic_ui()
             is_table = true;
         }
         else {
-            sw = $('[name="editorSelector"]', obj.form);
+            sw = editor.next('select.hidden');
         }
 
+        // make the textarea autoresizeable
+        textarea_autoresize_init(editor);
+
         // sanity check
         if (sw.length != 1) {
             return;
@@ -3707,9 +3710,6 @@ function rcube_elastic_ui()
             // Modify the textarea cell to use 100% width
             parent.addClass('col-sm-12');
         }
-
-        // make the textarea autoresizeable
-        textarea_autoresize_init(editor);
     };
 
     /**