nokodiff 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e12bce0257af1ebff2c6de595dce5d68cefc73feb5ae4a419a98a81d9dbac212
-  data.tar.gz: 9479aa3c4ae7f3481a0a96baf002735fb02a4848530a9fc38565c72118e4a2eb
+  metadata.gz: 9195a8ebd9adf0496df31641acd77e7fa84616b809ecb45cf86cd82346c3dd11
+  data.tar.gz: 7bc5d7fe060b960d7ac4fecf58f1f1e1f15b12d421a42552f0fb134cd61cc489
 SHA512:
-  metadata.gz: 864f165ec8332dbcc0a61cffda45f6649ed00d5483e969ad7d55dc9af2e4acdbe202f54686424ff387f6f36ecd160b3834e89f4d1633a8bf311534b6c09eb0b3
-  data.tar.gz: f182809b76cf85e8ce23002575fb5c2708e527cd3659628d0ef248fdce79e1581ed6a551f99ca41a16dff7bacf9d67db87579185761052136e3f491d227f8bf6
+  metadata.gz: cd3a8e7d3386676defd112e12a8153d0c2f4af5256fe5c503e81bb6e47ca45395e97d34f8756dd0ad9b600c2719c8c94a9dd9341de14130b502e17634b37c5d9
+  data.tar.gz: 8af7196b25ff0eb368046046895b625f8df80394d8fa09c5076ba6d16f6721aa869a20823f026726dc2a50fd30354250104b9336c7ab2599d0176a43c674248e

data/README.md

@@ -4,7 +4,7 @@ A Ruby Gem to highlight additions, deletions and character level changes while p
 
 It includes functionality to:
 * Compare two HTML fragments and output diffs with semantic HTML
-* Inline character differences highlighting using `<strong>` tagging
+* Inline character differences highlighting using `<span class="diff-marker">` tagging
 * Blocks of added or removed content wrapped in aria labelled `<ins>` and `<del>` tags
 * Optional CSS for styling the visual differences
 
@@ -22,6 +22,34 @@ or add it to your Gemfile
 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.
+
+To get the dummy app running you need to:
+
+### Install dependencies
+
+```bash
+bundle install
+```
+
+### Navigate to the app and install dependencies
+
+```bash
+cd spec/dummy
+bundle install
+```
+
+### Start the server
+
+```bash
+bin/rails server
+```
+
+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)`
+
 ## Usage
 
 In the controller:
@@ -48,7 +76,7 @@ In your application.scss file include:
 @import "nokodiff";
 ```
 
-This will include the styling for `<del>`, `<ins>` and `<strong>` tags to allow colour coding, highlighting and underlining of changes.
+This will include the styling for `<del>`, `<ins>` and `<span>` tags to allow colour coding, highlighting and underlining of changes.
 
 ### More complex diffing with `data-diff-key`
 
@@ -139,10 +167,10 @@ Output:
   <div data-diff-key="ixn4"><p>First paragraph</p></div>
   <div data-diff-key="zm7q">
     <div class="diff">
-      <del aria-label="removed content"><p><strong>S</strong>e<strong>cond</strong> paragraph</p></del>
+      <del aria-label="removed content"><p><span class="diff-marker">S</span>e<span class="diff-marker">cond</span> paragraph</p></del>
     </div>
     <div class="diff">
-      <ins aria-label="added content"><p><strong>N</strong>e<strong>w</strong> paragraph</p></ins>
+      <ins aria-label="added content"><p><span class="diff-marker">N</span>e<span class="diff-marker">w</span> paragraph</p></ins>
     </div>
   </div>
 </div>

data/app/assets/stylesheets/nokodiff.scss

@@ -1,75 +1,72 @@
 // stylelint-disable selector-no-qualifying-type, max-nesting-depth
 // Diff of two editions
 $added-color: #e6fff3;
-$strong-added-color: #99ffcf;
+$diff-marker-added-color: #99ffcf;
 $removed-color: #fadede;
-$strong-removed-color: #f3aeac;
+$diff-marker-removed-color: #f3aeac;
 $text-colour: #0b0c0c;
 $light-grey: #f3f2f1;
 $black: #0b0c0c;
 
 .compare-editions {
-  border: 1px solid $light-grey;
+  position: relative;
   border-left: 40px solid $light-grey;
   padding: 15px;
 
   .diff {
-    margin: 0 -15px;
-    padding: 0 15px;
-    word-wrap: break-word;
+    position: static;
     margin-bottom: 10px;
-    position: relative;
 
-    del,
-    ins {
-      text-decoration: none;
+    del, ins, ul, li {
+      position: static !important;
       display: block;
-      padding: 2px 4px;
+      text-decoration: none;
       border-radius: 3px;
     }
-  }
 
-  del {
-    background-color: $removed-color;
-    padding-bottom: 2px;
+    del {
+      background-color: $removed-color;
+      padding-bottom: 2px;
 
-    strong {
-      font-weight: normal;
-      background-color: $strong-removed-color;
-      border-bottom: 2px dashed $black;
+      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 {
+      background-color: $added-color;
+      padding-bottom: 2px;
 
-    strong {
-      font-weight: normal;
-      background-color: $strong-added-color;
-      border-bottom: 2px dashed $black;
+      span.diff-marker {
+        font-weight: normal;
+        background-color: $diff-marker-added-color;
+        border-bottom: 2px dashed $black;
+      }
     }
-  }
 
-  del::before,
-  ins::before {
-    position: absolute;
-    margin-left: -59px;
-    width: 40px;
-    text-align: center;
-    top: 0;
-    bottom: 0;
+    del::before,
+    ins::before {
+      position: absolute;
+      left: -40px;
+      width: 40px;
+      height: 1.5em;
+      line-height: 1.5em;
+      text-align: center;
+      z-index: 10;
+    }
   }
 
   del::before {
     color: $text-colour;
-    background-color: $strong-removed-color;
+    background-color: $diff-marker-removed-color;
     content: "−";
   }
 
   ins::before {
     color: $text-colour;
-    background-color: $strong-added-color;
+    background-color: $diff-marker-added-color;
     content: "+";
   }
-}
+}

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(wrap_in_strong(change.old_element, before_fragment))
-      after_fragment.add_child(wrap_in_strong(change.new_element, after_fragment))
+      before_fragment.add_child(highlight_changes(change.old_element, before_fragment))
+      after_fragment.add_child(highlight_changes(change.new_element, after_fragment))
     end
 
     def emphasise_deletion(change)
       append_accumulated_text(before_fragment, accumulated_before_text)
-      before_fragment.add_child(wrap_in_strong(change.old_element, before_fragment))
+      before_fragment.add_child(highlight_changes(change.old_element, before_fragment))
     end
 
     def emphasise_addition(change)
       append_accumulated_text(after_fragment, accumulated_after_text)
-      after_fragment.add_child(wrap_in_strong(change.new_element, after_fragment))
+      after_fragment.add_child(highlight_changes(change.new_element, after_fragment))
     end
 
     def append_accumulated_text(fragment, accumulated_text)

data/lib/nokodiff/differ.rb

@@ -11,7 +11,7 @@ module Nokodiff
         when :unchanged
           unchanged_block(diff[:before])
         when :changed
-          deleted_block(char_diff_html(diff[:before], diff[:after]).first) + added_block(char_diff_html(diff[:before], diff[:after]).last)
+          changed_block(diff[:before], diff[:after])
         when :deleted
           deleted_block(diff[:before])
         when :added
@@ -26,62 +26,115 @@ module Nokodiff
       before_nodes = @before.children.to_a
       after_nodes = @after.children.to_a
 
-      max = [before_nodes.length, after_nodes.length].max
-
-      max.times.map do |i|
-        before_node = before_nodes[i]
-        after_node = after_nodes[i]
+      before_html_strings = before_nodes.map { |n| n.to_html.strip }
+      after_html_strings  = after_nodes.map { |n| n.to_html.strip }
+
+      Diff::LCS.sdiff(before_html_strings, after_html_strings).map do |change|
+        case change.action
+        when "="
+          {
+            status: :unchanged,
+            before: before_nodes[change.old_position],
+            after: after_nodes[change.new_position],
+          }
+        when "!"
+          {
+            status: :changed,
+            before: before_nodes[change.old_position],
+            after: after_nodes[change.new_position],
+          }
+        when "-"
+          {
+            status: :deleted,
+            before: before_nodes[change.old_position],
+            after: nil,
+          }
+        when "+"
+          {
+            status: :added,
+            before: nil,
+            after: after_nodes[change.new_position],
+          }
+        end
+      end
+    end
 
-        set_change_status(before_node, after_node)
+    def changed_block(before_node, after_node)
+      if structurally_similar?(before_node, after_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)
+      else
+        before_diff, after_diff = diff_sub_elements(before_node, after_node)
+        deleted_block(before_diff) + added_block(after_diff)
       end
     end
 
-    def char_diff_html(before_html, after_html)
+    def structurally_similar?(before_node, after_node)
+      before_node.element? &&
+        after_node.element? &&
+        before_node.name == after_node.name &&
+        before_node.name != "p"
+    end
+
+    def rebuild_element(template_node, inner_html)
+      result = template_node.dup
+      result.inner_html = inner_html
+      result.to_html
+    end
+
+    def diff_raw_text(before_text, after_text)
+      diff = Diff::LCS.sdiff(before_text.text.chars, after_text.text.chars)
+      before_fragment, after_fragment = Nokodiff::ChangesInFragments.new(diff).call
+      [merge_fragment_spans(before_fragment), merge_fragment_spans(after_fragment)]
+    end
+
+    def merge_fragment_spans(fragment)
+      doc = fragment.document
+      wrapper = Nokogiri::XML::Node.new("span", doc)
+      wrapper.inner_html = fragment.to_html
+      merge_adjacent_highlighted_changes(wrapper)
+      wrapper.inner_html
+    end
+
+    def diff_sub_elements(before_html, after_html)
       before_dup = before_html.dup
       after_dup = after_html.dup
 
       before_fragment, after_fragment = Nokodiff::TextNodeDiffs.new(before_dup, after_dup).call
 
-      merge_adjacent_strong_tags(before_fragment)
-      merge_adjacent_strong_tags(after_fragment)
+      merge_adjacent_highlighted_changes(before_fragment)
+      merge_adjacent_highlighted_changes(after_fragment)
 
       [before_fragment.to_html, after_fragment.to_html]
     end
 
-    def set_change_status(before_node, after_node)
-      if before_node && after_node
-        if before_node.to_html.strip == after_node.to_html.strip
-          { status: :unchanged, before: before_node, after: after_node }
-        else
-          { status: :changed, before: before_node, after: after_node }
-        end
-      elsif before_node
-        { status: :deleted, before: before_node, after: nil }
-      elsif after_node
-        { status: :added, before: nil, after: after_node }
-      end
-    end
-
-    def merge_adjacent_strong_tags(node)
+    def merge_adjacent_highlighted_changes(node)
       return unless node.element?
 
       node.children.each do |child|
-        merge_adjacent_strong_tags(child) if child.element?
+        merge_adjacent_highlighted_changes(child) if child.element?
       end
 
       node.children.each_cons(2) do |left, right|
-        next unless left.name == "strong" && right.name == "strong"
+        next unless node_is_a_change?(left) && node_is_a_change?(right)
 
         left.content = left.content + right.content
         right.remove
 
-        merge_adjacent_strong_tags(node)
+        merge_adjacent_highlighted_changes(node)
         break
       end
     end
 
-    def unchanged_block(html)
-      html.to_s
+    def node_is_a_change?(node)
+      node.name == "span" && node["class"] == "diff-marker"
+    end
+
+    def unchanged_block(node)
+      node.to_html
     end
 
     def deleted_block(html)

data/lib/nokodiff/formatting_helpers.rb

@@ -1,11 +1,10 @@
 module Nokodiff
   module FormattingHelpers
-    def wrap_in_strong(char, fragment)
-      Nokogiri::XML::Node.new("strong", fragment.document).tap { |n| n.content = char }
-    end
-
-    def strong(text_node)
-      text_node.replace(wrap_in_strong(text_node.to_html, text_node.parent))
+    def highlight_changes(char, fragment)
+      Nokogiri::XML::Node.new("span", fragment.document).tap do |n|
+        n.content = char
+        n["class"] = "diff-marker"
+      end
     end
   end
 end

data/lib/nokodiff/text_node_diffs.rb

@@ -31,9 +31,6 @@ module Nokodiff
     end
 
     def diff_text_node_content(before_text_node, after_text_node)
-      return strong(before_text_node) if text_removed?(before_text_node, after_text_node)
-      return strong(after_text_node) if text_added?(before_text_node, after_text_node)
-
       before_chars = before_text_node.text.chars
       after_chars = after_text_node.text.chars
 
@@ -44,13 +41,5 @@ module Nokodiff
       before_text_node.replace(before_fragment)
       after_text_node.replace(after_fragment)
     end
-
-    def text_removed?(before_node, after_node)
-      before_node && after_node.nil?
-    end
-
-    def text_added?(before_node, after_node)
-      before_node.nil? && after_node
-    end
   end
 end

data/lib/nokodiff/version.rb

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

data/lib/nokodiff.rb

@@ -2,6 +2,7 @@
 
 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: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -113,6 +113,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: 8.1.3
+- !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
@@ -230,7 +244,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.7
+rubygems_version: 4.0.9
 specification_version: 4
 summary: A Ruby Gem to highlight additions, deletions and character level changes
   while preserving original HTML