String Diff Feature
rlingineni opened this issue · 4 comments
New feature motivation
Adding the ability to see a string diff.
New feature description
String difference is a common utility is one that I often turn to online functions for.
Two flows to do this:
- Have the input and output box on the sides of each other, and highlight the changes
- Take the two strings on the left side as input and show the output on the right
New feature implementation
I may not have the time to take a crack at building this, but poking around at the codebase, it seems that the usage is an Evergreen TextArea with a few styles applied for code formatting. I don't think the HTML text area natively supports highlighting, so that makes this a little more challenging.
The first option seems a little more difficult with the current components.
However, for the second design, the output, on the left side can be HTML, and for all the changes in string 2, you would calculate the "additions" and "diffs", and then add extra HTML wrap them with either a mark or span tag, with red for deletes, and green for additions with the changes from string 2, and render the output.
Great project so far!
@rlingineni thanks for the write-up! The second implementation might be a nicer experience I think, but I suspect it would be quite hard to build, since the left side input box isn't really customizable at the moment based on the converter chosen. The right side can have a custom component per-converter, so it's easy to add more input boxes there.
The very simplest from an implementation point of view I think would be a variation on (2), but with the Paste string 2 on the right side, and the String Diff underneath it. The layout would not be as intuitive as yours, but it would be much easier to get going quickly.
The syntax highlighting is handled by Prism , which seems to have diff support, so I think that part wouldn't be too hard. We just need to add a DiffTextarea.tsx here.
I'll do some exploring in the next day or two and see how hard it looks.
@rlingineni here you go - let me know if you have any problems with it, and thanks for the suggestion
Beautiful. Looks great to me!
One improvement is that I still think the diff might be too generic, because comparing "apple" and "appple", I would expect it to highlight the letter "p", rather than say the entire line changed.
@rlingineni yes I agree totally - I wanted to do that too. Unfortunately the Prism diff syntax highlighting doesn't seem to do it, and I wasn't able to find any javascript diff highlighting libraries that do do it. If you're able to find anything I'm happy to have a look and see if it can be implemented