Function useEuiTextDiff

packages/eui/src/components/text_diff/text_diff.tsx:50–96

({
  className,
  insertComponent = 'ins',
  deleteComponent = 'del',
  sameComponent,
  beforeText = '',
  afterText = '',
  timeout = 0.1,
  ...rest
}: EuiTextDiffProps)

  HTMLAttributes<HTMLElement>;

export const useEuiTextDiff = ({
  className,
  insertComponent = 'ins',
  deleteComponent = 'del',
  sameComponent,
  beforeText = '',
  afterText = '',
  timeout = 0.1,
  ...rest
}: EuiTextDiffProps) => {
  const textDiff = useMemo(() => {
    const diff = new Diff({ timeout }); // options may be passed to constructor

    return diff.main(beforeText, afterText);
  }, [beforeText, afterText, timeout]); // produces diff array

  const styles = useEuiMemoizedStyles(euiTextDiffStyles);

  const classes = classNames('euiTextDiff', className);

  const rendereredHtml = useMemo(() => {
    const html = [];
    if (textDiff)
      for (let i = 0; i < textDiff.length; i++) {
        let Element;
        const el = textDiff[i];
        if (el[0] === 1) Element = insertComponent;
        else if (el[0] === -1) Element = deleteComponent;
        else if (sameComponent) Element = sameComponent;
        if (Element) html.push(<Element key={i}>{el[1]}</Element>);
        else html.push(el[1]);
      }

    return html;
  }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array

  // specifically defining the return type here as the
  // inferred type is not correct: array vs tuple
  const textDiffResult: [JSX.Element, typeof textDiff] = [
    <span css={styles.euiTextDiff} className={classes} {...rest}>
      {rendereredHtml}
    </span>,
    textDiff,
  ];

  return textDiffResult;
};