@adobe/helix-importer 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.5.0](https://github.com/adobe/helix-importer/compare/v1.4.1...v1.5.0) (2022-02-24)
+
+
+### Features
+
+* helper method to get an image from background image style ([#17](https://github.com/adobe/helix-importer/issues/17)) ([63a384d](https://github.com/adobe/helix-importer/commit/63a384dceb75e6815115ffd1c37c321fc7476ab6))
+
 ## [1.4.1](https://github.com/adobe/helix-importer/compare/v1.4.0...v1.4.1) (2022-02-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-importer",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Helix Importer tool: create md / docx from html",
   "main": "src/index.js",
   "type": "module",

package/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;
   }
 }

package/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">');
+  });
+});