import React from 'react'

const ShowPlaintext = (props) => {
  return <div>
    <pre style={{whiteSpace: 'pre-wrap'}}>
      {props.text
        ? props.text
        : props.diff
          ? diffToPre(props.diff)
          : null
      }
    </pre>
  </div>
}

export default ShowPlaintext

function diffToPre (diff) {
  return diff.map((part, index) => (
      part.added
        ? <ins key={index}>{part.value}</ins>
        : part.removed
          ? <del key={index}>{part.value}</del>
          : <span key={index}>{part.value}</span>
    ))
}