@adobe/helix-importer 3.2.3 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [3.3.0](https://github.com/adobe/helix-importer/compare/v3.2.4...v3.3.0) (2024-03-15)
+
+
+### Bug Fixes
+
+* add image type in blob used in getDataUrlFromB64Img ([4fa0937](https://github.com/adobe/helix-importer/commit/4fa093723dba506b5abfde6a3eddc34aa14c6d36))
+* do not use node.js buffer package for blob to get code working in browser ([d6da86d](https://github.com/adobe/helix-importer/commit/d6da86d6c4715346035a2dff549d4291adc4e150))
+* fix tests after online merge resolution ([cbc326d](https://github.com/adobe/helix-importer/commit/cbc326dfe43b96f7d09e895867fff398f044c74d))
+
+
+### Features
+
+* add support for base64 images ([966c807](https://github.com/adobe/helix-importer/commit/966c807a5ebc404ee9729286d2864c968a612120))
+
+## [3.2.4](https://github.com/adobe/helix-importer/compare/v3.2.3...v3.2.4) (2024-02-28)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/mdast-util-gridtables to v4.0.1 ([#316](https://github.com/adobe/helix-importer/issues/316)) ([9b7aff5](https://github.com/adobe/helix-importer/commit/9b7aff5d83498aa7f63bf7e1f87cfeae8bf8435d))
+
 ## [3.2.3](https://github.com/adobe/helix-importer/compare/v3.2.2...v3.2.3) (2024-02-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-importer",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Helix Importer tool: create md / docx from html",
   "main": "src/index.js",
   "type": "module",
@@ -27,20 +27,20 @@
   },
   "devDependencies": {
     "@adobe/eslint-config-helix": "2.0.6",
-    "@adobe/helix-docx2md": "1.5.1",
-    "@adobe/helix-mediahandler": "2.4.9",
+    "@adobe/helix-docx2md": "1.5.6",
+    "@adobe/helix-mediahandler": "2.4.14",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@web/test-runner": "0.18.0",
+    "@web/test-runner": "0.18.1",
     "@web/test-runner-commands": "0.9.0",
     "@web/test-runner-mocha": "0.9.0",
     "c8": "9.1.0",
-    "chai": "5.0.3",
+    "chai": "5.1.0",
     "dirname-filename-esm": "1.1.1",
-    "eslint": "8.56.0",
-    "husky": "9.0.10",
+    "eslint": "8.57.0",
+    "husky": "9.0.11",
     "jsdom": "24.0.0",
     "lint-staged": "15.2.2",
     "mocha": "10.3.0",
@@ -53,9 +53,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adobe/helix-markdown-support": "7.1.0",
-    "@adobe/helix-md2docx": "2.1.41",
-    "@adobe/mdast-util-gridtables": "4.0.0",
-    "@adobe/remark-gridtables": "3.0.0",
+    "@adobe/helix-md2docx": "2.1.45",
+    "@adobe/mdast-util-gridtables": "4.0.1",
+    "@adobe/remark-gridtables": "3.0.1",
     "form-data": "4.0.0",
     "fs-extra": "11.2.0",
     "hast-util-to-mdast": "10.1.0",

package/src/importer/PageImporter.js

@@ -249,9 +249,14 @@ export default class PageImporter {
       }
 
       src = img.getAttribute('src');
+      // try to handle b64 img
       if (!src || src.indexOf('data:') === 0) {
-        // we cannot handle b64 asset for now, remove
-        img.remove();
+        const dataUrl = DOMUtils.getDataUrlFromB64Img(img.src);
+        if (dataUrl) {
+          img.setAttribute('src', dataUrl);
+        } else {
+          img.remove();
+        }
       }
 
       const alt = img.getAttribute('alt');

package/src/utils/DOMUtils.js

@@ -293,4 +293,22 @@ export default class DOMUtils {
       }, interval);
     });
   }
+
+  static getDataUrlFromB64Img(src) {
+    try {
+      const arr = src.split(',');
+      const type = arr[0].split(':')[1];
+      const b64Str = atob(arr[1]);
+      const bytesArray = new Uint8Array(b64Str.length);
+      for (let i = 0; i < b64Str.length; i += 1) {
+        bytesArray[i] = b64Str.charCodeAt(i);
+      }
+      const blob = new Blob([bytesArray], { type });
+      return URL.createObjectURL(blob);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`get data url from a base64 image (${src}):`, e);
+      return null;
+    }
+  }
 }

package/test/importers/PageImporter.spec.js

@@ -156,7 +156,10 @@ describe('PageImporter tests - various options', () => {
 });
 
 describe('PageImporter tests - fixtures', () => {
-  const featureTest = async (feature) => {
+  const featureTest = async (feature, assertFn) => {
+    // eslint-disable-next-line no-param-reassign
+    assertFn = assertFn || ((got, want) => strictEqual(got, want, 'imported md is expected one'));
+
     class Test extends PageImporter {
       async fetch() {
         const html = await fs.readFile(path.resolve(__dirname, 'fixtures', `${feature}.spec.html`), 'utf-8');
@@ -183,7 +186,7 @@ describe('PageImporter tests - fixtures', () => {
 
     const md = await storageHandler.get(results[0].md);
     const expectedMD = await fs.readFile(path.resolve(__dirname, 'fixtures', `${feature}.spec.md`), 'utf-8');
-    strictEqual(md.trim(), expectedMD.trim(), 'imported md is expected one');
+    assertFn(md.trim(), expectedMD.trim(), 'imported md is expected one');
 
     // parse md to verify mdast
     const mdast = unified()
@@ -238,6 +241,14 @@ describe('PageImporter tests - fixtures', () => {
     await featureTest('subsup');
   });
 
+  it('import - images', async () => {
+    await featureTest('img', (got, want) => {
+      if (got.indexOf(want) !== 0) {
+        throw new Error('imported md is not expected one');
+      }
+    });
+  });
+
   it('import - video', async () => {
     await featureTest('video');
   });

package/test/importers/fixtures/img.spec.html

@@ -0,0 +1,11 @@
+<html>
+  <body>
+    <h1>Images sample</h1>
+    <h3>Standard Image - should be imported as is</h3>
+    <img src="https://www.server.com/image.jpg" alt="empty alt" />
+    <h3>Image with wrong Base64 data - should be removed</h3>
+    <img src="data:image/png;base64,--dummy--" alt="empty alt" />
+    <h3>Image with correct Base64 data - should be transformed into Object Url data</h3>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="empty alt" />
+  </body>
+</html>

package/test/importers/fixtures/img.spec.md

@@ -0,0 +1,15 @@
+# Images sample
+
+### Standard Image - should be imported as is
+
+![empty alt][image0]
+
+### Image with wrong Base64 data - should be removed
+
+### Image with correct Base64 data - should be transformed into Object Url data
+
+![empty alt][image1]
+
+[image0]: https://www.server.com/image.jpg
+
+[image1]: blob:nodedata:

package/test/utils/DOMUtils.spec.js

@@ -432,3 +432,22 @@ describe('DOMUtils#getImgFromBackground', () => {
     test(createElement('p', {}, { 'background-image': 'url( /image.jpg )' }, 'Some content'), '<img src="/image.jpg">');
   });
 });
+
+describe('DOMUtils#getDataUrlFromB64Img', () => {
+  const test = (img, expected) => {
+    const dataUrl = DOMUtils.getDataUrlFromB64Img(img.src);
+    return expected(dataUrl) === true;
+  };
+
+  it('no data url in original image', () => {
+    test(createElement('img', { src: 'https://www.server.com/image.jpg' }, {}, ''), (res) => res === null);
+  });
+
+  it('malformed base64 data url in original image', () => {
+    test(createElement('img', { src: 'data:image/png;base64,--dummy--' }, {}, ''), (res) => res === null);
+  });
+
+  it('base64 data url in original image', () => {
+    test(createElement('img', { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' }, {}, ''), (res) => res.indexOf('blob:nodedata:') === 0);
+  });
+});