Highlight placeables in diff view (mozilla#4007)

Fixes mozilla#2714

When toggling the diff view in the history panel, placeables were not being
highlighted. This happened because TranslationDiff rendered raw text slices from
diff match patch bypassing the highlight component that marks up placeables.

This wraps each diff slice with highlight so that the placeables are marked
whether or not the diff view is active

Author: MundiaNderi

translate/src/modules/diff/components/TranslationDiff.test.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { TranslationDiff } from './TranslationDiff';
+import { MockLocalizationProvider } from '~/test/utils';
+import { mount } from 'enzyme';
 import { render } from '@testing-library/react';
 
 describe('<TranslationDiff>', () => {
@@ -23,4 +25,16 @@ describe('<TranslationDiff>', () => {
     expect(container.querySelector('del')).toBeNull();
     expect(container).toHaveTextContent(/^abcdef$/);
   });
+
+  it('highlights placeables in diff slices', () => {
+    const wrapper = mount(
+      <MockLocalizationProvider>
+        <TranslationDiff
+          base={'Delavci { -brand-short-name } posodobljeno'}
+          target={'Delavci { -brand-short-name } posodobljeno'}
+        />
+      </MockLocalizationProvider>,
+    );
+    expect(wrapper.find('mark.placeable').length).toBeGreaterThan(0);
+  });
 });

translate/src/modules/diff/components/TranslationDiff.tsx

@@ -1,6 +1,6 @@
 import { diff_match_patch, DIFF_INSERT, DIFF_DELETE } from 'diff-match-patch';
 import React from 'react';
-
+import { Highlight } from '~/modules/placeable/components/Highlight';
 import './TranslationDiff.css';
 
 const dmp = new diff_match_patch();
@@ -27,13 +27,21 @@ export function TranslationDiff({ base, target }: Props): React.ReactElement {
       {diff.map(([type, slice], index) => {
         switch (type) {
           case DIFF_INSERT:
-            return <ins key={index}>{slice}</ins>;
+            return (
+              <ins key={index}>
+                <Highlight>{slice}</Highlight>
+              </ins>
+            );
 
           case DIFF_DELETE:
-            return <del key={index}>{slice}</del>;
+            return (
+              <del key={index}>
+                <Highlight>{slice}</Highlight>
+              </del>
+            );
 
           default:
-            return slice;
+            return <Highlight key={index}>{slice}</Highlight>;
         }
       })}
     </>