fix: supports top-level and sidebar fields with tabbedUI #35

README.md

@@ -74,7 +74,9 @@ export default config;
 
 - `tabbedUI` : boolean | optional
 
-  Displays meta fields as tabs using Payload's [Tabs Field](https://payloadcms.com/docs/fields/tabs). Defaults to `false`.
+  Appends an `SEO` tab onto your config using Payload's [Tabs Field](https://payloadcms.com/docs/fields/tabs). If your collection is not already tab-enabled, meaning the first field in your config is not of type `tabs`, then one will be created for you called `Content`. Defaults to `false`.
+
+  > If you wish to continue to use top-level or sidebar fields with `tabbedUI`, you  must not let the default `Content` tab get created for you (see the note above). Instead, you must define the first field of your config with type `tabs` and place all other fields adjacent to this one.
 
 - `generateTitle` : method | optional
 

demo/src/collections/Pages.ts

@@ -19,6 +19,10 @@ const Pages: CollectionConfig = {
       name: 'slug',
       type: 'text',
       required: true,
+      // NOTE: in order for position: 'sidebar' to work here,
+      // the first field of this config must be of type `tabs`,
+      // and this field must be a sibling of it
+      // See `./Posts` or the `../../README.md` for more info
       admin: {
         position: 'sidebar',
       },

demo/src/collections/Posts.ts

@@ -22,18 +22,19 @@ const Posts: CollectionConfig = {
               name: 'excerpt',
               type: 'text',
             },
-            {
-              name: 'slug',
-              type: 'text',
-              required: true,
-              admin: {
-                position: 'sidebar',
-              },
-            },
           ],
         },
       ],
     },
+    {
+      name: 'slug',
+      label: 'Slug',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
   ],
 }
 

demo/src/server.ts

@@ -14,7 +14,7 @@ app.get('/', (_, res) => {
 
 // Initialize Payload
 const start = async (): Promise<void> => {
-  await payload.initAsync({
+  await payload.init({
     secret: process.env.PAYLOAD_SECRET,
     mongoURL: process.env.MONGODB_URI,
     express: app,

src/index.ts

@@ -89,15 +89,14 @@ const seo =
 
           if (isEnabled) {
             if (pluginConfig?.tabbedUI) {
-              const seoFieldsAsTabs: TabsField[] = [
+              const seoTabs: TabsField[] = [
                 {
                   type: 'tabs',
                   tabs: [
-                    // if the collection is already tab-enabled, spread them into this new tabs field
-                    // otherwise create a new tab to contain this collection's fields
-                    // either way, append a new tab for the SEO fields
+                    // append a new tab onto the end of the tabs array, if there is one at the first index
+                    // if needed, create a new `Content` tab in the first index for this collection's base fields
                     ...(collection?.fields?.[0].type === 'tabs'
-                      ? collection?.fields?.[0]?.tabs
+                      ? collection.fields[0]?.tabs
                       : [
                           {
                             label: collection?.labels?.singular || 'Content',
@@ -114,13 +113,16 @@ const seo =
 
               return {
                 ...collection,
-                fields: seoFieldsAsTabs,
+                fields: [
+                  ...seoTabs,
+                  ...(collection?.fields?.[0].type === 'tabs' ? collection?.fields?.slice(1) : []),
+                ],
               }
             }
 
             return {
               ...collection,
-              fields: [...(collection?.fields || []), ...seoFields],
+              fields: seoFields,
             }
           }