JSFiddle - React, Tailwind, and code Playground

JavaScript

// NOTE: I was originally getting encodeURI errors and discovered via the github
//       issues on the diff-match-patch repo that it's because of bad emoji handling.
//       This file is copied from this commit (unmerged as of writing): https://github.com/google/diff-match-patch/pull/69
//       I'm using it in place of the node.js lib which I was originally using.


/**
 * Diff Match and Patch
 * Copyright 2018 The diff-match-patch Authors.
 * https://github.com/google/diff-match-patch
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Computes the difference between two texts to create a patch.
 * Applies the patch onto another text, allowing for errors.
 * @author fraser@google.com (Neil Fraser)
 */

/**
 * Determine if the index is inside a surrogate pair.
 * @param {string} str The string
 * @param {numer} idx The index
 */
function insideSurrogate(str, idx) {
  var code = str.charCodeAt(idx);
  return code >= 0xDC00 && code <= 0xDFFF;
}

/**
 * Class containing the diff, match and patch methods.
 * @constructor
 */
var diff_match_patch = function() {

  // Defaults.
  // Redefine these in your program to override the defaults.

  // Number of seconds to map a diff before giving up (0 for infinity).
  this.Diff_Timeout = 1.0;
  // Cost of an empty edit operation in terms of edit characters.
  this.Diff_EditCost = 4;
  // At what point is no match declared (0.0 = perfection, 1.0 = very loose).
  this.Match_Threshold = 0.5;
  // How far...