TinyMCE and styling fixes [SCI-6956][SCI-6952][SCI-6948] (#4241)

* Also validate char count on paste in TinyMCE [SCI-6952]

* Fix new text tinymce init [SCI-6956]

* Fix step head styling [SCI-6952]

* Fix step dropdown icon [SCI-6948]

app/assets/stylesheets/steps/step.scss

@@ -17,15 +17,20 @@
     .step-element-header {
       border-radius: 4px;
       flex-basis: 80%;
+      position: relative;
 
       .step-name-edit-icon {
         display: none;
+        position: absolute;
+        right: -8px;
+        top: -6px;
       }
 
       &:hover .step-name-edit-icon {
         cursor: pointer;
         display: inline-block;
         margin-right: 16px;
+        margin-top: 16px;
       }
 
       .step-collapse-link {
@@ -218,7 +223,7 @@
 }
 
 .step-element-header {
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   min-height: 40px;
   position: relative;

app/javascript/vue/protocol/step.vue

@@ -95,7 +95,7 @@
         <div v-if="urls.update_url" class="step-actions-container">
           <div class="dropdown">
             <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="true">
-              <i class="fas fa-ellipsis-v"></i>
+              <i class="fas fa-ellipsis-h"></i>
             </button>
             <ul class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepInserMenu_' + step.id">
               <li class="title">

app/javascript/vue/protocol/step_elements/text.vue

@@ -24,6 +24,7 @@
       :fieldName="'step_text[text]'"
       :lastUpdated="element.attributes.orderable.updated_at"
       :characterLimit="100000"
+      :inEditMode="isNew"
       @update="update"
       @editingDisabled="disableEditMode"
       @editingEnabled="enableEditMode"

app/javascript/vue/shared/tinymce.vue

@@ -106,6 +106,11 @@
         return false
       }
     },
+    mounted() {
+      if (this.inEditMode) {
+        this.initTinymce();
+      }
+    },
     methods: {
       initTinymce() {
         let textArea = `#${this.objectType}_textarea_${this.objectId}`;
@@ -126,7 +131,7 @@
       initCharacterCount() {
         this.characterCount = $(this.editorInstance.getContent()).text().length
 
-        this.editorInstance.on('input', (e) => {
+        this.editorInstance.on('input paste', (e) => {
           this.characterCount = e.currentTarget.innerText.length
         });