{message}
- } else return null; + return{message}
+ } else return null } ``` @@ -630,7 +635,15 @@ import { Field } from 'payload/types' import './style.scss' const ClearButton: React.FC = () => { - return + return ( + + ) } const titleField: Field = { @@ -638,12 +651,12 @@ const titleField: Field = { type: 'text', admin: { components: { - afterInput: [ClearButton] - } - } + afterInput: [ClearButton], + }, + }, } -export default titleField; +export default titleField ``` ## Custom providers diff --git a/docs/admin/excluding-server-code.mdx b/docs/admin/excluding-server-code.mdx index f3abbf91b5..c87cd5b664 100644 --- a/docs/admin/excluding-server-code.mdx +++ b/docs/admin/excluding-server-code.mdx @@ -104,6 +104,7 @@ By default the browser bundle will now include all the code from that file and a To fix this, we need to alias the `createStripeSubscription` file to a different file that can safely be included in the browser bundle. First, we will create a mock file to replace the server-only file when bundling: + ```js // mocks/modules.js @@ -131,7 +132,7 @@ import { Subscriptions } from './collections/Subscriptions' const mockModulePath = path.resolve(__dirname, 'mocks/emptyObject.js') const fullFilePath = path.resolve( __dirname, - 'collections/Subscriptions/hooks/createStripeSubscription' + 'collections/Subscriptions/hooks/createStripeSubscription', ) export default buildConfig({ @@ -173,24 +174,23 @@ export default buildConfig({ admin: { bundler: viteBundler(), vite: (incomingViteConfig) => { - const existingAliases = incomingViteConfig?.resolve?.alias || {}; - let aliasArray: { find: string | RegExp; replacement: string; }[] = []; + const existingAliases = incomingViteConfig?.resolve?.alias || {} + let aliasArray: { find: string | RegExp; replacement: string }[] = [] // Pass the existing Vite aliases if (Array.isArray(existingAliases)) { - aliasArray = existingAliases; + aliasArray = existingAliases } else { - aliasArray = Object.values(existingAliases); + aliasArray = Object.values(existingAliases) } - // highlight-start // Add your own aliases using the find and replacement keys // remember, vite aliases are exact-match only aliasArray.push({ find: '../server-only-module', - replacement: path.resolve(__dirname, './path/to/browser-safe-module.js') - }); + replacement: path.resolve(__dirname, './path/to/browser-safe-module.js'), + }) // highlight-end return { @@ -198,8 +198,8 @@ export default buildConfig({ resolve: { ...(incomingViteConfig?.resolve || {}), alias: aliasArray, - } - }; + }, + } }, }, }) diff --git a/docs/admin/hooks.mdx b/docs/admin/hooks.mdx index 4da4bd7e0d..4560bed0a6 100644 --- a/docs/admin/hooks.mdx +++ b/docs/admin/hooks.mdx @@ -639,12 +639,12 @@ export const CustomArrayManager = () => { The `useCollapsible` hook allows you to control parent collapsibles: -| Property | Description | -|---------------------------|--------------------------------------------------------------------------------------------------------------------| -| **`collapsed`** | State of the collapsible. `true` if open, `false` if collapsed | -| **`isVisible`** | If nested, determine if the nearest collapsible is visible. `true` if no parent is closed, `false` otherwise | -| **`toggle`** | Toggles the state of the nearest collapsible | -| **`withinCollapsible`** | Determine when you are within another collaspible | | +| Property | Description | +| ----------------------- | ------------------------------------------------------------------------------------------------------------ | --- | +| **`collapsed`** | State of the collapsible. `true` if open, `false` if collapsed | +| **`isVisible`** | If nested, determine if the nearest collapsible is visible. `true` if no parent is closed, `false` otherwise | +| **`toggle`** | Toggles the state of the nearest collapsible | +| **`withinCollapsible`** | Determine when you are within another collaspible | | **Example:** @@ -671,7 +671,7 @@ const CustomComponent: React.FC = () => { The `useDocumentInfo` hook provides lots of information about the document currently being edited, including the following: | Property | Description | -|---------------------------|--------------------------------------------------------------------------------------------------------------------| +| ------------------------- | ------------------------------------------------------------------------------------------------------------------ | | **`collection`** | If the doc is a collection, its collection config will be returned | | **`global`** | If the doc is a global, its global config will be returned | | **`id`** | If the doc is a collection, its ID will be returned | @@ -804,15 +804,17 @@ const MyComponent: React.FC = () => { return ( <> - The current theme is {theme} and autoMode is {autoMode} + + The current theme is {theme} and autoMode is {autoMode} + - ) + ) } ``` @@ -833,10 +835,7 @@ const MyComponent: React.FC = () => { // highlight-end return ( -