publishing_platform_nokodiff 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d357388beb5eca70d4748d1be5d5f6770f6649b082d7e8f69c8d40cd54fcc2f5
-  data.tar.gz: 06a02e5536cf3e89770cbf0af3f53aa02c237d7be22c8c71fcb2712298d1972f
+  metadata.gz: 8a5784bf33e2775f851b7fcd645014324988ae99371d934bddca53493c25d938
+  data.tar.gz: 65dbd9c81fb530d5719b7ff86878e3624946fb45cadf9f978a912429ea0ba6cf
 SHA512:
-  metadata.gz: 37a30a18ccf3556534c151d7edbf96356fae333eef308813494d7b7f09d50c5a6789ec9f6835410432d8a0496d2c5e384ca2cceb0123bc82669cd45330376540
-  data.tar.gz: 535c5c098ec325475089771e77d4ed17443a73ae3685800d185816b7bd803e383c004d0719dd38cb2565c13b6ff96e3951c1629fe4cbce83c6eac12ff42a5cf1
+  metadata.gz: a6bc58874e20ee3fa14f7d485e49eed2e451dfa1f129696017e27410ddd475a79275f5ca0704ee609a007faf0ea575ccb32ed7055de80f2efc02d5b0b63eedd3
+  data.tar.gz: 9e041f0e47b18841366496c8a263cce6173b293d46d51e1eb269f9df174b26dd2fca6cf40b31e0fd6b103757744712651ee79b14cb4548d49509ec0adb536f50

data/app/assets/stylesheets/publishing_platform_nokodiff/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,188 @@ $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;
 
 .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%);
+
+  .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;
+  }  
+
+  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;
     }
 
-    del {
-      background-color: $removed-color;
-      padding-bottom: 2px;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -$comparison-sidebar-padding;
+      min-height: 1.5em;
+      width: 100vw;
+      display: block;
+      z-index: -1;
+    }
+
+    &.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 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: "−";
+
+
+  // List-specific overrides for non-govuk lists
+  $list-offset: -40px;
+
+  li span.diff, ul span.diff{
+    &::after {
+      left: -$comparison-sidebar-padding + $list-offset;
+    }
+
+    &::before {
+      left: -$comparison-sidebar-offset + $list-offset;
+    }
   }
 
-  ins::before {
-    color: $text-colour;
-    background-color: $diff-marker-added-color;
-    content: "+";
+  // Table-specific overrides
+    $table-row-offset: -2px;
+
+  table {
+    overflow-x: visible;
+  }  
+
+  tr.diff {
+    // bootstrap styles add a background color to td, th
+    td, th {
+      background-color: transparent;
+    }
+    position: static;
+    display: table-row !important;
+    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/publishing_platform_nokodiff/differ.rb

@@ -1,5 +1,9 @@
 module PublishingPlatformNokodiff
   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 PublishingPlatformNokodiff
         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 PublishingPlatformNokodiff
     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 PublishingPlatformNokodiff
         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 PublishingPlatformNokodiff
     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 = PublishingPlatformNokodiff::TextNodeDiffs.new(before_dup, after_dup).call
+      PublishingPlatformNokodiff::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,76 @@ module PublishingPlatformNokodiff
       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
+        class_string = element["class"].nil? ? nil : " class= \"#{element['class']}\""
+        span_class_string = "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 = "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/publishing_platform_nokodiff/formatting_helpers.rb

@@ -6,5 +6,13 @@ module PublishingPlatformNokodiff
         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/publishing_platform_nokodiff/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PublishingPlatformNokodiff
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: publishing_platform_nokodiff
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Publishing Platform
@@ -207,7 +207,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.15
+rubygems_version: 4.0.17
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML