Allow multiple class names in class strings

README.md

@@ -32,9 +32,9 @@ Changes to attributes of structural elements are treated as modifications (`vdd-
 
 #### Options
 
--   `addedClass: string = 'vdd-added'` The class used for annotating content additions.
--   `modifiedClass: string = 'vdd-modified'` The class used for annotating content modifications.
--   `removedClass: string = 'vdd-removed'` The class used for annotating content removals.
+-   `addedClass: string = 'vdd-added'` The class used for annotating content additions. May contain multiple classes separated by a space.
+-   `modifiedClass: string = 'vdd-modified'` The class used for annotating content modifications. May contain multiple classes separated by a space.
+-   `removedClass: string = 'vdd-removed'` The class used for annotating content removals. May contain multiple classes separated by a space.
 -   `skipModified: boolean = false` If `true`, then formatting changes are NOT wrapped in `<ins class="vdd-modified">` and modified structural elements are NOT annotated with the `vdd-modified` class.
 -   `skipChildren: (node: Node): boolean | undefined` Indicates if the child nodes of the specified `node` should be ignored. It is useful for ignoring child nodes of an element representing some embedded content, which should not be compared. Return `undefined` for the default behaviour.
 -   `skipSelf: (node: Node): boolean | undefined` Indicates if the specified `node` should be ignored. Even if the `node` is ignored, its child nodes will still be processed, unless `skipChildNodes` says they should also be ignored. Ignored elements whose child nodes are processed are treated as formatting elements. Return `undefined` for the default behaviour.

src/config.ts

@@ -15,17 +15,20 @@ import {
  */
 export interface Options {
     /**
-     * The class name to use to mark up inserted content.
+     * The class name to use to mark up inserted content. May contain multiple classes separated
+     * by a space.
      * Default is `'vdd-added'`.
      */
     addedClass?: string
     /**
-     * The class name to use to mark up modified content.
+     * The class name to use to mark up modified content. May contain multiple classes separated
+     * by a space.
      * Default is `'vdd-modified'`.
      */
     modifiedClass?: string
     /**
-     * The class name to use to mark up removed content.
+     * The class name to use to mark up removed content. May contain multiple classes separated
+     * by a space.
      * Default is `'vdd-removed'`.
      */
     removedClass?: string

src/diff.test.ts

@@ -439,15 +439,30 @@ test.each<[string, Node, Node, string, Options | undefined]>([
     ],
     [
         'custom class names',
-        htmlToFragment('<strong>Modified</strong> Removed'),
-        htmlToFragment('Modified Added'),
-        '<ins class="MODIFIED">Modified</ins> <del class="REMOVED">Remov</del><ins class="ADDED">Add</ins>ed',
+        htmlToFragment(
+            '<strong>Modified</strong> Removed <h1 id="heading">heading</h1>',
+        ),
+        htmlToFragment('Modified Added <h1 id="heading-2">heading 2</h1>'),
+        '<ins class="MODIFIED">Modified</ins> <del class="REMOVED">Remov</del><ins class="ADDED">Add</ins>ed <h1 id="heading-2" class="MODIFIED">heading<ins class="ADDED"> 2</ins></h1>',
         {
             addedClass: 'ADDED',
             modifiedClass: 'MODIFIED',
             removedClass: 'REMOVED',
         },
     ],
+    [
+        'multiple custom class names',
+        htmlToFragment(
+            '<strong>Modified</strong> Removed <h1 id="heading">heading</h1>',
+        ),
+        htmlToFragment('Modified Added <h1 id="heading-2">heading 2</h1>'),
+        '<ins class="MODIFIED MODIFIED-2">Modified</ins> <del class="REMOVED REMOVED-2">Remov</del><ins class="ADDED ADDED-2">Add</ins>ed <h1 id="heading-2" class="MODIFIED MODIFIED-2">heading<ins class="ADDED ADDED-2"> 2</ins></h1>',
+        {
+            addedClass: 'ADDED ADDED-2',
+            modifiedClass: 'MODIFIED MODIFIED-2',
+            removedClass: 'REMOVED REMOVED-2',
+        },
+    ],
     [
         'change letter case',
         htmlToFragment('Lowercase Removed'),

src/util.ts

@@ -311,16 +311,18 @@ export function markUpNode(
     const previousSibling = node.previousSibling
 
     if (isElement(node)) {
-        node.classList.add(className)
+        node.className = className
     } else if (
         previousSibling &&
         previousSibling.nodeName === elementName &&
-        (previousSibling as Element).classList.contains(className)
+        [...className.trim().split(/\s+/)].every(c =>
+            (previousSibling as Element).classList.contains(c),
+        )
     ) {
         previousSibling.appendChild(node)
     } else {
         const wrapper = document.createElement(elementName)
-        wrapper.classList.add(className)
+        wrapper.className = className
         parentNode.insertBefore(wrapper, node)
         wrapper.appendChild(node)
     }