fix: use slice instead of substr for stripping "expandable" from alt text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-dot-org/remark-plugins",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Library of all Remark plugins we use",
   "main": "src/index.js",
   "files": [

src/expandableImages.js

@@ -30,7 +30,8 @@ module.exports = function expandableImages() {
       link.children = [
         {
           type: "text",
-          value: link.alt.substr(0, -1 * "expandable".length).trim()
+          // using slice instead of regular expression for speed!
+          value: link.alt.slice(0, -1 * "expandable".length).trim()
         }
       ];
     }

test/expandableImages.test.js

@@ -0,0 +1,54 @@
+const test = require("tape")
+const { markdownToHtml } = require("./utils")
+const expandableImages = require("../src/expandableImages")
+
+test("plain image markdown is converted to a regular img element", (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 image markdown is converted to a span with a data-url attribute", (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" class="expandable-image"></span> dog!</p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})
+
+test("expandable image markdown with alt text is converted to a span with a data-url attribute and alt text content", (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" 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" class="expandable-image">expandable image of a dog</span> dog!</p>'
+
+  const rendered = markdownToHtml(markdown, expandableImages)
+  t.equal(rendered, expected)
+})