TinyMCE fixes [SCI-7033] (#4308)

app/assets/stylesheets/my_modules/protocol.scss

@@ -78,6 +78,9 @@
       }
     }
   }
+  .tinymce-wrapper {
+    width: 100%;
+  }
   .tinymce-container {
     display: flex;
     width: 100%;

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -381,6 +381,10 @@
 
   .task-notes-content {
     margin-left: 10px;
+
+    .form-group.has-error {
+      border: 1px solid $brand-danger;
+    }
   }
 }
 

app/javascript/vue/mixins/utils.js

@@ -13,6 +13,9 @@ export default {
       }
 
       return text;
+    },
+    numberWithSpaces(x) {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
     }
   }
 };

app/javascript/vue/protocol/container.vue

@@ -134,7 +134,7 @@
   import Tinymce from 'vue/shared/tinymce.vue'
   import ReorderableItemsModal from 'vue/protocol/modals/reorderable_items_modal.vue'
 
-  import UtilsMixin from 'vue/protocol/mixins/utils.js'
+  import UtilsMixin from 'vue/mixins/utils.js'
 
   export default {
     name: 'ProtocolContainer',

app/javascript/vue/protocol/step.vue

@@ -185,7 +185,7 @@
   import clipboardPasteModal from 'vue/protocol/step_attachments/clipboard_paste_modal.vue'
   import ReorderableItemsModal from 'vue/protocol/modals/reorderable_items_modal.vue'
 
-  import UtilsMixin from 'vue/protocol/mixins/utils.js'
+  import UtilsMixin from 'vue/mixins/utils.js'
   import AttachmentsMixin from 'vue/protocol/mixins/attachments.js'
   import StorageUsage from 'vue/protocol/storage_usage.vue'
 

app/javascript/vue/shared/inline_edit.vue

@@ -30,6 +30,8 @@
 </template>
 
 <script>
+  import UtilsMixin from 'vue/mixins/utils.js';
+
   export default {
     name: 'InlineEdit',
     props: {
@@ -52,6 +54,7 @@
         newValue: ''
       }
     },
+    mixins: [UtilsMixin],
     created( ){
       this.newValue = this.value || '';
     },
@@ -77,7 +80,10 @@
         if(this.characterLimit && this.newValue.length > this.characterLimit) {
           return(
             this.i18n.t('inline_edit.errors.over_limit',
-              { attribute: this.attributeName, limit: this.characterLimit }
+              {
+                attribute: this.attributeName,
+                limit: this.numberWithSpaces(this.characterLimit)
+              }
             )
           )
         }

app/javascript/vue/shared/tinymce.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="tinymce-wrapper">
     <div class="tinymce-container" :class="{ 'error': error }">
       <form class="tiny-mce-editor" role="form" :action="updateUrl" accept-charset="UTF-8" data-remote="true" method="post">
         <input type="hidden" name="_method" value="patch">
@@ -29,7 +29,6 @@
         <div class="form-group">
           <textarea :id="`${objectType}_textarea_${objectId}`"
                     class="form-control hidden"
-                    :placeholder="placeholder"
                     autocomplete="off"
                     :data-tinymce-object="`tinymce-${objectType}-description-${objectId}`"
                     :data-object-type="objectType"
@@ -47,13 +46,15 @@
         </div>
       </form>
     </div>
-    <div v-if="error" class="tinymce-error">
+    <div v-if="active && error" class="tinymce-error">
       {{ error }}
     </div>
   </div>
 </template>
 
 <script>
+  import UtilsMixin from 'vue/mixins/utils.js';
+
   export default {
     name: 'Tinymce',
     props: {
@@ -75,13 +76,15 @@
       return {
         editorInstance: null,
         characterCount: 0,
-        blurEventHandler: null
+        blurEventHandler: null,
+        active: false
       }
     },
+    mixins: [ UtilsMixin ],
     watch: {
       inEditMode() {
         if (this.inEditMode) {
-          this.initTinymce()
+          this.initTinymce();
         }
       },
       characterCount() {
@@ -98,7 +101,10 @@
           return(
             this.i18n.t(
               'inline_edit.errors.over_limit',
-              { attribute: this.i18n.t('general.text.name'), limit: this.characterLimit }
+              {
+                attribute: this.i18n.t('general.text.name'),
+                limit: this.numberWithSpaces(this.characterLimit)
+              }
             )
           )
         }
@@ -121,6 +127,7 @@
           this.$emit('editingDisabled')
         }).then((editorInstance) => {
           this.editorInstance = editorInstance[0]; // TinyMCE initialization returns an array
+          this.active = true;
           this.initCharacterCount();
         });
         this.$emit('editingEnabled')
@@ -129,12 +136,16 @@
         return $(`meta[name=\'${name}\']`).attr('content');
       },
       initCharacterCount() {
+        if (!this.editorInstance) return;
+
         this.characterCount = $(this.editorInstance.getContent()).text().length
 
-        this.editorInstance.on('input paste', (e) => {
-          this.characterCount = e.currentTarget.innerText.length
+        this.editorInstance.on('input change paste keydown', (e) => {
+          e.currentTarget && (this.characterCount = (e.currentTarget).innerText.length);
         });
 
+        this.editorInstance.on('remove', () => this.active = false)
+
         // clear error on cancel
         $(this.editorInstance.container).find('.tinymce-cancel-button').on('click', ()=> {
           this.characterCount = 0;