From c7ac9190c3c45eaedd0b8c85ea2e19b6d9e15b84 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Wed, 13 Jul 2022 18:02:35 +0200
Subject: [PATCH] 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             | 7 ++++++-
 app/javascript/vue/protocol/step.vue               | 2 +-
 app/javascript/vue/protocol/step_elements/text.vue | 1 +
 app/javascript/vue/shared/tinymce.vue              | 7 ++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index 9bee92bff..d62963908 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/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;
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 766a3990b..82f0eea68 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/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">
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index 2504aebb6..c357b17fb 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/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"
diff --git a/app/javascript/vue/shared/tinymce.vue b/app/javascript/vue/shared/tinymce.vue
index acb2706d6..0f04fef5b 100644
--- a/app/javascript/vue/shared/tinymce.vue
+++ b/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
         });