Add char diff option

[bstst]

I've seen this requested here #28, and now I find the need for this myself, so I'm suggesting this PR:

Adding a useCharDiff option, enabled by default, with which the diff works just the way it works in the latest build, so this not a breaking change.

Once you do useCharDiff={false}, it will calculate the diff based on words, not chars.

[praneshr]

Thanks for the PR. Go through the review comment and feel free to suggest.

[praneshr]

Can be replaced with the following for better readability.

const diffArray = useCharDiff ? diff.diffChars(oldValue, newValue) : diff.diffChars(oldValue, newValue)

[praneshr]

The default value should be false else it will break the existing behaviour.

[bstst]

At the moment compute-lines.ts is doing diff.diffChars(oldValue, newValue), which is the same as having true as default value for this option, or am I confusing something?

[praneshr]

useCharDiff sounds confusing. What will happen when disableWordDiff: true and useCharDiff: true?

I would prefer to have one prop to control this. Say, diffType and it can take 3 possible values.

diffType: line|lineAndWord|lineAndChar

line: It will be the default behaviour. It shows the line-wise diff.
lineAndWord: It will show line and word-wise diff.
lineAndChar: It will show line and char-wise diff.

These three values can also be an enum. I prefer this over the previous method. For example,

export enum DiffType {
	LINE = 0,
	LINE_AND_WORD = 1,
	LINE_AND_CHAR = 2,
}

import React, { PureComponent } from 'react'
import ReactDiffViewer, {DiffType} from 'react-diff-viewer'

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer
		diffType={DiffType.LINE_AND_CHAR}
        oldValue={oldCode}
        newValue={newCode}
        splitView={true}
      />
    )
  }
}

Suggestions are welcome

[bstst]

I prefer this approach too.

But I'm now somewhat confused about the defaults. Right now disableWordDiff is false by default. Which means that the diff is computed by using diff.diffChars by default. If I enable disableWordDiff — then neither diff.diffChars nor diff.diffWords is used, and the whole line is diffed. Which kind of implies that we need to enum this instead:

export enum DiffType {
	LINE = 0,
	WORD = 1,
        CHAR = 2,
}

Is my assumption correct?

[bstst]

I'll put this PR on hold until this issue is solved #32

[jamiek-acl]

I'd love to use this feature too!

[praneshr]

Hey @bstst, the patch for the diff bug is released. Do you want to take a stab at this feature now?

[circAssimilate]

Hi @bstst / @praneshr. I'm unable to checkout this PR / branch / commit, so I can't tell if it would solve my issue where letters are being diffed and not words. For instance, in the screenshot below I want all of running and not_started to be highlighted and not the r's missing.

Would this PR address that if finished? If not, I can create a new issue, but I'd love to help get this over the finish line either way so we can further consider using this at Optimizely.

EDIT: I confirmed that this addresses my issue and created #51 that aims to accomplish what this PR is in a slightly different way. Would appreciate a review / any feedback!

[praneshr]

Outdated.