nokodiff 0.4.2 → 1.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8574d5f3cb682d4797c8d6cfa9c979e10ca2307a4c55997a0ddd6b3299801856
-  data.tar.gz: c3e4b13e2632ba3bf99de7c7a3ef5583618f68e6e94c03f877e5059b764c36e2
+  metadata.gz: 98b3f977e0c9f7e35ccff54cbab81944e22bbcd3b7bb29a5a383fbd0a2668186
+  data.tar.gz: 7dbb7c2c74e1d85d245a48722e91d2ab8f89dde3508e32cfb3fe350ea30fd75b
 SHA512:
-  metadata.gz: b5a8d417f70b4d7fbc1cc2c4745dbd4494d3bf401ad7038e45c239cf9c69e1bca9af24cc0d7e2a078a5d29727d91d8acf29959a5d8e6d94c2d5ba600709f4e05
-  data.tar.gz: af1d8b59965819a131bf96d6dcfd9e64e2563196bc74be4bb1c75310d2cd1f4862b40c92691cae1845e4fdf5fe7030fe52ec128376fcfcd09b3dc48649d935b6
+  metadata.gz: 7a8f9d05204c541ceba28f32d5d0f233dacf510d6b03391aab292fca7e649ca302b291543b14a9c27cfdc685d9fb3d250d66ebd9aa60107ffd36413c6b8c1256
+  data.tar.gz: d43cf00ad191e146e35f9a581d8a69de0076eec5618c94361e899a74cc11e2aba51deeda8bf99d16572b3da42397d79e7cc84704f16220fd22c04e3f0b2eb901

data/README.md

@@ -66,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`
 
@@ -111,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>
 ```
@@ -154,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 {
-      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
-          diff[:before].name == "li" ? deleted_li(diff[:before]) : deleted_block(diff[:before])
+          diff[:before].text? ? build_deleted_text_html(diff[:before]) : build_deleted_element_html(diff[:before])
         when :added
-          diff[:after].name == "li" ? added_li(diff[:after]) : added_block(diff[:after])
+          diff[:after].text? ? build_added_text_html(diff[:after]) : build_added_element_html(diff[:after])
         end
       }.join("\n")
     end
@@ -60,21 +64,15 @@ module Nokodiff
     end
 
     def changed_block(before_node, after_node)
-      if structurally_similar?(before_node, after_node) && should_not_be_treated_as_single_change?(before_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 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 = if both_text_nodes?(before_node, after_node)
-                                    diff_raw_text(before_node, after_node)
-                                  else
-                                    diff_sub_elements(before_node, after_node)
-                                  end
-
-        if before_node.name == "li"
-          deleted_li(before_diff) + added_li(after_diff)
-        else
-          deleted_block(before_diff) + added_block(after_diff)
-        end
+        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
 
@@ -88,13 +86,11 @@ module Nokodiff
         before_node.name == after_node.name
     end
 
-    # We want all changes within a paragraph, heading, or list item to be treated as a single change, 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 should_not_be_treated_as_single_change?(before_node)
-      before_node.name != "p" &&
-        !before_node.name.match(/^h[1-6]$/) &&
-        before_node.name != "li"
+    # 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)
@@ -118,19 +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)
 
-      if before_html.name == "li"
-        [before_fragment.inner_html, after_fragment.inner_html]
-      else
-        [before_fragment.to_html, after_fragment.to_html]
-      end
+      [before_fragment, after_fragment]
     end
 
     def merge_adjacent_highlighted_changes(node)
@@ -159,40 +151,78 @@ module Nokodiff
       node.to_html
     end
 
-    def deleted_li(html)
-      %(
-        <li>
-          <div class="diff">
-            <del aria-label="removed content">#{html}</del>
-          </div>
-        </li>
-      )
-    end
-
-    def deleted_block(html)
-      %(
-        <div class="diff">
-           <del aria-label="removed content">#{html}</del>
-        </div>
-      )
-    end
-
-    def added_block(html)
-      %(
-        <div class="diff">
-           <ins aria-label="added content">#{html}</ins>
-        </div>
-      )
-    end
-
-    def added_li(html)
-      %(
-        <li>
-          <div class="diff">
-            <ins aria-label="added content">#{html}</ins>
-          </div>
-        </li>
-      )
+    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 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.2"
+  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.2
+  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
@@ -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
@@ -244,7 +244,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML