nokodiff 1.0.0.rc1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98b3f977e0c9f7e35ccff54cbab81944e22bbcd3b7bb29a5a383fbd0a2668186
-  data.tar.gz: 7dbb7c2c74e1d85d245a48722e91d2ab8f89dde3508e32cfb3fe350ea30fd75b
+  metadata.gz: 856dc58d68b66f6af795512bb66066cc50c10a7a11efc6b20b138f656cf50c1b
+  data.tar.gz: d7d345134c3e9d588a71873ffbc680b2e4ba67e0d1c9f76ba34a98050ace98cb
 SHA512:
-  metadata.gz: 7a8f9d05204c541ceba28f32d5d0f233dacf510d6b03391aab292fca7e649ca302b291543b14a9c27cfdc685d9fb3d250d66ebd9aa60107ffd36413c6b8c1256
-  data.tar.gz: d43cf00ad191e146e35f9a581d8a69de0076eec5618c94361e899a74cc11e2aba51deeda8bf99d16572b3da42397d79e7cc84704f16220fd22c04e3f0b2eb901
+  metadata.gz: ee93167f9ed499b49fccd29048e9544ca0daa306ee7fd7d9bf00ce6a28603ab4a93620148cf31d1ffb3de83cc8ce3ba8f8d2621b00727f182735e5fe8d5a576c
+  data.tar.gz: 50e10242d8a451712ad138add211346d278f967a6ea1e0e8e4c4277481c71689462cd1e55891157bf0b91b8d47fc7fa855c9faf11aef6bbaaab798fdf193bf69

data/app/assets/stylesheets/nokodiff.scss

@@ -9,30 +9,26 @@ $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;
+@mixin diff-block {
+  position: relative;
+  background: $added-color;
+  padding-left: $comparison-sidebar-padding;
+  margin-left: -$comparison-sidebar-padding;
+  width: calc(100% + $comparison-sidebar-padding);
+
+  &:before {
+    content: " ";
+    position: absolute;
+    left: -$comparison-sidebar-width;
+    width: $comparison-sidebar-width;
+    height: 100%;
+    font-weight: normal;
+    min-height: 1.5em;
+    line-height: 1.5em;
+    text-align: center;
+    z-index: 10;
+    background: $diff-marker-added-color;
+  }
 }
 
 .visually-hidden {
@@ -59,7 +55,6 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
   // a user unintentionally copying more text than they intended and needing to
   // manually trim it down again.
   user-select: none !important;
-
 }
 
 .compare-editions {
@@ -95,7 +90,7 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
       bottom: 0;
       left: -$comparison-sidebar-padding;
       min-height: 1.5em;
-      width: 100vw;
+      right: 0;
       display: block;
       z-index: -1;
     }
@@ -148,14 +143,23 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
     }
   }
 
-  // Global govspeak-specific overrides
+  // Govspeak-specific overrides
   .gem-c-govspeak & {
-    &::before { min-height: 1.3157894737em; }
+    &::before { min-height: 5em; }
+  }
+
+  .diff .gem-c-button.govuk-button{
+    margin-top: 22px;
+  }
+
+  .form-download .diff {
+    padding-top: 10px;
+    padding-bottom: 3px;
   }
 
   // Inset/callout elements overrides
 
-  .address {
+  .address, .contact {
     .diff{
       $address-offset: -16px;
 
@@ -171,6 +175,38 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
 
   .help-notice {
     $help-notice-offset: -45px;
+
+    &:before {
+      display: none;
+    }
+
+    p {
+      position: relative;
+
+      &:before {
+        content: "!";
+        font-weight: 700;
+        border-radius: 50%;
+        color: var(--govuk-body-background-colour, #ffffff);
+        background: var(--govuk-text-colour, #0b0c0c);
+        font-size: 30px;
+        line-height: 29px;
+        text-align: center;
+        position: absolute;
+        margin-top: -5px;
+        left: $help-notice-offset;
+        min-width: 35px;
+        min-height: 35px;
+      }
+
+      &:first-child:after {
+        content: ".";
+        display: block;
+        clear: both;
+        visibility: hidden;
+      }
+    }
+
     .diff {
       &::after, &::before {
         top: -15px;
@@ -179,8 +215,6 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
       }
 
       &::before {
-        top: -15px;
-        min-height: calc(1.5em + 30px);
         left: -$comparison-sidebar-offset + $help-notice-offset;
       }
     }
@@ -228,6 +262,15 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
   $govuk-list-offset: -20px;
 
   .gem-c-govspeak & {
+    ul.list-no-bullets {
+      list-style: none;
+      padding-left: 0;
+
+      span.diff:before {
+        left: -$comparison-sidebar-width - $comparison-sidebar-padding;
+      }
+    }
+
     ul li span.diff, ul span.diff {
       &::after {
         left: -$comparison-sidebar-padding + $govuk-list-offset;
@@ -241,11 +284,6 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
     ol li span.diff {
       list-style-type: decimal;
 
-      &::marker {
-        background-color: #0b0c0c;
-        border-radius: 50%;
-      }
-
       &::after {
         left: $comparison-sidebar-padding;
       }
@@ -255,53 +293,176 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
       }
     }
 
+    ol:not(.steps) span.diff {
+      &::before {
+        left: -75px;
+      }
+
+      &::after {
+        left: -75px;
+      }
+    }
+
+    // Deal with the number values of ordered lists (including steps)
+    // by changing the increment value depending on sequence of diffs
+    ol {
+      counter-reset: item 0;
+      list-style: none;
+      margin-left: 20px;
+
+      li {
+        position: relative;
+      }
+
+      li:before {
+        position: absolute;
+        left: -20px;
+        counter-increment: item 1;
+        content: counter(item);
+      }
+
+      // Over-ride style for <li> elements inside a span.diff
+      // Ideally the markup would be changed so this is not needed
+      &.steps > span.diff > li:before {
+        left: 0;
+      }
+
+      li:has(.diff) + li:not(:has(.diff)),
+      li:not(:has(.diff)) + li:has(.diff),
+      li:not(:has(.diff)) + li:not(:has(.diff)) {
+        &:before {
+          counter-increment: item 1;
+          content: counter(item);
+        };
+      }
+
+      li:has(.del) + li:has(.ins) {
+        &:before {
+          counter-increment: item 0;
+          content: counter(item);
+        }
+      }
+
+      // This is required to over-ride the visually-hidden element
+      // that is otherwise assigned the first counter
+      // when a new set of steps are added
+      & > span.steps > span + li:before {
+        content: "1";
+      }
+    }
+
     //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;
+      @extend .steps;
+
+      &:has(>span.diff.del) {
+        @include diff-block;
+
+        background: $removed-color;
+      }
+
+      &:has(>span.diff.ins) {
+        @include diff-block;
+
+        background: $added-color;
+      }
+
+      margin-left: -$comparison-sidebar-padding;
+      width: calc(100% + $comparison-sidebar-padding);
+
+      li {
+        position: relative;
+        margin-top: 0.75em;
+        margin-bottom: 0.75em;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        & > p {
+          margin-left: $comparison-sidebar-padding;
+        }
+
+        &:has(.del) {
+          background: $removed-color;
+        }
+
+        &:has(.ins) {
+          background: $added-color;
+        }
 
         &::before {
-          display: none;
+          top: 0;
+          margin-left: $comparison-sidebar-padding;
+        }
+
+        & > span {
+          margin-left: $comparison-sidebar-padding;
+
+          p {
+            margin-bottom: 0;
+          }
         }
-        &::after { left: -$comparison-sidebar-padding + $steps-list-offset !important; }
-        &::marker {  content: "#."; }
       }
 
       li span.diff {
-        &::marker { content: unset; }
+        margin-bottom: 0;
+
         &::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;
+          min-height: auto; // 1.6em;
         }
       }
     }
   }
 
   // Table-specific overrides
-    $table-row-offset: -2px;
+  $table-row-offset: -2px;
 
   table {
     overflow-x: visible;
   }
 
+  // These elements are generated before new and removed dtables
+  // We need to remove them from the display and
+  // style the tables that follows them as a new/removed element
+  & > span.diff.ins {
+    display: none;
+
+    & + table {
+      @include diff-block;
+
+      &:before {
+        content: "+";
+      }
+    }
+  }
+
+  & > span.diff.del {
+    display: none;
+
+    & + table {
+      @include diff-block;
+
+      background: $removed-color;
+
+      &:before {
+        content: "−";
+        background: $removed-color;
+      }
+    }
+  }
+
   tr.diff {
     position: static;
-    display: table-row;
     transform: scale(1);
 
+    &.del, &.ins {
+      display: table-row;
+    }
+
     &.del::after, &.ins::after {
       left: -$comparison-sidebar-padding + $table-row-offset;
       // Need to account for border in row element
@@ -331,12 +492,14 @@ $comparison-sidebar-offset: $comparison-sidebar-width + $comparison-sidebar-padd
       color: $text-colour;
       background-color: $diff-marker-removed-color;
       content: "−";
+      font-weight: normal;
     }
 
     &.ins td:first-child::before, &.ins th:first-child::before {
       color: $text-colour;
       background-color: $diff-marker-added-color;
       content: "+";
+      font-weight: normal;
     }
   }
 }

data/lib/nokodiff/changes_in_fragments.rb

@@ -43,18 +43,18 @@ module Nokodiff
       append_accumulated_text(before_fragment, accumulated_before_text)
       append_accumulated_text(after_fragment, accumulated_after_text)
 
-      before_fragment.add_child(highlight_changes(change.old_element, before_fragment))
-      after_fragment.add_child(highlight_changes(change.new_element, after_fragment))
+      before_fragment.add_child(wrap_character_as_change(change.old_element, before_fragment))
+      after_fragment.add_child(wrap_character_as_change(change.new_element, after_fragment))
     end
 
     def emphasise_deletion(change)
       append_accumulated_text(before_fragment, accumulated_before_text)
-      before_fragment.add_child(highlight_changes(change.old_element, before_fragment))
+      before_fragment.add_child(wrap_character_as_change(change.old_element, before_fragment))
     end
 
     def emphasise_addition(change)
       append_accumulated_text(after_fragment, accumulated_after_text)
-      after_fragment.add_child(highlight_changes(change.new_element, after_fragment))
+      after_fragment.add_child(wrap_character_as_change(change.new_element, after_fragment))
     end
 
     def append_accumulated_text(fragment, accumulated_text)

data/lib/nokodiff/differ.rb

@@ -135,7 +135,7 @@ module Nokodiff
       node.children.each_cons(2) do |left, right|
         next unless node_is_a_change?(left) && node_is_a_change?(right)
 
-        left.content = left.content + right.content
+        left.children += right.children
         right.remove
 
         merge_adjacent_highlighted_changes(node)

data/lib/nokodiff/formatting_helpers.rb

@@ -1,12 +1,22 @@
 module Nokodiff
   module FormattingHelpers
-    def highlight_changes(char, fragment)
+    def wrap_character_as_change(char, fragment)
       Nokogiri::XML::Node.new("span", fragment.document).tap do |n|
         n.content = char
         n["class"] = "diff-marker"
       end
     end
 
+    def wrap_node_as_change(node)
+      return unless node
+
+      wrapper = Nokogiri::XML::Node.new("span", node.document)
+      wrapper["class"] = "diff-marker"
+
+      node.replace(wrapper)
+      wrapper.add_child(node)
+    end
+
     def insert_table_row_change_marker(element, message)
       marker = Nokogiri::XML::Node.new("span", element.document)
       marker.content = "#{message} "

data/lib/nokodiff/text_node_diffs.rb

@@ -16,8 +16,10 @@ module Nokodiff
     attr_accessor :before_fragment, :after_fragment
 
     def diff_text_nodes(before_node, after_node)
-      if before_node&.text? || after_node&.text?
+      if !contains_another_element?(before_node) && !contains_another_element?(after_node)
         diff_text_node_content(before_node, after_node)
+      elsif mixed_text_and_element_nodes(before_node, after_node)
+        mark_nodes_as_changed(before_node, after_node)
       elsif before_node&.element? || after_node&.element?
         before_children = before_node ? before_node.children.to_a : []
         after_children = after_node ? after_node.children.to_a : []
@@ -30,6 +32,19 @@ module Nokodiff
       end
     end
 
+    def contains_another_element?(node)
+      node && !node.text?
+    end
+
+    def mixed_text_and_element_nodes(before_node, after_node)
+      (before_node&.text? && after_node&.element?) || (before_node&.element? && after_node&.text?)
+    end
+
+    def mark_nodes_as_changed(before_node, after_node)
+      wrap_node_as_change(before_node)
+      wrap_node_as_change(after_node)
+    end
+
     def diff_text_node_content(before_text_node, after_text_node)
       before_chars = get_chars(before_text_node)
       after_chars = get_chars(after_text_node)

data/lib/nokodiff/version.rb

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

data/lib/nokodiff.rb

@@ -2,7 +2,6 @@
 
 require "nokogiri"
 require "diff-lcs"
-require "byebug"
 
 require_relative "nokodiff/formatting_helpers"
 require_relative "nokodiff/version"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nokodiff
 version: !ruby/object:Gem::Version
-  version: 1.0.0.rc1
+  version: 1.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -23,6 +23,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: byebug
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -93,40 +107,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: actionview
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.1.4
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.1.4
-- !ruby/object:Gem::Dependency
-  name: byebug
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: diff-lcs
   requirement: !ruby/object:Gem::Requirement
@@ -141,74 +121,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: gds-api-adapters
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '101.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '103.4'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '101.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '103.4'
-- !ruby/object:Gem::Dependency
-  name: govspeak
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 10.6.3
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 10.6.3
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.1.4
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.1.4
-- !ruby/object:Gem::Dependency
-  name: view_component
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4'
 email:
 - govuk-dev@digital.cabinet-office.gov.uk
 executables: []
@@ -237,14 +149,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.2'
+      version: '3.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.16
+rubygems_version: 4.0.22
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML