fixed Media Library

admin/src/components/MediaLib.tsx

@@ -1,36 +1,62 @@
 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';
 
-
-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 => ( {
+interface IMediaLibComponent {
+  isOpen: boolean;
+  onChange: (files: FormattedMediaFile[]) => void;
+  onToggle: (idx: any) => void;
+  allowedTypes: string[];
+}
+
+interface FormattedMediaFile {
+  alternativeText?: string;
+  name?: string;
+  alt: string;
+  url: string;
+  width: number | undefined;
+  height: number | undefined;
+  size: number | undefined;
+  mime: string | undefined;
+  formats: Record<string, any> | undefined;
+}
+
+
+const MediaLibComponent: React.FC<IMediaLibComponent> = ({
+  isOpen = false,
+  onChange,
+  onToggle,
+  allowedTypes
+}) => {
+
+  const { components } = useStrapiApp('library', (app) => app);
+  const MediaLibraryDialog = components['media-library'] as React.ComponentType<any>;
+
+
+  const handleSelectAssets = (files: FormattedMediaFile[]) => {
+    const formattedFiles: any = files.map((f) => ({
       alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl( f.url ),
+      url: prefixFileUrlWithBackendUrl(f.url),
+      width: f.width,
+      height: f.height,
+      size: f.size,
       mime: f.mime,
-    } ) );
-
-    onChange( formattedFiles );
+      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);
@@ -187,42 +194,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>
   );
 };