diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss
index c0d14a5aa..896f3dda5 100644
--- a/app/assets/stylesheets/my_modules/protocol.scss
+++ b/app/assets/stylesheets/my_modules/protocol.scss
@@ -78,6 +78,9 @@
       }
     }
   }
+  .tinymce-wrapper {
+    width: 100%;
+  }
   .tinymce-container {
     display: flex;
     width: 100%;
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 03bede594..36433fdda 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/app/javascript/vue/protocol/mixins/utils.js b/app/javascript/vue/mixins/utils.js
similarity index 80%
rename from app/javascript/vue/protocol/mixins/utils.js
rename to app/javascript/vue/mixins/utils.js
index 4d856bd0a..c940fbf37 100644
--- a/app/javascript/vue/protocol/mixins/utils.js
+++ b/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, " ");
     }
   }
 };
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index f4ac2e5d4..749a8286b 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/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',
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index e5d30d8f0..52ed15158 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/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'
 
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index fe582c70b..89952cdf4 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/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)
+              }
             )
           )
         }
diff --git a/app/javascript/vue/shared/tinymce.vue b/app/javascript/vue/shared/tinymce.vue
index 0f04fef5b..0c4303642 100644
--- a/app/javascript/vue/shared/tinymce.vue
+++ b/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;