fix(DOMUtils): extract leading/trailing spaces

adobe · Mar 11, 2021 · 6eda1cf · 6eda1cf
1 parent 6351084
commit 6eda1cf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -25,6 +25,8 @@
             "name": "Mocha Current File",
             "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
             "args": [
+                "-r",
+                "ts-node/register",
                 "--timeout",
                 "999999",
                 "--colors",

diff --git a/src/utils/DOMUtils.ts b/src/utils/DOMUtils.ts
@@ -50,7 +50,7 @@ export default class DOMUtils {
       if (tag.innerHTML === '.' || tag.innerHTML === '. ' || tag.innerHTML === ':' || tag.innerHTML === ': ') {
         tag.replaceWith(JSDOM.fragment(tag.innerHTML));
       } else {
-        let innerHTML = tag.innerHTML;
+        const innerHTML = tag.innerHTML;
         if (tag.previousSibling) {
           const previous = tag.previousSibling;
           if (
@@ -68,20 +68,26 @@ export default class DOMUtils {
             }
             tag.remove();
           }
-        } else {
-          if (innerHTML) {
-            if (innerHTML.lastIndexOf(' ') === innerHTML.length - 1) {
-              // move trailing space to a new text node outside of current element
-              innerHTML = tag.innerHTML = innerHTML.slice(0, innerHTML.length - 1);
-              tag.after(JSDOM.fragment('<span> </span>'));
-            }
+        }
+      }
+    }
 
-            if (innerHTML.indexOf(' ') === 0) {
-              // move leading space to a new text node outside of current element
-              tag.innerHTML = innerHTML.slice(1);
-              tag.before(JSDOM.fragment('<span> </span>'));
-            }
-          }
+    tags = [...document.querySelectorAll(tagName)];
+    // extra leading and trailing spaces into a dedicated span
+    for (let i = tags.length - 1; i >= 0; i -= 1) {
+      const tag = tags[i];
+      let innerHTML = tag.innerHTML;
+      if (innerHTML) {
+        if (innerHTML.lastIndexOf(' ') === innerHTML.length - 1) {
+          // move trailing space to a new text node outside of current element
+          innerHTML = tag.innerHTML = innerHTML.slice(0, innerHTML.length - 1);
+          tag.after(JSDOM.fragment('<span> </span>'));
+        }
+
+        if (innerHTML.indexOf(' ') === 0) {
+          // move leading space to a new text node outside of current element
+          tag.innerHTML = innerHTML.slice(1);
+          tag.before(JSDOM.fragment('<span> </span>'));
         }
       }
     }

diff --git a/test/utils/DOMUtils.spec.ts b/test/utils/DOMUtils.spec.ts
@@ -67,6 +67,9 @@ describe('DOMUtils#reviewInlineElement tests', () => {
     test('<p><strong>Sentence</strong> <strong>must</strong> <strong>be</strong> <strong>strong!</strong></p>', 'strong', '<p><strong>Sentence must be strong!</strong></p>');
   });
 
+  it('reviewInlineElement extract trailing spaces', () => {
+    test('<div><ul><li>The <strong>ideal image size </strong>for your Facebook cover photo is <strong>851px by 315px.</strong></li><li>For <u><a href="https://www.facebook.com/help/266520536764594?helpref=uf_permalink">best results</a></u>, make sure your image is <strong>JPG format</strong>, with RGB color, and <strong>less than 100 KB.</strong></li><li>Facebook will automatically format your photo to fit the cover photo slot, so if it’s not sized correctly, you might experience some distortion. If you can’t meet the recommended sizing, <strong>make sure your image is at least 400px by 150px.</strong></li><li>Cover photos are displayed at <strong>820px by 312px </strong>on desktop and at <strong>640px by 360px</strong> on a smartphone so stick to a design that works at both sizes.</li></ul><p></p></div>', 'strong', '<div><ul><li>The <strong>ideal image size</strong><span> </span>for your Facebook cover photo is <strong>851px by 315px.</strong></li><li>For <u><a href="https://www.facebook.com/help/266520536764594?helpref=uf_permalink">best results</a></u>, make sure your image is <strong>JPG format</strong>, with RGB color, and <strong>less than 100 KB.</strong></li><li>Facebook will automatically format your photo to fit the cover photo slot, so if it’s not sized correctly, you might experience some distortion. If you can’t meet the recommended sizing, <strong>make sure your image is at least 400px by 150px.</strong></li><li>Cover photos are displayed at <strong>820px by 312px</strong><span> </span>on desktop and at <strong>640px by 360px</strong> on a smartphone so stick to a design that works at both sizes.</li></ul><p></p></div>');
+  });
 });
 
 describe('DOMUtils#reviewParagraphs tests', () => {