Decorate rich_text with word-diff highlights

app/assets/javascripts/vue_shared/components/lib/utils/diff_utils.js

@@ -12,6 +12,7 @@ function cleanSuggestionLine(line = {}) {
   return {
     ...line,
     text: trimFirstCharOfLineContent(line.text),
+    rich_text: trimFirstCharOfLineContent(line.rich_text),
   };
 }
 

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_row.vue

@@ -24,7 +24,8 @@ export default {
       {{ line.new_line }}
     </td>
     <td class="line_content" :class="lineType">
-      <span v-if="line.text">{{ line.text }}</span>
+      <span v-if="line.rich_text" v-html="line.rich_text"></span>
+      <span v-else-if="line.text">{{ line.text }}</span>
       <!-- TODO: replace this hack with zero-width whitespace when we have rich_text from BE -->
       <span v-else>&#8203;</span>
     </td>

app/serializers/suggestion_entity.rb

@@ -4,7 +4,9 @@ class SuggestionEntity < API::Entities::Suggestion
   include RequestAwareEntity
 
   unexpose :from_line, :to_line, :from_content, :to_content
-  expose :diff_lines, using: DiffLineEntity
+  expose :diff_lines, using: DiffLineEntity do |suggestion|
+    Gitlab::Diff::Highlight.new(suggestion.diff_lines).highlight
+  end
   expose :current_user do
     expose :can_apply do |suggestion|
       Ability.allowed?(current_user, :apply_suggestion, suggestion)

changelogs/unreleased/26543-add-word-diff-highlight-to-rich-text.yml

+---
+title: Apply word-diff highlighting to Suggestions
+merge_request: 22182
+author:
+type: changed

spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js

@@ -7,8 +7,8 @@ const oldLine = {
   meta_data: null,
   new_line: null,
   old_line: 5,
-  rich_text: '-oldtext',
-  text: '-oldtext',
+  rich_text: 'oldrichtext',
+  text: 'oldplaintext',
   type: 'old',
 };
 
@@ -18,8 +18,8 @@ const newLine = {
   meta_data: null,
   new_line: 6,
   old_line: null,
-  rich_text: '-newtext',
-  text: '-newtext',
+  rich_text: 'newrichtext',
+  text: 'newplaintext',
   type: 'new',
 };
 
@@ -42,14 +42,46 @@ describe('SuggestionDiffRow', () => {
     wrapper.destroy();
   });
 
-  it('renders correctly', () => {
-    factory({
-      propsData: {
-        line: oldLine,
-      },
+  describe('renders correctly', () => {
+    it('has the right classes on the wrapper', () => {
+      factory({
+        propsData: {
+          line: oldLine,
+        },
+      });
+
+      expect(wrapper.is('.line_holder')).toBe(true);
+    });
+
+    it('renders the rich text when it is available', () => {
+      factory({
+        propsData: {
+          line: newLine,
+        },
+      });
+
+      expect(wrapper.find('td.line_content').text()).toEqual('newrichtext');
     });
 
-    expect(wrapper.is('.line_holder')).toBe(true);
+    it('renders the plain text when it is available but rich text is not', () => {
+      factory({
+        propsData: {
+          line: Object.assign({}, newLine, { rich_text: undefined }),
+        },
+      });
+
+      expect(wrapper.find('td.line_content').text()).toEqual('newplaintext');
+    });
+
+    it('renders a zero-width space when it has no plain or rich texts', () => {
+      factory({
+        propsData: {
+          line: Object.assign({}, newLine, { rich_text: undefined, text: undefined }),
+        },
+      });
+
+      expect(wrapper.find('td.line_content').text()).toEqual('\u200B');
+    });
   });
 
   describe('when passed line has type old', () => {