diff --git a/.changeset/funky-trains-deny.md b/.changeset/funky-trains-deny.md new file mode 100644 index 00000000..99efca58 --- /dev/null +++ b/.changeset/funky-trains-deny.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": minor +--- + +Add support for WebP images diff --git a/src/shared/prosemirror-plugins/image-upload.ts b/src/shared/prosemirror-plugins/image-upload.ts index 69aeed38..45b75c33 100644 --- a/src/shared/prosemirror-plugins/image-upload.ts +++ b/src/shared/prosemirror-plugins/image-upload.ts @@ -94,7 +94,12 @@ export async function defaultImageUploadHandler(file: File): Promise { return json.UploadedImage; } -const defaultAcceptedFileTypes = ["image/jpeg", "image/png", "image/gif"]; +const defaultAcceptedFileTypes = [ + "image/jpeg", + "image/png", + "image/gif", + "image/webp", +]; const defaultSizeLimitMib = 2; enum ValidationResult { diff --git a/test/shared/prosemirror-plugins/image-upload.test.ts b/test/shared/prosemirror-plugins/image-upload.test.ts index 80e9d398..f40771cd 100644 --- a/test/shared/prosemirror-plugins/image-upload.test.ts +++ b/test/shared/prosemirror-plugins/image-upload.test.ts @@ -146,15 +146,15 @@ describe("image upload plugin", () => { expect(findAddButton(uploader).disabled).toBe(true); const validationMessage = findValidationMessage(uploader); expect(validationMessage.textContent).toBe( - "Please select an image (jpeg, png, gif) to upload" + "Please select an image (jpeg, png, gif, webp) to upload" ); expect(validationMessage.classList).not.toContain("d-none"); }); - it("should accept jpeg, png and gif by default if no acceptedFileTypes option is provided", async () => { + it("should accept jpeg, png, webp and gif by default if no acceptedFileTypes option is provided", async () => { showImageUploader(view.editorView); expect(uploader.uploadField.accept).toBe( - "image/jpeg, image/png, image/gif" + "image/jpeg, image/png, image/gif, image/webp" ); await expect( @@ -184,13 +184,22 @@ describe("image upload plugin", () => { "d-none" ); + await expect( + uploader.showImagePreview( + mockFile("some webp file", "image/webp") + ) + ).resolves.toBeUndefined(); + expect(findValidationMessage(uploader).classList).toContain( + "d-none" + ); + await expect( uploader.showImagePreview( mockFile("some bmp file", "image/bmp") ) ).rejects.toBe("invalid filetype"); expect(findValidationMessage(uploader).textContent).toBe( - "Please select an image (jpeg, png, gif) to upload" + "Please select an image (jpeg, png, gif, webp) to upload" ); });