Display: Fix visibility for label in html_editor components

assets/css/scss/atoms/_form.scss

@@ -75,16 +75,21 @@
 
   input:focus,
   input.p-filled,
+  .html-editor-container,
   textarea:focus,
   textarea.p-filled,
   .p-inputwrapper-focus,
   .p-inputwrapper-filled {
     ~ label {
-      @apply bg-white px-1 text-primary top-0 left-2;
+      @apply bg-white px-1 text-primary top-0 left-2 text-tiny;
       top: 0 !important;
     }
   }
 
+  .html-editor-container > div {
+    @apply pt-2 border-support-3 rounded-lg;
+  }
+
   .p-invalid ~ label {
     @apply text-error;
   }

assets/vue/components/documents/FormNewDocument.vue

@@ -7,36 +7,44 @@
       :label="$t('Title')"
     />
 
-    <TinyEditor
-      v-if="
-        (item.resourceNode &&
-          item.resourceNode.resourceFile &&
-          item.resourceNode.resourceFile.text) ||
-        item.newDocument
-      "
-      id="item_content"
-      v-model="item.contentFile"
-      :init="{
-        skin_url: '/build/libs/tinymce/skins/ui/oxide',
-        content_css: '/build/libs/tinymce/skins/content/default/content.css',
-        branding: false,
-        relative_urls: false,
-        height: 500,
-        toolbar_mode: 'sliding',
-        file_picker_callback: browser,
-        autosave_ask_before_unload: true,
-        plugins: [
-          'fullpage advlist autolink lists link image charmap print preview anchor',
-          'searchreplace visualblocks code fullscreen',
-          'insertdatetime media table paste wordcount emoticons ' +
+    <div class="field">
+      <div class="p-float-label">
+        <div class="html-editor-container">
+          <TinyEditor
+            v-if="
+          (item.resourceNode &&
+            item.resourceNode.resourceFile &&
+            item.resourceNode.resourceFile.text) ||
+          item.newDocument
+        "
+            id="item_content"
+            v-model="item.contentFile"
+            :init="{
+          skin_url: '/build/libs/tinymce/skins/ui/oxide',
+          content_css: '/build/libs/tinymce/skins/content/default/content.css',
+          branding: false,
+          relative_urls: false,
+          height: 500,
+          toolbar_mode: 'sliding',
+          file_picker_callback: browser,
+          autosave_ask_before_unload: true,
+          plugins: [
+            'fullpage advlist autolink lists link image charmap print preview anchor',
+            'searchreplace visualblocks code fullscreen',
+            'insertdatetime media table paste wordcount emoticons ' +
+              extraPlugins,
+          ],
+          toolbar:
+            'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl | ' +
             extraPlugins,
-        ],
-        toolbar:
-          'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl | ' +
-          extraPlugins,
-      }"
-      required
-    />
+        }"
+            required
+          />
+        </div>
+        <label v-t="'Content'"/>
+      </div>
+    </div>
+
     <!-- For extra content-->
     <slot></slot>
   </form>

public/main/inc/lib/formvalidator/Element/HtmlEditor.php

@@ -104,4 +104,36 @@ class HtmlEditor extends HTML_QuickForm_textarea
 
         return $result;
     }
+
+    public function getTemplate(string $layout): string
+    {
+        if (FormValidator::LAYOUT_HORIZONTAL === $layout) {
+            return '
+                <div class="field">
+                    <div class="p-float-label">
+                        <div class="html-editor-container">
+                            {element}
+                            {icon}
+                        </div>
+                        <label {label-for}>
+                            <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                            {label}
+                        </label>
+                    </div>
+                    <!-- BEGIN label_2 -->
+                        <small>{label_2}</small>
+                    <!-- END label_2 -->
+
+                     <!-- BEGIN label_3 -->
+                        <small>{label_3}</small>
+                    <!-- END label_3 -->
+
+                    <!-- BEGIN error -->
+                        <small class="p-error">{error}</small>
+                    <!-- END error -->
+                </div>';
+        }
+
+        return parent::getTemplate($layout);
+    }
 }