@tryghost/kg-parser-plugins - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

cjs/parser-plugins.js

 'use strict';
 
-/**
- * Copied from:
- * https://github.com/TryGhost/Ghost-Admin/blob/1f3d77d7230dd47a7eb5f38b90dfa510b2a16801/lib/koenig-editor/addon/options/parser-plugins.js
- * Which makes use of:
- * https://github.com/TryGhost/Ghost-Admin/blob/1f3d77d7230dd47a7eb5f38b90dfa510b2a16801/lib/koenig-editor/addon/helpers/clean-basic-html.js
- *
- * These functions are used to proces nodes during parsing from DOM -> mobiledoc
- */
+Object.defineProperty(exports, '__esModule', { value: true });
 
-// @TODO: resolve browser vs node env here
-// import {cleanBasicHtml} from 'koenig-editor/helpers/clean-basic-html';
+var cleanBasicHtml = require('@tryghost/kg-clean-basic-html');
 
-// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
-function brToSoftBreakAtom(node, builder, {addMarkerable, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'BR') {
-        return;
-    }
+/* global DOMParser, window */
 
-    let softReturn = builder.createAtom('soft-return');
-    addMarkerable(softReturn);
+function createParserPlugins(_options = {}) {
+    const defaults = {};
+    const options = Object.assign({}, defaults, _options);
 
-    nodeFinished();
-}
+    if (!options.createDocument) {
+        if (!DOMParser || (window && !window.DOMParser)) {
+            throw new Error('createParserPlugins() must be passed a `createDocument` function as an option when used in a non-browser environment');
+        }
 
-// leading newlines in text nodes will add a space to the beginning of the text
-// which doesn't render correctly if we're replacing <br> with SoftReturn atoms
-// after parsing text as markdown to html
-function removeLeadingNewline(node) {
-    if (node.nodeType !== 3 || node.nodeName !== '#text') {
-        return;
+        options.createDocument = function (html) {
+            const parser = new (DOMParser || (window && window.DOMParser))();
+            return parser.parseFromString(html, 'text/html');
+        };
     }
 
-    node.nodeValue = node.nodeValue.replace(/^\n/, '');
-}
+    // PLUGINS -----------------------------------------------------------------
 
-function figureToImageCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
-        return;
-    }
+    // mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
+    function brToSoftBreakAtom(node, builder, {addMarkerable, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'BR') {
+            return;
+        }
 
-    let img = node.querySelector('img');
-    let figcaption = node.querySelector('figcaption');
-    let kgClass = node.className.match(/kg-width-(wide|full)/);
-    let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
+        let softReturn = builder.createAtom('soft-return');
+        addMarkerable(softReturn);
 
-    if (!img) {
-        return;
+        nodeFinished();
     }
 
-    let payload = {
-        src: img.src,
-        alt: img.alt,
-        title: img.title
-    };
+    // leading newlines in text nodes will add a space to the beginning of the text
+    // which doesn't render correctly if we're replacing <br> with SoftReturn atoms
+    // after parsing text as markdown to html
+    function removeLeadingNewline(node) {
+        if (node.nodeType !== 3 || node.nodeName !== '#text') {
+            return;
+        }
 
-    if (kgClass) {
-        payload.cardWidth = kgClass[1];
-    } else if (grafClass) {
-        payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
+        node.nodeValue = node.nodeValue.replace(/^\n/, '');
     }
 
-    if (figcaption) {
-        // @TODO: resolve browser vs node env here
-        //let cleanHtml = cleanBasicHtml(figcaption.innerHTML);
-        //payload.caption = cleanHtml;
-        payload.caption = figcaption.innerHTML;
-    }
+    function figureToImageCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+            return;
+        }
 
-    let cardSection = builder.createCardSection('image', payload);
-    addSection(cardSection);
-    nodeFinished();
-}
+        let img = node.querySelector('img');
+        let figcaption = node.querySelector('figcaption');
+        let kgClass = node.className.match(/kg-width-(wide|full)/);
+        let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
 
-function imgToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'IMG') {
-        return;
+        if (!img) {
+            return;
+        }
+
+        let payload = {
+            src: img.src,
+            alt: img.alt,
+            title: img.title
+        };
+
+        if (kgClass) {
+            payload.cardWidth = kgClass[1];
+        } else if (grafClass) {
+            payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
+        }
+
+        if (figcaption) {
+            let cleanHtml = cleanBasicHtml(figcaption.innerHTML, options);
+            payload.caption = cleanHtml;
+        }
+
+        let cardSection = builder.createCardSection('image', payload);
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let payload = {
-        src: node.src,
-        alt: node.alt,
-        title: node.title
-    };
+    function imgToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'IMG') {
+            return;
+        }
 
-    let cardSection = builder.createCardSection('image', payload);
-    addSection(cardSection);
-    nodeFinished();
-}
+        let payload = {
+            src: node.src,
+            alt: node.alt,
+            title: node.title
+        };
 
-function hrToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'HR') {
-        return;
+        let cardSection = builder.createCardSection('image', payload);
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let cardSection = builder.createCardSection('hr');
-    addSection(cardSection);
-    nodeFinished();
-}
+    function hrToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'HR') {
+            return;
+        }
 
-function preCodeToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'PRE') {
-        return;
+        let cardSection = builder.createCardSection('hr');
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let [codeElement] = node.children;
+    function figureToCodeCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+            return;
+        }
 
-    if (codeElement && codeElement.tagName === 'CODE') {
-        let payload = {code: codeElement.textContent};
+        let pre = node.querySelector('pre');
+        let code = pre.querySelector('code');
+        let figcaption = node.querySelector('figcaption');
+
+        // if there's no caption the preCodeToCard plugin will pick it up instead
+        if (!code || !figcaption) {
+            return;
+        }
+
+        let payload = {
+            code: code.textContent,
+            caption: cleanBasicHtml(figcaption.innerHTML, options)
+        };
+
+        let preClass = pre.getAttribute('class') || '';
+        let codeClass = code.getAttribute('class') || '';
+        let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+        let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+        if (languageMatches) {
+            payload.language = languageMatches[1].toLowerCase();
+        }
+
         let cardSection = builder.createCardSection('code', payload);
@@ -115,13 +142,38 @@ addSection(cardSection);
     }
+
+    function preCodeToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'PRE') {
+            return;
+        }
+
+        let [codeElement] = node.children;
+
+        if (codeElement && codeElement.tagName === 'CODE') {
+            let payload = {code: codeElement.textContent};
+
+            let preClass = node.getAttribute('class') || '';
+            let codeClass = codeElement.getAttribute('class') || '';
+            let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+            let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+            if (languageMatches) {
+                payload.language = languageMatches[1].toLowerCase();
+            }
+
+            let cardSection = builder.createCardSection('code', payload);
+            addSection(cardSection);
+            nodeFinished();
+        }
+    }
+
+    return [
+        brToSoftBreakAtom,
+        removeLeadingNewline,
+        figureToImageCard,
+        imgToCard,
+        hrToCard,
+        figureToCodeCard,
+        preCodeToCard
+    ];
 }
 
-var parserPlugins = [
-    brToSoftBreakAtom,
-    removeLeadingNewline,
-    figureToImageCard,
-    imgToCard,
-    hrToCard,
-    preCodeToCard
-];
-
-module.exports = parserPlugins;
+exports.createParserPlugins = createParserPlugins;

es/parser-plugins.js

@@ -1,122 +0,144 @@
-/**
- * Copied from:
- * https://github.com/TryGhost/Ghost-Admin/blob/1f3d77d7230dd47a7eb5f38b90dfa510b2a16801/lib/koenig-editor/addon/options/parser-plugins.js
- * Which makes use of:
- * https://github.com/TryGhost/Ghost-Admin/blob/1f3d77d7230dd47a7eb5f38b90dfa510b2a16801/lib/koenig-editor/addon/helpers/clean-basic-html.js
- *
- * These functions are used to proces nodes during parsing from DOM -> mobiledoc
- */
-// @TODO: resolve browser vs node env here
-// import {cleanBasicHtml} from 'koenig-editor/helpers/clean-basic-html';
-// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
-function brToSoftBreakAtom(node, builder, {
-  addMarkerable,
-  nodeFinished
-}) {
-  if (node.nodeType !== 1 || node.tagName !== 'BR') {
-    return;
-  }
+import cleanBasicHtml from '@tryghost/kg-clean-basic-html';
 
-  let softReturn = builder.createAtom('soft-return');
-  addMarkerable(softReturn);
-  nodeFinished();
-} // leading newlines in text nodes will add a space to the beginning of the text
-// which doesn't render correctly if we're replacing <br> with SoftReturn atoms
-// after parsing text as markdown to html
+/* global DOMParser, window */
+function createParserPlugins(_options = {}) {
+  const defaults = {};
+  const options = Object.assign({}, defaults, _options);
 
+  if (!options.createDocument) {
+    if (!DOMParser || window && !window.DOMParser) {
+      throw new Error('createParserPlugins() must be passed a `createDocument` function as an option when used in a non-browser environment');
+    }
 
-function removeLeadingNewline(node) {
-  if (node.nodeType !== 3 || node.nodeName !== '#text') {
-    return;
-  }
+    options.createDocument = function (html) {
+      const parser = new (DOMParser || window && window.DOMParser)();
+      return parser.parseFromString(html, 'text/html');
+    };
+  } // PLUGINS -----------------------------------------------------------------
+  // mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
 
-  node.nodeValue = node.nodeValue.replace(/^\n/, '');
-}
 
-function figureToImageCard(node, builder, {
-  addSection,
-  nodeFinished
-}) {
-  if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
-    return;
-  }
+  function brToSoftBreakAtom(node, builder, {
+    addMarkerable,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'BR') {
+      return;
+    }
 
-  let img = node.querySelector('img');
-  let figcaption = node.querySelector('figcaption');
-  let kgClass = node.className.match(/kg-width-(wide|full)/);
-  let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
+    let softReturn = builder.createAtom('soft-return');
+    addMarkerable(softReturn);
+    nodeFinished();
+  } // leading newlines in text nodes will add a space to the beginning of the text
+  // which doesn't render correctly if we're replacing <br> with SoftReturn atoms
+  // after parsing text as markdown to html
 
-  if (!img) {
-    return;
-  }
 
-  let payload = {
-    src: img.src,
-    alt: img.alt,
-    title: img.title
-  };
+  function removeLeadingNewline(node) {
+    if (node.nodeType !== 3 || node.nodeName !== '#text') {
+      return;
+    }
 
-  if (kgClass) {
-    payload.cardWidth = kgClass[1];
-  } else if (grafClass) {
-    payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
+    node.nodeValue = node.nodeValue.replace(/^\n/, '');
   }
 
-  if (figcaption) {
-    // @TODO: resolve browser vs node env here
-    //let cleanHtml = cleanBasicHtml(figcaption.innerHTML);
-    //payload.caption = cleanHtml;
-    payload.caption = figcaption.innerHTML;
-  }
+  function figureToImageCard(node, builder, {
+    addSection,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+      return;
+    }
 
-  let cardSection = builder.createCardSection('image', payload);
-  addSection(cardSection);
-  nodeFinished();
-}
+    let img = node.querySelector('img');
+    let figcaption = node.querySelector('figcaption');
+    let kgClass = node.className.match(/kg-width-(wide|full)/);
+    let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
 
-function imgToCard(node, builder, {
-  addSection,
-  nodeFinished
-}) {
-  if (node.nodeType !== 1 || node.tagName !== 'IMG') {
-    return;
+    if (!img) {
+      return;
+    }
+
+    let payload = {
+      src: img.src,
+      alt: img.alt,
+      title: img.title
+    };
+
+    if (kgClass) {
+      payload.cardWidth = kgClass[1];
+    } else if (grafClass) {
+      payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
+    }
+
+    if (figcaption) {
+      let cleanHtml = cleanBasicHtml(figcaption.innerHTML, options);
+      payload.caption = cleanHtml;
+    }
+
+    let cardSection = builder.createCardSection('image', payload);
+    addSection(cardSection);
+    nodeFinished();
   }
 
-  let payload = {
-    src: node.src,
-    alt: node.alt,
-    title: node.title
-  };
-  let cardSection = builder.createCardSection('image', payload);
-  addSection(cardSection);
-  nodeFinished();
-}
+  function imgToCard(node, builder, {
+    addSection,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'IMG') {
+      return;
+    }
 
-function hrToCard(node, builder, {
-  addSection,
-  nodeFinished
-}) {
-  if (node.nodeType !== 1 || node.tagName !== 'HR') {
-    return;
+    let payload = {
+      src: node.src,
+      alt: node.alt,
+      title: node.title
+    };
+    let cardSection = builder.createCardSection('image', payload);
+    addSection(cardSection);
+    nodeFinished();
   }
 
-  let cardSection = builder.createCardSection('hr');
-  addSection(cardSection);
-  nodeFinished();
-}
+  function hrToCard(node, builder, {
+    addSection,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'HR') {
+      return;
+    }
 
-function preCodeToCard(node, builder, {
-  addSection,
-  nodeFinished
-}) {
-  if (node.nodeType !== 1 || node.tagName !== 'PRE') {
-    return;
+    let cardSection = builder.createCardSection('hr');
+    addSection(cardSection);
+    nodeFinished();
   }
 
-  let [codeElement] = node.children;
+  function figureToCodeCard(node, builder, {
+    addSection,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+      return;
+    }
 
-  if (codeElement && codeElement.tagName === 'CODE') {
+    let pre = node.querySelector('pre');
+    let code = pre.querySelector('code');
+    let figcaption = node.querySelector('figcaption'); // if there's no caption the preCodeToCard plugin will pick it up instead
+
+    if (!code || !figcaption) {
+      return;
+    }
+
     let payload = {
-      code: codeElement.textContent
+      code: code.textContent,
+      caption: cleanBasicHtml(figcaption.innerHTML, options)
     };
+    let preClass = pre.getAttribute('class') || '';
+    let codeClass = code.getAttribute('class') || '';
+    let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+    let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+
+    if (languageMatches) {
+      payload.language = languageMatches[1].toLowerCase();
+    }
+
     let cardSection = builder.createCardSection('code', payload);
@@ -126,7 +148,36 @@ addSection(cardSection);
   }
+
+  function preCodeToCard(node, builder, {
+    addSection,
+    nodeFinished
+  }) {
+    if (node.nodeType !== 1 || node.tagName !== 'PRE') {
+      return;
+    }
+
+    let [codeElement] = node.children;
+
+    if (codeElement && codeElement.tagName === 'CODE') {
+      let payload = {
+        code: codeElement.textContent
+      };
+      let preClass = node.getAttribute('class') || '';
+      let codeClass = codeElement.getAttribute('class') || '';
+      let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+      let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+
+      if (languageMatches) {
+        payload.language = languageMatches[1].toLowerCase();
+      }
+
+      let cardSection = builder.createCardSection('code', payload);
+      addSection(cardSection);
+      nodeFinished();
+    }
+  }
+
+  return [brToSoftBreakAtom, removeLeadingNewline, figureToImageCard, imgToCard, hrToCard, figureToCodeCard, preCodeToCard];
 }
 
-var parserPlugins = [brToSoftBreakAtom, removeLeadingNewline, figureToImageCard, imgToCard, hrToCard, preCodeToCard];
-
-export default parserPlugins;
+export { createParserPlugins };
 //# sourceMappingURL=parser-plugins.js.map

lib/parser-plugins.js

@@ -0,1 +1,3 @@
+/* global DOMParser, window */
+
 /**
@@ -10,101 +12,133 @@ * Copied from:
 
-// @TODO: resolve browser vs node env here
-// import {cleanBasicHtml} from 'koenig-editor/helpers/clean-basic-html';
+import cleanBasicHtml from '@tryghost/kg-clean-basic-html';
 
-// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
-function brToSoftBreakAtom(node, builder, {addMarkerable, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'BR') {
-        return;
+export function createParserPlugins(_options = {}) {
+    const defaults = {};
+    const options = Object.assign({}, defaults, _options);
+
+    if (!options.createDocument) {
+        if (!DOMParser || (window && !window.DOMParser)) {
+            throw new Error('createParserPlugins() must be passed a `createDocument` function as an option when used in a non-browser environment');
+        }
+
+        options.createDocument = function (html) {
+            const parser = new (DOMParser || (window && window.DOMParser))();
+            return parser.parseFromString(html, 'text/html');
+        };
     }
 
-    let softReturn = builder.createAtom('soft-return');
-    addMarkerable(softReturn);
+    // PLUGINS -----------------------------------------------------------------
 
-    nodeFinished();
-}
+    // mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom
+    function brToSoftBreakAtom(node, builder, {addMarkerable, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'BR') {
+            return;
+        }
 
-// leading newlines in text nodes will add a space to the beginning of the text
-// which doesn't render correctly if we're replacing <br> with SoftReturn atoms
-// after parsing text as markdown to html
-function removeLeadingNewline(node) {
-    if (node.nodeType !== 3 || node.nodeName !== '#text') {
-        return;
+        let softReturn = builder.createAtom('soft-return');
+        addMarkerable(softReturn);
+
+        nodeFinished();
     }
 
-    node.nodeValue = node.nodeValue.replace(/^\n/, '');
-}
+    // leading newlines in text nodes will add a space to the beginning of the text
+    // which doesn't render correctly if we're replacing <br> with SoftReturn atoms
+    // after parsing text as markdown to html
+    function removeLeadingNewline(node) {
+        if (node.nodeType !== 3 || node.nodeName !== '#text') {
+            return;
+        }
 
-function figureToImageCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
-        return;
+        node.nodeValue = node.nodeValue.replace(/^\n/, '');
     }
 
-    let img = node.querySelector('img');
-    let figcaption = node.querySelector('figcaption');
-    let kgClass = node.className.match(/kg-width-(wide|full)/);
-    let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
+    function figureToImageCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+            return;
+        }
 
-    if (!img) {
-        return;
-    }
+        let img = node.querySelector('img');
+        let figcaption = node.querySelector('figcaption');
+        let kgClass = node.className.match(/kg-width-(wide|full)/);
+        let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/);
 
-    let payload = {
-        src: img.src,
-        alt: img.alt,
-        title: img.title
-    };
+        if (!img) {
+            return;
+        }
 
-    if (kgClass) {
-        payload.cardWidth = kgClass[1];
-    } else if (grafClass) {
-        payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
-    }
+        let payload = {
+            src: img.src,
+            alt: img.alt,
+            title: img.title
+        };
 
-    if (figcaption) {
-        // @TODO: resolve browser vs node env here
-        //let cleanHtml = cleanBasicHtml(figcaption.innerHTML);
-        //payload.caption = cleanHtml;
-        payload.caption = figcaption.innerHTML;
-    }
+        if (kgClass) {
+            payload.cardWidth = kgClass[1];
+        } else if (grafClass) {
+            payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide';
+        }
 
-    let cardSection = builder.createCardSection('image', payload);
-    addSection(cardSection);
-    nodeFinished();
-}
+        if (figcaption) {
+            let cleanHtml = cleanBasicHtml(figcaption.innerHTML, options);
+            payload.caption = cleanHtml;
+        }
 
-function imgToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'IMG') {
-        return;
+        let cardSection = builder.createCardSection('image', payload);
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let payload = {
-        src: node.src,
-        alt: node.alt,
-        title: node.title
-    };
+    function imgToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'IMG') {
+            return;
+        }
 
-    let cardSection = builder.createCardSection('image', payload);
-    addSection(cardSection);
-    nodeFinished();
-}
+        let payload = {
+            src: node.src,
+            alt: node.alt,
+            title: node.title
+        };
 
-function hrToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'HR') {
-        return;
+        let cardSection = builder.createCardSection('image', payload);
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let cardSection = builder.createCardSection('hr');
-    addSection(cardSection);
-    nodeFinished();
-}
+    function hrToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'HR') {
+            return;
+        }
 
-function preCodeToCard(node, builder, {addSection, nodeFinished}) {
-    if (node.nodeType !== 1 || node.tagName !== 'PRE') {
-        return;
+        let cardSection = builder.createCardSection('hr');
+        addSection(cardSection);
+        nodeFinished();
     }
 
-    let [codeElement] = node.children;
+    function figureToCodeCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+            return;
+        }
 
-    if (codeElement && codeElement.tagName === 'CODE') {
-        let payload = {code: codeElement.textContent};
+        let pre = node.querySelector('pre');
+        let code = pre.querySelector('code');
+        let figcaption = node.querySelector('figcaption');
+
+        // if there's no caption the preCodeToCard plugin will pick it up instead
+        if (!code || !figcaption) {
+            return;
+        }
+
+        let payload = {
+            code: code.textContent,
+            caption: cleanBasicHtml(figcaption.innerHTML, options)
+        };
+
+        let preClass = pre.getAttribute('class') || '';
+        let codeClass = code.getAttribute('class') || '';
+        let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+        let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+        if (languageMatches) {
+            payload.language = languageMatches[1].toLowerCase();
+        }
+
         let cardSection = builder.createCardSection('code', payload);
@@ -114,11 +148,36 @@ addSection(cardSection);
     }
+
+    function preCodeToCard(node, builder, {addSection, nodeFinished}) {
+        if (node.nodeType !== 1 || node.tagName !== 'PRE') {
+            return;
+        }
+
+        let [codeElement] = node.children;
+
+        if (codeElement && codeElement.tagName === 'CODE') {
+            let payload = {code: codeElement.textContent};
+
+            let preClass = node.getAttribute('class') || '';
+            let codeClass = codeElement.getAttribute('class') || '';
+            let langRegex = /lang(?:uage)?-(.*?)(?:\s|$)/i;
+            let languageMatches = preClass.match(langRegex) || codeClass.match(langRegex);
+            if (languageMatches) {
+                payload.language = languageMatches[1].toLowerCase();
+            }
+
+            let cardSection = builder.createCardSection('code', payload);
+            addSection(cardSection);
+            nodeFinished();
+        }
+    }
+
+    return [
+        brToSoftBreakAtom,
+        removeLeadingNewline,
+        figureToImageCard,
+        imgToCard,
+        hrToCard,
+        figureToCodeCard,
+        preCodeToCard
+    ];
 }
-
-export default [
-    brToSoftBreakAtom,
-    removeLeadingNewline,
-    figureToImageCard,
-    imgToCard,
-    hrToCard,
-    preCodeToCard
-];

package.json

 {
   "name": "@tryghost/kg-parser-plugins",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "repository": "https://github.com/TryGhost/Ghost-SDK/tree/master/packages/kg-parser-plugins",
@@ -32,2 +32,4 @@ "author": "Ghost Foundation",
     "@babel/preset-env": "7.4.4",
+    "@tryghost/mobiledoc-kit": "0.11.2-ghost.1",
+    "jsdom": "15.0.0",
     "mocha": "5.2.0",
@@ -39,3 +41,6 @@ "rollup": "1.10.1",
   },
-  "gitHead": "2d7cb5a6473209823964068740b1e3d334f5cfa0"
+  "dependencies": {
+    "@tryghost/kg-clean-basic-html": "^0.1.0"
+  },
+  "gitHead": "82fc89a5999e3915df9d5dc0792c860370030b7a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30933

increased by54.19%

Lines of code

436

increased by39.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

9

increased by28.57%

Dependency changes

• + Added@tryghost/kg-clean-basic-html@^0.1.0

• + Added@tryghost/kg-clean-basic-html@0.1.9(transitive)