Add showCaptionInArticleView option to append Caption components to embeds

lib/block-list.js

@@ -13,13 +13,14 @@ const types = {
   header4: ({children}) => renderHeading(4, children),
   header5: ({children}) => renderHeading(5, children),
   header6: ({children}) => renderHeading(6, children),
-  embed: item => renderEmbed(item, {
+  embed: (item, opts) => renderEmbed(item, {
     layout: 'embedLayout',
     style: 'embedStyle',
     mediaLayout: 'embedMediaLayout',
     mediaStyle: 'embedMediaStyle',
     captionLayout: 'embedCaptionLayout',
-    captionTextStyle: 'embedCaptionTextStyle'
+    captionTextStyle: 'embedCaptionTextStyle',
+    showCaptionInArticleView: opts.showCaptionInArticleView
   })
 };
 
@@ -29,7 +30,7 @@ const hasContent = ({children}) =>
   children.some(child => child.type !== 'linebreak' &&
     (child.content && child.content.trim()));
 
-function renderItem (item) {
+const renderItem = opts => item => {
   const {type} = item;
   if (!types[type]) {
     return null;
@@ -39,11 +40,11 @@ function renderItem (item) {
     return null;
   }
 
-  return types[type](item);
-}
+  return types[type](item, opts);
+};
 
-export default function ({body}) {
+export default function ({body}, opts) {
   return body
-    .map(renderItem)
+    .map(renderItem(opts))
     .filter(Boolean);
 }

lib/embed.js

@@ -43,6 +43,14 @@ const embeds = {
   })
 };
 
+const renderCaption = (item, opts) => {
+  const captionToRender = item.attribution
+    ? item.caption.concat([{ type: 'text', content: ' ' }], item.attribution)
+    : item.caption;
+
+  return renderTextItems(null, captionToRender, opts);
+};
+
 const render = (item, opts) => {
   opts = opts || {};
   const embed = embeds[item.embedType](item);
@@ -82,7 +90,13 @@ const render = (item, opts) => {
       captionOpts.textStyle = opts.captionTextStyle;
     }
 
-    embed.caption = renderTextItems(null, item.caption, captionOpts);
+    const captionComponent = renderCaption(item, captionOpts);
+    captionComponent.role = 'caption';
+
+    embed.caption = captionComponent;
+    if (opts.showCaptionInArticleView) {
+      result.components.push(captionComponent);
+    }
   }
 
   return result;

lib/header.js

@@ -54,7 +54,8 @@ const componentsWithEmbed = (article, opts) =>
     mediaLayout: 'headerEmbedMediaLayout',
     mediaStyle: 'headerEmbedMediaStyle',
     captionLayout: 'headerCaptionLayout',
-    captionTextStyle: 'headerCaptionTextStyle'
+    captionTextStyle: 'headerCaptionTextStyle',
+    showCaptionInArticleView: opts.showCaptionInArticleView
   })]
     .concat(componentsWithoutEmbed(article, opts));