Action

DIFF

Posted by jsamlarose, Last update over 4 years ago

Marks up changes (insertions, deletions) between current draft and a previous version. Version selection via prompt.

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

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

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, "&");
        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();
    
    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%;
    }
    
    /* 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.