nokodiff 0.4.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8574d5f3cb682d4797c8d6cfa9c979e10ca2307a4c55997a0ddd6b3299801856
-  data.tar.gz: c3e4b13e2632ba3bf99de7c7a3ef5583618f68e6e94c03f877e5059b764c36e2
+  metadata.gz: 9b38060ba01f5d6e38c752d5b3736072cfb7ddb867b3f9ab85292ef731946695
+  data.tar.gz: 333e94464a25ee00c03c00c54210ef1a5c07f52804d1e8299a84cd20338c5a22
 SHA512:
-  metadata.gz: b5a8d417f70b4d7fbc1cc2c4745dbd4494d3bf401ad7038e45c239cf9c69e1bca9af24cc0d7e2a078a5d29727d91d8acf29959a5d8e6d94c2d5ba600709f4e05
-  data.tar.gz: af1d8b59965819a131bf96d6dcfd9e64e2563196bc74be4bb1c75310d2cd1f4862b40c92691cae1845e4fdf5fe7030fe52ec128376fcfcd09b3dc48649d935b6
+  metadata.gz: e1fd5d24c4c18f1d61b3f12afe10a1358a15b5504c2dd6ce1d28baadc37d156826b2dc45c309722c933691f4ae2f1a4e019dbdc4396dfece72e590772fbf5084
+  data.tar.gz: f962ce7effdf2bb103fe28c07c936fd8694e6edbb4e72059d0c46671887513bfcaf2d6ee31109446014dc7841332e34ba255b263c3712280e5cb75eaf711d401

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,490 @@ $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;
+
+@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 {
+  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;
     }
 
-    del {
-      background-color: $removed-color;
-      padding-bottom: 2px;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -$comparison-sidebar-padding;
+      min-height: 1.5em;
+      right: 0;
+      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 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: "−";
+  // Govspeak-specific overrides
+  .gem-c-govspeak & {
+    &::before { min-height: 5em; }
   }
 
-  ins::before {
-    color: $text-colour;
-    background-color: $diff-marker-added-color;
-    content: "+";
+  .diff .gem-c-button.govuk-button{
+    margin-top: 22px;
   }
-}
+
+  .form-download .diff {
+    padding-top: 10px;
+    padding-bottom: 3px;
+  }
+
+  // Inset/callout elements overrides
+
+  .address, .contact {
+    .diff{
+      $address-offset: -16px;
+
+      &::after {
+        left: -$comparison-sidebar-padding + $address-offset;
+      }
+
+      &::before {
+        left: -$comparison-sidebar-offset + $address-offset;
+      }
+    }
+  }
+
+  .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;
+        min-height: calc(1.5em + 30px);
+        left: -$comparison-sidebar-padding + $help-notice-offset;
+      }
+
+      &::before {
+        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.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;
+      }
+
+      &::before {
+        left: -$comparison-sidebar-offset + $govuk-list-offset;
+      }
+    }
+
+    ol li span.diff {
+      list-style-type: decimal;
+
+      &::after {
+        left: $comparison-sidebar-padding;
+      }
+
+      &::before {
+        left: $comparison-sidebar-offset;
+      }
+    }
+
+    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 {
+      @extend .steps;
+
+      &:has(>span.diff) {
+        @include diff-block;
+      }
+
+      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 {
+          top: 0;
+          margin-left: $comparison-sidebar-padding;
+        }
+
+        & > span {
+          margin-left: $comparison-sidebar-padding;
+
+          p {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      li span.diff {
+        margin-bottom: 0;
+
+        &::before {
+          left: -$comparison-sidebar-offset + $steps-list-offset;
+          height: 100%;
+          width: $comparison-sidebar-width;
+          min-height: auto; // 1.6em;
+        }
+      }
+    }
+  }
+
+  // Table-specific overrides
+  $table-row-offset: -2px;
+
+  table {
+    overflow-x: visible;
+  }
+
+  // This element is generated before new tables
+  // We need to remove it from the display and
+  // style the table that follows it as a new element
+  & > span.diff.ins {
+    display: none;
+
+    & + table {
+      @include diff-block;
+
+      &:before {
+        content: "+";
+      }
+    }
+  }
+
+  & > span.diff.del {
+    display: none;
+
+    & + table {
+      @include diff-block;
+
+      &:before {
+        content: "−";
+      }
+    }
+  }
+
+  tr.diff {
+    position: static;
+    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
+      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: "−";
+      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

@@ -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)
@@ -143,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)
@@ -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

@@ -1,10 +1,28 @@
 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} "
+      marker["class"] = "visually-hidden"
+
+      element.children.first.prepend_child(marker)
+    end
   end
 end

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 = "0.4.2"
+  VERSION = "1.0.0"
 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
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -23,20 +23,34 @@ 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
     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 +85,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
@@ -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.3'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '101.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '103.3'
-- !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.10
+rubygems_version: 4.0.21
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML