feat: builds a way to inject custom React providers into admin UI

* fix: rich text textarea height

* feat: custom providers for admin panel

* docs: custom provider component

src/admin/components/forms/field-types/RichText/RichText.tsx

@@ -272,6 +272,7 @@ const RichText: React.FC<Props> = (props) => {
               ref={editorRef}
             >
               <Editable
+                className={`${baseClass}__input`}
                 renderElement={renderElement}
                 renderLeaf={renderLeaf}
                 placeholder={placeholder}

src/admin/components/forms/field-types/RichText/index.scss

@@ -17,7 +17,6 @@
   }
 
   &__editor {
-    min-height: base(10);
 
     [data-slate-node=element] {
       margin-bottom: base(0.25);
@@ -31,6 +30,10 @@
     }
   }
 
+  &__input {
+    min-height: base(10);
+  }
+
   &__wrap {
     width: 100%;
     position: relative;

src/admin/components/utilities/CustomProvider/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useConfig } from '@payloadcms/config-provider';
+
+const NestProviders = ({ providers, children }) => {
+  const Component = providers[0];
+  if (providers.length > 1) {
+    return (
+      <Component>
+        <NestProviders
+          providers={providers.slice(1)}
+        >
+          {children}
+        </NestProviders>
+      </Component>
+    );
+  }
+  return (
+    <Component>
+      {children}
+    </Component>
+  );
+};
+
+export const CustomProvider: React.FC<{ children }> = ({ children }) => {
+  const config = useConfig();
+
+  const {
+    admin: {
+      components: {
+        providers,
+      },
+    },
+  } = config;
+
+  if (Array.isArray(providers) && providers.length > 0) {
+    return (
+      <NestProviders providers={providers}>
+        {children}
+      </NestProviders>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      {children}
+    </React.Fragment>
+  );
+};

src/admin/index.tsx

@@ -10,6 +10,7 @@ import { ModalProvider, ModalContainer } from '@faceless-ui/modal';
 import { ToastContainer, Slide } from 'react-toastify';
 import { ConfigProvider, AuthProvider } from '@payloadcms/config-provider';
 import { PreferencesProvider } from './components/utilities/Preferences';
+import { CustomProvider } from './components/utilities/CustomProvider';
 import { SearchParamsProvider } from './components/utilities/SearchParams';
 import { LocaleProvider } from './components/utilities/Locale';
 import Routes from './components/Routes';
@@ -38,7 +39,9 @@ const Index = () => (
                   <SearchParamsProvider>
                     <LocaleProvider>
                       <StepNavProvider>
-                        <Routes />
+                        <CustomProvider>
+                          <Routes />
+                        </CustomProvider>
                       </StepNavProvider>
                     </LocaleProvider>
                   </SearchParamsProvider>