@adobe/helix-importer 1.4.1 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.7.0](https://github.com/adobe/helix-importer/compare/v1.6.0...v1.7.0) (2022-03-09)
+
+
+### Features
+
+* do not change span with an image ([db51e1c](https://github.com/adobe/helix-importer/commit/db51e1cb068d44571c97c83d6e25b38f8e27003e))
+
+# [1.6.0](https://github.com/adobe/helix-importer/compare/v1.5.0...v1.6.0) (2022-02-24)
+
+
+### Features
+
+* trigger release ([43154bc](https://github.com/adobe/helix-importer/commit/43154bc2f093868324f66d431b71eea5083543bb))
+
+# [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.7.0",
   "description": "Helix Importer tool: create md / docx from html",
   "main": "src/index.js",
   "type": "module",

package/src/utils/DOMUtils.js

@@ -144,10 +144,13 @@ export default class DOMUtils {
   static removeSpans(document) {
     // remove spans
     document.querySelectorAll('span').forEach((span) => {
-      if (span.textContent === '') {
-        span.remove();
-      } else {
-        span.replaceWith(JSDOM.fragment(span.innerHTML));
+      if (!span.querySelector('img')) {
+        // do not touch spans with images
+        if (span.textContent === '') {
+          span.remove();
+        } else {
+          span.replaceWith(JSDOM.fragment(span.innerHTML));
+        }
       }
     });
   }
@@ -231,14 +234,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) {
+    if (url && url.toLowerCase() !== 'none') {
       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

@@ -188,6 +188,8 @@ describe('DOMUtils#removeSpans tests', () => {
     test('<p><span>Content should remain</span> the same</p>', '<p>Content should remain the same</p>');
     test('<p>Spacing<span> should</span> remain the same</p>', '<p>Spacing should remain the same</p>');
     test('<p>Spacing<span> should</span> remain the <span>same even</span> with<span> multiple spans</span></p>', '<p>Spacing should remain the same even with multiple spans</p>');
+    test('<span><div><img src="animage.jpg"></div></span>', '<span><div><img src="animage.jpg"></div></span>');
+    test('<span>Some image here: <div><img src="animage.jpg"></div></span>', '<span>Some image here: <div><img src="animage.jpg"></div></span>');
   });
 });
 
@@ -324,22 +326,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);
@@ -350,6 +352,8 @@ describe('DOMUtils#replaceBackgroundByImg', () => {
     test(createElement('p', {}, {}, 'Some content'), '<p>Some content</p>');
 
     test(createElement('img', { src: 'https://www.server.com/image.jpg', title: 'Some title' }, {}, ''), '<img src="https://www.server.com/image.jpg" title="Some title">');
+
+    test(createElement('p', {}, { 'background-image': 'none' }, 'Some content'), '<p style="background-image: none;">Some content</p>');
   });
 
   it('with background-image style', () => {
@@ -358,3 +362,24 @@ 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);
+
+    test(createElement('p', {}, { 'background-image': 'none' }, 'Some content'), 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">');
+  });
+});