feat: add width, height, size, mime, responsive data to image tool

This feature adds in the width, height, size, mime, and the responsive image data to the image tool. It saves all of that information to the database and is returned so that the user can use that information in their frontend.

This addresses several open and closed issues:
- #6
- #16
- #22 (duplicate of closed 6)

admin/src/components/medialib/component.js

@@ -16,10 +16,15 @@ const MediaLibComponent = ({isOpen, onChange, onToggle}) => {
   };
 
   const handleSelectAssets = files => {
+    console.log(files);
     const formattedFiles = files.map(f => ({
       alt: f.alternativeText || f.name,
       url: prefixFileUrlWithBackendUrl(f.url),
+      width: f.width,
+      height: f.height,
+      size: f.size,
       mime: f.mime,
+      formats: f.formats
     }));
     onChange(formattedFiles);
   };

admin/src/components/medialib/utils.js

@@ -11,14 +11,21 @@ export const getToggleFunc = ({openStateSetter, indexStateSetter}) => {
 export const changeFunc = ({indexStateSetter, editor, data, index}) => {
   let insertedBlocksCount = 0;
   data.forEach((entry) => {
+
+    console.log(entry);
     if (!entry.mime.includes("image")) {
         return;
     }
 
     const newBlockType = "image";
     const newBlockData = {
       file: {
-        url: entry.url.replace(window.location.origin, "")
+        url: entry.url.replace(window.location.origin, ""),
+        mime: entry.mime,
+        height: entry.height,
+        width: entry.width,
+        size: entry.size,
+        responsiveUrls: [entry.formats]
       },
       caption: "",
       withBorder: false,