Action

DIFF and restore versions (MGCL)

Posted by @jsamlarose, Last update over 1 year ago

Requires MGCL action group (https://actions.getdrafts.com/g/10X)

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 should respect 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/

Steps

  • includeAction

    name
    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"))
    }

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.