fix: substitution of content when sending an image to a profile (#3869)

* fix: Limit public uploads to basic image types

* test

shared/editor/nodes/Image.tsx

@@ -11,11 +11,8 @@ import {
 import * as React from "react";
 import ImageZoom from "react-medium-image-zoom";
 import styled from "styled-components";
-import {
-  getDataTransferFiles,
-  supportedImageMimeTypes,
-  getEventFiles,
-} from "../../utils/files";
+import { getDataTransferFiles, getEventFiles } from "../../utils/files";
+import { AttachmentValidation } from "../../validations";
 import insertFiles, { Options } from "../commands/insertFiles";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import uploadPlaceholderPlugin from "../lib/uploadPlaceholder";
@@ -413,7 +410,7 @@ export default class Image extends Node {
         // create an input element and click to trigger picker
         const inputElement = document.createElement("input");
         inputElement.type = "file";
-        inputElement.accept = supportedImageMimeTypes.join(", ");
+        inputElement.accept = AttachmentValidation.imageContentTypes.join(", ");
         inputElement.onchange = (event) => {
           const files = getEventFiles(event);
           insertFiles(view, event, state.selection.from, files, {

shared/utils/files.ts

@@ -83,21 +83,3 @@ export function getEventFiles(
     ? Array.prototype.slice.call(event.target.files)
     : [];
 }
-
-/**
- * An array of image mimetypes commonly supported by modern browsers
- */
-export const supportedImageMimeTypes = [
-  "image/jpg",
-  "image/jpeg",
-  "image/pjpeg",
-  "image/png",
-  "image/apng",
-  "image/avif",
-  "image/gif",
-  "image/webp",
-  "image/svg",
-  "image/svg+xml",
-  "image/bmp",
-  "image/tiff",
-];

shared/validations.ts

@@ -1,3 +1,24 @@
+export const AttachmentValidation = {
+  /** The limited allowable mime-types for user and team avatars */
+  avatarContentTypes: ["image/jpg", "image/jpeg", "image/png"],
+
+  /** Image mime-types commonly supported by modern browsers */
+  imageContentTypes: [
+    "image/jpg",
+    "image/jpeg",
+    "image/pjpeg",
+    "image/png",
+    "image/apng",
+    "image/avif",
+    "image/gif",
+    "image/webp",
+    "image/svg",
+    "image/svg+xml",
+    "image/bmp",
+    "image/tiff",
+  ],
+};
+
 export const CollectionValidation = {
   /** The maximum length of the collection description */
   maxDescriptionLength: 1000,