nokodiff 0.4.1 → 1.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 463332f5f2d94367e447941e4d28e53b0f8b8f421ec04e7b1fae4975668655df
-  data.tar.gz: 9d8b69166e7669290aae29f75309f38a47a211d5e30f54927b2dd26c5276d6cf
+  metadata.gz: 98b3f977e0c9f7e35ccff54cbab81944e22bbcd3b7bb29a5a383fbd0a2668186
+  data.tar.gz: 7dbb7c2c74e1d85d245a48722e91d2ab8f89dde3508e32cfb3fe350ea30fd75b
 SHA512:
-  metadata.gz: d3e110802143d03c8ff63763a21380f3f46016c0656447302552ccb5e95ad687fec50b6452c5e72ef43b9186eb2f1b5544c753919c7cc963631d91d50da1cdc1
-  data.tar.gz: 5c5299d0e0759559f95e9e85fd3cacf963cd710e630918817d5d187d2b19f8be6e30a41c02a4aed7e058873c208fdc0d93a5f1ec94fac67c95da408892523464
+  metadata.gz: 7a8f9d05204c541ceba28f32d5d0f233dacf510d6b03391aab292fca7e649ca302b291543b14a9c27cfdc685d9fb3d250d66ebd9aa60107ffd36413c6b8c1256
+  data.tar.gz: d43cf00ad191e146e35f9a581d8a69de0076eec5618c94361e899a74cc11e2aba51deeda8bf99d16572b3da42397d79e7cc84704f16220fd22c04e3f0b2eb901

data/README.md

@@ -1,6 +1,6 @@
 # Nokodiff
 
-A Ruby Gem to highlight additions, deletions and character level changes while preserving original HTML.
+A Ruby Gem to highlight additions, deletions, and character level changes while preserving original HTML.
 
 It includes functionality to:
 * Compare two HTML fragments and output diffs with semantic HTML
@@ -24,31 +24,21 @@ gem "nokodiff"
 
 ## Local Development
 
-The gem includes a dummy Rails application located in `spec/dummy`. It can be used to preview `Nokodiff` in a real browser environment without needing to integrate with an external host app.
+The gem includes a dummy Rails application located in `spec/dummy`. It can be used to preview `Nokodiff` in a real 
+browser environment without needing to integrate with an external host app.
 
-To get the dummy app running you need to:
-
-### Install dependencies
+You can run the dummy app with the following command:
 
 ```bash
-bundle install
+bin/run-dummy-app
 ```
 
-### Navigate to the app and install dependencies
-
-```bash
-cd spec/dummy
-bundle install
-```
+This installs the dependencies, builds the assets, and starts the server.
 
-### Start the server
-
-```bash
-bin/rails server
-```
+The dummy app will now be running on `localhost:3000`.
 
-The dummy app will now be running on `localhost:3000`
-If you want to edit the content you are testing it is located in `spec/dummy/app/controllers/application_controller.rb`, alongside the code calling `Nokodiff.diff(@before, @after)`
+If you want to edit the content you are testing it is located in `spec/dummy/fixtures/before.html`, and
+`spec/dummy/fixtures/after.html`.
 
 ## Usage
 
@@ -76,7 +66,7 @@ In your application.scss file include:
 @import "nokodiff";
 ```
 
-This will include the styling for `<del>`, `<ins>` and `<span>` tags to allow colour coding, highlighting and underlining of changes.
+This will include the styling for `.diff`, `.del`, `.ins` and other classes and `<span>` tags to allow colour coding, highlighting, and underlining of changes.
 
 ### More complex diffing with `data-diff-key`
 
@@ -121,9 +111,7 @@ Output:
     <p>First paragraph</p>
   </div>
   <div data-diff-key="zm7q">
-    <div class="diff">
-      <ins aria-label="added content"><p>Second paragraph</p></ins>
-    </div>
+      <p class="diff ins"><span class="visually-hidden">Added content </span>Second paragraph</p>
   </div>
 </div>
 ```
@@ -164,15 +152,18 @@ Output:
 
 ```html
 <div>
-  <div data-diff-key="ixn4"><p>First paragraph</p></div>
-  <div data-diff-key="zm7q">
-    <div class="diff">
-      <del aria-label="removed content"><p><span class="diff-marker">S</span>e<span class="diff-marker">cond</span> paragraph</p></del>
+    <div data-diff-key="ixn4">
+        <p>First paragraph</p>
     </div>
-    <div class="diff">
-      <ins aria-label="added content"><p><span class="diff-marker">N</span>e<span class="diff-marker">w</span> paragraph</p></ins>
+    <div data-diff-key="zm7q">
+        <p class="diff del">
+            <span class="diff-marker"><span class="visually-hidden">Diff marker </span><span class="visually-hidden">Removed content </span>S</span>e<span class="diff-marker"><span class="visually-hidden">Diff marker </span>cond</span> paragraph
+        </p>
+
+        <p class="diff ins">
+            <span class="diff-marker"><span class="visually-hidden">Diff marker </span><span class="visually-hidden">Added content </span>N</span>e<span class="diff-marker"><span class="visually-hidden">Diff marker </span>w</span> paragraph
+        </p>
     </div>
-  </div>
 </div>
 ```
 

data/app/assets/stylesheets/nokodiff.scss

@@ -1,5 +1,3 @@
-// stylelint-disable selector-no-qualifying-type, max-nesting-depth
-// Diff of two editions
 $added-color: #e6fff3;
 $diff-marker-added-color: #99ffcf;
 $removed-color: #fadede;
@@ -7,66 +5,338 @@ $diff-marker-removed-color: #f3aeac;
 $text-colour: #0b0c0c;
 $light-grey: #f3f2f1;
 $black: #0b0c0c;
+$comparison-sidebar-width: 40px;
+$comparison-sidebar-padding: 15px;
+$comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padding;
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+
+  border: 0 !important;
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap !important;
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  user-select: none !important;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+
+  border: 0 !important;
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap !important;
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  user-select: none !important;
+
+}
 
 .compare-editions {
   position: relative;
-  border-left: 40px solid $light-grey;
-  padding: 15px;
+  border-left: $comparison-sidebar-width solid $light-grey;
+  padding: $comparison-sidebar-padding;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+
+  td::before {
+    // Backup to handle any inputted classes which make use of a ::before attached to a td element
+    // unsetting all styles for it will prevent it interfering with the ::before that we need to use
+    // for the diff marker
+    all: unset;
+  }
 
   .diff {
     position: static;
     margin-bottom: 10px;
 
-    del, ins, ul, li {
-      position: static !important;
+    &.del, &.ins {
+      &:is(li){ display: list-item; }
+
+      position: relative;
       display: block;
       text-decoration: none;
-      border-radius: 3px;
+      background-color: transparent;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -$comparison-sidebar-padding;
+      min-height: 1.5em;
+      width: 100vw;
+      display: block;
+      z-index: -1;
     }
 
-    del {
-      background-color: $removed-color;
-      padding-bottom: 2px;
+    &.del {
+      &::after { background-color: $removed-color; }
 
       span.diff-marker {
-        font-weight: normal;
         background-color: $diff-marker-removed-color;
         border-bottom: 2px dashed $black;
       }
     }
 
-    ins {
-      background-color: $added-color;
-      padding-bottom: 2px;
+    &.ins {
+      &::after { background-color: $added-color; }
 
       span.diff-marker {
-        font-weight: normal;
         background-color: $diff-marker-added-color;
         border-bottom: 2px dashed $black;
       }
     }
 
-    del::before,
-    ins::before {
+    &::before {
+      // Some govuk styles use ::before in ways we need to override to make this work
+      border-radius: unset !important;
+      border: unset !important;
+
       position: absolute;
-      left: -40px;
-      width: 40px;
-      height: 1.5em;
+      top: 0;
+      left: -$comparison-sidebar-offset;
+      width: $comparison-sidebar-width;
+      height: 100%;
+      min-height: 1.5em;
       line-height: 1.5em;
       text-align: center;
+      font-weight: normal;
       z-index: 10;
     }
+
+    &.del::before {
+      color: $text-colour;
+      background-color: $diff-marker-removed-color;
+      content: "−" !important;
+    }
+
+    &.ins::before {
+      color: $text-colour;
+      background-color: $diff-marker-added-color;
+      content: "+" !important;
+    }
   }
 
-  del::before {
-    color: $text-colour;
-    background-color: $diff-marker-removed-color;
-    content: "−";
+  // Global govspeak-specific overrides
+  .gem-c-govspeak & {
+    &::before { min-height: 1.3157894737em; }
   }
 
-  ins::before {
-    color: $text-colour;
-    background-color: $diff-marker-added-color;
-    content: "+";
+  // Inset/callout elements overrides
+
+  .address {
+    .diff{
+      $address-offset: -16px;
+
+      &::after {
+        left: -$comparison-sidebar-padding + $address-offset;
+      }
+
+      &::before {
+        left: -$comparison-sidebar-offset + $address-offset;
+      }
+    }
   }
-}
+
+  .help-notice {
+    $help-notice-offset: -45px;
+    .diff {
+      &::after, &::before {
+        top: -15px;
+        min-height: calc(1.5em + 30px);
+        left: -$comparison-sidebar-padding + $help-notice-offset;
+      }
+
+      &::before {
+        top: -15px;
+        min-height: calc(1.5em + 30px);
+        left: -$comparison-sidebar-offset + $help-notice-offset;
+      }
+    }
+  }
+
+ .example, .info-notice {
+   $callout-parent-offset: -10px;
+   $callout-child-offset: -30px;
+
+   &.diff {
+     &::after {
+       left: -$comparison-sidebar-padding + $callout-parent-offset;
+     }
+
+     &::before {
+       left: -$comparison-sidebar-offset + $callout-parent-offset;
+     }
+   }
+
+   .diff {
+     &::after {
+       left: -$comparison-sidebar-padding + $callout-child-offset;
+     }
+
+     &::before {
+       left: -$comparison-sidebar-offset + $callout-child-offset;
+     }
+    }
+  }
+
+  // List-specific overrides for non-govuk lists
+  $non-govuk-list-offset: -40px;
+
+  li span.diff, ul span.diff{
+    &::after {
+      left: -$comparison-sidebar-padding + $non-govuk-list-offset;
+    }
+
+    &::before {
+      left: -$comparison-sidebar-offset + $non-govuk-list-offset;
+    }
+  }
+
+  // List-specific overrides for govuk lists as we apply a non-standard offset to lists
+  $govuk-list-offset: -20px;
+
+  .gem-c-govspeak & {
+    ul li span.diff, ul span.diff {
+      &::after {
+        left: -$comparison-sidebar-padding + $govuk-list-offset;
+      }
+
+      &::before {
+        left: -$comparison-sidebar-offset + $govuk-list-offset;
+      }
+    }
+
+    ol li span.diff {
+      list-style-type: decimal;
+
+      &::marker {
+        background-color: #0b0c0c;
+        border-radius: 50%;
+      }
+
+      &::after {
+        left: $comparison-sidebar-padding;
+      }
+
+      &::before {
+        left: $comparison-sidebar-offset;
+      }
+    }
+
+    //govuk "steps"-style ol overrides
+    $steps-list-offset: -48px;
+
+    ol.steps {
+      li{
+        display: list-item;
+        list-style-type: decimal;
+        padding-left: 0.25em;
+        margin-left: 2.25em;
+
+        &::before {
+          display: none;
+        }
+        &::after { left: -$comparison-sidebar-padding + $steps-list-offset !important; }
+        &::marker {  content: "#."; }
+      }
+
+      li span.diff {
+        &::marker { content: unset; }
+        &::before {
+          top: -2px;
+          left: -$comparison-sidebar-offset + $steps-list-offset;
+          height: 100%;
+          width: $comparison-sidebar-width;
+          min-height: 1.6em;
+        }
+        &::after {
+          top: -2px;
+          left: -$comparison-sidebar-padding + $steps-list-offset;
+          min-height: 1.6em;
+        }
+      }
+    }
+  }
+
+  // Table-specific overrides
+    $table-row-offset: -2px;
+
+  table {
+    overflow-x: visible;
+  }
+
+  tr.diff {
+    position: static;
+    display: table-row;
+    transform: scale(1);
+
+    &.del::after, &.ins::after {
+      left: -$comparison-sidebar-padding + $table-row-offset;
+      // Need to account for border in row element
+      height: 100%;
+      top: 1px;
+    }
+
+    // Attaching a ::before psuedoelement to a <tr> creates a phantom column so we need to hide it
+    // and instead attach one to the first-child <td>
+    &::before {
+      display: none;
+    }
+
+    td:first-child::before, th:first-child::before {
+      position: absolute;
+      left: -$comparison-sidebar-offset;
+      width: $comparison-sidebar-width;
+      height: 100%;
+      min-height: 1.5em;
+      top: 1px;
+      line-height: 1.5em;
+      text-align: center;
+      z-index: 10;
+    }
+
+    &.del td:first-child::before, &.del th:first-child::before {
+      color: $text-colour;
+      background-color: $diff-marker-removed-color;
+      content: "−";
+    }
+
+    &.ins td:first-child::before, &.ins th:first-child::before {
+      color: $text-colour;
+      background-color: $diff-marker-added-color;
+      content: "+";
+    }
+  }
+}

data/lib/nokodiff/differ.rb

@@ -1,5 +1,9 @@
 module Nokodiff
   class Differ
+    include FormattingHelpers
+
+    BOTTOM_LEVEL_ELEMENTS = %w[p li tr h1 h2 h3 h4 h5 h6].freeze
+
     def initialize(before, after)
       @before = before
       @after = after
@@ -13,9 +17,9 @@ module Nokodiff
         when :changed
           changed_block(diff[:before], diff[:after])
         when :deleted
-          deleted_block(diff[:before])
+          diff[:before].text? ? build_deleted_text_html(diff[:before]) : build_deleted_element_html(diff[:before])
         when :added
-          added_block(diff[:after])
+          diff[:after].text? ? build_added_text_html(diff[:after]) : build_added_element_html(diff[:after])
         end
       }.join("\n")
     end
@@ -60,23 +64,33 @@ module Nokodiff
     end
 
     def changed_block(before_node, after_node)
-      if structurally_similar?(before_node, after_node)
+      if structurally_similar?(before_node, after_node) && !treat_element_as_single_change?(before_node)
         inner_diff = Differ.new(before_node, after_node).to_html
         rebuild_element(after_node, inner_diff)
-      elsif before_node.text? && after_node.text?
-        before_diff, after_diff = diff_raw_text(before_node, after_node)
-        deleted_block(before_diff) + added_block(after_diff)
+      elsif both_text_nodes?(before_node, after_node)
+        before_node, after_node = diff_raw_text(before_node, after_node)
+        build_deleted_text_html(before_node) + build_added_text_html(after_node)
       else
-        before_diff, after_diff = diff_sub_elements(before_node, after_node)
-        deleted_block(before_diff) + added_block(after_diff)
+        before_node, after_node = diff_sub_elements(before_node, after_node)
+        build_deleted_element_html(before_node) + build_added_element_html(after_node)
       end
     end
 
+    def both_text_nodes?(before_node, after_node)
+      before_node.text? && after_node.text?
+    end
+
     def structurally_similar?(before_node, after_node)
       before_node.element? &&
         after_node.element? &&
-        before_node.name == after_node.name &&
-        before_node.name != "p"
+        before_node.name == after_node.name
+    end
+
+    # We want to treat all content within certain elements as single changes, even if they are structurally different,
+    # to avoid overwhelming the user with changes, and ensure any nested elements are included within the diff,
+    # rather than being treated as added or removed content on their own.
+    def treat_element_as_single_change?(before_node)
+      BOTTOM_LEVEL_ELEMENTS.include?(before_node.name)
     end
 
     def rebuild_element(template_node, inner_html)
@@ -100,15 +114,15 @@ module Nokodiff
     end
 
     def diff_sub_elements(before_html, after_html)
-      before_dup = before_html.dup
-      after_dup = after_html.dup
+      before_fragment = before_html.dup
+      after_fragment = after_html.dup
 
-      before_fragment, after_fragment = Nokodiff::TextNodeDiffs.new(before_dup, after_dup).call
+      Nokodiff::TextNodeDiffs.new(before_fragment, after_fragment).call
 
       merge_adjacent_highlighted_changes(before_fragment)
       merge_adjacent_highlighted_changes(after_fragment)
 
-      [before_fragment.to_html, after_fragment.to_html]
+      [before_fragment, after_fragment]
     end
 
     def merge_adjacent_highlighted_changes(node)
@@ -137,20 +151,78 @@ module Nokodiff
       node.to_html
     end
 
-    def deleted_block(html)
-      %(
-        <div class="diff">
-           <del aria-label="removed content">#{html}</del>
-        </div>
-      )
+    def build_deleted_text_html(html)
+      <<~HTML
+        <span class="diff del">
+          <span class="visually-hidden">Removed content </span>
+          #{html}
+        </span>
+      HTML
+    end
+
+    def build_added_text_html(html)
+      <<~HTML
+        <span class="diff ins">
+          <span class="visually-hidden">Added content </span>
+          #{html}
+        </span>
+      HTML
+    end
+
+    def build_added_element_html(element)
+      if element.name == "tr"
+        insert_table_row_change_marker(element, "Added row")
+        class_string = "#{element['class']&.gsub('del', '')} diff ins".strip
+
+        <<~HTML
+          <#{element.name} class="#{class_string}">
+             #{element.inner_html}
+          </#{element.name}>
+        HTML
+
+      else
+        # Entirely new steps OLs require that the div also have the .steps class
+        # This is either a bug or weakness in the actual govuk CSS for that class
+        class_string = element["class"].nil? ? nil : " class= \"#{element['class']}\""
+        span_class_string = element["class"]&.include?("steps") ? "diff ins steps" : "diff ins"
+
+        <<~HTML
+          <#{element.name}#{class_string}>
+            <span class="#{span_class_string}">
+              <span class="visually-hidden">Added content </span>
+              #{element.inner_html}
+            </span>
+          </#{element.name}>
+        HTML
+      end
     end
 
-    def added_block(html)
-      %(
-        <div class="diff">
-           <ins aria-label="added content">#{html}</ins>
-        </div>
-      )
+    def build_deleted_element_html(element)
+      if element.name == "tr"
+        insert_table_row_change_marker(element, "Removed row")
+        class_string = "#{element['class']&.gsub('ins', '')} diff del".strip
+
+        <<~HTML
+          <#{element.name} class="#{class_string}">
+             #{element.inner_html}
+          </#{element.name}>
+        HTML
+
+      else
+        # Entirely removed steps OLs require that the span also have the .steps class
+        # This is either a bug or weakness in the actual govuk CSS for that class
+        class_string = element["class"].nil? ? nil : " class= \"#{element['class']}\""
+        span_class_string = element["class"]&.include?("steps") ? "diff del steps" : "diff del"
+
+        <<~HTML
+          <#{element.name}#{class_string}>
+            <span class="#{span_class_string}">
+              <span class="visually-hidden">Removed content </span>
+              #{element.inner_html}
+            </span>
+          </#{element.name}>
+        HTML
+      end
     end
   end
 end

data/lib/nokodiff/formatting_helpers.rb

@@ -6,5 +6,13 @@ module Nokodiff
         n["class"] = "diff-marker"
       end
     end
+
+    def insert_table_row_change_marker(element, message)
+      marker = Nokogiri::XML::Node.new("span", element.document)
+      marker.content = "#{message} "
+      marker["class"] = "visually-hidden"
+
+      element.children.first.prepend_child(marker)
+    end
   end
 end

data/lib/nokodiff/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Nokodiff
-  VERSION = "0.4.1"
+  VERSION = "1.0.0.rc1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nokodiff
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 1.0.0.rc1
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -29,14 +29,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 13.3.1
+        version: 13.4.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 13.3.1
+        version: 13.4.2
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -71,14 +71,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 5.2.0
+        version: 5.2.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 5.2.0
+        version: 5.2.1
 - !ruby/object:Gem::Dependency
   name: simplecov
   requirement: !ruby/object:Gem::Requirement
@@ -102,7 +102,7 @@ dependencies:
         version: '6'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 8.1.3
+        version: 8.1.4
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -112,7 +112,7 @@ dependencies:
         version: '6'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 8.1.3
+        version: 8.1.4
 - !ruby/object:Gem::Dependency
   name: byebug
   requirement: !ruby/object:Gem::Requirement
@@ -150,7 +150,7 @@ dependencies:
         version: '101.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '103.3'
+        version: '103.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -160,7 +160,7 @@ dependencies:
         version: '101.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '103.3'
+        version: '103.4'
 - !ruby/object:Gem::Dependency
   name: govspeak
   requirement: !ruby/object:Gem::Requirement
@@ -184,7 +184,7 @@ dependencies:
         version: '6'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 8.1.3
+        version: 8.1.4
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -194,7 +194,7 @@ dependencies:
         version: '6'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 8.1.3
+        version: 8.1.4
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -244,7 +244,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.9
+rubygems_version: 4.0.16
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML