Added useEuiTextDiff hook

package.json

@@ -57,6 +57,7 @@
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
+    "html-react-parser": "^0.10.3",
     "keymirror": "^0.1.1",
     "lodash": "^4.17.11",
     "numeral": "^2.0.6",
@@ -69,6 +70,7 @@
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
+    "text-diff": "^1.0.1",
     "uuid": "^3.1.0"
   },
   "devDependencies": {

src-docs/src/views/code/code_example.js

@@ -4,7 +4,11 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiCodeBlockImpl,
+  EuiTextDiff,
+} from '../../../../src/components';
 
 import Code from './code';
 const codeSource = require('!!raw-loader!./code');
@@ -23,6 +27,14 @@ import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
 const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
+import TextDiff from './text_diff';
+const textDiffSource = require('!!raw-loader!./text_diff');
+const textDiffHtml = renderToHtml(TextDiff);
+
+import NoDeletion from './text_diff_no_deletions';
+const noDeletionSource = require('!!raw-loader!./text_diff_no_deletions');
+const noDeletionHtml = renderToHtml(NoDeletion);
+
 export const CodeExample = {
   title: 'Code',
   sections: [
@@ -95,5 +107,45 @@ export const CodeExample = {
       props: { EuiCodeBlockImpl },
       demo: <CodeBlockPre />,
     },
+    {
+      title: 'Text Diff',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: textDiffSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: textDiffHtml,
+        },
+      ],
+      text: (
+        <p>
+          <strong>EuiTextDiff</strong> is for making text comparisions.
+        </p>
+      ),
+      demo: <TextDiff />,
+      props: { EuiTextDiff },
+    },
+    {
+      title: 'Text Diff without deletions',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: noDeletionSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: noDeletionHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>showDeletion</EuiCode> is used for hiding/showing deletions.
+        </p>
+      ),
+      demo: <NoDeletion />,
+      props: { EuiTextDiff },
+    },
   ],
 };

src-docs/src/views/code/text_diff.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { EuiTextDiff } from '../../../../src/components';
+
+export default () => {
+  const initialText =
+    'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy';
+  const currentText =
+    'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day';
+
+  const onGetDataFormat = data => console.log(data);
+
+  return (
+    <EuiTextDiff
+      fontSize="m"
+      paddingSize="m"
+      initialText={initialText}
+      currentText={currentText}
+      showDeletion={true}
+      getDataFormat={onGetDataFormat}
+    />
+  );
+};

src-docs/src/views/code/text_diff_no_deletions.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { EuiTextDiff } from '../../../../src/components';
+
+export default () => {
+  const initialText =
+    'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy';
+  const currentText =
+    'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day';
+
+  const onGetDataFormat = data => console.log(data);
+
+  return (
+    <EuiTextDiff
+      fontSize="m"
+      paddingSize="m"
+      initialText={initialText}
+      currentText={currentText}
+      showDeletion={false}
+      getDataFormat={onGetDataFormat}
+    />
+  );
+};

src/components/code/_code_block.tsx

@@ -17,15 +17,17 @@ import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
 import { FontSize, PaddingSize } from './code';
 
-const fontSizeToClassNameMap = {
+export const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
   m: 'euiCodeBlock--fontMedium',
   l: 'euiCodeBlock--fontLarge',
 };
 
 export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
 
-const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
+export const paddingSizeToClassNameMap: {
+  [paddingSize in PaddingSize]: string
+} = {
   none: '',
   s: 'euiCodeBlock--paddingSmall',
   m: 'euiCodeBlock--paddingMedium',

src/components/code/_index.scss

@@ -1 +1,2 @@
 @import 'code_block';
+@import 'text_diff';

src/components/code/_text_diff.scss

@@ -0,0 +1,43 @@
+.euiTextDiff {
+  display: block;
+  position: relative;
+  background: $euiCodeBlockBackgroundColor;
+  color: $euiCodeBlockColor;
+  box-sizing: border-box;
+  line-height: $euiLineHeight;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: $euiFontWeightRegular;
+
+  del {
+    color: $euiColorDanger;
+  }
+
+  ins {
+    color: $euiColorSecondary;
+  }
+}
+
+.euiTextDiff--paddingMedium  {
+  padding: $euiSize;
+}
+
+.euiTextDiff--paddingLarge {
+  padding: $euiSizeL;
+}
+
+.euiTextDiff--paddingSmall {
+  padding: $euiSizeS;
+}
+
+.euiTextDiff--fontSmall {
+  font-size: $euiFontSizeXS;
+}
+
+.euiTextDiff--fontMedium {
+  font-size: $euiFontSizeS;
+}
+
+.euiTextDiff--fontLarge {
+  font-size: $euiFontSize;
+}

src/components/code/index.ts

@@ -1,3 +1,4 @@
 export { EuiCode, EuiCodeProps } from './code';
 export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 export { EuiCodeBlockImpl } from './_code_block';
+export { EuiTextDiff } from './text_diff';

src/components/code/text-diff.d.ts

@@ -0,0 +1 @@
+declare module 'text-diff';

src/components/code/text_diff.tsx

@@ -0,0 +1,107 @@
+import { CommonProps } from '../common';
+
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import Diff from 'text-diff';
+import classNames from 'classnames';
+import parse from 'html-react-parser';
+import { FontSize, PaddingSize } from './code';
+
+export const fontSizeToClassNameMap = {
+  s: 'euiTextDiff--fontSmall',
+  m: 'euiTextDiff--fontMedium',
+  l: 'euiTextDiff--fontLarge',
+};
+
+export const paddingSizeToClassNameMap: {
+  [paddingSize in PaddingSize]: string
+} = {
+  none: '',
+  s: 'euiTextDiff--paddingSmall',
+  m: 'euiTextDiff--paddingMedium',
+  l: 'euiTextDiff--paddingLarge',
+};
+
+export interface EuiTextDiffSharedProps {
+  paddingSize?: PaddingSize;
+
+  /**
+   * Sets the syntax highlighting for a specific language
+   * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
+   * for options
+   */
+  language?: string;
+  overflowHeight?: number;
+  fontSize?: FontSize;
+  transparentBackground?: boolean;
+  isCopyable?: boolean;
+}
+interface DataFormat {
+  type: string;
+  content: any;
+}
+
+interface Props extends EuiTextDiffSharedProps {
+  inline?: true;
+  fontSize: FontSize;
+  paddingSize: PaddingSize;
+  currentText: string;
+  initialText: string;
+  showDeletion?: boolean;
+  getDataFormat?: (data: DataFormat[]) => void;
+}
+
+export type EuiTextDiffProps = CommonProps &
+  Props &
+  HTMLAttributes<HTMLElement>;
+
+export const EuiTextDiff: FunctionComponent<EuiTextDiffProps> = ({
+  inline,
+  fontSize,
+  paddingSize,
+  initialText,
+  currentText,
+  showDeletion = true,
+  getDataFormat,
+  ...rest
+}) => {
+  const diff = new Diff(); // options may be passed to constructor; see below
+  const textDiff = diff.main(initialText, currentText); // produces diff array
+
+  const dataFormat = () => {
+    return [...textDiff]
+      .filter(el => el[0] !== 0)
+      .map(el => {
+        if (el[0] === -1) {
+          return {
+            type: 'delete',
+            content: el[1],
+          };
+        } else {
+          return {
+            type: 'insert',
+            content: el[1],
+          };
+        }
+      });
+  };
+
+  const classes = classNames(
+    'euiTextDiff',
+    fontSizeToClassNameMap[fontSize],
+    paddingSizeToClassNameMap[paddingSize]
+  );
+  let htmlString = diff.prettyHtml(textDiff);
+
+  if (!showDeletion) {
+    htmlString = htmlString.replace(/<del>[A-z]*<\/del>/g, '');
+  }
+  const rendereredHtml = parse(htmlString);
+
+  if (getDataFormat) getDataFormat(dataFormat());
+
+  return (
+    <div className={classes} {...rest}>
+      {rendereredHtml}
+    </div>
+  );
+};

src/components/index.js

@@ -33,7 +33,7 @@ export { EuiCallOut } from './call_out';
 
 export { EuiCard, EuiCheckableCard } from './card';
 
-export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code';
+export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl, EuiTextDiff } from './code';
 
 export { EuiCodeEditor } from './code_editor';