fixed media library popup

Author: gordielachance

admin/src/components/MediaLib.tsx

@@ -1,36 +1,49 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useStrapiApp } from '@strapi/strapi/admin';
 import prefixFileUrlWithBackendUrl from '../utils/prefixFileUrlWithBackendUrl';
+import { useStrapiApp } from '@strapi/strapi/admin';
+import type { Schema } from '@strapi/types';
+
+const MediaLibComponent: React.FC<any> = ({
+  isOpen = false,
+  onChange,
+  onToggle,
+  allowedTypes
+}) => {
+
+  const components = useStrapiApp('ImageDialog', (state) => state.components);
+  if (!components || !isOpen) return null;
 
+  const MediaLibraryDialog = components['media-library']  as React.ComponentType<{
+    allowedTypes?: Schema.Attribute.MediaKind[]; // 'images' | 'videos' | 'files' | 'audios'
+    onClose: () => void;
+    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;
+  }>;
 
-const MediaLib = ( { isOpen = false, onChange = () => {}, onToggle = () => {} } ) => {
-  const { components } = useStrapiApp( 'library', app => app );
-  const MediaLibraryDialog = components[ 'media-library' ];
 
-  const handleSelectAssets = files => {
-    const formattedFiles = files.map(f => ( {
+  const handleSelectAssets = (assets: Schema.Attribute.MediaValue<true>) => {
+    const formattedFiles = assets.map((f) => ({
       alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl( f.url ),
+      url: prefixFileUrlWithBackendUrl(f.url),
       mime: f.mime,
-    } ) );
-
-    onChange( formattedFiles );
+      //width: f.width,
+      //height: f.height,
+      //size: f.size,
+      //formats:f.formats,
+    }));
+    onChange(formattedFiles);
   };
 
-  if ( !isOpen ) {
-    return null
-  };
+  if (!isOpen) {
+    return null;
+  }
 
-  return(
-    <MediaLibraryDialog onClose={ onToggle } onSelectAssets={ handleSelectAssets } />
+  return (
+    <MediaLibraryDialog
+    allowedTypes={allowedTypes}
+    onClose={onToggle}
+    onSelectAssets={handleSelectAssets}
+    />
   );
 };
 
-MediaLib.propTypes = {
-  isOpen: PropTypes.bool,
-  onChange: PropTypes.func,
-  onToggle: PropTypes.func,
-};
-
-export default MediaLib;
+export default MediaLibComponent;

admin/src/components/ReactMdEditor.tsx

@@ -1,6 +1,6 @@
 import { FC as FunctionComponent, useState, useEffect, useMemo } from "react";
 
-import { Box, Flex, Typography } from "@strapi/design-system";
+import { Flex, Field } from "@strapi/design-system";
 import type { Schema } from "@strapi/types";
 import MDEditor, { commands, ICommand } from "@uiw/react-md-editor";
 import { useIntl } from "react-intl";
@@ -9,7 +9,7 @@ import { styled } from "styled-components";
 import "@uiw/react-markdown-preview/markdown.css";
 
 import {PLUGIN_ID} from '../utils/pluginId';
-import { MediaLib } from "./MediaLib";
+import MediaLib from "./MediaLib";
 import { useField } from "@strapi/strapi/admin";
 
 const Wrapper = styled.div`
@@ -34,6 +34,9 @@ const Wrapper = styled.div`
     img {
       max-width: 100%;
     }
+    ul,ol{
+      list-style:inherit;
+    }
     .w-md-editor-preview {
       display: block;
       strong {
@@ -73,15 +76,19 @@ interface EditorProps {
     defaultMessage: string;
   };
   required?: boolean;
+  attribute?: any; // TO FIX
+  labelAction?: React.ReactNode; //TO FIX TO CHECK
 }
 
 const Editor: FunctionComponent<EditorProps> = ({
+  attribute,
   name,
-  intlLabel,
   disabled,
-  error,
-  description,
+  labelAction,
   required,
+  description,
+  error,
+  intlLabel,
 }) => {
   // const { formatMessage } = useIntl();
   const { onChange, value }: any = useField(name);
@@ -94,6 +101,7 @@ const Editor: FunctionComponent<EditorProps> = ({
 
   const handleChangeAssets = (assets: Schema.Attribute.MediaValue<true>) => {
     let newValue = value ? value : "";
+
     assets.map((asset) => {
       if (asset.mime.includes("image")) {
         const imgTag = `![${asset.alt}](${asset.url})`;
@@ -121,9 +129,9 @@ const Editor: FunctionComponent<EditorProps> = ({
 
   const toolbarCommands = useMemo(() => {
     const strapiMediaLibrary: ICommand = {
-      name: "image",
-      keyCommand: "image",
-      buttonProps: { "aria-label": "Insert image" },
+      name: "media",
+      keyCommand: "media",
+      buttonProps: { "aria-label": "Insert media" },
       icon: (
         <svg width="12" height="12" viewBox="0 0 20 20">
           <path
@@ -187,42 +195,36 @@ const Editor: FunctionComponent<EditorProps> = ({
   }, []);
 
   return (
-    <Flex gap={0} style={{ margin: 0, padding: 0 }}>
-      <Box>
-        <Typography variant="pi" fontWeight="bold">
-          {formatMessage(intlLabel)}
-        </Typography>
-        {required && (
-          <Typography variant="pi" fontWeight="bold" textColor="danger600">
-            *
-          </Typography>
-        )}
-      </Box>
-      <Wrapper>
-        <MDEditor
-          hidden={disabled}
-          commands={toolbarCommands}
-          value={value || ""}
-          onChange={(newValue) => {
-            onChange({ target: { name, value: newValue || "" } });
-          }}
-        />
-        <div style={{ padding: "50px 0 0 0" }} />
-        {/* <MediaLib
-          isOpen={mediaLibVisible}
-          onChange={handleChangeAssets}
-          onToggle={handleToggleMediaLib}
-        /> */}
-      </Wrapper>
-      {error && (
-        <Typography variant="pi" textColor="danger600">
-          {formatMessage({ id: error, defaultMessage: error })}
-        </Typography>
-      )}
-      {description && (
-        <Typography variant="pi">{formatMessage(description)}</Typography>
-      )}
-    </Flex>
+    <Field.Root
+      name= {name }
+      id={ name }
+      error={ error }
+      hint={ description && formatMessage( description ) }
+    >
+    <Flex spacing={ 1 } alignItems="normal" style={ { 'flexDirection': 'column' } }>
+      <Field.Label action={ labelAction } required={ required }>
+        { intlLabel ? formatMessage( intlLabel ) : name }
+      </Field.Label>
+        <Wrapper>
+          <MDEditor
+            hidden={disabled}
+            commands={toolbarCommands}
+            value={value || ""}
+            onChange={(newValue) => {
+              onChange({ target: { name, value: newValue || "" } });
+            }}
+          />
+        </Wrapper>
+        <Field.Hint />
+        <Field.Error />
+      </Flex>
+      <MediaLib
+      /*allowedTypes={['images']}*/
+      isOpen={ mediaLibVisible }
+      onChange={ handleChangeAssets }
+      onToggle={ handleToggleMediaLib }
+      />
+    </Field.Root>
   );
 };