Add captions to embedded media

spec/classes/embedded_converter_spec.cr

@@ -37,6 +37,44 @@ describe EmbeddedConverter do
         )
       )
     end
+
+    context "and a caption exists" do
+      it "returns an EmbeddedContent node with caption" do
+        store = GistStore.new
+        paragraph = PostResponse::Paragraph.from_json <<-JSON
+          {
+            "name": "ab12",
+            "text": "Caption",
+            "type": "IFRAME",
+            "href": null,
+            "layout": "INSET_CENTER",
+            "markups": [],
+            "iframe": {
+              "mediaResource": {
+                "id": "abc123",
+                "href": "https://twitter.com/user/status/1",
+                "iframeSrc": "https://cdn.embedly.com/widgets/...",
+                "iframeWidth": 500,
+                "iframeHeight": 281
+              }
+            },
+            "metadata": null
+          }
+        JSON
+        caption = FigureCaption.new(children: [Text.new("Caption")] of Child)
+
+        result = EmbeddedConverter.convert(paragraph, store)
+
+        result.should eq(
+          EmbeddedContent.new(
+            src: "https://cdn.embedly.com/widgets/...",
+            originalWidth: 500,
+            originalHeight: 281,
+            caption: caption,
+          )
+        )
+      end
+    end
   end
 
   context "when the mediaResource has a blank iframeSrc value" do

spec/components/page_content_spec.cr

@@ -249,6 +249,7 @@ describe PageContent do
   end
 
   it "renders embedded content" do
+    caption_children = [Text.new("Caption")] of Child
     page = Page.new(
       title: "Title",
       author: user_anchor_factory,
@@ -258,6 +259,7 @@ describe PageContent do
           src: "https://example.com",
           originalWidth: 1000,
           originalHeight: 600,
+          caption: FigureCaption.new(children: caption_children)
         ),
       ] of Child
     )
@@ -268,6 +270,11 @@ describe PageContent do
       <figure>
         <iframe src="https://example.com" width="800" height="480" frameborder="0" allowfullscreen="true">
         </iframe>
+        <label class="margin-toggle" for="#{caption_children.hash}">&#9997;&#xFE0E;</label>
+        <input class="margin-toggle" type="checkbox" id="#{caption_children.hash}">
+        <span class="marginnote">
+          Caption
+        </span>
       </figure>
     HTML
   end

src/classes/embedded_converter.cr

@@ -34,11 +34,19 @@ class EmbeddedConverter
       EmbeddedContent.new(
         src: media.iframeSrc,
         originalWidth: media.iframeWidth,
-        originalHeight: media.iframeHeight
+        originalHeight: media.iframeHeight,
+        caption: caption
       )
     end
   end
 
+  private def caption : FigureCaption?
+    if !paragraph.text.blank?
+      children = [Text.new(paragraph.text || "")] of Child
+      FigureCaption.new(children: children)
+    end
+  end
+
   private def custom_embed(media : PostResponse::MediaResource) : Embedded
     if media.href.starts_with?(GIST_HOST_AND_SCHEME)
       GithubGist.new(href: media.href, gist_store: gist_store)

src/components/page_content.cr

@@ -40,6 +40,9 @@ class PageContent < BaseComponent
         frameborder: "0",
         allowfullscreen: true,
       )
+      if caption = child.caption
+        render_child(caption)
+      end
     end
   end
 

src/models/nodes.cr

@@ -147,8 +147,14 @@ module Nodes
     MAX_WIDTH = 800
 
     getter src : String
+    getter caption : FigureCaption?
 
-    def initialize(@src : String, @originalWidth : Int32, @originalHeight : Int32)
+    def initialize(
+      @src : String,
+      @originalWidth : Int32,
+      @originalHeight : Int32,
+      @caption : FigureCaption? = nil
+    )
     end
 
     def width
@@ -168,7 +174,10 @@ module Nodes
     end
 
     def ==(other : EmbeddedContent)
-      other.src == src && other.width == width && other.height == height
+      other.src == src &&
+        other.width == width &&
+        other.height == height &&
+        other.caption == caption
     end
 
     def empty?