@adobe/helix-html-pipeline 1.1.1 → 1.2.0

package/src/utils/mdast-to-hast.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2018 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { toHast as mdast2hast, defaultHandlers } from 'mdast-util-to-hast';
+import { raw } from 'hast-util-raw';
+import { visit, CONTINUE } from 'unist-util-visit';
+
+import section from './section-handler.js';
+import heading from './heading-handler.js';
+
+/**
+ * Turns the MDAST into a HAST structure
+ * @param {Node} mdast mdast tree
+ * @param {GithubSlugger} slugger github slugger for the heading ids
+ * @returns {Root} the HAST document
+ */
+export default function getHast(mdast, slugger) {
+  const hast = mdast2hast(mdast, {
+    handlers: {
+      ...defaultHandlers,
+      section: section(),
+      heading: heading(slugger),
+    },
+    allowDangerousHtml: true,
+  });
+
+  // TODO: remove for cleanup
+  // the following recreates a bug with the old vdom transformer that would create a
+  // <p></p> for all raw `<p>` before a block with void elements.
+  visit(hast, (node, idx, parent) => {
+    if (node.type !== 'raw' || node.value !== '<p>') {
+      return CONTINUE;
+    }
+    // check if any other raw empty nodes follow until the </p>
+    for (let i = idx + 1; i < parent.children.length; i += 1) {
+      const next = parent.children[i];
+      if (next.type === 'raw') {
+        if (next.value === '</p>') {
+          return i + 1;
+        }
+        if (next.value === '<br>' || next.value.startsWith('<img ')) {
+          node.value = '<p></p>';
+          return i + 1;
+        }
+      }
+    }
+    /* c8 ignore next */
+    return CONTINUE;
+  });
+
+  return raw(hast);
+}

package/src/utils/section-handler.js

@@ -10,7 +10,6 @@
  * governing permissions and limitations under the License.
  */
 import { all } from 'mdast-util-to-hast';
-import { wrap } from 'mdast-util-to-hast/lib/wrap.js';
 
 const HELIX_NAMESPACE = 'hlx-';
 const DEFAULT_SECTION_TAG = 'div';
@@ -61,9 +60,12 @@ export default function sectionHandler() {
 
     const tagName = getTagName(n);
     const props = getAttributes(n);
-    props.class = props.class ? `${DEFAULT_SECTION_CLASS} ${props.class}` : DEFAULT_SECTION_CLASS;
-    const children = wrap(all(h, n), true);
-
+    props.className = [DEFAULT_SECTION_CLASS];
+    if (props.class) {
+      props.className.push(...props.class.split(/\s+/));
+    }
+    delete props.class;
+    const children = all(h, n);
     return h(node, tagName, props, children);
   };
 }

package/src/utils/hast-util-to-dom.js

@@ -1,190 +0,0 @@
-/*
- * (ISC License)
- *
- * Copyright (c) 2018 Keith McKnight <keith@mcknig.ht>
- *
- * Permission to use, copy, modify, and/or distribute this software for any purpose
- * with or without fee is hereby granted, provided that the above copyright notice
- * and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
- * FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
- * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
- * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
- * THIS SOFTWARE.
- */
-
-// This was copied from https://github.com/syntax-tree/hast-util-to-dom/blob/master/src/index.js
-// and adapted so that it can be used with JSDOM
-// TODO: contribute back to original
-
-/* eslint-disable header/header */
-import { find as infoFind, html as infoHtml } from 'property-information';
-
-const ns = {
-  html: 'http://www.w3.org/1999/xhtml',
-};
-/* istanbul ignore next */
-const wrap = (document) => {
-  // Add all children.
-  function appendAll(node, children, options) {
-    const childrenLength = children.length;
-
-    for (let i = 0; i < childrenLength; i += 1) {
-      // eslint-disable-next-line no-use-before-define
-      node.appendChild(transform(children[i], options));
-    }
-
-    return node;
-  }
-
-  // Create a document.
-  function root(node, options) {
-    const { fragment, namespace: optionsNamespace } = options;
-    const { children = [] } = node;
-    const { length: childrenLength } = children;
-
-    let namespace = optionsNamespace;
-    let rootIsDocument = childrenLength === 0;
-
-    for (let i = 0; i < childrenLength; i += 1) {
-      const { tagName, properties = {} } = children[i];
-
-      /* c8 ignore start */
-      if (tagName === 'html') {
-        // If we have a root HTML node, we don’t need to render as a fragment.
-        rootIsDocument = true;
-
-        // Take namespace of the first child.
-        if (typeof optionsNamespace === 'undefined') {
-          namespace = properties.xmlns || ns.html;
-        }
-      }
-      /* c8 ignore end */
-    }
-
-    // The root node will be a Document, DocumentFragment, or HTMLElement.
-    let el;
-
-    if (rootIsDocument) {
-      el = document.implementation.createDocument(namespace, '', null);
-    } else if (fragment) {
-      el = document.createDocumentFragment();
-    } else {
-      /* c8 ignore next */
-      el = document.createElement('html');
-    }
-
-    return appendAll(el, children, { fragment, namespace, ...options });
-  }
-
-  // Create a `doctype`.
-  function doctype(node) {
-    return document.implementation.createDocumentType(
-      node.name || 'html',
-      node.public || '',
-      node.system || '',
-    );
-  }
-
-  // Create a `text`.
-  function text(node) {
-    return document.createTextNode(node.value);
-  }
-
-  // Create a `comment`.
-  function comment(node) {
-    return document.createComment(node.value);
-  }
-
-  // Create an `element`.
-  function element(node, options) {
-    const { namespace } = options;
-    // TODO: use `g` in SVG space.
-    const { tagName = 'div', properties = {}, children = [] } = node;
-    const el = typeof namespace !== 'undefined'
-      ? document.createElementNS(namespace, tagName)
-      : document.createElement(tagName);
-
-    // Add HTML attributes.
-    const props = Object.keys(properties);
-    const { length } = props;
-
-    for (let i = 0; i < length; i += 1) {
-      const key = props[i];
-
-      const {
-        attribute,
-        property,
-        // `mustUseAttribute`,
-        mustUseProperty,
-        boolean,
-        booleanish,
-        overloadedBoolean,
-        // `number`,
-        // `defined`,
-        commaSeparated,
-        // `spaceSeparated`,
-        // `commaOrSpaceSeparated`,
-      } = infoFind(infoHtml, key);
-
-      let value = properties[key];
-
-      if (Array.isArray(value)) {
-        value = value.join(commaSeparated ? ', ' : ' ');
-      }
-
-      if (mustUseProperty) {
-        el[property] = value;
-      }
-
-      if (boolean || (overloadedBoolean && typeof value === 'boolean')) {
-        if (value) {
-          el.setAttribute(attribute, '');
-        } else {
-          el.removeAttribute(attribute);
-        }
-      } else if (booleanish) {
-        el.setAttribute(attribute, value);
-      } else if (value === true) {
-        el.setAttribute(attribute, '');
-      } else if (value || value === 0 || value === '') {
-        el.setAttribute(attribute, value);
-      }
-    }
-
-    return appendAll(el, children, options);
-  }
-
-  // the raw node is stored in the value directly
-  function raw(node) {
-    return node.frag;
-  }
-
-  function transform(node, options) {
-    switch (node.type) {
-      case 'root':
-        return root(node, options);
-      case 'text':
-        return text(node);
-      case 'element':
-        return element(node, options);
-      case 'doctype':
-        return doctype(node);
-      case 'comment':
-        return comment(node);
-      case 'raw':
-        return raw(node);
-      default:
-        return element(node, options);
-    }
-  }
-
-  return transform;
-};
-
-export default function toDOM(document, hast, options = {}) {
-  return wrap(document)(hast, options);
-}

package/src/utils/icon-handler.js

@@ -1,40 +0,0 @@
-/*
- * Copyright 2019 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * Handles `icon` MDAST nodes by converting them into `img` or `<svg>` tags, e.g.
- * `<img class="icon icon-smile" src="/icons/smile.svg"/>` or
- * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons.svg#smile"></use></svg>`
- * @param {string} id the identifier of the icon
- */
-export default function icon() {
-  return function handler(h, node) {
-    let { value } = node;
-    value = encodeURIComponent(value);
-    if (value.startsWith('%23')) {
-      // icon starts with #
-      value = value.substring(3);
-      return [h(node, 'svg', {
-        xmlns: 'http://www.w3.org/2000/svg',
-        className: `icon icon-${value}`,
-      }, [h(node, 'use', {
-        href: `/icons.svg#${value}`,
-      })])];
-    } else {
-      return [h(node, 'img', {
-        className: `icon icon-${value}`,
-        src: `/icons/${value}.svg`,
-        alt: `${value} icon`,
-      })];
-    }
-  };
-}

package/src/utils/link-handler.js

@@ -1,25 +0,0 @@
-/*
- * Copyright 2018 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-import { link as fallback } from 'mdast-util-to-hast/lib/handlers/link.js';
-import { parse, serialize } from 'uri-js';
-
-export default function link({ extension = 'html' } = {}) {
-  return function handler(h, node) {
-    const n = { ...node };
-    const uriParts = parse(n.url);
-    if (!uriParts.scheme && uriParts.path) {
-      uriParts.path = uriParts.path.replace(/\.md$/, `.${extension}`);
-      n.url = serialize(uriParts, { absolutePath: true });
-    }
-    return fallback(h, n);
-  };
-}

package/src/utils/mdast-to-vdom.js

@@ -1,323 +0,0 @@
-/*
- * Copyright 2018 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import { selectAll } from 'unist-util-select';
-import { toHast as mdast2hast, defaultHandlers } from 'mdast-util-to-hast';
-import { toHtml as hast2html } from 'hast-util-to-html';
-import { JSDOM } from 'jsdom';
-
-import toDOM from './hast-util-to-dom.js';
-import HeadingHandler from './heading-handler.js';
-import link from './link-handler.js';
-import table from './table-handler.js';
-import icon from './icon-handler.js';
-import section from './section-handler.js';
-
-const types = [
-  'root',
-  'paragraph',
-  'text',
-  'heading',
-  'thematicBreak',
-  'blockquote',
-  'list',
-  'listItem',
-  'table',
-  'tableRow',
-  'tableCell',
-  'html',
-  'code',
-  'yaml',
-  'definition',
-  'footnoteDefinition',
-  'emphasis',
-  'strong',
-  'delete',
-  'inlineCode',
-  'break',
-  'link',
-  'image',
-  'linkReference',
-  'imageReference',
-  'footnote',
-  'footnoteReference',
-  'embed',
-  'dataEmbed',
-  'section',
-  'icon',
-];
-
-/**
- * @typedef {function(parent, tagName, attributes, children)} handlerFunction
- * @param {Node} parent the root node to append the new dom node to
- * @param {string} tagName name of the new tag
- * @param {object} attributes HTML attributes as key-value pairs
- * @param {Node[]} children list of children
- */
-
-/**
- * Utility class that transforms an MDAST (Markdown) node into a (virtual) DOM
- * representation of the same content.
- */
-export default class VDOMTransformer {
-  /**
-   * Initializes the transformer with a Markdown document or fragment of a document
-   * @param {Node} mdast the markdown AST node to start the transformation from.
-   * @param {object} options options for custom transformers
-   */
-  constructor(mdast, options) {
-    this._matchers = [];
-    this._handlers = {};
-    this._options = {};
-
-    // go over all handlers that have been defined
-
-    const that = this;
-    // use our own handle function for every known node type
-    types.map((type) => {
-      this._handlers[type] = (cb, node, parent) => VDOMTransformer.handle(cb, node, parent, that);
-      return true;
-    });
-
-    if (mdast) {
-      this.withMdast(mdast);
-    }
-    this.withOptions(options);
-  }
-
-  withOptions(options = {}) {
-    this._options = Object.assign(this._options, options);
-
-    this._headingHandler = new HeadingHandler(options.slugger);
-    this.match('heading', this._headingHandler.handler());
-    this.match('link', link(this._options));
-    this.match('icon', icon());
-    this.match('table', table());
-    this.match('section', section());
-    this.match('html', (h, node) => {
-      if (node.value.startsWith('<!--')) {
-        return h.augment(node, {
-          type: 'comment',
-          value: node.value.substring(4, node.value.length - 3),
-        });
-      }
-      this._hasRaw = true;
-      const frag = JSDOM.fragment(node.value);
-      return h.augment(node, {
-        type: 'raw',
-        value: '', // we ignore the value here and treat it later in hast-util-to-dom
-        frag,
-        html: node.value,
-      });
-    });
-
-    return this;
-  }
-
-  withMdast(mdast) {
-    this._root = mdast;
-
-    return this;
-  }
-
-  /**
-   * A mdast-util-to-hast handler function that applies matchers and
-   * falls back to the default mdast-util-to-hast handlers if no matchers
-   * apply
-   * @private
-   * @param {handlerFunction} cb
-   * @param {Node} node the MDAST node to transofrm
-   * @param {Node} parent the MDAST parent or root node for select expressions
-   * @param {VDOMTransformer} that the MDAST to VDOM transformer
-   * @returns {Node} a HTAST representation of the `node` input
-   */
-  static handle(cb, node, parent, that) {
-    // get the function that handles this node type
-    // this will fall back to the default if none matches
-    const handlefn = that.matches(node);
-
-    // process the node
-
-    const result = handlefn(cb, node, parent);
-    if (result && typeof result === 'string') {
-      throw new Error('returning string from a handler is not supported yet.');
-    } else if (result && typeof result === 'object' && result.outerHTML) {
-      throw new Error('returning a DOM element from a handler is not supported yet.');
-    }
-    return result;
-  }
-
-  /**
-   * Returns the default handler for a given node type
-   * @param {Node} node an MDAST node
-   * @returns {handlerFunction} the default handler function
-   */
-  static default(node) {
-    // use the default handler from mdast-util-to-hast
-    return defaultHandlers[node.type];
-  }
-
-  /**
-   * A predicate function that filters MDAST nodes
-   * @typedef {function(node)} matcherFunction
-   * @param {Node} node an MDAST node
-   * @returns {boolean} true for matching nodes
-   */
-
-  /**
-   * Registers a handler function for nodes that match either a select expression
-   * or a matcher predicate function. The `matcher` will be evaluated against every
-   * node in the MDAST. In cases where the `matcher` matches (returns true), the
-   * processor will be called with the current node.
-   * @param {(string|matcherFunction)} matcher either an unist-util-select expression
-   * or a predicate function
-   * @param {handlerFunction} processor the appropriate handler function to handle matching types.
-   * @returns {VDOMTransformer} this, enabling chaining
-   */
-  match(matcher, processor) {
-    const matchfn = typeof matcher === 'function' ? matcher : VDOMTransformer.matchfn(this._root, matcher);
-    this._matchers.push([matchfn, processor]);
-    return this;
-  }
-
-  /**
-   * Finds an appropriate handler for a given MDAST node
-   * @private
-   * @param {Node} node an MDAST node
-   * @returns {handlerFunction} a handler function to process the node with
-   */
-  matches(node) {
-    // go through all matchers to find processors where matchfn matches
-    // start with most recently added processors
-    for (let i = this._matchers.length - 1; i >= 0; i -= 1) {
-      const [matchfn, processor] = this._matchers[i];
-      if (matchfn(node, this._root)) {
-        // return the first processor that matches
-        return processor;
-      }
-    }
-    // add the fallback processors
-    return VDOMTransformer.default(node);
-  }
-
-  /**
-   * Turns an unist-util-select expression into a matcher predicate function
-   * @private
-   * @param {Node} ast the MDAST root node to evaluated expressions against
-   * @param {string} pattern a CSS-like unist-util-select expression
-   * @returns {matcherFunction} a corresponding matcher function that returns true
-   * for nodes matching the pattern
-   */
-  static matchfn(ast, pattern) {
-    // evaluating selectAll on a large tree for each handler is very expensive.
-    // use node name for simple element selectors
-    if (/^\w+$/.test(pattern)) {
-      return function match(node) {
-        return node.type === pattern;
-      };
-    }
-
-    return function match(node, myast = ast) {
-      return selectAll(pattern, myast).indexOf(node) >= 0;
-    };
-  }
-
-  /**
-   * Tries to sanitize inline HTML elements. The remark parser creates `raw` nodes for html.
-   * In case of inline html, those are not closed elements. since we generated the DOM already
-   * in the HTML handler, we get incomplete fragments, missing the inner HTML. This method tries
-   * to fix this. It doesn't support inner markdown-elements, though.
-   *
-   * @param {object} node HAST node
-   */
-  static sanitizeInlineHTML(node) {
-    const stack = [];
-    for (let i = 0; i < node.children.length; i += 1) {
-      const child = node.children[i];
-      if (child.type === 'raw') {
-        if (child.frag.firstElementChild === null) {
-          if (stack.length === 0) {
-            // ignore unmatched inline elements
-          } else {
-            const last = stack.pop();
-            let html = '';
-            for (let j = last; j <= i; j += 1) {
-              const innerChild = node.children[j];
-              if (innerChild.type === 'raw') {
-                html += innerChild.html;
-              } else {
-                html += hast2html(innerChild);
-              }
-            }
-            node.children[last].frag = JSDOM.fragment(html);
-            node.children[last].html = html;
-            node.children.splice(last + 1, i - last);
-            i = last;
-          }
-        } else {
-          stack.push(i);
-        }
-      } else if (child.children && child.children.length) {
-        VDOMTransformer.sanitizeInlineHTML(child);
-      }
-    }
-  }
-
-  /**
-   * Turns the MDAST into a full DOM-like structure using JSDOM
-   * @returns {Document} a full DOM document
-   */
-  getDocument() {
-    // mdast -> hast; hast -> DOM using JSDOM
-    const hast = mdast2hast(this._root, {
-      handlers: this._handlers,
-      allowDangerousHtml: true,
-    });
-
-    if (this._hasRaw) {
-      VDOMTransformer.sanitizeInlineHTML(hast);
-    }
-
-    const dom = new JSDOM();
-    const doc = dom.window.document;
-    const frag = toDOM(doc, hast, { fragment: true });
-
-    if (frag.nodeName === '#document') {
-      // this only happens if it's an empty markdown document, so just ignore
-    } else {
-      doc.body.appendChild(frag);
-    }
-
-    // add convenience function to serialize entire document. this is to make it similar to the
-    // document created in html-to-vdom.
-    doc.serialize = dom.serialize.bind(dom);
-
-    // this is a bit a hack to pass the JSDOM instance along, so that other module can use it.
-    // this ensures that other modules can parse documents and fragments that are compatible
-    // with this document
-    Object.defineProperty(doc, 'JSDOM', {
-      enumerable: false,
-      writable: false,
-      value: JSDOM,
-    });
-
-    // this is another hack to pass the respective window instance along. this is to ensure that
-    // the shared prototypes can be used to check node instances (see jsdom 16.x release)
-    Object.defineProperty(doc, 'window', {
-      enumerable: false,
-      writable: false,
-      value: dom.window,
-    });
-
-    return doc;
-  }
-}