DIFF and restore versions (MGCL)

includeAction

MGCheckListPrompt Library

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, "&");
    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


let versions = draft.versions

let myVers = []

// var md = MultiMarkdown.create();

for (let v of versions) {

    myVers.push({
						title: v.createdAt,
						description: v.content,
						uuid: v.uuid
        			});
}

// Create an MGCheckListPrompt to choose some drafts.
var prompt = new MGCheckListPrompt();
prompt.message = "Query: ";
prompt.addItems(myVers)
prompt.allowsTypeToFilter = true
prompt.singleSelectionMode = true
prompt.selectsImmediately = true
prompt.processMarkdown = false
prompt.escapeHTML = false
prompt.includedContent = `
<style>
.item-title {
	display: inline;
	white-space: normal;
}
.item-description {
	font-size: 75%;
	display: inline;
	white-space: pre-wrap;
}
.item-info {
	font-size: 70%;
	display: inline;
}
mark { 
    background-color: gold;
    color: black;
}
</style>
`

// Show the prompt.
var selectedItems = prompt.show();

// Report the result.
if (prompt.didShow) {
	if (selectedItems != null) {
		var old = myVers[selectedItems[0]].description;
		
		// 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)
		draft.setTemplateTag("selVer",myVers[selectedItems[0]].description)

	} else {

			context.cancel()
	}
} else {
	app.displayErrorMessage("Something went wrong.");
}

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 {
  white-space: 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>

script

var p = Prompt.create();

p.title = "Restore selected version?";

p.addButton("Restore");

var didSelect = p.show();

if (p.buttonPressed == "Restore") {
  editor.setText(draft.getTemplateTag("selVer"))
}