@tryghost/kg-parser-plugins
Advanced tools
Comparing version 2.11.10 to 2.12.0
@@ -7,2 +7,174 @@ 'use strict'; | ||
function fromKoenigCard$8() { | ||
return function kgAudioCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-audio-card')) { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-audio-title'); | ||
const audioNode = node.querySelector('.kg-audio-player-container audio'); | ||
const thumbnailNode = node.querySelector('.kg-audio-thumbnail'); | ||
const durationNode = node.querySelector('.kg-audio-duration'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const audioSrc = audioNode && audioNode.src; | ||
const thumbnailSrc = thumbnailNode && thumbnailNode.src; | ||
const durationText = durationNode && durationNode.innerHTML.trim(); | ||
if (!audioSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: audioSrc, | ||
title: title | ||
}; | ||
if (thumbnailSrc) { | ||
payload.thumbnailSrc = thumbnailSrc; | ||
} | ||
if (durationText) { | ||
const {minutes, seconds} = durationText.split(':'); | ||
try { | ||
payload.duration = parseInt(minutes) * 60 + parseInt(seconds); | ||
} catch (e) { | ||
// ignore duration | ||
} | ||
} | ||
const cardSection = builder.createCardSection('audio', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function addFigCaptionToPayload(node, payload, {selector = 'figcaption', options}) { | ||
let figcaptions = Array.from(node.querySelectorAll(selector)); | ||
if (figcaptions.length) { | ||
figcaptions.forEach((caption) => { | ||
let cleanHtml = options.cleanBasicHtml(caption.innerHTML); | ||
payload.caption = payload.caption ? `${payload.caption} / ${cleanHtml}` : cleanHtml; | ||
caption.remove(); // cleanup this processed element | ||
}); | ||
} | ||
} | ||
function readImageAttributesFromNode(node) { | ||
const attrs = {}; | ||
if (node.src) { | ||
attrs.src = node.src; | ||
} | ||
if (node.width) { | ||
attrs.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
attrs.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
attrs.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
attrs.height = parseInt(node.dataset.height, 10); | ||
} | ||
if ((!node.width && !node.height) && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = (/^(\d*)x(\d*)$/gi).exec(node.getAttribute('data-image-dimensions')); | ||
attrs.width = parseInt(width, 10); | ||
attrs.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
attrs.alt = node.alt; | ||
} | ||
if (node.title) { | ||
attrs.title = node.title; | ||
} | ||
if (node.parentNode.tagName === 'A') { | ||
const href = node.parentNode.href; | ||
if (href !== attrs.src) { | ||
attrs.href = href; | ||
} | ||
} | ||
return attrs; | ||
} | ||
function fromKoenigCard$7(options) { | ||
return function kgBeforeAfterCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-before-after-card')) { | ||
return; | ||
} | ||
const cardWidth = node.classList.contains('kg-width-full') ? 'full' : 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[1]; | ||
const afterImage = images[0]; | ||
if (!beforeImage || !afterImage) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: beforeImage.width, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: afterImage.width, | ||
src: afterImage.src | ||
} | ||
}; | ||
addFigCaptionToPayload(node, payload, {options}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function fromJetpackCard(options) { | ||
return function jetpackJuxtaposeToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('wp-block-jetpack-image-compare')) { | ||
return; | ||
} | ||
const cardWidth = 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[0]; | ||
const afterImage = images[1]; | ||
if (!beforeImage || !afterImage) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: 1000, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: 1000, | ||
src: afterImage.src | ||
} | ||
}; | ||
addFigCaptionToPayload(node, payload, {options}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function getButtonText$1(node) { | ||
@@ -16,3 +188,3 @@ let buttonText = node.textContent; | ||
function fromKoenigCard$7() { | ||
function fromKoenigCard$6() { | ||
return function kgButtonCardToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -111,14 +283,2 @@ if (node.nodeType !== 1 || !node.classList.contains('kg-button-card')) { | ||
function addFigCaptionToPayload(node, payload, {selector = 'figcaption', options}) { | ||
let figcaptions = Array.from(node.querySelectorAll(selector)); | ||
if (figcaptions.length) { | ||
figcaptions.forEach((caption) => { | ||
let cleanHtml = options.cleanBasicHtml(caption.innerHTML); | ||
payload.caption = payload.caption ? `${payload.caption} / ${cleanHtml}` : cleanHtml; | ||
caption.remove(); // cleanup this processed element | ||
}); | ||
} | ||
} | ||
// Helpers | ||
@@ -352,6 +512,121 @@ | ||
function transformSizeToBytes(sizeStr = '') { | ||
if (!sizeStr) { | ||
return 0; | ||
} | ||
const [sizeVal, sizeType] = sizeStr.split(' '); | ||
if (!sizeVal || !sizeType) { | ||
return 0; | ||
} | ||
if (sizeType === 'Bytes') { | ||
return Number(sizeVal); | ||
} else if (sizeType === 'KB') { | ||
return Number(sizeVal) * 2048; | ||
} else if (sizeType === 'MB') { | ||
return Number(sizeVal) * 2048 * 2048; | ||
} | ||
} | ||
function fromKoenigCard$5() { | ||
return function kgFileCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-file-card')) { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-file-card-title'); | ||
const captionNode = node.querySelector('.kg-file-card-caption'); | ||
const fileNameNode = node.querySelector('.kg-file-card-filename'); | ||
const fileSizeNode = node.querySelector('.kg-file-card-filesize'); | ||
const fileCardLinkNode = node.querySelector('.kg-file-card-container'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const caption = captionNode && captionNode.innerHTML.trim(); | ||
const fileName = fileNameNode && fileNameNode.innerHTML.trim(); | ||
const fileSizeStr = fileSizeNode && fileSizeNode.innerHTML.trim(); | ||
const fileSrc = fileCardLinkNode && fileCardLinkNode.href; | ||
if (!fileSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: fileSrc, | ||
fileTitle: title, | ||
fileCaption: caption, | ||
fileSize: transformSizeToBytes(fileSizeStr), | ||
fileName: fileName | ||
}; | ||
const cardSection = builder.createCardSection('file', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function fromKoenigCard$4() { | ||
return function kgHeaderCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-header-card')) { | ||
return; | ||
} | ||
const headerNode = node.querySelector('.kg-header-card-header'); | ||
const subheaderNode = node.querySelector('.kg-header-card-subheader'); | ||
const buttonNode = node.querySelector('.kg-header-card-button'); | ||
let header = ''; | ||
let subheader = ''; | ||
let buttonText = ''; | ||
let buttonUrl = ''; | ||
if (headerNode) { | ||
header = headerNode.innerHTML.trim(); | ||
} | ||
if (subheaderNode) { | ||
subheader = subheaderNode.innerHTML.trim(); | ||
} | ||
if (buttonNode) { | ||
buttonText = buttonNode.textContent.trim(); | ||
buttonUrl = buttonNode.getAttribute('href').trim(); | ||
} | ||
if (!header && !subheader && (!buttonNode || !buttonText || !buttonUrl)) { | ||
return; | ||
} | ||
const classes = [...node.classList]; | ||
let backgroundImageSrc = ''; | ||
if (node.getAttribute('data-kg-background-image')) { | ||
backgroundImageSrc = node.getAttribute('data-kg-background-image').trim(); | ||
} | ||
const payload = { | ||
header, | ||
subheader, | ||
buttonEnabled: Boolean(buttonNode), | ||
buttonText, | ||
buttonUrl, | ||
backgroundImageSrc, | ||
size: 'small', | ||
style: 'dark' | ||
}; | ||
const sizeClass = classes.find(c => /^kg-size-(small|medium|large)$/.test(c)); | ||
const styleClass = classes.find(c => /^kg-style-(dark|light|accent|image)$/.test(c)); | ||
if (sizeClass) { | ||
payload.size = sizeClass.replace('kg-size-', ''); | ||
} | ||
if (styleClass) { | ||
payload.style = styleClass.replace('kg-style-', ''); | ||
} | ||
const cardSection = builder.createCardSection('header', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
// https://github.com/TryGhost/Koenig/issues/1 | ||
// allows arbitrary HTML blocks wrapped in our card comments to be extracted | ||
// into a HTML card rather than being put through the normal parse+plugins | ||
function fromKoenigCard$6() { | ||
function fromKoenigCard$3() { | ||
return function kgHtmlCardToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -384,12 +659,12 @@ if (node.nodeType !== 8 || node.nodeValue !== 'kg-card-begin: html') { | ||
function fromBr() { | ||
// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom | ||
return function fromBrToSoftReturnAtom(node, builder, {addMarkerable, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'BR') { | ||
function fromImg() { | ||
return function imgToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'IMG') { | ||
return; | ||
} | ||
let softReturn = builder.createAtom('soft-return'); | ||
addMarkerable(softReturn); | ||
const payload = readImageAttributesFromNode(node); | ||
const cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
@@ -399,2 +674,32 @@ }; | ||
function fromFigure(options) { | ||
return function figureImgToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
const img = node.querySelector('img'); | ||
const kgClass = node.className.match(/kg-width-(wide|full)/); | ||
const grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/); | ||
if (!img) { | ||
return; | ||
} | ||
const payload = readImageAttributesFromNode(img); | ||
if (kgClass) { | ||
payload.cardWidth = kgClass[1]; | ||
} else if (grafClass) { | ||
payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide'; | ||
} | ||
addFigCaptionToPayload(node, payload, {options}); | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function getButtonText(node) { | ||
@@ -408,3 +713,3 @@ let buttonText = node.textContent; | ||
function fromKoenigCard$5() { | ||
function fromKoenigCard$2() { | ||
return function kgButtonCardToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -462,40 +767,12 @@ if (node.nodeType !== 1 || !node.classList.contains('kg-product-card')) { | ||
function fromKoenigCard$4() { | ||
return function kgAudioCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-audio-card')) { | ||
function fromBr() { | ||
// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom | ||
return function fromBrToSoftReturnAtom(node, builder, {addMarkerable, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'BR') { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-audio-title'); | ||
const audioNode = node.querySelector('.kg-audio-player-container audio'); | ||
const thumbnailNode = node.querySelector('.kg-audio-thumbnail'); | ||
const durationNode = node.querySelector('.kg-audio-duration'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const audioSrc = audioNode && audioNode.src; | ||
const thumbnailSrc = thumbnailNode && thumbnailNode.src; | ||
const durationText = durationNode && durationNode.innerHTML.trim(); | ||
let softReturn = builder.createAtom('soft-return'); | ||
addMarkerable(softReturn); | ||
if (!audioSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: audioSrc, | ||
title: title | ||
}; | ||
if (thumbnailSrc) { | ||
payload.thumbnailSrc = thumbnailSrc; | ||
} | ||
if (durationText) { | ||
const {minutes, seconds} = durationText.split(':'); | ||
try { | ||
payload.duration = parseInt(minutes) * 60 + parseInt(seconds); | ||
} catch (e) { | ||
// ignore duration | ||
} | ||
} | ||
const cardSection = builder.createCardSection('audio', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
@@ -505,3 +782,3 @@ }; | ||
function fromKoenigCard$3() { | ||
function fromKoenigCard$1() { | ||
return function kgVideoCardToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -541,34 +818,30 @@ if (node.nodeType !== 1 || !node.classList.contains('kg-video-card')) { | ||
function fromKoenigCard$2(options) { | ||
return function kgBeforeAfterCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-before-after-card')) { | ||
return; | ||
} | ||
function readGalleryImageAttributesFromNode(node, imgNum) { | ||
const image = readImageAttributesFromNode(node); | ||
const cardWidth = node.classList.contains('kg-width-full') ? 'full' : 'wide'; | ||
image.fileName = node.src.match(/[^/]*$/)[0]; | ||
image.row = Math.floor(imgNum / 3); | ||
const images = node.querySelectorAll('img'); | ||
return image; | ||
} | ||
const beforeImage = images[1]; | ||
const afterImage = images[0]; | ||
function fromKoenigCard(options) { | ||
return function kgGalleryCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
if (!beforeImage || !afterImage) { | ||
if (!node.className.match(/kg-gallery-card/)) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: beforeImage.width, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: afterImage.width, | ||
src: afterImage.src | ||
} | ||
}; | ||
let payload = {}; | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
// Process nodes into the payload | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
addFigCaptionToPayload(node, payload, {options}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -579,86 +852,33 @@ nodeFinished(); | ||
function fromJetpackCard(options) { | ||
return function jetpackJuxtaposeToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('wp-block-jetpack-image-compare')) { | ||
return; | ||
function fromGrafGallery(options) { | ||
return function grafGalleryToCard(node, builder, {addSection, nodeFinished}) { | ||
function isGrafGallery(n) { | ||
return n.nodeType === 1 && n.tagName === 'DIV' && n.dataset && n.dataset.paragraphCount && n.querySelectorAll('img').length > 0; | ||
} | ||
const cardWidth = 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[0]; | ||
const afterImage = images[1]; | ||
if (!beforeImage || !afterImage) { | ||
if (!isGrafGallery(node)) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: 1000, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: 1000, | ||
src: afterImage.src | ||
} | ||
}; | ||
let payload = {}; | ||
// These galleries exist in multiple divs. Read the images and caption from the first one... | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
addFigCaptionToPayload(node, payload, {options}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function transformSizeToBytes(sizeStr = '') { | ||
if (!sizeStr) { | ||
return 0; | ||
} | ||
const [sizeVal, sizeType] = sizeStr.split(' '); | ||
if (!sizeVal || !sizeType) { | ||
return 0; | ||
} | ||
if (sizeType === 'Bytes') { | ||
return Number(sizeVal); | ||
} else if (sizeType === 'KB') { | ||
return Number(sizeVal) * 2048; | ||
} else if (sizeType === 'MB') { | ||
return Number(sizeVal) * 2048 * 2048; | ||
} | ||
} | ||
function fromKoenigCard$1() { | ||
return function kgFileCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-file-card')) { | ||
return; | ||
// ...and then iterate over any remaining divs until we run out of matches | ||
let nextNode = node.nextSibling; | ||
while (nextNode && isGrafGallery(nextNode)) { | ||
let currentNode = nextNode; | ||
imgs = imgs.concat(Array.from(currentNode.querySelectorAll('img'))); | ||
addFigCaptionToPayload(currentNode, payload, {options}); | ||
nextNode = currentNode.nextSibling; | ||
// remove nodes as we go so that they don't go through the parser | ||
currentNode.remove(); | ||
} | ||
const titleNode = node.querySelector('.kg-file-card-title'); | ||
const captionNode = node.querySelector('.kg-file-card-caption'); | ||
const fileNameNode = node.querySelector('.kg-file-card-filename'); | ||
const fileSizeNode = node.querySelector('.kg-file-card-filesize'); | ||
const fileCardLinkNode = node.querySelector('.kg-file-card-container'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const caption = captionNode && captionNode.innerHTML.trim(); | ||
const fileName = fileNameNode && fileNameNode.innerHTML.trim(); | ||
const fileSizeStr = fileSizeNode && fileSizeNode.innerHTML.trim(); | ||
const fileSrc = fileCardLinkNode && fileCardLinkNode.href; | ||
// Process nodes into the payload | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
if (!fileSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: fileSrc, | ||
fileTitle: title, | ||
fileCaption: caption, | ||
fileSize: transformSizeToBytes(fileSizeStr), | ||
fileName: fileName | ||
}; | ||
const cardSection = builder.createCardSection('file', payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -669,60 +889,35 @@ nodeFinished(); | ||
function fromKoenigCard() { | ||
return function kgHeaderCardToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-header-card')) { | ||
function fromSqsGallery(options) { | ||
return function sqsGalleriesToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'DIV' || !node.className.match(/sqs-gallery-container/) || node.className.match(/summary-/)) { | ||
return; | ||
} | ||
const headerNode = node.querySelector('.kg-header-card-header'); | ||
const subheaderNode = node.querySelector('.kg-header-card-subheader'); | ||
const buttonNode = node.querySelector('.kg-header-card-button'); | ||
let payload = {}; | ||
let header = ''; | ||
let subheader = ''; | ||
let buttonText = ''; | ||
let buttonUrl = ''; | ||
// Each image exists twice... | ||
// The first image is wrapped in `<noscript>` | ||
// The second image contains image dimensions but the src property needs to be taken from `data-src`. | ||
let imgs = Array.from(node.querySelectorAll('img.thumb-image')); | ||
if (headerNode) { | ||
header = headerNode.innerHTML.trim(); | ||
} | ||
if (subheaderNode) { | ||
subheader = subheaderNode.innerHTML.trim(); | ||
} | ||
imgs = imgs.map((img) => { | ||
if (!img.getAttribute('src')) { | ||
if (img.previousSibling.tagName === 'NOSCRIPT' && img.previousSibling.getElementsByTagName('img').length) { | ||
const prevNode = img.previousSibling; | ||
img.setAttribute('src', img.getAttribute('data-src')); | ||
prevNode.remove(); | ||
} else { | ||
return undefined; | ||
} | ||
} | ||
if (buttonNode) { | ||
buttonText = buttonNode.textContent.trim(); | ||
buttonUrl = buttonNode.getAttribute('href').trim(); | ||
} | ||
return img; | ||
}); | ||
if (!header && !subheader && (!buttonNode || !buttonText || !buttonUrl)) { | ||
return; | ||
} | ||
addFigCaptionToPayload(node, payload, {options, selector: '.meta-title'}); | ||
const classes = [...node.classList]; | ||
let backgroundImageSrc = ''; | ||
if (node.getAttribute('data-kg-background-image')) { | ||
backgroundImageSrc = node.getAttribute('data-kg-background-image').trim(); | ||
} | ||
// Process nodes into the payload | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
const payload = { | ||
header, | ||
subheader, | ||
buttonEnabled: Boolean(buttonNode), | ||
buttonText, | ||
buttonUrl, | ||
backgroundImageSrc, | ||
size: 'small', | ||
style: 'dark' | ||
}; | ||
const sizeClass = classes.find(c => /^kg-size-(small|medium|large)$/.test(c)); | ||
const styleClass = classes.find(c => /^kg-style-(dark|light|accent|image)$/.test(c)); | ||
if (sizeClass) { | ||
payload.size = sizeClass.replace('kg-size-', ''); | ||
} | ||
if (styleClass) { | ||
payload.style = styleClass.replace('kg-style-', ''); | ||
} | ||
const cardSection = builder.createCardSection('header', payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -770,39 +965,2 @@ nodeFinished(); | ||
function _readGalleryImageFromNode(node, imgNum) { | ||
let fileName = node.src.match(/[^/]*$/)[0]; | ||
let image = { | ||
fileName, | ||
row: Math.floor(imgNum / 3), | ||
src: node.src | ||
}; | ||
if (node.width) { | ||
image.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
image.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
image.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
image.height = parseInt(node.dataset.height, 10); | ||
} | ||
if ((!node.width && !node.height) && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = (/^(\d*)x(\d*)$/gi).exec(node.getAttribute('data-image-dimensions')); | ||
image.width = parseInt(width, 10); | ||
image.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
image.alt = node.alt; | ||
} | ||
if (node.title) { | ||
image.title = node.title; | ||
} | ||
return image; | ||
} | ||
// PLUGINS ----------------------------------------------------------------- | ||
@@ -873,142 +1031,2 @@ | ||
const kgGalleryCardToCard = (node, builder, {addSection, nodeFinished}) => { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
if (!node.className.match(/kg-gallery-card/)) { | ||
return; | ||
} | ||
let payload = {}; | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
function grafGalleryToCard(node, builder, {addSection, nodeFinished}) { | ||
function isGrafGallery(n) { | ||
return n.nodeType === 1 && n.tagName === 'DIV' && n.dataset && n.dataset.paragraphCount && n.querySelectorAll('img').length > 0; | ||
} | ||
if (!isGrafGallery(node)) { | ||
return; | ||
} | ||
let payload = {}; | ||
// These galleries exist in multiple divs. Read the images and caption from the first one... | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
_readFigCaptionFromNode(node, payload); | ||
// ...and then iterate over any remaining divs until we run out of matches | ||
let nextNode = node.nextSibling; | ||
while (nextNode && isGrafGallery(nextNode)) { | ||
let currentNode = nextNode; | ||
imgs = imgs.concat(Array.from(currentNode.querySelectorAll('img'))); | ||
_readFigCaptionFromNode(currentNode, payload); | ||
nextNode = currentNode.nextSibling; | ||
// remove nodes as we go so that they don't go through the parser | ||
currentNode.remove(); | ||
} | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function sqsGalleriesToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'DIV' || !node.className.match(/sqs-gallery-container/) || node.className.match(/summary-/)) { | ||
return; | ||
} | ||
let payload = {}; | ||
// Each image exists twice... | ||
// The first image is wrapped in `<noscript>` | ||
// The second image contains image dimensions but the src property needs to be taken from `data-src`. | ||
let imgs = Array.from(node.querySelectorAll('img.thumb-image')); | ||
imgs = imgs.map((img) => { | ||
if (!img.getAttribute('src')) { | ||
if (img.previousSibling.tagName === 'NOSCRIPT' && img.previousSibling.getElementsByTagName('img').length) { | ||
const prevNode = img.previousSibling; | ||
img.setAttribute('src', img.getAttribute('data-src')); | ||
prevNode.remove(); | ||
} else { | ||
return; | ||
} | ||
} | ||
return img; | ||
}); | ||
_readFigCaptionFromNode(node, payload, '.meta-title'); | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function figureToImageCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
let img = node.querySelector('img'); | ||
let kgClass = node.className.match(/kg-width-(wide|full)/); | ||
let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/); | ||
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'; | ||
} | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function imgToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'IMG') { | ||
return; | ||
} | ||
let payload = { | ||
src: node.src, | ||
alt: node.alt, | ||
title: node.title | ||
}; | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function hrToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -1180,8 +1198,8 @@ if (node.nodeType !== 1 || node.tagName !== 'HR') { | ||
return [ | ||
fromKoenigCard$2(options), | ||
fromKoenigCard$7(options), | ||
fromJetpackCard(options), | ||
fromNFTEmbed(), | ||
fromMixtape(options), | ||
fromKoenigCard$3(), | ||
fromKoenigCard$6(), | ||
fromKoenigCard$7(), | ||
fromWordpressButton(), | ||
@@ -1191,16 +1209,16 @@ fromSubstackButton(), | ||
kgToggleCardToCard, | ||
fromKoenigCard$2(), | ||
fromKoenigCard$8(), | ||
fromKoenigCard$1(), | ||
fromKoenigCard$5(), | ||
fromKoenigCard$4(), | ||
fromKoenigCard$3(), | ||
fromKoenigCard$1(), | ||
fromKoenigCard(), | ||
blockquoteWithChildren, | ||
fromBr(), | ||
removeLeadingNewline, | ||
kgGalleryCardToCard, | ||
fromKoenigCard(options), | ||
fromFigureBlockquote(options), // I think these can contain images | ||
grafGalleryToCard, | ||
sqsGalleriesToCard, | ||
figureToImageCard, | ||
imgToCard, | ||
fromGrafGallery(options), | ||
fromSqsGallery(options), | ||
fromFigure(options), | ||
fromImg(), | ||
hrToCard, | ||
@@ -1207,0 +1225,0 @@ figureToCodeCard, |
import cleanBasicHtml from '@tryghost/kg-clean-basic-html'; | ||
function fromKoenigCard$8() { | ||
return function kgAudioCardToCard(node, builder, _ref) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-audio-card')) { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-audio-title'); | ||
const audioNode = node.querySelector('.kg-audio-player-container audio'); | ||
const thumbnailNode = node.querySelector('.kg-audio-thumbnail'); | ||
const durationNode = node.querySelector('.kg-audio-duration'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const audioSrc = audioNode && audioNode.src; | ||
const thumbnailSrc = thumbnailNode && thumbnailNode.src; | ||
const durationText = durationNode && durationNode.innerHTML.trim(); | ||
if (!audioSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: audioSrc, | ||
title: title | ||
}; | ||
if (thumbnailSrc) { | ||
payload.thumbnailSrc = thumbnailSrc; | ||
} | ||
if (durationText) { | ||
const { | ||
minutes, | ||
seconds | ||
} = durationText.split(':'); | ||
try { | ||
payload.duration = parseInt(minutes) * 60 + parseInt(seconds); | ||
} catch (e) {// ignore duration | ||
} | ||
} | ||
const cardSection = builder.createCardSection('audio', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function addFigCaptionToPayload(node, payload, _ref) { | ||
let { | ||
selector = 'figcaption', | ||
options | ||
} = _ref; | ||
let figcaptions = Array.from(node.querySelectorAll(selector)); | ||
if (figcaptions.length) { | ||
figcaptions.forEach(caption => { | ||
let cleanHtml = options.cleanBasicHtml(caption.innerHTML); | ||
payload.caption = payload.caption ? `${payload.caption} / ${cleanHtml}` : cleanHtml; | ||
caption.remove(); // cleanup this processed element | ||
}); | ||
} | ||
} | ||
function readImageAttributesFromNode(node) { | ||
const attrs = {}; | ||
if (node.src) { | ||
attrs.src = node.src; | ||
} | ||
if (node.width) { | ||
attrs.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
attrs.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
attrs.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
attrs.height = parseInt(node.dataset.height, 10); | ||
} | ||
if (!node.width && !node.height && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = /^(\d*)x(\d*)$/gi.exec(node.getAttribute('data-image-dimensions')); | ||
attrs.width = parseInt(width, 10); | ||
attrs.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
attrs.alt = node.alt; | ||
} | ||
if (node.title) { | ||
attrs.title = node.title; | ||
} | ||
if (node.parentNode.tagName === 'A') { | ||
const href = node.parentNode.href; | ||
if (href !== attrs.src) { | ||
attrs.href = href; | ||
} | ||
} | ||
return attrs; | ||
} | ||
function fromKoenigCard$7(options) { | ||
return function kgBeforeAfterCardToCard(node, builder, _ref) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-before-after-card')) { | ||
return; | ||
} | ||
const cardWidth = node.classList.contains('kg-width-full') ? 'full' : 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[1]; | ||
const afterImage = images[0]; | ||
if (!beforeImage || !afterImage) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: beforeImage.width, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: afterImage.width, | ||
src: afterImage.src | ||
} | ||
}; | ||
addFigCaptionToPayload(node, payload, { | ||
options | ||
}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function fromJetpackCard(options) { | ||
return function jetpackJuxtaposeToCard(node, builder, _ref2) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref2; | ||
if (node.nodeType !== 1 || !node.classList.contains('wp-block-jetpack-image-compare')) { | ||
return; | ||
} | ||
const cardWidth = 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[0]; | ||
const afterImage = images[1]; | ||
if (!beforeImage || !afterImage) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: 1000, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: 1000, | ||
src: afterImage.src | ||
} | ||
}; | ||
addFigCaptionToPayload(node, payload, { | ||
options | ||
}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function getButtonText$1(node) { | ||
@@ -13,3 +202,3 @@ let buttonText = node.textContent; | ||
function fromKoenigCard$7() { | ||
function fromKoenigCard$6() { | ||
return function kgButtonCardToCard(node, builder, _ref) { | ||
@@ -116,18 +305,2 @@ let { | ||
function addFigCaptionToPayload(node, payload, _ref) { | ||
let { | ||
selector = 'figcaption', | ||
options | ||
} = _ref; | ||
let figcaptions = Array.from(node.querySelectorAll(selector)); | ||
if (figcaptions.length) { | ||
figcaptions.forEach(caption => { | ||
let cleanHtml = options.cleanBasicHtml(caption.innerHTML); | ||
payload.caption = payload.caption ? `${payload.caption} / ${cleanHtml}` : cleanHtml; | ||
caption.remove(); // cleanup this processed element | ||
}); | ||
} | ||
} | ||
function _createPayloadForIframe(iframe) { | ||
@@ -382,6 +555,137 @@ // If we don't have a src Or it's not an absolute URL, we can't handle this | ||
function transformSizeToBytes() { | ||
let sizeStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; | ||
if (!sizeStr) { | ||
return 0; | ||
} | ||
const [sizeVal, sizeType] = sizeStr.split(' '); | ||
if (!sizeVal || !sizeType) { | ||
return 0; | ||
} | ||
if (sizeType === 'Bytes') { | ||
return Number(sizeVal); | ||
} else if (sizeType === 'KB') { | ||
return Number(sizeVal) * 2048; | ||
} else if (sizeType === 'MB') { | ||
return Number(sizeVal) * 2048 * 2048; | ||
} | ||
} | ||
function fromKoenigCard$5() { | ||
return function kgFileCardToCard(node, builder, _ref) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-file-card')) { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-file-card-title'); | ||
const captionNode = node.querySelector('.kg-file-card-caption'); | ||
const fileNameNode = node.querySelector('.kg-file-card-filename'); | ||
const fileSizeNode = node.querySelector('.kg-file-card-filesize'); | ||
const fileCardLinkNode = node.querySelector('.kg-file-card-container'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const caption = captionNode && captionNode.innerHTML.trim(); | ||
const fileName = fileNameNode && fileNameNode.innerHTML.trim(); | ||
const fileSizeStr = fileSizeNode && fileSizeNode.innerHTML.trim(); | ||
const fileSrc = fileCardLinkNode && fileCardLinkNode.href; | ||
if (!fileSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: fileSrc, | ||
fileTitle: title, | ||
fileCaption: caption, | ||
fileSize: transformSizeToBytes(fileSizeStr), | ||
fileName: fileName | ||
}; | ||
const cardSection = builder.createCardSection('file', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function fromKoenigCard$4() { | ||
return function kgHeaderCardToCard(node, builder, _ref) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-header-card')) { | ||
return; | ||
} | ||
const headerNode = node.querySelector('.kg-header-card-header'); | ||
const subheaderNode = node.querySelector('.kg-header-card-subheader'); | ||
const buttonNode = node.querySelector('.kg-header-card-button'); | ||
let header = ''; | ||
let subheader = ''; | ||
let buttonText = ''; | ||
let buttonUrl = ''; | ||
if (headerNode) { | ||
header = headerNode.innerHTML.trim(); | ||
} | ||
if (subheaderNode) { | ||
subheader = subheaderNode.innerHTML.trim(); | ||
} | ||
if (buttonNode) { | ||
buttonText = buttonNode.textContent.trim(); | ||
buttonUrl = buttonNode.getAttribute('href').trim(); | ||
} | ||
if (!header && !subheader && (!buttonNode || !buttonText || !buttonUrl)) { | ||
return; | ||
} | ||
const classes = [...node.classList]; | ||
let backgroundImageSrc = ''; | ||
if (node.getAttribute('data-kg-background-image')) { | ||
backgroundImageSrc = node.getAttribute('data-kg-background-image').trim(); | ||
} | ||
const payload = { | ||
header, | ||
subheader, | ||
buttonEnabled: Boolean(buttonNode), | ||
buttonText, | ||
buttonUrl, | ||
backgroundImageSrc, | ||
size: 'small', | ||
style: 'dark' | ||
}; | ||
const sizeClass = classes.find(c => /^kg-size-(small|medium|large)$/.test(c)); | ||
const styleClass = classes.find(c => /^kg-style-(dark|light|accent|image)$/.test(c)); | ||
if (sizeClass) { | ||
payload.size = sizeClass.replace('kg-size-', ''); | ||
} | ||
if (styleClass) { | ||
payload.style = styleClass.replace('kg-style-', ''); | ||
} | ||
const cardSection = builder.createCardSection('header', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
// https://github.com/TryGhost/Koenig/issues/1 | ||
// allows arbitrary HTML blocks wrapped in our card comments to be extracted | ||
// into a HTML card rather than being put through the normal parse+plugins | ||
function fromKoenigCard$6() { | ||
function fromKoenigCard$3() { | ||
return function kgHtmlCardToCard(node, builder, _ref) { | ||
@@ -422,20 +726,55 @@ let { | ||
function fromBr() { | ||
// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom | ||
return function fromBrToSoftReturnAtom(node, builder, _ref) { | ||
function fromImg() { | ||
return function imgToCard(node, builder, _ref) { | ||
let { | ||
addMarkerable, | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || node.tagName !== 'BR') { | ||
if (node.nodeType !== 1 || node.tagName !== 'IMG') { | ||
return; | ||
} | ||
let softReturn = builder.createAtom('soft-return'); | ||
addMarkerable(softReturn); | ||
const payload = readImageAttributesFromNode(node); | ||
const cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function fromFigure(options) { | ||
return function figureImgToCard(node, builder, _ref2) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref2; | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
const img = node.querySelector('img'); | ||
const kgClass = node.className.match(/kg-width-(wide|full)/); | ||
const grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/); | ||
if (!img) { | ||
return; | ||
} | ||
const payload = readImageAttributesFromNode(img); | ||
if (kgClass) { | ||
payload.cardWidth = kgClass[1]; | ||
} else if (grafClass) { | ||
payload.cardWidth = grafClass[1] === 'FillWidth' ? 'full' : 'wide'; | ||
} | ||
addFigCaptionToPayload(node, payload, { | ||
options | ||
}); | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
function getButtonText(node) { | ||
@@ -451,3 +790,3 @@ let buttonText = node.textContent; | ||
function fromKoenigCard$5() { | ||
function fromKoenigCard$2() { | ||
return function kgButtonCardToCard(node, builder, _ref) { | ||
@@ -510,49 +849,16 @@ let { | ||
function fromKoenigCard$4() { | ||
return function kgAudioCardToCard(node, builder, _ref) { | ||
function fromBr() { | ||
// mobiledoc by default ignores <BR> tags but we have a custom SoftReturn atom | ||
return function fromBrToSoftReturnAtom(node, builder, _ref) { | ||
let { | ||
addSection, | ||
addMarkerable, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-audio-card')) { | ||
if (node.nodeType !== 1 || node.tagName !== 'BR') { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-audio-title'); | ||
const audioNode = node.querySelector('.kg-audio-player-container audio'); | ||
const thumbnailNode = node.querySelector('.kg-audio-thumbnail'); | ||
const durationNode = node.querySelector('.kg-audio-duration'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const audioSrc = audioNode && audioNode.src; | ||
const thumbnailSrc = thumbnailNode && thumbnailNode.src; | ||
const durationText = durationNode && durationNode.innerHTML.trim(); | ||
if (!audioSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: audioSrc, | ||
title: title | ||
}; | ||
if (thumbnailSrc) { | ||
payload.thumbnailSrc = thumbnailSrc; | ||
} | ||
if (durationText) { | ||
const { | ||
minutes, | ||
seconds | ||
} = durationText.split(':'); | ||
try { | ||
payload.duration = parseInt(minutes) * 60 + parseInt(seconds); | ||
} catch (e) {// ignore duration | ||
} | ||
} | ||
const cardSection = builder.createCardSection('audio', payload); | ||
addSection(cardSection); | ||
let softReturn = builder.createAtom('soft-return'); | ||
addMarkerable(softReturn); | ||
nodeFinished(); | ||
@@ -562,3 +868,3 @@ }; | ||
function fromKoenigCard$3() { | ||
function fromKoenigCard$1() { | ||
return function kgVideoCardToCard(node, builder, _ref) { | ||
@@ -606,4 +912,11 @@ let { | ||
function fromKoenigCard$2(options) { | ||
return function kgBeforeAfterCardToCard(node, builder, _ref) { | ||
function readGalleryImageAttributesFromNode(node, imgNum) { | ||
const image = readImageAttributesFromNode(node); | ||
image.fileName = node.src.match(/[^/]*$/)[0]; | ||
image.row = Math.floor(imgNum / 3); | ||
return image; | ||
} | ||
function fromKoenigCard(options) { | ||
return function kgGalleryCardToCard(node, builder, _ref) { | ||
let { | ||
@@ -614,30 +927,18 @@ addSection, | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-before-after-card')) { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
const cardWidth = node.classList.contains('kg-width-full') ? 'full' : 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[1]; | ||
const afterImage = images[0]; | ||
if (!beforeImage || !afterImage) { | ||
if (!node.className.match(/kg-gallery-card/)) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: beforeImage.width, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: afterImage.width, | ||
src: afterImage.src | ||
} | ||
}; | ||
let payload = {}; | ||
let imgs = Array.from(node.querySelectorAll('img')); // Process nodes into the payload | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
addFigCaptionToPayload(node, payload, { | ||
options | ||
}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -647,4 +948,4 @@ nodeFinished(); | ||
} | ||
function fromJetpackCard(options) { | ||
return function jetpackJuxtaposeToCard(node, builder, _ref2) { | ||
function fromGrafGallery(options) { | ||
return function grafGalleryToCard(node, builder, _ref2) { | ||
let { | ||
@@ -655,91 +956,33 @@ addSection, | ||
if (node.nodeType !== 1 || !node.classList.contains('wp-block-jetpack-image-compare')) { | ||
return; | ||
function isGrafGallery(n) { | ||
return n.nodeType === 1 && n.tagName === 'DIV' && n.dataset && n.dataset.paragraphCount && n.querySelectorAll('img').length > 0; | ||
} | ||
const cardWidth = 'wide'; | ||
const images = node.querySelectorAll('img'); | ||
const beforeImage = images[0]; | ||
const afterImage = images[1]; | ||
if (!beforeImage || !afterImage) { | ||
if (!isGrafGallery(node)) { | ||
return; | ||
} | ||
const payload = { | ||
cardWidth, | ||
beforeImage: { | ||
width: 1000, | ||
src: beforeImage.src | ||
}, | ||
afterImage: { | ||
width: 1000, | ||
src: afterImage.src | ||
} | ||
}; | ||
let payload = {}; // These galleries exist in multiple divs. Read the images and caption from the first one... | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
addFigCaptionToPayload(node, payload, { | ||
options | ||
}); | ||
const cardSection = builder.createCardSection('before-after', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
} | ||
}); // ...and then iterate over any remaining divs until we run out of matches | ||
function transformSizeToBytes() { | ||
let sizeStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; | ||
let nextNode = node.nextSibling; | ||
if (!sizeStr) { | ||
return 0; | ||
} | ||
while (nextNode && isGrafGallery(nextNode)) { | ||
let currentNode = nextNode; | ||
imgs = imgs.concat(Array.from(currentNode.querySelectorAll('img'))); | ||
addFigCaptionToPayload(currentNode, payload, { | ||
options | ||
}); | ||
nextNode = currentNode.nextSibling; // remove nodes as we go so that they don't go through the parser | ||
const [sizeVal, sizeType] = sizeStr.split(' '); | ||
currentNode.remove(); | ||
} // Process nodes into the payload | ||
if (!sizeVal || !sizeType) { | ||
return 0; | ||
} | ||
if (sizeType === 'Bytes') { | ||
return Number(sizeVal); | ||
} else if (sizeType === 'KB') { | ||
return Number(sizeVal) * 2048; | ||
} else if (sizeType === 'MB') { | ||
return Number(sizeVal) * 2048 * 2048; | ||
} | ||
} | ||
function fromKoenigCard$1() { | ||
return function kgFileCardToCard(node, builder, _ref) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-file-card')) { | ||
return; | ||
} | ||
const titleNode = node.querySelector('.kg-file-card-title'); | ||
const captionNode = node.querySelector('.kg-file-card-caption'); | ||
const fileNameNode = node.querySelector('.kg-file-card-filename'); | ||
const fileSizeNode = node.querySelector('.kg-file-card-filesize'); | ||
const fileCardLinkNode = node.querySelector('.kg-file-card-container'); | ||
const title = titleNode && titleNode.innerHTML.trim(); | ||
const caption = captionNode && captionNode.innerHTML.trim(); | ||
const fileName = fileNameNode && fileNameNode.innerHTML.trim(); | ||
const fileSizeStr = fileSizeNode && fileSizeNode.innerHTML.trim(); | ||
const fileSrc = fileCardLinkNode && fileCardLinkNode.href; | ||
if (!fileSrc) { | ||
return; | ||
} | ||
const payload = { | ||
src: fileSrc, | ||
fileTitle: title, | ||
fileCaption: caption, | ||
fileSize: transformSizeToBytes(fileSizeStr), | ||
fileName: fileName | ||
}; | ||
const cardSection = builder.createCardSection('file', payload); | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -749,68 +992,38 @@ nodeFinished(); | ||
} | ||
function fromKoenigCard() { | ||
return function kgHeaderCardToCard(node, builder, _ref) { | ||
function fromSqsGallery(options) { | ||
return function sqsGalleriesToCard(node, builder, _ref3) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref; | ||
} = _ref3; | ||
if (node.nodeType !== 1 || !node.classList.contains('kg-header-card')) { | ||
if (node.nodeType !== 1 || node.tagName !== 'DIV' || !node.className.match(/sqs-gallery-container/) || node.className.match(/summary-/)) { | ||
return; | ||
} | ||
const headerNode = node.querySelector('.kg-header-card-header'); | ||
const subheaderNode = node.querySelector('.kg-header-card-subheader'); | ||
const buttonNode = node.querySelector('.kg-header-card-button'); | ||
let header = ''; | ||
let subheader = ''; | ||
let buttonText = ''; | ||
let buttonUrl = ''; | ||
let payload = {}; // Each image exists twice... | ||
// The first image is wrapped in `<noscript>` | ||
// The second image contains image dimensions but the src property needs to be taken from `data-src`. | ||
if (headerNode) { | ||
header = headerNode.innerHTML.trim(); | ||
} | ||
let imgs = Array.from(node.querySelectorAll('img.thumb-image')); | ||
imgs = imgs.map(img => { | ||
if (!img.getAttribute('src')) { | ||
if (img.previousSibling.tagName === 'NOSCRIPT' && img.previousSibling.getElementsByTagName('img').length) { | ||
const prevNode = img.previousSibling; | ||
img.setAttribute('src', img.getAttribute('data-src')); | ||
prevNode.remove(); | ||
} else { | ||
return undefined; | ||
} | ||
} | ||
if (subheaderNode) { | ||
subheader = subheaderNode.innerHTML.trim(); | ||
} | ||
return img; | ||
}); | ||
addFigCaptionToPayload(node, payload, { | ||
options, | ||
selector: '.meta-title' | ||
}); // Process nodes into the payload | ||
if (buttonNode) { | ||
buttonText = buttonNode.textContent.trim(); | ||
buttonUrl = buttonNode.getAttribute('href').trim(); | ||
} | ||
if (!header && !subheader && (!buttonNode || !buttonText || !buttonUrl)) { | ||
return; | ||
} | ||
const classes = [...node.classList]; | ||
let backgroundImageSrc = ''; | ||
if (node.getAttribute('data-kg-background-image')) { | ||
backgroundImageSrc = node.getAttribute('data-kg-background-image').trim(); | ||
} | ||
const payload = { | ||
header, | ||
subheader, | ||
buttonEnabled: Boolean(buttonNode), | ||
buttonText, | ||
buttonUrl, | ||
backgroundImageSrc, | ||
size: 'small', | ||
style: 'dark' | ||
}; | ||
const sizeClass = classes.find(c => /^kg-size-(small|medium|large)$/.test(c)); | ||
const styleClass = classes.find(c => /^kg-style-(dark|light|accent|image)$/.test(c)); | ||
if (sizeClass) { | ||
payload.size = sizeClass.replace('kg-size-', ''); | ||
} | ||
if (styleClass) { | ||
payload.style = styleClass.replace('kg-style-', ''); | ||
} | ||
const cardSection = builder.createCardSection('header', payload); | ||
payload.images = imgs.map(readGalleryImageAttributesFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
@@ -857,39 +1070,2 @@ nodeFinished(); | ||
} | ||
} | ||
function _readGalleryImageFromNode(node, imgNum) { | ||
let fileName = node.src.match(/[^/]*$/)[0]; | ||
let image = { | ||
fileName, | ||
row: Math.floor(imgNum / 3), | ||
src: node.src | ||
}; | ||
if (node.width) { | ||
image.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
image.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
image.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
image.height = parseInt(node.dataset.height, 10); | ||
} | ||
if (!node.width && !node.height && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = /^(\d*)x(\d*)$/gi.exec(node.getAttribute('data-image-dimensions')); | ||
image.width = parseInt(width, 10); | ||
image.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
image.alt = node.alt; | ||
} | ||
if (node.title) { | ||
image.title = node.title; | ||
} | ||
return image; | ||
} // PLUGINS ----------------------------------------------------------------- | ||
@@ -966,3 +1142,3 @@ | ||
const kgGalleryCardToCard = (node, builder, _ref3) => { | ||
function hrToCard(node, builder, _ref3) { | ||
let { | ||
@@ -973,164 +1149,2 @@ addSection, | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
if (!node.className.match(/kg-gallery-card/)) { | ||
return; | ||
} | ||
let payload = {}; | ||
let imgs = Array.from(node.querySelectorAll('img')); // Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
function grafGalleryToCard(node, builder, _ref4) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref4; | ||
function isGrafGallery(n) { | ||
return n.nodeType === 1 && n.tagName === 'DIV' && n.dataset && n.dataset.paragraphCount && n.querySelectorAll('img').length > 0; | ||
} | ||
if (!isGrafGallery(node)) { | ||
return; | ||
} | ||
let payload = {}; // These galleries exist in multiple divs. Read the images and caption from the first one... | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
_readFigCaptionFromNode(node, payload); // ...and then iterate over any remaining divs until we run out of matches | ||
let nextNode = node.nextSibling; | ||
while (nextNode && isGrafGallery(nextNode)) { | ||
let currentNode = nextNode; | ||
imgs = imgs.concat(Array.from(currentNode.querySelectorAll('img'))); | ||
_readFigCaptionFromNode(currentNode, payload); | ||
nextNode = currentNode.nextSibling; // remove nodes as we go so that they don't go through the parser | ||
currentNode.remove(); | ||
} // Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function sqsGalleriesToCard(node, builder, _ref5) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref5; | ||
if (node.nodeType !== 1 || node.tagName !== 'DIV' || !node.className.match(/sqs-gallery-container/) || node.className.match(/summary-/)) { | ||
return; | ||
} | ||
let payload = {}; // Each image exists twice... | ||
// The first image is wrapped in `<noscript>` | ||
// The second image contains image dimensions but the src property needs to be taken from `data-src`. | ||
let imgs = Array.from(node.querySelectorAll('img.thumb-image')); | ||
imgs = imgs.map(img => { | ||
if (!img.getAttribute('src')) { | ||
if (img.previousSibling.tagName === 'NOSCRIPT' && img.previousSibling.getElementsByTagName('img').length) { | ||
const prevNode = img.previousSibling; | ||
img.setAttribute('src', img.getAttribute('data-src')); | ||
prevNode.remove(); | ||
} else { | ||
return; | ||
} | ||
} | ||
return img; | ||
}); | ||
_readFigCaptionFromNode(node, payload, '.meta-title'); // Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function figureToImageCard(node, builder, _ref6) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref6; | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
let img = node.querySelector('img'); | ||
let kgClass = node.className.match(/kg-width-(wide|full)/); | ||
let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/); | ||
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'; | ||
} | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function imgToCard(node, builder, _ref7) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref7; | ||
if (node.nodeType !== 1 || node.tagName !== 'IMG') { | ||
return; | ||
} | ||
let payload = { | ||
src: node.src, | ||
alt: node.alt, | ||
title: node.title | ||
}; | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function hrToCard(node, builder, _ref8) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref8; | ||
if (node.nodeType !== 1 || node.tagName !== 'HR') { | ||
@@ -1145,7 +1159,7 @@ return; | ||
function figureToCodeCard(node, builder, _ref9) { | ||
function figureToCodeCard(node, builder, _ref4) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref9; | ||
} = _ref4; | ||
@@ -1189,7 +1203,7 @@ if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
function preCodeToCard(node, builder, _ref10) { | ||
function preCodeToCard(node, builder, _ref5) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref10; | ||
} = _ref5; | ||
@@ -1221,7 +1235,7 @@ if (node.nodeType !== 1 || node.tagName !== 'PRE') { | ||
function figureScriptToHtmlCard(node, builder, _ref11) { | ||
function figureScriptToHtmlCard(node, builder, _ref6) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref11; | ||
} = _ref6; | ||
@@ -1300,7 +1314,7 @@ if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
function tableToHtmlCard(node, builder, _ref12) { | ||
function tableToHtmlCard(node, builder, _ref7) { | ||
let { | ||
addSection, | ||
nodeFinished | ||
} = _ref12; | ||
} = _ref7; | ||
@@ -1323,4 +1337,4 @@ if (node.nodeType !== 1 || node.tagName !== 'TABLE') { | ||
return [fromKoenigCard$2(options), fromJetpackCard(options), fromNFTEmbed(), fromMixtape(options), fromKoenigCard$6(), fromKoenigCard$7(), fromWordpressButton(), fromSubstackButton(), kgCalloutCardToCard, kgToggleCardToCard, fromKoenigCard$5(), fromKoenigCard$4(), fromKoenigCard$3(), fromKoenigCard$1(), fromKoenigCard(), blockquoteWithChildren, fromBr(), removeLeadingNewline, kgGalleryCardToCard, fromFigureBlockquote(options), // I think these can contain images | ||
grafGalleryToCard, sqsGalleriesToCard, figureToImageCard, imgToCard, hrToCard, figureToCodeCard, preCodeToCard, fromFigureIframe(options), fromIframe(), // Process iFrames without figures after ones with | ||
return [fromKoenigCard$7(options), fromJetpackCard(options), fromNFTEmbed(), fromMixtape(options), fromKoenigCard$3(), fromKoenigCard$6(), fromWordpressButton(), fromSubstackButton(), kgCalloutCardToCard, kgToggleCardToCard, fromKoenigCard$2(), fromKoenigCard$8(), fromKoenigCard$1(), fromKoenigCard$5(), fromKoenigCard$4(), blockquoteWithChildren, fromBr(), removeLeadingNewline, fromKoenigCard(options), fromFigureBlockquote(options), // I think these can contain images | ||
fromGrafGallery(options), fromSqsGallery(options), fromFigure(options), fromImg(), hrToCard, figureToCodeCard, preCodeToCard, fromFigureIframe(options), fromIframe(), // Process iFrames without figures after ones with | ||
figureScriptToHtmlCard, altBlockquoteToAside, tableToHtmlCard]; | ||
@@ -1327,0 +1341,0 @@ } |
@@ -12,1 +12,45 @@ export function addFigCaptionToPayload(node, payload, {selector = 'figcaption', options}) { | ||
} | ||
export function readImageAttributesFromNode(node) { | ||
const attrs = {}; | ||
if (node.src) { | ||
attrs.src = node.src; | ||
} | ||
if (node.width) { | ||
attrs.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
attrs.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
attrs.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
attrs.height = parseInt(node.dataset.height, 10); | ||
} | ||
if ((!node.width && !node.height) && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = (/^(\d*)x(\d*)$/gi).exec(node.getAttribute('data-image-dimensions')); | ||
attrs.width = parseInt(width, 10); | ||
attrs.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
attrs.alt = node.alt; | ||
} | ||
if (node.title) { | ||
attrs.title = node.title; | ||
} | ||
if (node.parentNode.tagName === 'A') { | ||
const href = node.parentNode.href; | ||
if (href !== attrs.src) { | ||
attrs.href = href; | ||
} | ||
} | ||
return attrs; | ||
} |
@@ -14,12 +14,14 @@ /* global DOMParser, window */ | ||
import * as audioCard from './cards/audio'; | ||
import * as beforeAfterCard from './cards/before-after'; | ||
import * as buttonCard from './cards/button'; | ||
import * as embedCard from './cards/embed'; | ||
import * as fileCard from './cards/file'; | ||
import * as headerCard from './cards/header'; | ||
import * as htmlCard from './cards/html'; | ||
import * as imageCard from './cards/image'; | ||
import * as productCard from './cards/product'; | ||
import * as softReturn from './cards/softReturn'; | ||
import * as productCard from './cards/product'; | ||
import * as audioCard from './cards/audio'; | ||
import * as videoCard from './cards/video'; | ||
import * as beforeAfterCard from './cards/before-after'; | ||
import * as fileCard from './cards/file'; | ||
import * as headerCard from './cards/header'; | ||
import * as galleryCard from './cards/gallery'; | ||
@@ -61,39 +63,2 @@ export function createParserPlugins(_options = {}) { | ||
function _readGalleryImageFromNode(node, imgNum) { | ||
let fileName = node.src.match(/[^/]*$/)[0]; | ||
let image = { | ||
fileName, | ||
row: Math.floor(imgNum / 3), | ||
src: node.src | ||
}; | ||
if (node.width) { | ||
image.width = node.width; | ||
} else if (node.dataset && node.dataset.width) { | ||
image.width = parseInt(node.dataset.width, 10); | ||
} | ||
if (node.height) { | ||
image.height = node.height; | ||
} else if (node.dataset && node.dataset.height) { | ||
image.height = parseInt(node.dataset.height, 10); | ||
} | ||
if ((!node.width && !node.height) && node.getAttribute('data-image-dimensions')) { | ||
const [, width, height] = (/^(\d*)x(\d*)$/gi).exec(node.getAttribute('data-image-dimensions')); | ||
image.width = parseInt(width, 10); | ||
image.height = parseInt(height, 10); | ||
} | ||
if (node.alt) { | ||
image.alt = node.alt; | ||
} | ||
if (node.title) { | ||
image.title = node.title; | ||
} | ||
return image; | ||
} | ||
// PLUGINS ----------------------------------------------------------------- | ||
@@ -164,142 +129,2 @@ | ||
const kgGalleryCardToCard = (node, builder, {addSection, nodeFinished}) => { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
if (!node.className.match(/kg-gallery-card/)) { | ||
return; | ||
} | ||
let payload = {}; | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
}; | ||
function grafGalleryToCard(node, builder, {addSection, nodeFinished}) { | ||
function isGrafGallery(n) { | ||
return n.nodeType === 1 && n.tagName === 'DIV' && n.dataset && n.dataset.paragraphCount && n.querySelectorAll('img').length > 0; | ||
} | ||
if (!isGrafGallery(node)) { | ||
return; | ||
} | ||
let payload = {}; | ||
// These galleries exist in multiple divs. Read the images and caption from the first one... | ||
let imgs = Array.from(node.querySelectorAll('img')); | ||
_readFigCaptionFromNode(node, payload); | ||
// ...and then iterate over any remaining divs until we run out of matches | ||
let nextNode = node.nextSibling; | ||
while (nextNode && isGrafGallery(nextNode)) { | ||
let currentNode = nextNode; | ||
imgs = imgs.concat(Array.from(currentNode.querySelectorAll('img'))); | ||
_readFigCaptionFromNode(currentNode, payload); | ||
nextNode = currentNode.nextSibling; | ||
// remove nodes as we go so that they don't go through the parser | ||
currentNode.remove(); | ||
} | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function sqsGalleriesToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'DIV' || !node.className.match(/sqs-gallery-container/) || node.className.match(/summary-/)) { | ||
return; | ||
} | ||
let payload = {}; | ||
// Each image exists twice... | ||
// The first image is wrapped in `<noscript>` | ||
// The second image contains image dimensions but the src property needs to be taken from `data-src`. | ||
let imgs = Array.from(node.querySelectorAll('img.thumb-image')); | ||
imgs = imgs.map((img) => { | ||
if (!img.getAttribute('src')) { | ||
if (img.previousSibling.tagName === 'NOSCRIPT' && img.previousSibling.getElementsByTagName('img').length) { | ||
const prevNode = img.previousSibling; | ||
img.setAttribute('src', img.getAttribute('data-src')); | ||
prevNode.remove(); | ||
} else { | ||
return; | ||
} | ||
} | ||
return img; | ||
}); | ||
_readFigCaptionFromNode(node, payload, '.meta-title'); | ||
// Process nodes into the payload | ||
payload.images = imgs.map(_readGalleryImageFromNode); | ||
let cardSection = builder.createCardSection('gallery', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function figureToImageCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'FIGURE') { | ||
return; | ||
} | ||
let img = node.querySelector('img'); | ||
let kgClass = node.className.match(/kg-width-(wide|full)/); | ||
let grafClass = node.className.match(/graf--layout(FillWidth|OutsetCenter)/); | ||
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'; | ||
} | ||
_readFigCaptionFromNode(node, payload); | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function imgToCard(node, builder, {addSection, nodeFinished}) { | ||
if (node.nodeType !== 1 || node.tagName !== 'IMG') { | ||
return; | ||
} | ||
let payload = { | ||
src: node.src, | ||
alt: node.alt, | ||
title: node.title | ||
}; | ||
let cardSection = builder.createCardSection('image', payload); | ||
addSection(cardSection); | ||
nodeFinished(); | ||
} | ||
function hrToCard(node, builder, {addSection, nodeFinished}) { | ||
@@ -489,8 +314,8 @@ if (node.nodeType !== 1 || node.tagName !== 'HR') { | ||
removeLeadingNewline, | ||
kgGalleryCardToCard, | ||
galleryCard.fromKoenigCard(options), | ||
embedCard.fromFigureBlockquote(options), // I think these can contain images | ||
grafGalleryToCard, | ||
sqsGalleriesToCard, | ||
figureToImageCard, | ||
imgToCard, | ||
galleryCard.fromGrafGallery(options), | ||
galleryCard.fromSqsGallery(options), | ||
imageCard.fromFigure(options), | ||
imageCard.fromImg(options), | ||
hrToCard, | ||
@@ -497,0 +322,0 @@ figureToCodeCard, |
{ | ||
"name": "@tryghost/kg-parser-plugins", | ||
"version": "2.11.10", | ||
"version": "2.12.0", | ||
"repository": "https://github.com/TryGhost/Koenig/tree/master/packages/kg-parser-plugins", | ||
@@ -33,3 +33,3 @@ "author": "Ghost Foundation", | ||
"devDependencies": { | ||
"@babel/core": "7.18.10", | ||
"@babel/core": "7.18.13", | ||
"@babel/preset-env": "7.18.10", | ||
@@ -40,3 +40,3 @@ "@tryghost/mobiledoc-kit": "0.11.2-ghost.4", | ||
"mocha": "10.0.0", | ||
"rollup": "2.78.0", | ||
"rollup": "2.79.0", | ||
"rollup-plugin-babel": "4.4.0", | ||
@@ -47,5 +47,5 @@ "should": "13.2.3", | ||
"dependencies": { | ||
"@tryghost/kg-clean-basic-html": "^2.2.14" | ||
"@tryghost/kg-clean-basic-html": "^2.2.15" | ||
}, | ||
"gitHead": "499997085e4c15b71e3697e1f060c7cf0d55001e" | ||
"gitHead": "4f46db10141586a5dc3e18dc0e8106f8f4757d0c" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
205396
20
3049