Merge pull request #1794 from rokoucha/support-webp-in-image-node

Handle .webp URL as an Image

Author: progfay

src/block/node/ImageNode.ts

@@ -5,16 +5,16 @@ import type { NodeCreator } from "./creator.ts";
 import type { ImageNode, PlainNode } from "./type.ts";
 
 const srcFirstStrongImageRegExp =
-	/\[https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg)(?:\?[^\]\s]+)?(?:\s+https?:\/\/[^\s\]]+)?\]/i;
+	/\[https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg|webp)(?:\?[^\]\s]+)?(?:\s+https?:\/\/[^\s\]]+)?\]/i;
 const linkFirstStrongImageRegExp =
-	/\[https?:\/\/[^\s\]]+\s+https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg)(?:\?[^\]\s]+)?\]/i;
+	/\[https?:\/\/[^\s\]]+\s+https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg|webp)(?:\?[^\]\s]+)?\]/i;
 const srcFirstStrongGyazoImageRegExp =
 	/\[https?:\/\/(?:[0-9a-z-]+\.)?gyazo\.com\/[0-9a-f]{32}(?:\/raw)?(?:\s+https?:\/\/[^\s\]]+)?\]/;
 const linkFirstStrongGyazoImageRegExp =
 	/\[https?:\/\/[^\s\]]+\s+https?:\/\/(?:[0-9a-z-]+\.)?gyazo\.com\/[0-9a-f]{32}(?:\/raw)?\]/;
 
 const isImageUrl = (text: string): boolean =>
-	/^https?:\/\/[^\s\]]+\.(png|jpe?g|gif|svg)(\?[^\]\s]+)?$/i.test(text) ||
+	/^https?:\/\/[^\s\]]+\.(png|jpe?g|gif|svg|webp)(\?[^\]\s]+)?$/i.test(text) ||
 	isGyazoImageUrl(text);
 
 const isGyazoImageUrl = (text: string): boolean =>

src/block/node/StrongImageNode.ts

@@ -4,7 +4,7 @@ import { createNodeParser } from "./creator.ts";
 import type { NodeCreator } from "./creator.ts";
 import type { PlainNode, StrongImageNode } from "./type.ts";
 
-const strongImageRegExp = /\[\[https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg)\]\]/i;
+const strongImageRegExp = /\[\[https?:\/\/[^\s\]]+\.(?:png|jpe?g|gif|svg|webp)\]\]/i;
 const strongGyazoImageRegExp =
 	/\[\[https?:\/\/(?:[0-9a-z-]+\.)?gyazo\.com\/[0-9a-f]{32}\]\]/;
 

tests/line/__snapshots__/image.test.ts.snap

@@ -116,7 +116,7 @@ exports[`image > HTTP jpeg image with special and japanese chars 1`] = `
 ]
 `;
 
-exports[`image > HTTPS svg and GIF image with link 1`] = `
+exports[`image > HTTPS svg, GIF and WebP image with link 1`] = `
 [
   {
     "indent": 0,
@@ -142,6 +142,18 @@ exports[`image > HTTPS svg and GIF image with link 1`] = `
     ],
     "type": "line",
   },
+  {
+    "indent": 0,
+    "nodes": [
+      {
+        "link": "https://example.com",
+        "raw": "[https://example.com/image.webp https://example.com]",
+        "src": "https://example.com/image.webp",
+        "type": "image",
+      },
+    ],
+    "type": "line",
+  },
 ]
 `;
 

tests/line/__snapshots__/strongImage.test.ts.snap

@@ -94,5 +94,16 @@ exports[`strongImage > Simple strong image 1`] = `
     ],
     "type": "line",
   },
+  {
+    "indent": 0,
+    "nodes": [
+      {
+        "raw": "[[https://example.com/image.webp]]",
+        "src": "https://example.com/image.webp",
+        "type": "strongImage",
+      },
+    ],
+    "type": "line",
+  },
 ]
 `;

tests/line/image.test.ts

@@ -24,12 +24,13 @@ describe("image", () => {
 		).toMatchSnapshot();
 	});
 
-	it("HTTPS svg and GIF image with link", () => {
+	it("HTTPS svg, GIF and WebP image with link", () => {
 		expect(
 			parse(
 				`
 [https://example.com/image.svg https://example.com/]
 [https://example.com/ https://example.com/image.GIF]
+[https://example.com/image.webp https://example.com]
 `.trim(),
 				{
 					hasTitle: false,

tests/line/strongImage.test.ts

@@ -10,6 +10,7 @@ describe("strongImage", () => {
 [[https://example.com/image.JPG]]
 [[https://example.com/image.svg]]
 [[https://example.com/image.GIF]]
+[[https://example.com/image.webp]]
 `.trim(),
 				{
 					hasTitle: false,