feat: add altText as a data attribute to rendered span

src/expandableImages.js

@@ -19,18 +19,20 @@ module.exports = function expandableImages() {
       link.alt &&
       link.alt.endsWith("expandable")
     ) {
+      const altText = link.alt.replace(/expandable$/, "").trim()
       link.type = "span";
       link.data = {
         hName: "span",
         hProperties: {
           dataUrl: link.url,
+          dataAlt: altText,
           className: "expandable-image"
         }
       };
       link.children = [
         {
           type: "text",
-          value: link.alt.substr(0, -1 * "expandable".length).trim()
+          value: altText
         }
       ];
     }

test/expandableImages.test.js

@@ -0,0 +1,54 @@
+const test = require("tape")
+const { markdownToHtml } = require("./utils")
+const expandableImages = require("../src/expandableImages")
+
+test("plain images are not converted to span with data attributes", (t) => {
+  t.plan(1)
+  const markdown = "![plain image](https://example.com/image.png)"
+  const expected = '<p><img src="https://example.com/image.png" alt="plain image"></p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})
+
+test("expandable images are converted to span with data attributes", (t) => {
+  t.plan(1)
+  const markdown = "Check out this cool ![expandable](https://example.com/image.png) dog!"
+  const expected =
+    '<p>Check out this cool <span data-url="https://example.com/image.png" data-alt="" class="expandable-image"></span> dog!</p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})
+
+test("expandable image with alt text are converted to span with data attributes", (t) => {
+  t.plan(1)
+  const markdown =
+    "Check out this cool ![image of a dog expandable](https://example.com/image.png) dog!"
+  const expected =
+    '<p>Check out this cool <span data-url="https://example.com/image.png" data-alt="image of a dog" class="expandable-image">image of a dog</span> dog!</p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})
+
+test("'expandable' anywhere but the end of the alt text does not make it expandable", (t) => {
+  t.plan(1)
+  const markdown = "![expandable image](https://example.com/image.png)"
+  const expected =
+    '<p><img src="https://example.com/image.png" alt="expandable image"></p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})
+
+test("'expandable' flag at the end of the alt text handles 'expandable' elsewhere in the alt text", (t) => {
+  t.plan(1)
+  const markdown =
+    "Check out this cool ![expandable image of a dog expandable](https://example.com/image.png) dog!"
+  const expected =
+    '<p>Check out this cool <span data-url="https://example.com/image.png" data-alt="expandable image of a dog" class="expandable-image">expandable image of a dog</span> dog!</p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})

test/utils.js

@@ -21,7 +21,7 @@ schema.attributes.img.push('height', 'width');
 
 // Add support for expandableImages
 schema.tagNames.push('span');
-schema.attributes.span = ['dataUrl', 'className'];
+schema.attributes.span = ['dataUrl', 'dataAlt', 'className'];
 
 // Add support for inline styles (gross)
 // TODO replace all inline styles in our curriculum content with