fix: correctly trigger warnings when matched text is on separate lines

Match was occurring on separate lines because we were searching across the entire container div
rather than the individual divs that each line in the mssage is made up of. This fix iterates
through each childNode (div) of text and identifies a match that way. Note, this doesn't fix the
highlighting though of phrases that span multiple lines.

spec/JustNotSorrySpec.test.js

@@ -97,7 +97,7 @@ describe('JustNotSorry', () => {
       });
       node.simulate('focus');
 
-      expect(spy).toHaveBeenCalledWith(node.getDOMNode().parentNode);
+      expect(spy).toHaveBeenCalledWith(node.getDOMNode());
     });
   });
 
@@ -184,7 +184,7 @@ describe('JustNotSorry', () => {
         expect.objectContaining({
           pattern: '\\b!{3,}\\B',
           message: 'warning message',
-          parentNode: node,
+          parentNode: node.parentNode,
         })
       );
     });
@@ -202,7 +202,7 @@ describe('JustNotSorry', () => {
         expect.objectContaining({
           pattern: 'just',
           message: 'warning message',
-          parentNode: node,
+          parentNode: node.parentNode,
         })
       );
     });
@@ -233,7 +233,7 @@ describe('JustNotSorry', () => {
         expect.objectContaining({
           pattern: 'just',
           message: 'warning message',
-          parentNode: node,
+          parentNode: node.parentNode,
         })
       );
     });
@@ -250,7 +250,7 @@ describe('JustNotSorry', () => {
         expect.objectContaining({
           pattern: 'just',
           message: 'warning message',
-          parentNode: node,
+          parentNode: node.parentNode,
         })
       );
     });
@@ -267,7 +267,7 @@ describe('JustNotSorry', () => {
         expect.objectContaining({
           pattern: 'so sorry',
           message: 'warning message',
-          parentNode: node,
+          parentNode: node.parentNode,
         })
       );
     });

src/components/JustNotSorry.js

@@ -50,18 +50,22 @@ class JustNotSorry extends Component {
   }
 
   updateWarnings = (node, pattern, message) => {
-    domRegexpMatch(node, pattern, (match, range) => {
-      const newWarning = {
-        pattern: pattern.source,
-        message: message,
-        parentNode: node,
-        rangeToHighlight: range,
-      };
-
-      this.setState((state) => ({
-        warnings: state.warnings.concat(newWarning),
-      }));
-    });
+    if (node.childNodes) {
+      node.childNodes.forEach((childNode) => {
+        domRegexpMatch(childNode, pattern, (match, range) => {
+          const newWarning = {
+            pattern: pattern.source,
+            message: message,
+            parentNode: node.parentNode,
+            rangeToHighlight: range,
+          };
+
+          this.setState((state) => ({
+            warnings: state.warnings.concat(newWarning),
+          }));
+        });
+      });
+    }
   };
 
   addWarning = (node, warning) =>
@@ -82,13 +86,10 @@ class JustNotSorry extends Component {
   };
 
   addObserver = (event) => {
-    const element = event.currentTarget;
-    element.addEventListener(
-      'input',
-      this.checkForWarnings(element.parentNode)
-    );
-    this.addWarnings(element.parentNode);
-    this.observer.observe(element, OPTIONS);
+    const node = event.currentTarget;
+    this.observer.observe(node, OPTIONS);
+    node.addEventListener('input', this.checkForWarnings(node));
+    this.addWarnings(node);
   };
 
   removeObserver = (event) => {