Drafts Directory: DIFF

Action

Posted by @jsamlarose, Last update over 1 year ago

20230503: updated to fix some rendering issues (https://forums.getdrafts.com/t/diffs-on-versions/14219)

Marks up changes (insertions, deletions) between current draft and a previous version (prompts for selection).

Preview respects tab indents without invoking code blocks (by design).

Diff code from: https://johnresig.com/projects/javascript-diff-algorithm/
CSS styles for ins/del tags adapted from: Yuanchuan (https://yuanchuan.name/)
via https://freefrontend.com/html-del-ins-css/

Install

Steps

script

// See online documentation for examples
// http://getdrafts.com/scripting

/*
 * Javascript Diff Algorithm
 *  By John Resig (http://ejohn.org/)
 *  Modified by Chu Alan "sprite"
 *
 * Released under the MIT license.
 *
 * More Info:
 *  http://ejohn.org/projects/javascript-diff-algorithm/
 */

function escape(s) {
    var n = s;
    n = n.replace(/&/g, "&amp;");
    n = n.replace(/</g, "&lt;");
    n = n.replace(/>/g, "&gt;");
    n = n.replace(/"/g, "&quot;");

    return n;
}

function diffString( o, n ) {
  o = o.replace(/\s+$/, '');
  n = n.replace(/\s+$/, '');

  var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
  var str = "";

  var oSpace = o.match(/\s+/g);
  if (oSpace == null) {
    oSpace = ["\n"];
  } else {
    oSpace.push("\n");
  }
  var nSpace = n.match(/\s+/g);
  if (nSpace == null) {
    nSpace = ["\n"];
  } else {
    nSpace.push("\n");
  }

  if (out.n.length == 0) {
      for (var i = 0; i < out.o.length; i++) {
        str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
      }
  } else {
    if (out.n[0].text == null) {
      for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
        str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
      }
    }

    for ( var i = 0; i < out.n.length; i++ ) {
      if (out.n[i].text == null) {
        str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
      } else {
        var pre = "";

        for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
          pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
        }
        str += " " + out.n[i].text + nSpace[i] + pre;
      }
    }
  }
  
  return str;
}

function randomColor() {
    return "rgb(" + (Math.random() * 100) + "%, " + 
                    (Math.random() * 100) + "%, " + 
                    (Math.random() * 100) + "%)";
}
function diffString2( o, n ) {
  o = o.replace(/\s+$/, '');
  n = n.replace(/\s+$/, '');

  var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );

  var oSpace = o.match(/\s+/g);
  if (oSpace == null) {
    oSpace = ["\n"];
  } else {
    oSpace.push("\n");
  }
  var nSpace = n.match(/\s+/g);
  if (nSpace == null) {
    nSpace = ["\n"];
  } else {
    nSpace.push("\n");
  }

  var os = "";
  var colors = new Array();
  for (var i = 0; i < out.o.length; i++) {
      colors[i] = randomColor();

      if (out.o[i].text != null) {
          os += '<span style="background-color: ' +colors[i]+ '">' + 
                escape(out.o[i].text) + oSpace[i] + "</span>";
      } else {
          os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
      }
  }

  var ns = "";
  for (var i = 0; i < out.n.length; i++) {
      if (out.n[i].text != null) {
          ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' + 
                escape(out.n[i].text) + nSpace[i] + "</span>";
      } else {
          ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
      }
  }

  return { o : os , n : ns };
}

function diff( o, n ) {
  var ns = new Object();
  var os = new Object();
  
  for ( var i = 0; i < n.length; i++ ) {
    if ( ns[ n[i] ] == null )
      ns[ n[i] ] = { rows: new Array(), o: null };
    ns[ n[i] ].rows.push( i );
  }
  
  for ( var i = 0; i < o.length; i++ ) {
    if ( os[ o[i] ] == null )
      os[ o[i] ] = { rows: new Array(), n: null };
    os[ o[i] ].rows.push( i );
  }
  
  for ( var i in ns ) {
    if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
      n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
      o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
    }
  }
  
  for ( var i = 0; i < n.length - 1; i++ ) {
    if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null && 
         n[i+1] == o[ n[i].row + 1 ] ) {
      n[i+1] = { text: n[i+1], row: n[i].row + 1 };
      o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
    }
  }
  
  for ( var i = n.length - 1; i > 0; i-- ) {
    if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null && 
         n[i-1] == o[ n[i].row - 1 ] ) {
      n[i-1] = { text: n[i-1], row: n[i].row - 1 };
      o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
    }
  }
  
  return { o: o, n: n };
}

// JSLR: select old ver to diff with

var p = Prompt.create();

p.title = "Diff";
p.message = "Select a version to compare with current draft version";

let versions = draft.versions

for (let v of versions) {
    p.addButton(v.createdAt,v.content); 
}

var didSelect = p.show();

if (p.buttonPressed) {
    var old = p.buttonPressed
} else {
    context.cancel()
}

// JSLR: assign current draft as "new" for comparison; also, I'm a poet: I need to see indents.

var mmd = GitHubMarkdown.create();

// 20230503: update from @agiletortoise to fix rendering issues (https://forums.getdrafts.com/t/diffs-on-versions/14219/)

mmd.safe = false
mmd.unsafe = true

// 20230503: end

var myNew = draft.content;

myDiff = diffString(
   old,
   myNew
);

myDiff = mmd.render(myDiff.replace(/\t/g, '&emsp;'));

draft.setTemplateTag("myDiff",myDiff)

htmlpreview

<!DOCTYPE html>
<html dir="auto">
<head>
<title>Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@charset "utf-8";

:root {
  --del-color: #ff92bf; 
  --ins-color: #b1f315;
}

html { 
	font-size: 110%;
	font-family: Palatino;
}
body {
	margin:0;
	padding:1em;
	color: #252222;
	line-height: 1.6;
}
@media (max-device-width: 480px) { 

} 
@media (min-device-width: 481px) { 
	body {
		margin:auto;
		max-width:700px;
	} 
}

pre {
  whitespace: normal;
}

/* basic styles */


blockquote {
	font-style: italic;
}

code {
    border-radius: 3px;
    background-color: #F8F8F8;
    color: inherit;
}

table {
  margin: 1em 0;
  border: 1px solid #aaa;
  border-collapse: collapse;
}

th {
  padding:.25em .5em;
  background: #efefef;
  border: 1px solid #ccc;  
}

td {
  padding:.25em .5em;
  border: 1px solid #ccc;
}

img {
    max-width: 90%;
}

div {
    white-space: pre-line;
}

/* end basic */

del {
  text-decoration: line-through;
  color: #ff92bf;
}

/* don't have much ideas for <ins> */
ins {
  background: #ddff92;
  text-decoration: none;
}

</style>
</head>
<body>
  <div class="container">
[[myDiff]]

</div>
</body>
</html>

Options

After Success Default

Notification Error

Log Level Error

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Error
Log Level	Error