feat(core/markdown): render images with title as <figure> (speced#4207

)

src/core/markdown.js

@@ -37,6 +37,19 @@ class Renderer extends marked.Renderer {
     return html.replace("<pre>", `<pre title="${title}" class="${className}">`);
   }
 
+  image(href, title, text) {
+    if (!title) {
+      return super.image(href, title, text);
+    }
+    const html = String.raw;
+    return html`
+      <figure>
+        <img src="${href}" alt="${text}" />
+        <figcaption>${title}</figcaption>
+      </figure>
+    `;
+  }
+
   /**
    * @param {string} infoString
    */

tests/spec/core/markdown-spec.js

@@ -576,6 +576,44 @@ function getAnswer() {
     });
   });
 
+  it("renders image as <figure> if title is present", async () => {
+    const body = `
+      ## pass
+
+      <div id="test">
+
+      ![img alt](regular-img.png)
+      ![figure alt](figure.png "This is figcaption")
+      </div>
+    `;
+    const ops = makeStandardOps({ format: "markdown" }, body);
+    ops.abstract = null;
+    const doc = await makeRSDoc(ops);
+
+    const [img, figure] = doc.querySelectorAll(
+      "#test > p > img, #test > figure"
+    );
+    expect(img).toBeTruthy();
+    expect(figure).toBeTruthy();
+
+    expect(img.localName).toBe("img");
+    expect(img.getAttribute("src")).toBe("regular-img.png");
+    expect(img.getAttribute("alt")).toBe("img alt");
+    expect(img.getAttribute("title")).toBeNull();
+    expect(img.querySelector("figcaption")).toBeNull();
+
+    expect(figure.localName).toBe("figure");
+    const figImg = figure.querySelector("img");
+    expect(figImg).not.toBeNull();
+    expect(figImg.getAttribute("src")).toBe("figure.png");
+    expect(figImg.getAttribute("alt")).toBe("figure alt");
+    expect(figImg.getAttribute("title")).toBeNull();
+    const figCaption = figure.querySelector("figcaption");
+    expect(figCaption).not.toBeNull();
+    expect(figCaption.textContent).toContain("This is figcaption");
+    expect(figCaption.textContent).not.toContain("figure alt");
+  });
+
   it("retains heading order with generated sections", async () => {
     const body = `
     <section id="abstract">