@payloadcms/plugin-seo 1.0.14 → 2.0.0

package/README.md

@@ -1,206 +1,11 @@
 # Payload SEO Plugin
 
-[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-seo)](https://www.npmjs.com/package/@payloadcms/plugin-seo)
+A plugin for [Payload](https://github.com/payloadcms/payload) to manage SEO metadata from within your admin panel.
 
-A plugin for [Payload](https://github.com/payloadcms/payload) to auto-generate SEO meta data based on the content of your documents.
+If you're using version 2.0.0 or higher of this plugin, you'll need to be using version 2.7.0 or higher of Payload.
 
-Core features:
+If you're still on an older payload version, please use version 1.0.15.
 
-  - Adds a `meta` field group to every SEO-enabled collection or global
-  - Auto-generates meta data using your document's existing content
-  - Displays hints and indicators to help content editor write effective meta
-  - Renders a snippet of what a search engine might display
-  - Extendable so you can define custom fields like `og:title` or `json-ld`
-  - Soon will dynamic support variable injection
-
-## Installation
-
-```bash
-  yarn add @payloadcms/plugin-seo
-  # OR
-  npm i @payloadcms/plugin-seo
-```
-
-## Basic Usage
-
-In the `plugins` array of your [Payload config](https://payloadcms.com/docs/configuration/overview), call the plugin with [options](#options):
-
-```js
-import { buildConfig } from 'payload/config';
-import seo from '@payloadcms/plugin-seo';
-
-const config = buildConfig({
-  collections: [
-    {
-      slug: 'pages',
-      fields: []
-    },
-    {
-      slug: 'media',
-      upload: {
-        staticDir: // path to your static directory,
-      },
-      fields: []
-    }
-  ],
-  plugins: [
-    seo({
-      collections: [
-        'pages',
-      ],
-      uploadsCollection: 'media',
-      generateTitle: ({ doc }) => `Website.com — ${doc.title.value}`,
-      generateDescription: ({ doc }) => doc.excerpt
-    })
-  ]
-});
-
-export default config;
-```
-
-### Options
-
-- `collections` : string[] | optional
-
-  An array of collections slugs to enable SEO. Enabled collections receive a `meta` field which is an object of title, description, and image subfields.
-
-- `globals` : string[] | optional
-
-  An array of global slugs to enable SEO. Enabled globals receive a `meta` field which is an object of title, description, and image subfields.
-
-- `fields` Field[] | optional
-
-  Append your own custom fields onto the `meta` field group. The following fields are provided by default:
-
-    - `title`: text
-    - `description`: textarea
-    - `image`: upload (if an `uploadsCollection` is provided)
-    - `preview`: ui
-
-- `uploadsCollection` : string | optional
-
-  An upload-enabled collection slug, for the meta image to access.
-
-- `tabbedUI` : boolean | optional
-
-  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
-
-  A function that allows you to return any meta title, including from document's content.
-
-  ```js
-  seo({
-    ...
-    generateTitle: ({ ...docInfo, doc, locale }) => `Website.com — ${doc?.title?.value}`,
-  })
-  ```
-
-- `generateDescription` : method | optional
-
-  A function that allows you to return any meta description, including from document's content.
-
-  ```js
-  seo({
-    ...
-    generateDescription: ({ ...docInfo, doc, locale }) => doc?.excerpt?.value
-  })
-  ```
-
-- `generateImage` : method | optional
-
-  A function that allows you to return any meta image, including from document's content.
-
-  ```js
-  seo({
-   ...
-   generateImage: ({ ...docInfo, doc, locale }) => doc?.featuredImage?.value
-  })
-  ```
-
-- `generateURL` : method | optional
-
-  A function called by the search preview component to display the actual URL of your page.
-
-  ```js
-  seo({
-    ...
-    generateURL: ({ ...docInfo, doc, locale }) => `https://yoursite.com/${collection?.slug}/${doc?.slug?.value}`
-  })
-  ```
-
-## TypeScript
-
-All types can be directly imported:
-
-```js
-import {
-  PluginConfig,
-  GenerateTitle,
-  GenerateDescription
-  GenerateURL
-} from '@payloadcms/plugin-seo/types';
-```
-
-## Development
-
-To actively develop or debug this plugin you can either work directly within the demo directory of this repo, or link your own project.
-
-1. #### Internal Demo
-
-   This repo includes a fully working, self-seeding instance of Payload that installs the plugin directly from the source code. This is the easiest way to get started. To spin up this demo, follow these steps:
-
-   1. First clone the repo
-   1. Then, `cd YOUR_PLUGIN_REPO && yarn && cd demo && yarn && yarn dev`
-   1. Now open `http://localhost:3000/admin` in your browser
-   1. Enter username `dev@payloadcms.com` and password `test`
-
-   That's it! Changes made in `./src` will be reflected in your demo. Keep in mind that the demo database is automatically seeded on every startup, any changes you make to the data get destroyed each time you reboot the app.
-
-1. #### Linked Project
-
-   You can alternatively link your own project to the source code:
-
-   1. First clone the repo
-   1. Then, `cd YOUR_PLUGIN_REPO && yarn && cd demo && cp env.example .env && yarn && yarn dev`
-   1. Now `cd` back into your own project and run, `yarn link @payloadcms/plugin-seo`
-   1. If this plugin using React in any way, continue to the next step. Otherwise skip to step 7.
-   1. From your own project, `cd node_modules/react && yarn link && cd ../react-dom && yarn link && cd ../../`
-   1. Then, `cd YOUR_PLUGIN_REPO && yarn link react react-dom`
-
-   All set! You can now boot up your own project as normal, and your local copy of the plugin source code will be used. Keep in mind that changes to the source code require a rebuild, `yarn build`.
-
-   You might also need to alias these modules in your Webpack config. To do this, open your project's Payload config and add the following:
-
-   ```js
-   import { buildConfig } from "payload/config";
-
-   export default buildConfig({
-     admin: {
-       webpack: (config) => ({
-         ...config,
-         resolve: {
-           ...config.resolve,
-           alias: {
-             ...config.resolve.alias,
-             react: path.join(__dirname, "../node_modules/react"),
-             "react-dom": path.join(__dirname, "../node_modules/react-dom"),
-             payload: path.join(__dirname, "../node_modules/payload"),
-             "@payloadcms/plugin-seo": path.join(
-               __dirname,
-               "../../payload/plugin-seo/src"
-             ),
-           },
-         },
-       }),
-     },
-   });
-   ```
-
-## Screenshots
-
-![image](https://user-images.githubusercontent.com/70709113/163850633-f3da5f8e-2527-4688-bc79-17233307a883.png)
-
-<!-- ![screenshot 1](https://github.com/@payloadcms/plugin-seo/blob/main/images/screenshot-1.jpg?raw=true) -->
+- [Source code](https://github.com/payloadcms/payload/tree/main/packages/plugin-seo)
+- [Documentation](https://payloadcms.com/docs/plugins/seo)
+- [Documentation source](https://github.com/payloadcms/payload/tree/main/docs/plugins/seo.mdx)

package/dist/defaults.d.ts

@@ -1,10 +1,11 @@
 export declare const defaults: {
-    title: {
-        minLength: number;
-        maxLength: number;
-    };
     description: {
+        maxLength: number;
         minLength: number;
+    };
+    title: {
         maxLength: number;
+        minLength: number;
     };
 };
+//# sourceMappingURL=defaults.d.ts.map

package/dist/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../src/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAA"}

package/dist/defaults.js

@@ -1,14 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaults = void 0;
-exports.defaults = {
-    title: {
-        minLength: 50,
-        maxLength: 60,
-    },
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "defaults", {
+    enumerable: true,
+    get: function() {
+        return defaults;
+    }
+});
+const defaults = {
     description: {
-        minLength: 100,
         maxLength: 150,
+        minLength: 100
     },
+    title: {
+        maxLength: 60,
+        minLength: 50
+    }
 };
-//# sourceMappingURL=defaults.js.map
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9kZWZhdWx0cy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgZGVmYXVsdHMgPSB7XG4gIGRlc2NyaXB0aW9uOiB7XG4gICAgbWF4TGVuZ3RoOiAxNTAsXG4gICAgbWluTGVuZ3RoOiAxMDAsXG4gIH0sXG4gIHRpdGxlOiB7XG4gICAgbWF4TGVuZ3RoOiA2MCxcbiAgICBtaW5MZW5ndGg6IDUwLFxuICB9LFxufVxuIl0sIm5hbWVzIjpbImRlZmF1bHRzIiwiZGVzY3JpcHRpb24iLCJtYXhMZW5ndGgiLCJtaW5MZW5ndGgiLCJ0aXRsZSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFBYUE7OztlQUFBQTs7O0FBQU4sTUFBTUEsV0FBVztJQUN0QkMsYUFBYTtRQUNYQyxXQUFXO1FBQ1hDLFdBQVc7SUFDYjtJQUNBQyxPQUFPO1FBQ0xGLFdBQVc7UUFDWEMsV0FBVztJQUNiO0FBQ0YifQ==

package/dist/fields/MetaDescription.d.ts

@@ -1,12 +1,11 @@
+import type { TextareaField } from 'payload/types';
 import React from 'react';
-import { TextareaField } from 'payload/dist/fields/config/types';
-import { PluginConfig } from '../types';
-type TextareaFieldWithProps = TextareaField & {
+import type { PluginConfig } from '../types';
+type MetaDescriptionProps = TextareaField & {
     path: string;
     pluginConfig: PluginConfig;
 };
-export declare const MetaDescription: React.FC<(TextareaFieldWithProps | {}) & {
-    pluginConfig: PluginConfig;
-}>;
-export declare const getMetaDescriptionField: (props: any) => JSX.Element;
+export declare const MetaDescription: React.FC<MetaDescriptionProps>;
+export declare const getMetaDescriptionField: (props: MetaDescriptionProps) => React.JSX.Element;
 export {};
+//# sourceMappingURL=MetaDescription.d.ts.map

package/dist/fields/MetaDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaDescription.d.ts","sourceRoot":"","sources":["../../src/fields/MetaDescription.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIlD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAQ5C,KAAK,oBAAoB,GAAG,aAAa,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8G1D,CAAA;AAED,eAAO,MAAM,uBAAuB,UAAW,oBAAoB,sBAElE,CAAA"}

package/dist/fields/MetaDescription.js

@@ -1,154 +1,158 @@
-"use strict";
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
     });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
+}
+_export(exports, {
+    MetaDescription: function() {
+        return MetaDescription;
+    },
+    getMetaDescriptionField: function() {
+        return getMetaDescriptionField;
+    }
+});
+const _forms = require("payload/components/forms");
+const _utilities = require("payload/components/utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reacti18next = require("react-i18next");
+const _defaults = require("../defaults");
+const _LengthIndicator = require("../ui/LengthIndicator");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
             }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
     }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMetaDescriptionField = exports.MetaDescription = void 0;
-var react_1 = __importStar(require("react"));
-var forms_1 = require("payload/components/forms");
-var utilities_1 = require("payload/components/utilities");
-var Input_1 = __importDefault(require("payload/dist/admin/components/forms/field-types/Textarea/Input"));
-var defaults_1 = require("../defaults");
-var LengthIndicator_1 = require("../ui/LengthIndicator");
-var _a = defaults_1.defaults.description, minLength = _a.minLength, maxLength = _a.maxLength;
-var MetaDescription = function (props) {
-    var _a = props || {}, path = _a.path, label = _a.label, name = _a.name, pluginConfig = _a.pluginConfig; // TODO: this typing is temporary until payload types are updated for custom field props
-    var locale = (0, utilities_1.useLocale)();
-    var fields = (0, forms_1.useAllFormFields)()[0];
-    var docInfo = (0, utilities_1.useDocumentInfo)();
-    var field = (0, forms_1.useField)({
-        label: label,
-        name: name,
-        path: path,
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const { maxLength, minLength } = _defaults.defaults.description;
+const MetaDescription = (props)=>{
+    const { name, label, path, pluginConfig } = props;
+    const { t } = (0, _reacti18next.useTranslation)('plugin-seo');
+    const locale = (0, _utilities.useLocale)();
+    const [fields] = (0, _forms.useAllFormFields)();
+    const docInfo = (0, _utilities.useDocumentInfo)();
+    const field = (0, _forms.useField)({
+        name,
+        label,
+        path
     });
-    var value = field.value, setValue = field.setValue, showError = field.showError;
-    var regenerateDescription = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var generateDescription, generatedDescription;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    generateDescription = pluginConfig.generateDescription;
-                    if (!(typeof generateDescription === 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, generateDescription(__assign(__assign({}, docInfo), { doc: __assign({}, fields), locale: locale }))];
-                case 1:
-                    generatedDescription = _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setValue(generatedDescription);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [fields, setValue, pluginConfig, locale, docInfo]);
-    return (react_1.default.createElement("div", { style: {
-            marginBottom: '20px',
-        } },
-        react_1.default.createElement("div", { style: {
-                marginBottom: '5px',
-                position: 'relative',
-            } },
-            react_1.default.createElement("div", null,
-                label && typeof label === 'string' && label,
-                typeof pluginConfig.generateDescription === 'function' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    "\u00A0 \u2014 \u00A0",
-                    react_1.default.createElement("button", { onClick: regenerateDescription, type: "button", style: {
-                            padding: 0,
-                            background: 'none',
-                            border: 'none',
-                            backgroundColor: 'transparent',
-                            cursor: 'pointer',
-                            textDecoration: 'underline',
-                            color: 'currentcolor',
-                        } }, "Auto-generate")))),
-            react_1.default.createElement("div", { style: {
-                    color: '#9A9A9A',
-                } }, "This should be between ".concat(minLength, " and ").concat(maxLength, " characters. For help in writing quality meta descriptions, see "),
-                react_1.default.createElement("a", { href: "https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions", rel: "noopener noreferrer", target: "_blank" }, "best practices"))),
-        react_1.default.createElement("div", { style: {
-                marginBottom: '10px',
-                position: 'relative',
-            } },
-            react_1.default.createElement(Input_1.default, { path: name, name: name, onChange: setValue, value: value, showError: showError, style: {
-                    marginBottom: 0,
-                } })),
-        react_1.default.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                width: '100%',
-            } },
-            react_1.default.createElement(LengthIndicator_1.LengthIndicator, { text: value, minLength: minLength, maxLength: maxLength }))));
+    const { setValue, showError, value } = field;
+    const regenerateDescription = (0, _react.useCallback)(async ()=>{
+        const { generateDescription } = pluginConfig;
+        let generatedDescription;
+        if (typeof generateDescription === 'function') {
+            generatedDescription = await generateDescription({
+                ...docInfo,
+                doc: {
+                    ...fields
+                },
+                locale: typeof locale === 'object' ? locale?.code : locale
+            });
+        }
+        setValue(generatedDescription);
+    }, [
+        fields,
+        setValue,
+        pluginConfig,
+        locale,
+        docInfo
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            marginBottom: '20px'
+        }
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            marginBottom: '5px',
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ _react.default.createElement("div", null, label && typeof label === 'string' && label, typeof pluginConfig.generateDescription === 'function' && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, "\xa0 — \xa0", /*#__PURE__*/ _react.default.createElement("button", {
+        onClick: regenerateDescription,
+        style: {
+            background: 'none',
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: 'currentcolor',
+            cursor: 'pointer',
+            padding: 0,
+            textDecoration: 'underline'
+        },
+        type: "button"
+    }, t('autoGenerate')))), /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            color: '#9A9A9A'
+        }
+    }, t('lengthTipDescription', {
+        maxLength,
+        minLength
+    }), /*#__PURE__*/ _react.default.createElement("a", {
+        href: "https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions",
+        rel: "noopener noreferrer",
+        target: "_blank"
+    }, t('bestPractices')))), /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            marginBottom: '10px',
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ _react.default.createElement(_forms.TextareaInput, {
+        name: name,
+        onChange: setValue,
+        path: name,
+        showError: showError,
+        style: {
+            marginBottom: 0
+        },
+        value: value
+    })), /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            alignItems: 'center',
+            display: 'flex',
+            width: '100%'
+        }
+    }, /*#__PURE__*/ _react.default.createElement(_LengthIndicator.LengthIndicator, {
+        maxLength: maxLength,
+        minLength: minLength,
+        text: value
+    })));
 };
-exports.MetaDescription = MetaDescription;
-var getMetaDescriptionField = function (props) { return react_1.default.createElement(exports.MetaDescription, __assign({}, props)); };
-exports.getMetaDescriptionField = getMetaDescriptionField;
-//# sourceMappingURL=MetaDescription.js.map
+const getMetaDescriptionField = (props)=>/*#__PURE__*/ _react.default.createElement(MetaDescription, props);
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9maWVsZHMvTWV0YURlc2NyaXB0aW9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHR5cGUgeyBGaWVsZFR5cGUsIE9wdGlvbnMgfSBmcm9tICdwYXlsb2FkL2Rpc3QvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy91c2VGaWVsZC90eXBlcydcbmltcG9ydCB0eXBlIHsgVGV4dGFyZWFGaWVsZCB9IGZyb20gJ3BheWxvYWQvdHlwZXMnXG5cbmltcG9ydCB7IFRleHRhcmVhSW5wdXQsIHVzZUFsbEZvcm1GaWVsZHMsIHVzZUZpZWxkIH0gZnJvbSAncGF5bG9hZC9jb21wb25lbnRzL2Zvcm1zJ1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRJbmZvLCB1c2VMb2NhbGUgfSBmcm9tICdwYXlsb2FkL2NvbXBvbmVudHMvdXRpbGl0aWVzJ1xuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnXG5cbmltcG9ydCB0eXBlIHsgUGx1Z2luQ29uZmlnIH0gZnJvbSAnLi4vdHlwZXMnXG5cbmltcG9ydCB7IGRlZmF1bHRzIH0gZnJvbSAnLi4vZGVmYXVsdHMnXG5pbXBvcnQgeyBMZW5ndGhJbmRpY2F0b3IgfSBmcm9tICcuLi91aS9MZW5ndGhJbmRpY2F0b3InXG5cbmNvbnN0IHsgbWF4TGVuZ3RoLCBtaW5MZW5ndGggfSA9IGRlZmF1bHRzLmRlc2NyaXB0aW9uXG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tcmVkdW5kYW50LXR5cGUtY29uc3RpdHVlbnRzXG50eXBlIE1ldGFEZXNjcmlwdGlvblByb3BzID0gVGV4dGFyZWFGaWVsZCAmIHtcbiAgcGF0aDogc3RyaW5nXG4gIHBsdWdpbkNvbmZpZzogUGx1Z2luQ29uZmlnXG59XG5cbmV4cG9ydCBjb25zdCBNZXRhRGVzY3JpcHRpb246IFJlYWN0LkZDPE1ldGFEZXNjcmlwdGlvblByb3BzPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IG5hbWUsIGxhYmVsLCBwYXRoLCBwbHVnaW5Db25maWcgfSA9IHByb3BzXG5cbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigncGx1Z2luLXNlbycpXG5cbiAgY29uc3QgbG9jYWxlID0gdXNlTG9jYWxlKClcbiAgY29uc3QgW2ZpZWxkc10gPSB1c2VBbGxGb3JtRmllbGRzKClcbiAgY29uc3QgZG9jSW5mbyA9IHVzZURvY3VtZW50SW5mbygpXG5cbiAgY29uc3QgZmllbGQ6IEZpZWxkVHlwZTxzdHJpbmc+ID0gdXNlRmllbGQoe1xuICAgIG5hbWUsXG4gICAgbGFiZWwsXG4gICAgcGF0aCxcbiAgfSBhcyBPcHRpb25zKVxuXG4gIGNvbnN0IHsgc2V0VmFsdWUsIHNob3dFcnJvciwgdmFsdWUgfSA9IGZpZWxkXG5cbiAgY29uc3QgcmVnZW5lcmF0ZURlc2NyaXB0aW9uID0gdXNlQ2FsbGJhY2soYXN5bmMgKCkgPT4ge1xuICAgIGNvbnN0IHsgZ2VuZXJhdGVEZXNjcmlwdGlvbiB9ID0gcGx1Z2luQ29uZmlnXG4gICAgbGV0IGdlbmVyYXRlZERlc2NyaXB0aW9uXG5cbiAgICBpZiAodHlwZW9mIGdlbmVyYXRlRGVzY3JpcHRpb24gPT09ICdmdW5jdGlvbicpIHtcbiAgICAgIGdlbmVyYXRlZERlc2NyaXB0aW9uID0gYXdhaXQgZ2VuZXJhdGVEZXNjcmlwdGlvbih7XG4gICAgICAgIC4uLmRvY0luZm8sXG4gICAgICAgIGRvYzogeyAuLi5maWVsZHMgfSxcbiAgICAgICAgbG9jYWxlOiB0eXBlb2YgbG9jYWxlID09PSAnb2JqZWN0JyA/IGxvY2FsZT8uY29kZSA6IGxvY2FsZSxcbiAgICAgIH0pXG4gICAgfVxuXG4gICAgc2V0VmFsdWUoZ2VuZXJhdGVkRGVzY3JpcHRpb24pXG4gIH0sIFtmaWVsZHMsIHNldFZhbHVlLCBwbHVnaW5Db25maWcsIGxvY2FsZSwgZG9jSW5mb10pXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBzdHlsZT17e1xuICAgICAgICBtYXJnaW5Cb3R0b206ICcyMHB4JyxcbiAgICAgIH19XG4gICAgPlxuICAgICAgPGRpdlxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIG1hcmdpbkJvdHRvbTogJzVweCcsXG4gICAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAge2xhYmVsICYmIHR5cGVvZiBsYWJlbCA9PT0gJ3N0cmluZycgJiYgbGFiZWx9XG4gICAgICAgICAge3R5cGVvZiBwbHVnaW5Db25maWcuZ2VuZXJhdGVEZXNjcmlwdGlvbiA9PT0gJ2Z1bmN0aW9uJyAmJiAoXG4gICAgICAgICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICAgICZuYnNwOyAmbWRhc2g7ICZuYnNwO1xuICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgb25DbGljaz17cmVnZW5lcmF0ZURlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICd0cmFuc3BhcmVudCcsXG4gICAgICAgICAgICAgICAgICBib3JkZXI6ICdub25lJyxcbiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnY3VycmVudGNvbG9yJyxcbiAgICAgICAgICAgICAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgICAgICAgICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICAgICAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3QoJ2F1dG9HZW5lcmF0ZScpfVxuICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgY29sb3I6ICcjOUE5QTlBJyxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAge3QoJ2xlbmd0aFRpcERlc2NyaXB0aW9uJywgeyBtYXhMZW5ndGgsIG1pbkxlbmd0aCB9KX1cbiAgICAgICAgICA8YVxuICAgICAgICAgICAgaHJlZj1cImh0dHBzOi8vZGV2ZWxvcGVycy5nb29nbGUuY29tL3NlYXJjaC9kb2NzL2FkdmFuY2VkL2FwcGVhcmFuY2Uvc25pcHBldCNtZXRhLWRlc2NyaXB0aW9uc1wiXG4gICAgICAgICAgICByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCJcbiAgICAgICAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge3QoJ2Jlc3RQcmFjdGljZXMnKX1cbiAgICAgICAgICA8L2E+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgbWFyZ2luQm90dG9tOiAnMTBweCcsXG4gICAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIDxUZXh0YXJlYUlucHV0XG4gICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICBvbkNoYW5nZT17c2V0VmFsdWV9XG4gICAgICAgICAgcGF0aD17bmFtZX1cbiAgICAgICAgICBzaG93RXJyb3I9e3Nob3dFcnJvcn1cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgbWFyZ2luQm90dG9tOiAwLFxuICAgICAgICAgIH19XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIDxMZW5ndGhJbmRpY2F0b3IgbWF4TGVuZ3RoPXttYXhMZW5ndGh9IG1pbkxlbmd0aD17bWluTGVuZ3RofSB0ZXh0PXt2YWx1ZX0gLz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBjb25zdCBnZXRNZXRhRGVzY3JpcHRpb25GaWVsZCA9IChwcm9wczogTWV0YURlc2NyaXB0aW9uUHJvcHMpID0+IChcbiAgPE1ldGFEZXNjcmlwdGlvbiB7Li4ucHJvcHN9IC8+XG4pXG4iXSwibmFtZXMiOlsiTWV0YURlc2NyaXB0aW9uIiwiZ2V0TWV0YURlc2NyaXB0aW9uRmllbGQiLCJtYXhMZW5ndGgiLCJtaW5MZW5ndGgiLCJkZWZhdWx0cyIsImRlc2NyaXB0aW9uIiwicHJvcHMiLCJuYW1lIiwibGFiZWwiLCJwYXRoIiwicGx1Z2luQ29uZmlnIiwidCIsInVzZVRyYW5zbGF0aW9uIiwibG9jYWxlIiwidXNlTG9jYWxlIiwiZmllbGRzIiwidXNlQWxsRm9ybUZpZWxkcyIsImRvY0luZm8iLCJ1c2VEb2N1bWVudEluZm8iLCJmaWVsZCIsInVzZUZpZWxkIiwic2V0VmFsdWUiLCJzaG93RXJyb3IiLCJ2YWx1ZSIsInJlZ2VuZXJhdGVEZXNjcmlwdGlvbiIsInVzZUNhbGxiYWNrIiwiZ2VuZXJhdGVEZXNjcmlwdGlvbiIsImdlbmVyYXRlZERlc2NyaXB0aW9uIiwiZG9jIiwiY29kZSIsImRpdiIsInN0eWxlIiwibWFyZ2luQm90dG9tIiwicG9zaXRpb24iLCJSZWFjdCIsIkZyYWdtZW50IiwiYnV0dG9uIiwib25DbGljayIsImJhY2tncm91bmQiLCJiYWNrZ3JvdW5kQ29sb3IiLCJib3JkZXIiLCJjb2xvciIsImN1cnNvciIsInBhZGRpbmciLCJ0ZXh0RGVjb3JhdGlvbiIsInR5cGUiLCJhIiwiaHJlZiIsInJlbCIsInRhcmdldCIsIlRleHRhcmVhSW5wdXQiLCJvbkNoYW5nZSIsImFsaWduSXRlbXMiLCJkaXNwbGF5Iiwid2lkdGgiLCJMZW5ndGhJbmRpY2F0b3IiLCJ0ZXh0Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7O0lBdUJhQSxlQUFlO2VBQWZBOztJQWdIQUMsdUJBQXVCO2VBQXZCQTs7O3VCQWxJNkM7MkJBQ2Y7K0RBQ1I7OEJBQ0o7MEJBSU47aUNBQ087Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFaEMsTUFBTSxFQUFFQyxTQUFTLEVBQUVDLFNBQVMsRUFBRSxHQUFHQyxrQkFBUSxDQUFDQyxXQUFXO0FBUTlDLE1BQU1MLGtCQUFrRCxDQUFDTTtJQUM5RCxNQUFNLEVBQUVDLElBQUksRUFBRUMsS0FBSyxFQUFFQyxJQUFJLEVBQUVDLFlBQVksRUFBRSxHQUFHSjtJQUU1QyxNQUFNLEVBQUVLLENBQUMsRUFBRSxHQUFHQyxJQUFBQSw0QkFBYyxFQUFDO0lBRTdCLE1BQU1DLFNBQVNDLElBQUFBLG9CQUFTO0lBQ3hCLE1BQU0sQ0FBQ0MsT0FBTyxHQUFHQyxJQUFBQSx1QkFBZ0I7SUFDakMsTUFBTUMsVUFBVUMsSUFBQUEsMEJBQWU7SUFFL0IsTUFBTUMsUUFBMkJDLElBQUFBLGVBQVEsRUFBQztRQUN4Q2I7UUFDQUM7UUFDQUM7SUFDRjtJQUVBLE1BQU0sRUFBRVksUUFBUSxFQUFFQyxTQUFTLEVBQUVDLEtBQUssRUFBRSxHQUFHSjtJQUV2QyxNQUFNSyx3QkFBd0JDLElBQUFBLGtCQUFXLEVBQUM7UUFDeEMsTUFBTSxFQUFFQyxtQkFBbUIsRUFBRSxHQUFHaEI7UUFDaEMsSUFBSWlCO1FBRUosSUFBSSxPQUFPRCx3QkFBd0IsWUFBWTtZQUM3Q0MsdUJBQXVCLE1BQU1ELG9CQUFvQjtnQkFDL0MsR0FBR1QsT0FBTztnQkFDVlcsS0FBSztvQkFBRSxHQUFHYixNQUFNO2dCQUFDO2dCQUNqQkYsUUFBUSxPQUFPQSxXQUFXLFdBQVdBLFFBQVFnQixPQUFPaEI7WUFDdEQ7UUFDRjtRQUVBUSxTQUFTTTtJQUNYLEdBQUc7UUFBQ1o7UUFBUU07UUFBVVg7UUFBY0c7UUFBUUk7S0FBUTtJQUVwRCxxQkFDRSw2QkFBQ2E7UUFDQ0MsT0FBTztZQUNMQyxjQUFjO1FBQ2hCO3FCQUVBLDZCQUFDRjtRQUNDQyxPQUFPO1lBQ0xDLGNBQWM7WUFDZEMsVUFBVTtRQUNaO3FCQUVBLDZCQUFDSCxhQUNFdEIsU0FBUyxPQUFPQSxVQUFVLFlBQVlBLE9BQ3RDLE9BQU9FLGFBQWFnQixtQkFBbUIsS0FBSyw0QkFDM0MsNkJBQUNRLGNBQUssQ0FBQ0MsUUFBUSxRQUFDLDZCQUVkLDZCQUFDQztRQUNDQyxTQUFTYjtRQUNUTyxPQUFPO1lBQ0xPLFlBQVk7WUFDWkMsaUJBQWlCO1lBQ2pCQyxRQUFRO1lBQ1JDLE9BQU87WUFDUEMsUUFBUTtZQUNSQyxTQUFTO1lBQ1RDLGdCQUFnQjtRQUNsQjtRQUNBQyxNQUFLO09BRUpsQyxFQUFFLGtDQUtYLDZCQUFDbUI7UUFDQ0MsT0FBTztZQUNMVSxPQUFPO1FBQ1Q7T0FFQzlCLEVBQUUsd0JBQXdCO1FBQUVUO1FBQVdDO0lBQVUsa0JBQ2xELDZCQUFDMkM7UUFDQ0MsTUFBSztRQUNMQyxLQUFJO1FBQ0pDLFFBQU87T0FFTnRDLEVBQUUsbUNBSVQsNkJBQUNtQjtRQUNDQyxPQUFPO1lBQ0xDLGNBQWM7WUFDZEMsVUFBVTtRQUNaO3FCQUVBLDZCQUFDaUIsb0JBQWE7UUFDWjNDLE1BQU1BO1FBQ040QyxVQUFVOUI7UUFDVlosTUFBTUY7UUFDTmUsV0FBV0E7UUFDWFMsT0FBTztZQUNMQyxjQUFjO1FBQ2hCO1FBQ0FULE9BQU9BO3VCQUdYLDZCQUFDTztRQUNDQyxPQUFPO1lBQ0xxQixZQUFZO1lBQ1pDLFNBQVM7WUFDVEMsT0FBTztRQUNUO3FCQUVBLDZCQUFDQyxnQ0FBZTtRQUFDckQsV0FBV0E7UUFBV0MsV0FBV0E7UUFBV3FELE1BQU1qQzs7QUFJM0U7QUFFTyxNQUFNdEIsMEJBQTBCLENBQUNLLHNCQUN0Qyw2QkFBQ04saUJBQW9CTSJ9

package/dist/fields/MetaImage.d.ts

@@ -1,10 +1,11 @@
+import type { Props as UploadInputProps } from 'payload/components/fields/Upload';
 import React from 'react';
-import { Props as UploadFieldType } from 'payload/dist/admin/components/forms/field-types/Upload/types';
-import { PluginConfig } from '../types';
-type UploadFieldWithProps = UploadFieldType & {
+import type { PluginConfig } from '../types';
+type MetaImageProps = UploadInputProps & {
     path: string;
     pluginConfig: PluginConfig;
 };
-export declare const MetaImage: React.FC<UploadFieldWithProps | {}>;
-export declare const getMetaImageField: (props: any) => JSX.Element;
+export declare const MetaImage: React.FC<MetaImageProps>;
+export declare const getMetaImageField: (props: MetaImageProps) => React.JSX.Element;
 export {};
+//# sourceMappingURL=MetaImage.d.ts.map

package/dist/fields/MetaImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaImage.d.ts","sourceRoot":"","sources":["../../src/fields/MetaImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAKjF,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAK5C,KAAK,cAAc,GAAG,gBAAgB,GAAG;IACvC,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+H9C,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,cAAc,sBAA6B,CAAA"}