pluginId --> PLUGIN_ID

admin/src/components/Initializer.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import pluginId from '../pluginId';
+import {PLUGIN_ID} from '../utils/pluginId';
 
 type InitializerProps = {
   setPlugin: (id: string) => void;
@@ -15,7 +15,7 @@ const Initializer = ({ setPlugin }: InitializerProps) => {
   const ref = useRef(setPlugin);
 
   useEffect(() => {
-    ref.current(pluginId);
+    ref.current(PLUGIN_ID);
   }, []);
 
   return null;

admin/src/components/MediaLib.tsx

@@ -1,7 +1,6 @@
-import { FC as FunctionComponent } from "react";
-
-import { useStrapiApp } from "@strapi/admin/strapi-admin";
-import type { Schema } from "@strapi/types";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useStrapiApp } from '@strapi/strapi/admin';
 
 const prefixFileUrlWithBackendUrl = (fileURL: string) => {
   return !!fileURL &&
@@ -14,47 +13,33 @@ const prefixFileUrlWithBackendUrl = (fileURL: string) => {
     : fileURL;
 };
 
-interface MediaLibComponentProps {
-  isOpen: boolean;
-  onChange: (files: Schema.Attribute.MediaValue<true>) => void;
-  onToggle: () => void;
-}
-
-const MediaLib: FunctionComponent<MediaLibComponentProps> = ({
-  isOpen,
-  onChange,
-  onToggle,
-}) => {
-  const components = useStrapiApp("ImageDialog", (state) => state.components);
-  if (!components || !isOpen) return null;
-
-  const MediaLibraryDialog = components["media-library"] as FunctionComponent<{
-    onClose: () => void;
-    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;
-  }>;
-
-  const handleSelectAssets = (files: Schema.Attribute.MediaValue<true>) => {
-    const formattedFiles = files.map((f) => ({
+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 => ( {
       alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl(f.url),
+      url: prefixFileUrlWithBackendUrl( f.url ),
       mime: f.mime,
-    }));
+    } ) );
+
+    onChange( formattedFiles );
+  };
 
-    onChange(formattedFiles);
+  if ( !isOpen ) {
+    return null
   };
 
-  return (
-    <MediaLibraryDialog
-      onClose={onToggle}
-      onSelectAssets={handleSelectAssets}
-    />
+  return(
+    <MediaLibraryDialog onClose={ onToggle } onSelectAssets={ handleSelectAssets } />
   );
 };
 
-MediaLib.defaultProps = {
-  isOpen: false,
-  onChange: (_files: Schema.Attribute.MediaValue<true>) => {},
-  onToggle: () => {},
+MediaLib.propTypes = {
+  isOpen: PropTypes.bool,
+  onChange: PropTypes.func,
+  onToggle: PropTypes.func,
 };
 
-export { MediaLib };
+export default MediaLib;

admin/src/components/ReactMdEditor.tsx

@@ -8,7 +8,7 @@ import { styled } from "styled-components";
 
 import "@uiw/react-markdown-preview/markdown.css";
 
-import pluginId from "../pluginId";
+import {PLUGIN_ID} from '../utils/pluginId';
 import { MediaLib } from "./MediaLib";
 import { useField } from "@strapi/strapi/admin";
 
@@ -179,7 +179,7 @@ const Editor: FunctionComponent<EditorProps> = ({
   }, [JSON.stringify(configs)]);
 
   useEffect(() => {
-    fetch(`/${pluginId}`)
+    fetch(`/${PLUGIN_ID}`)
       .then((response) => response.json())
       .then((data) => {
         setConfigs(data);

admin/src/index.ts

@@ -1,5 +1,5 @@
 import pluginPkg from "../../package.json";
-import pluginId from "./pluginId";
+import {PLUGIN_ID} from './utils/pluginId';
 import { Initializer } from "./components/Initializer";
 import { Editor as ReactMdEditor } from "./components/ReactMdEditor";
 import { getTranslation } from "./utils/getTranslation";
@@ -10,7 +10,7 @@ export default {
   register(app: any) {
     app.addFields({ type: "richtext", Component: ReactMdEditor });
     const plugin = {
-      id: pluginId,
+      id: PLUGIN_ID,
       initializer: Initializer,
       isReady: false,
       name,

admin/src/utils/getTranslation.ts

@@ -1,5 +1,5 @@
-import pluginId from '../pluginId';
+import {PLUGIN_ID} from '../utils/pluginId';
 
-const getTranslation = (id: string) => `${pluginId}.${id}`;
+const getTranslation = (id: string) => `${PLUGIN_ID}.${id}`;
 
 export { getTranslation };

admin/src/utils/pluginId.ts

@@ -0,0 +1,3 @@
+import pluginPkg from '../../../package.json';
+
+export const PLUGIN_ID = pluginPkg.strapi.name || pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');