feat: helper method to get an image from background image style (#17)

adobe · Feb 24, 2022 · 63a384d · 63a384d
1 parent b2daf24
commit 63a384d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 17 deletions.
diff --git a/src/utils/DOMUtils.js b/src/utils/DOMUtils.js
@@ -231,14 +231,22 @@ export default class DOMUtils {
   }
 
   static replaceBackgroundByImg(element, document) {
+    const img = DOMUtils.getImgFromBackground(element, document);
+    if (img) {
+      element.replaceWith(img);
+      return img;
+    }
+    return element;
+  }
+
+  static getImgFromBackground(element, document) {
     const url = element?.style?.['background-image'];
     if (url) {
       const src = url.replace(/url\(/gm, '').replace(/'/gm, '').replace(/\)/gm, '');
       const img = document.createElement('img');
       img.src = src;
-      element.replaceWith(img);
       return img;
     }
-    return element;
+    return null;
   }
 }
diff --git a/test/utils/DOMUtils.spec.js b/test/utils/DOMUtils.spec.js
@@ -324,22 +324,22 @@ describe('DOM#createTable tests', () => {
   });
 });
 
-describe('DOMUtils#replaceBackgroundByImg', () => {
-  const createElement = (tag, attrs, styles, innerHTML) => {
-    const { document } = (new JSDOM()).window;
-    const element = document.createElement(tag);
-    // eslint-disable-next-line no-restricted-syntax, guard-for-in
-    for (const a in attrs) {
-      element.setAttribute(a, attrs[a]);
-    }
-    // eslint-disable-next-line no-restricted-syntax, guard-for-in
-    for (const p in styles) {
-      element.style[p] = styles[p];
-    }
-    element.innerHTML = innerHTML;
-    return element;
-  };
+const createElement = (tag, attrs, styles, innerHTML) => {
+  const { document } = (new JSDOM()).window;
+  const element = document.createElement(tag);
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const a in attrs) {
+    element.setAttribute(a, attrs[a]);
+  }
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const p in styles) {
+    element.style[p] = styles[p];
+  }
+  element.innerHTML = innerHTML;
+  return element;
+};
 
+describe('DOMUtils#replaceBackgroundByImg', () => {
   const test = (element, expected) => {
     const { document } = (new JSDOM()).window;
     const ret = DOMUtils.replaceBackgroundByImg(element, document);
@@ -358,3 +358,22 @@ describe('DOMUtils#replaceBackgroundByImg', () => {
     test(createElement('div', { class: 'class-is-lost' }, { 'background-image': 'url("https://www.server.com/image.jpg")' }, '<div><div>Some divs</div><div>More divs</div></div>'), '<img src="https://www.server.com/image.jpg">');
   });
 });
+
+describe('DOMUtils#getImgFromBackground', () => {
+  const test = (element, expected) => {
+    const { document } = (new JSDOM()).window;
+    const ret = DOMUtils.getImgFromBackground(element, document);
+    strictEqual(ret ? ret.outerHTML : null, expected);
+  };
+
+  it('no background-image style', () => {
+    test(createElement('p', {}, {}, 'Some content'), null);
+
+    test(createElement('img', { src: 'https://www.server.com/image.jpg', title: 'Some title' }, {}, ''), null);
+  });
+
+  it('with background-image style', () => {
+    test(createElement('p', {}, { 'background-image': 'url(https://www.server.com/image.jpg)' }, 'Some content'), '<img src="https://www.server.com/image.jpg">');
+    test(createElement('div', { class: 'someclass' }, { 'background-image': 'url("https://www.server.com/image.jpg")', background: 'rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box' }, '<div><div>Some divs</div><div>More divs</div></div>'), '<img src="https://www.server.com/image.jpg">');
+  });
+});