fix: fixed the image tool. Now able to add images from the media library, and automatically shuts the media library window after saving.

Author: jaskipper

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,17 +52,17 @@ 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}}
           instanceRef={instance => setEditorInstance(instance)}
         />
       </div>
       <MediaLibComponent
-        toggle={mediaLibToggleFunc}
         isOpen={isMediaLibOpen}
         onChange={handleMediaLibChange}
+        onToggle={mediaLibToggleFunc}
       />
     </>
   );
@@ -74,4 +74,4 @@ Editor.propTypes = {
   value: PropTypes.string,
 };
 
-export default Editor;
+export default Editor;

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;

admin/src/components/medialib/utils.js

@@ -32,4 +32,4 @@ export const changeFunc = ({indexStateSetter, editor, data, index}) => {
 
   editor.blocks.delete(index + insertedBlocksCount);
   indexStateSetter(-1);
-};
+};