From fb5a907de6d4d6399b6a5e23b596d9893159944c Mon Sep 17 00:00:00 2001
From: Jason Skipper <jasonskipper@gmail.com>
Date: Fri, 25 Feb 2022 16:36:33 -0600
Subject: [PATCH] fix: fixed the image tool. Now able to add images from the
 media library, and automatically shuts the media library window after saving.

---
 admin/src/components/editorjs/index.js     |  8 +--
 admin/src/components/medialib/component.js | 58 ++++++++++------------
 admin/src/components/medialib/utils.js     |  2 +-
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/admin/src/components/editorjs/index.js b/admin/src/components/editorjs/index.js
index 3138c6d..43721f8 100755
--- a/admin/src/components/editorjs/index.js
+++ b/admin/src/components/editorjs/index.js
@@ -20,13 +20,13 @@ const Editor = ({ onChange, name, value }) => {
   }), []);
 
   const handleMediaLibChange = useCallback((data) => {
-
     changeFunc({
         indexStateSetter: setMediaLibBlockIndex,
         data,
         index: mediaLibBlockIndex,
         editor: editorInstance
     });
+    mediaLibToggleFunc();
   }, [mediaLibBlockIndex, editorInstance]);
 
   const customImageTool = {
@@ -52,7 +52,7 @@ const Editor = ({ onChange, name, value }) => {
           }}
           onChange={(api, newData) => {
             if (newData.blocks.length) {
-              onChange({target: {name, value: JSON.stringify(newData)}})
+              onChange({target: {name, value: JSON.stringify(newData)}});
             }
           }}
           tools={{...requiredTools, ...customTools, ...customImageTool}}
@@ -60,9 +60,9 @@ const Editor = ({ onChange, name, value }) => {
         />
       </div>
       <MediaLibComponent
-        toggle={mediaLibToggleFunc}
         isOpen={isMediaLibOpen}
         onChange={handleMediaLibChange}
+        onToggle={mediaLibToggleFunc}
       />
     </>
   );
@@ -74,4 +74,4 @@ Editor.propTypes = {
   value: PropTypes.string,
 };
 
-export default Editor;
\ No newline at end of file
+export default Editor;
diff --git a/admin/src/components/medialib/component.js b/admin/src/components/medialib/component.js
index cb0c922..03584da 100644
--- a/admin/src/components/medialib/component.js
+++ b/admin/src/components/medialib/component.js
@@ -1,60 +1,56 @@
-import React, {useEffect, useState} from 'react';
-import {useLibrary} from '@strapi/helper-plugin';
+import React, {useState} from 'react';
+import {prefixFileUrlWithBackendUrl, useLibrary} from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 
-const MediaLibComponent = ({isOpen, onChange, toggle}) => {
+const MediaLibComponent = ({isOpen, onChange, onToggle}) => {
  
   const { components } = useLibrary();
   const [data, setData] = useState(null);
-  const [isDisplayed, setIsDisplayed] = useState(false);
 
-  useEffect(() => {
-    if (isOpen) {
-      setIsDisplayed(true);
-    }
-  }, [isOpen]);
-
-  const Component = components['media-library'];
+  const MediaLibraryDialog = components['media-library'];
 
   const handleInputChange = data => {
     if (data) {
+      console.log(data);
       setData(data);
     }
   };
 
-  const handleClosed = () => {
-    if (data) {
-      onChange(data);
-    }
-
-    setData(null);
-    setIsDisplayed(false);
+  const handleSelectAssets = files => {
+    const formattedFiles = files.map(f => ({
+      alt: f.alternativeText || f.name,
+      url: prefixFileUrlWithBackendUrl(f.url),
+      mime: f.mime,
+    }));
+    console.log('handleSelectAssets');
+    onChange(formattedFiles);
   };
 
-  if (Component && isDisplayed) {
-    return (
-      <Component
-        allowedTypes={['images']}
-        isOpen={isOpen}
-        multiple={true}
-        onClosed={handleClosed}
-        onInputMediaChange={handleInputChange}
-        onToggle={toggle}
-      />
-    );
+  if(!isOpen) {
+    return null;
   }
 
-  return null;
+  return (
+    <MediaLibraryDialog
+      allowedTypes={['images']}
+      onClose={onToggle}
+      onInputMediaChange={[handleInputChange, onToggle]}
+      onSelectAssets={handleSelectAssets}
+    />
+  );
+
 };
 
 MediaLibComponent.defaultProps = {
   isOpen: false,
+  onChange: () => {},
+  onToggle: () => {},
 };
 
 MediaLibComponent.propTypes = {
   isOpen: PropTypes.bool,
   onChange: PropTypes.func,
-  toggle: PropTypes.func,
+  onToggle: PropTypes.func,
 };
 
 export default MediaLibComponent;
diff --git a/admin/src/components/medialib/utils.js b/admin/src/components/medialib/utils.js
index 13eb7a9..54a5107 100755
--- a/admin/src/components/medialib/utils.js
+++ b/admin/src/components/medialib/utils.js
@@ -32,4 +32,4 @@ export const changeFunc = ({indexStateSetter, editor, data, index}) => {
 
   editor.blocks.delete(index + insertedBlocksCount);
   indexStateSetter(-1);
-};
\ No newline at end of file
+};