weseek__growi/src/client/js/components/PageHistory/RevisionDiff.jsx

import React from 'react';
import PropTypes from 'prop-types';

import { createPatch } from 'diff';
import { html } from 'diff2html';

export default class RevisionDiff extends React.Component {

  render() {
    const currentRevision = this.props.currentRevision;
    const previousRevision = this.props.previousRevision;
    const revisionDiffOpened = this.props.revisionDiffOpened;


    let diffViewHTML = '';
    if (currentRevision.body
      && previousRevision.body
      && revisionDiffOpened) {

      let previousText = previousRevision.body;
      // comparing ObjectId
      // eslint-disable-next-line eqeqeq
      if (currentRevision._id == previousRevision._id) {
        previousText = '';
      }

      const patch = createPatch(
        currentRevision.path,
        previousText,
        currentRevision.body,
      );
      const option = {
        drawFileList: false,
        outputFormat: 'side-by-side',
      };

      diffViewHTML = html(patch, option);
    }

    const diffView = { __html: diffViewHTML };
    // eslint-disable-next-line react/no-danger
    return <div className="revision-history-diff d-table w-100" dangerouslySetInnerHTML={diffView} />;
  }

}

RevisionDiff.propTypes = {
  currentRevision: PropTypes.object.isRequired,
  previousRevision: PropTypes.object.isRequired,
  revisionDiffOpened: PropTypes.bool.isRequired,
};