Add smart annotation to comments [SCI-3458] (#1768)

* Add smart annotation to comments

app/assets/javascripts/shared/inline_editing.js

@@ -1,7 +1,12 @@
 /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "initInlineEditing" }]*/
+/* global SmartAnnotation */
 function initInlineEditing(title) {
   var editBlocks = $('.' + title + '-editable-field');
 
+  function prepareText(text) {
+    return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+  }
+
   $.each(editBlocks, function(i, element) {
     var editBlock = element;
     var $editBlock = $(editBlock);
@@ -12,17 +17,14 @@ function initInlineEditing(title) {
     $editBlock.addClass('inline-edit-active');
     if ($inputString.length === 0) {
       $inputString = $editBlock.find('textarea');
-      $inputString.off('keydown').on('keydown', function() {
-        var el = this;
-        setTimeout(() => {
-          el.style.cssText = 'height:0px; padding:0';
-          el.style.cssText = 'height:' + (el.scrollHeight + 10) + 'px';
-        }, 0);
-      });
-      $inputString.keydown();
     }
+
     inputString = $inputString[0];
 
+    if (editBlock.dataset.smartAnnotation === 'true') {
+      SmartAnnotation.init($inputString);
+    }
+
     function saveAllEditFields() {
       $('.inline-edit-active').find('.save-button').click();
     }
@@ -33,6 +35,8 @@ function initInlineEditing(title) {
       if (inputString.value === editBlock.dataset.originalName) {
         inputString.disabled = true;
         editBlock.dataset.editMode = 0;
+        $inputString.addClass('hidden');
+        $editBlock.find('.view-mode').removeClass('hidden');
         return false;
       }
       params[editBlock.dataset.paramsGroup] = {};
@@ -42,9 +46,21 @@ function initInlineEditing(title) {
         type: 'PUT',
         dataType: 'json',
         data: params,
-        success: function() {
+        success: function(result) {
+          var viewData;
+          if (editBlock.dataset.responseField) {
+            // If we want to modify preview element on backend
+            // we can use this data field and we will take string from response
+            viewData = result[editBlock.dataset.responseField];
+          } else {
+            // By default we just copy value from input string
+            viewData = inputString.value;
+          }
           editBlock.dataset.originalName = inputString.value;
           editBlock.dataset.error = false;
+          $inputString.addClass('hidden');
+          $editBlock.find('.view-mode').html(prepareText(viewData)).removeClass('hidden');
+
           inputString.disabled = true;
           editBlock.dataset.editMode = 0;
         },
@@ -63,21 +79,28 @@ function initInlineEditing(title) {
       return true;
     }
 
-    $editBlock.click(e => {
+    $editBlock.click((e) => {
+      // 'A' mean that, if we click on <a></a> element we will not go in edit mode
+      if (e.target.tagName === 'A') return true;
       if (inputString.disabled) {
         saveAllEditFields();
         editBlock.dataset.editMode = 1;
         inputString.disabled = false;
+        $inputString.removeClass('hidden');
+        $editBlock.find('.view-mode').addClass('hidden');
         $inputString.focus();
       }
       e.stopPropagation();
+      return true;
     });
 
-    $(window).click(() => {
+    $(window).click((e) => {
+      if ($(e.target).closest('.atwho-view').length > 0) return false;
       if (inputString.disabled === false) {
         updateField();
       }
       editBlock.dataset.editMode = 0;
+      return true;
     });
 
     $($editBlock.find('.save-button')).click(e => {
@@ -90,6 +113,8 @@ function initInlineEditing(title) {
       editBlock.dataset.editMode = 0;
       editBlock.dataset.error = false;
       inputString.value = editBlock.dataset.originalName;
+      $inputString.addClass('hidden');
+      $editBlock.find('.view-mode').removeClass('hidden');
       $inputString.keydown();
       e.stopPropagation();
     });

app/assets/stylesheets/partials/_inline_editing.scss

@@ -54,7 +54,8 @@
     }
   }
 
-  &:hover input {
+  &:hover input,
+  &:hover .view-mode {
     border: 1px solid $color-silver;
 
     &:disabled {
@@ -62,6 +63,15 @@
     }
   }
 
+  .view-mode {
+    border: 1px solid transparent;
+    cursor: pointer;
+    line-height: 26px;
+    padding: 8px 5px;
+    padding-right: 36px;
+    width: calc(100% - 36px);
+  }
+
   input {
     border: 1px solid $color-silver;
     border-radius: $border-radius-small;

app/assets/stylesheets/steps.scss

@@ -291,6 +291,17 @@
       float: left;
       width: 100%;
 
+      .view-mode {
+        border: 1px solid transparent;
+        border-radius: $border-radius-small;
+        display: inline-block;
+        line-height: 16px;
+        min-height: 20px;
+        overflow: hidden;
+        padding: 2px 5px;
+        width: 100%;
+      }
+
       textarea {
         border: 1px solid $color-silver;
         border-radius: $border-radius-small;
@@ -383,7 +394,8 @@
       width: 220px;
     }
 
-    textarea:disabled {
+    textarea:disabled,
+    .view-mode {
       border: 1px solid $color-gainsboro;
       cursor: pointer;
     }
@@ -415,6 +427,13 @@
     .error-block {
       display: block;
     }
+
+    .comment-actions {
+
+      .edit-buttons {
+        display: inline !important;
+      }
+    }
   }
 }
 

app/controllers/step_comments_controller.rb

@@ -101,7 +101,8 @@ class StepCommentsController < ApplicationController
           # Generate activity
           log_activity(:edit_step_comment)
 
-          message = custom_auto_link(@comment.message, team: current_team)
+          message = custom_auto_link(@comment.message, simple_format: false,
+              tags: %w(img), team: current_team)
           render json: { comment: message }, status: :ok
         else
           render json: { errors: @comment.errors.to_hash(true) },

app/views/shared/_inline_editing.html.erb

@@ -6,7 +6,8 @@
   data-original-name="<%= initial_value %>"
   error="false"
 >
-  <input type="text" value="<%= initial_value %>" disabled/>
+  <div class="view-mode"><%= initial_value %></div>
+  <input class="hidden" type="text" value="<%= initial_value %>" disabled/>
   <div class="button-container">
     <span class="save-button"><i class="fas fa-check"></i></span>
     <span class="cancel-button"><i class="fas fa-times"></i></span>

app/views/steps/comments/_item.html.erb

@@ -5,6 +5,8 @@
     data-params-group="comment"
     data-path-to-update="<%= step_step_comment_path(comment.step, comment, format: :json) %>"
     data-original-name="<%= comment.message %>"
+    data-response-field="comment"
+    data-smart-annotation="true"
     error="false"
   >
     <div class="avatar-placehodler">
@@ -34,7 +36,13 @@
         <% end %>
       </div>
       <div class="comment-message">
-            <%= text_area_tag 'message', comment.message, disabled: true %>
+           <div class="view-mode"><%= custom_auto_link(comment.message,
+                                                          simple_format: false,
+                                                          tags: %w(img br), 
+                                                          team: current_team).gsub(/\n/, '<br/>').html_safe %></div>
+            <% if user_comment %>
+              <%= text_area_tag 'message', comment.message, disabled: true, class: 'smart-text-area hidden' %>
+            <% end %>
       </div>
       <div class="error-block"></div>
     </div>