@adobe/helix-md2docx 1.4.1 → 1.4.4

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.4.4](https://github.com/adobe/helix-md2docx/compare/v1.4.3...v1.4.4) (2022-04-13)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-docx2md to v1.0.11 ([2224d95](https://github.com/adobe/helix-md2docx/commit/2224d95859e2e2b38e2beec50dac68c709406458))
+
+## [1.4.3](https://github.com/adobe/helix-md2docx/compare/v1.4.2...v1.4.3) (2022-04-11)
+
+
+### Bug Fixes
+
+* add support for svg images ([1f66ff4](https://github.com/adobe/helix-md2docx/commit/1f66ff4869a1bcd31e7cc092df623a55c8c83dab))
+* **deps:** update dependency @adobe/helix-fetch to v3.0.9 ([35ffd0e](https://github.com/adobe/helix-md2docx/commit/35ffd0e867e61d4aa1ad0de50ef26ebb35d4fe1c))
+
+## [1.4.2](https://github.com/adobe/helix-md2docx/compare/v1.4.1...v1.4.2) (2022-04-02)
+
+
+### Bug Fixes
+
+* **deps:** update adobe fixes ([#55](https://github.com/adobe/helix-md2docx/issues/55)) ([dc33fdc](https://github.com/adobe/helix-md2docx/commit/dc33fdcb4b55f4cc8aaf44be99f81bf9f8918fd1))
+
 ## [1.4.1](https://github.com/adobe/helix-md2docx/compare/v1.4.0...v1.4.1) (2022-03-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-md2docx",
-  "version": "1.4.1",
+  "version": "1.4.4",
   "description": "Helix Service that converts markdown to word documents",
   "main": "src/index.js",
   "type": "module",
@@ -27,14 +27,15 @@
   },
   "homepage": "https://github.com/adobe/helix-md2docx#readme",
   "dependencies": {
-    "@adobe/helix-fetch": "3.0.7",
+    "@adobe/helix-docx2md": "1.0.11",
+    "@adobe/helix-fetch": "3.0.9",
     "@adobe/helix-markdown-support": "3.1.2",
     "@adobe/helix-shared-process-queue": "1.1.4",
-    "@adobe/helix-docx2md": "1.0.10",
     "docx": "7.3.0",
     "hast-util-is-element": "2.1.2",
     "hast-util-to-mdast": "8.3.1",
     "image-size": "1.0.1",
+    "mime": "3.0.0",
     "rehype-parse": "8.0.4",
     "remark-gfm": "3.0.1",
     "remark-parse": "10.0.1",
@@ -43,7 +44,7 @@
   },
   "devDependencies": {
     "@adobe/eslint-config-helix": "1.3.2",
-    "@adobe/helix-mediahandler": "1.0.13",
+    "@adobe/helix-mediahandler": "1.0.18",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -51,9 +52,9 @@
     "chai": "4.3.6",
     "codecov": "3.8.3",
     "dotenv": "16.0.0",
-    "eslint": "8.11.0",
+    "eslint": "8.13.0",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "fs-extra": "10.0.1",
     "husky": "7.0.4",
     "junit-report-builder": "3.0.0",

package/src/md2docx/index.d.ts

@@ -9,14 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-declare interface Logger {}
+import { Mdast2DocxOptions } from '../mdast2docx'
 
 /**
  * Converts the md to a word document (docx).
  *
- * @param {Node} md The md
- * @param {Logger} [log] a console like logger
- * @param {string} [stylesXML] The content of the styles.xml file of a Word template (to override provided default)
+ * @param {string} md The markdown document
+ * @param {Mdast2DocxOptions} [opts] options
  * @returns {Promise<Buffer>} the docx
  */
-export default function md2docx(mdast: object, log: Logger, stylesXML: string): Promise<Buffer>;
+export default function md2docx(md: string, opts?: Mdast2DocxOptions): Promise<Buffer>;

package/src/md2docx/index.js

@@ -15,12 +15,12 @@ import gfm from 'remark-gfm';
 import { remarkMatter } from '@adobe/helix-markdown-support';
 import mdast2docx from '../mdast2docx/index.js';
 
-export default async function md2docx(md, log = console, stylesXML = null) {
+export default async function md2docx(md, opts) {
   const mdast = unified()
     .use(remark, { position: false })
     .use(gfm)
     .use(remarkMatter)
     .parse(md);
 
-  return mdast2docx(mdast, log, stylesXML);
+  return mdast2docx(mdast, opts);
 }

package/src/mdast2docx/handlers/image.js

@@ -12,7 +12,9 @@
 import docx from 'docx';
 import { findXMLComponent } from '../utils.js';
 
-const { Drawing, ImageRun } = docx;
+const {
+  Drawing, ImageRun, XmlComponent, XmlAttributeComponent,
+} = docx;
 
 // max image width (6.5") and height (2")
 const LIMITS = {
@@ -86,5 +88,89 @@ export default async function image(ctx, node) {
   pic.root.push(drawing);
   pic.key = data.key;
   pic.imageData = imageData;
+
+  // for SVGs, we need to generate a proper svgBlip
+  /*
+  <pic:blipFill>
+    <a:blip r:embed="rId4">
+      <a:extLst>
+        <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
+          <a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main"/>
+        </a:ext>
+        <a:ext uri="{96DAC541-7B7A-43D3-8B79-37D633B846F1}">
+          <asvg:svgBlip r:embed="rId5" xmlns:asvg="http://schemas.microsoft.com/office/drawing/2016/SVG/main"/>
+        </a:ext>
+      </a:extLst>
+    </a:blip>
+    <a:stretch>
+      <a:fillRect/>
+    </a:stretch>
+  </pic:blipFill>
+   */
+
+  class SvgBlip extends XmlComponent {
+    constructor(imgData) {
+      super('asvg:svgBlip');
+      this.imageData = imgData;
+      this.addChildElement(new XmlAttributeComponent({
+        'xmlns:asvg': 'http://schemas.microsoft.com/office/drawing/2016/SVG/main',
+        'r:embed': `rId{${imgData.fileName}}`,
+      }));
+    }
+
+    prepForXml(context) {
+      // add the svg data if it has a stream
+      if (this.imageData.stream) {
+        context.file.Media.addImage(this.imageData.fileName, this.imageData);
+      }
+
+      // add svg content type if missing
+      if (!context.file.contentTypes.root.find((entry) => entry.rootKey === 'Default'
+          && (entry.root[0].root.extension === 'svg' || entry.root[0].root.Extension === 'svg'))) {
+        context.file.contentTypes.root.push(new XmlComponent('Default').addChildElement(new XmlAttributeComponent({
+          ContentType: 'image/svg+xml',
+          Extension: 'svg',
+        })));
+      }
+      return super.prepForXml(context);
+    }
+  }
+
+  if (data.ext === 'svg' || data.svgBuffer) {
+    // create a fake image run for the svg image
+    const ir = new ImageRun({
+      data: data.svgBuffer,
+      transformation: data.dimensions,
+    });
+    ir.imageData.fileName = data.svgKey;
+
+    const blipFill = findXMLComponent(drawing, 'wp:inline/a:graphic/a:graphicData/pic:pic/pic:blipFill');
+    const blip = findXMLComponent(blipFill, 'a:blip');
+
+    // const blipAttrs = findXMLComponent(oldBlip, '_attr');
+    // blipAttrs.root.embed = `rId{${ir.imageData.fileName}}`;
+
+    // add svg stuff
+    // const newBlip = new XmlComponent('a:blip')
+    blip
+      .addChildElement(new XmlComponent('a:extLst')
+        .addChildElement(new XmlComponent('a:ext')
+          .addChildElement(new XmlAttributeComponent({
+            uri: '{28A0092B-C50C-407E-A947-70E740481C1C}',
+          }))
+          .addChildElement(new XmlComponent('a14:useLocalDpi')
+            .addChildElement(new XmlAttributeComponent({
+              'xmlns:a14': 'http://schemas.microsoft.com/office/drawing/2010/main',
+              val: '0',
+            }))))
+        .addChildElement(new XmlComponent('a:ext')
+          .addChildElement(new XmlAttributeComponent({
+            uri: '{96DAC541-7B7A-43D3-8B79-37D633B846F1}',
+          }))
+          .addChildElement(new SvgBlip(ir.imageData))));
+
+    // replace blip
+    // blipFill.root.splice(blipFill.root.indexOf(oldBlip), 1, newBlip);
+  }
   return pic;
 }

package/src/mdast2docx/index.d.ts

@@ -9,14 +9,35 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-declare interface Logger {}
+
+/**
+ * Converts an SVG to a PNG.
+ *
+ * @function
+ * @param {string} svg the input svg
+ * @return {string} the base64 encoded png
+ */
+declare type Svg2PngConverter = (svg:string) => Promise<string>;
+
+declare interface Mdast2DocxOptions {
+  /**
+   * A console like logger
+   */
+  log: Console;
+
+  /**
+   * The content of the styles.xml file of a Word template (to override provided default)
+   */
+  stylesXML: string;
+
+  svg2png?: Svg2PngConverter;
+}
 
 /**
  * Converts the mdast to a word document (docx).
  *
  * @param {Node} mdast The mdast
- * @param {Logger} [log] a console like logger
- * @param {string} [stylesXML] The content of the styles.xml file of a Word template (to override provided default)
+ * @param {Mdast2DocxOptions} [opts] options
  * @returns {Promise<Buffer>} the docx
  */
-export default function mdast2docx(mdast: object, log: Logger, stylesXML: string): Promise<Buffer>;
+export default function mdast2docx(mdast: object, opts?: Mdast2DocxOptions): Promise<Buffer>;

package/src/mdast2docx/index.js

@@ -24,7 +24,16 @@ import downloadImages from './mdast-download-images.js';
 
 const { Document, Packer } = docx;
 
-export default async function mdast2docx(mdast, log = console, stylesXML = null) {
+export default async function mdast2docx(mdast, opts = {}) {
+  const {
+    log = console,
+    svg2png,
+  } = opts;
+
+  let {
+    stylesXML = null,
+  } = opts;
+
   const ctx = {
     handlers,
     style: {},
@@ -33,6 +42,7 @@ export default async function mdast2docx(mdast, log = console, stylesXML = null)
     listLevel: -1,
     lists: [],
     log,
+    svg2png,
   };
 
   // eslint-disable-next-line no-param-reassign

package/src/mdast2docx/mdast-download-images.js

@@ -15,6 +15,7 @@ import { context as fetchAPI, h1 } from '@adobe/helix-fetch';
 import processQueue from '@adobe/helix-shared-process-queue';
 import { visit } from 'unist-util-visit';
 import getDimensions from 'image-size';
+import mime from 'mime';
 
 function createFetchContext() {
   return process.env.HELIX_FETCH_FORCE_HTTP1
@@ -33,6 +34,11 @@ function hsize(bytes, decimals = 2) {
   return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 }
 
+/**
+ * @param ctx
+ * @param tree
+ * @returns {Promise<void>}
+ */
 export default async function downloadImages(ctx, tree) {
   const context = createFetchContext();
   const { fetch } = context;
@@ -53,15 +59,16 @@ export default async function downloadImages(ctx, tree) {
       const ref = crypto.createHash('sha1')
         .update(node.url)
         .digest('hex');
-      const key = `${ref}.png`;
-      node.data = ctx.images[key];
+      node.data = ctx.images[ref];
       if (node.data) {
         return;
       }
 
       let buffer;
+      let type;
       if (node.url.startsWith('data:image/png;base64,')) {
         buffer = Buffer.from(node.url.split(',').pop(), 'base64');
+        type = 'image/png';
       } else {
         const idx = String(count).padStart(2, ' ');
         count += 1;
@@ -73,15 +80,29 @@ export default async function downloadImages(ctx, tree) {
           return;
         }
         buffer = await ret.buffer();
-        ctx.log.info(`[${idx}] ${ret.status} ${hsize(buffer.length).padStart(10)} ${ret.headers.get('content-type')}`);
+        type = ret.headers.get('content-type');
+        ctx.log.info(`[${idx}] ${ret.status} ${hsize(buffer.length).padStart(10)} ${type}`);
+      }
+      const dimensions = getDimensions(buffer);
+
+      let svgBuffer;
+      if (type === 'image/svg+xml' && ctx.svg2png) {
+        svgBuffer = buffer;
+        buffer = Buffer.from(await ctx.svg2png(svgBuffer.toString('utf-8')), 'base64');
+        type = 'image/png';
       }
 
+      const ext = mime.getExtension(type);
+
       node.data = {
-        key,
+        ext,
+        key: `${ref}.${ext}`,
         buffer,
-        dimensions: getDimensions(buffer),
+        svgBuffer,
+        svgKey: `${ref}.svg`,
+        dimensions,
       };
-      ctx.images[key] = node.data;
+      ctx.images[ref] = node.data;
     } catch (error) {
       ctx.log.error(`Cannot download image ${node.url}: ${error.message}`);
     }

package/src/mdast2docx/utils.js

@@ -10,6 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+/**
+ * @typedef {import('docx').XmlComponent} XmlComponent
+ *
+ * @param {XmlComponent} root
+ * @param path
+ * @returns {XmlComponent}
+ */
 // eslint-disable-next-line import/prefer-default-export
 export function findXMLComponent(root, path) {
   const segs = path.split('/');