open Fable.Diff
open Fable.React
open Fable.React.Props

let viewChanges () =
    let oldText = "beep boop"
    let newText = "beep boob blah"

    // Get a char-by-char diff of two strings. The return value here is an array with 3 elements representing
    // the changed text parts between the 2 strings. You can also use the optional parameter to toggle case sensitivity.
    // let diff = Diff.diffChars (oldText, newText, Fable.Core.JsInterop.jsOptions<IBaseOptions> (fun x -> x.ignoreCase <- true))
    let diff = Diff.diffChars (oldText, newText)

    div [ Style [ BackgroundColor "black" ] ] [
        for part in diff do
            // Green for additions, red for deletions, grey for common parts.
            let color =
                if part.added then
                    "green"
                elif part.removed then
                    "red"
                else
                    "grey"

            span [ Style [ Color color ] ] [ str part.value ]
    ]