@websolutespa/payload-plugin-seo 2.0.1-next.3 → 2.0.1-next.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/payload-plugin-seo
 
+## 2.0.1-next.4
+
+### Patch Changes
+
+- - Changed token autocomplete library
+
 ## 2.0.1-next.3
 
 ### Patch Changes

package/dist/components/TextWithTokens.js

@@ -2,15 +2,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldLabel, useField, useFormFields } from '@payloadcms/ui';
 import * as React from 'react';
-import TextInput from 'react-autocomplete-input';
+import { Mention, MentionsInput } from 'react-mentions';
 const baseClass = 'text-with-tokens';
+const mentionsStyle = {
+    control: {
+        display: 'block',
+        width: '100%'
+    },
+    '&singleLine': {
+        input: {
+            width: '100%',
+            padding: '0.375rem 0.75rem',
+            border: '1px solid var(--theme-elevation-150)',
+            borderRadius: 'var(--border-radius)',
+            backgroundColor: 'var(--theme-input-bg)',
+            color: 'var(--theme-text)',
+            fontSize: '1rem',
+            lineHeight: '1.5',
+            outline: 'none'
+        },
+        highlighter: {
+            padding: '0.375rem 0.75rem',
+            border: '1px solid transparent'
+        }
+    },
+    suggestions: {
+        list: {
+            backgroundColor: 'var(--theme-bg)',
+            border: '1px solid var(--theme-elevation-150)',
+            borderRadius: 'var(--border-radius)',
+            maxHeight: '200px',
+            overflowY: 'auto'
+        },
+        item: {
+            padding: '4px 12px',
+            '&focused': {
+                backgroundColor: 'var(--theme-elevation-50)'
+            }
+        }
+    }
+};
 export const TextWithTokens = (props)=>{
     const { path, field } = props;
     const { label, required } = field;
     const { value, setValue } = useField({
         path
     });
-    const tokensField = useFormFields(([fields, dispatch])=>fields.tokens);
+    const tokensField = useFormFields(([fields])=>fields.tokens);
     let tokens = tokensField?.value || [];
     tokens = tokens.map((token)=>token.replace('[', '').replace(']', ''));
     const classes = [
@@ -26,17 +64,21 @@ export const TextWithTokens = (props)=>{
                 path: path,
                 required: required
             }),
-            /*#__PURE__*/ _jsx(TextInput, {
-                trigger: [
-                    '['
-                ],
-                options: {
-                    '[': tokens
-                },
-                maxOptions: 50,
-                spacer: '] ',
-                defaultValue: value,
-                onChange: (e)=>setValue(e)
+            /*#__PURE__*/ _jsx(MentionsInput, {
+                singleLine: true,
+                value: value ?? '',
+                onChange: (_, newValue)=>setValue(newValue),
+                style: mentionsStyle,
+                children: /*#__PURE__*/ _jsx(Mention, {
+                    trigger: "[",
+                    data: tokens.map((t)=>({
+                            id: t,
+                            display: t
+                        })),
+                    markup: "[__display__]",
+                    displayTransform: (_, display)=>`[${display}]`,
+                    appendSpaceOnAdd: true
+                })
             })
         ]
     });

package/dist/components/TextWithTokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TextWithTokens.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { FieldLabel, useField, useFormFields } from '@payloadcms/ui';\r\nimport { TextFieldClientProps } from 'payload';\r\nimport * as React from 'react';\r\nimport TextInput from 'react-autocomplete-input';\r\n\r\nconst baseClass = 'text-with-tokens';\r\n\r\nexport const TextWithTokens: React.FC<TextFieldClientProps> = (props) => {\r\n  const { path, field } = props;\r\n  const { label, required } = field;\r\n  const { value, setValue } = useField<string>({ path });\r\n\r\n  const tokensField = useFormFields(([fields, dispatch]) => fields.tokens);\r\n  let tokens = (tokensField?.value as string[]) || [];\r\n  tokens = tokens.map((token) => token.replace('[', '').replace(']', ''));\r\n\r\n  const classes = ['field-type', 'textarea', baseClass].join(' ');\r\n\r\n  return (\r\n    <div className={classes}>\r\n      <FieldLabel label={label} path={path} required={required} />\r\n      <TextInput\r\n        trigger={['[']}\r\n        options={{ '[': tokens }}\r\n        maxOptions={50}\r\n        spacer={'] '}\r\n        defaultValue={value}\r\n        onChange={(e) => setValue(e)}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["FieldLabel","useField","useFormFields","React","TextInput","baseClass","TextWithTokens","props","path","field","label","required","value","setValue","tokensField","fields","dispatch","tokens","map","token","replace","classes","join","div","className","trigger","options","maxOptions","spacer","defaultValue","onChange","e"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAiB;AAErE,YAAYC,WAAW,QAAQ;AAC/B,OAAOC,eAAe,2BAA2B;AAEjD,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAAiD,CAACC;IAC7D,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAC5B,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGZ,SAAiB;QAAEO;IAAK;IAEpD,MAAMM,cAAcZ,cAAc,CAAC,CAACa,QAAQC,SAAS,GAAKD,OAAOE,MAAM;IACvE,IAAIA,SAAS,AAACH,aAAaF,SAAsB,EAAE;IACnDK,SAASA,OAAOC,GAAG,CAAC,CAACC,QAAUA,MAAMC,OAAO,CAAC,KAAK,IAAIA,OAAO,CAAC,KAAK;IAEnE,MAAMC,UAAU;QAAC;QAAc;QAAYhB;KAAU,CAACiB,IAAI,CAAC;IAE3D,qBACE,MAACC;QAAIC,WAAWH;;0BACd,KAACrB;gBAAWU,OAAOA;gBAAOF,MAAMA;gBAAMG,UAAUA;;0BAChD,KAACP;gBACCqB,SAAS;oBAAC;iBAAI;gBACdC,SAAS;oBAAE,KAAKT;gBAAO;gBACvBU,YAAY;gBACZC,QAAQ;gBACRC,cAAcjB;gBACdkB,UAAU,CAACC,IAAMlB,SAASkB;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../../src/components/TextWithTokens.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { FieldLabel, useField, useFormFields } from '@payloadcms/ui';\r\nimport { TextFieldClientProps } from 'payload';\r\nimport * as React from 'react';\r\nimport { Mention, MentionsInput } from 'react-mentions';\r\n\r\nconst baseClass = 'text-with-tokens';\r\n\r\nconst mentionsStyle = {\r\n  control: {\r\n    display: 'block',\r\n    width: '100%',\r\n  },\r\n  '&singleLine': {\r\n    input: {\r\n      width: '100%',\r\n      padding: '0.375rem 0.75rem',\r\n      border: '1px solid var(--theme-elevation-150)',\r\n      borderRadius: 'var(--border-radius)',\r\n      backgroundColor: 'var(--theme-input-bg)',\r\n      color: 'var(--theme-text)',\r\n      fontSize: '1rem',\r\n      lineHeight: '1.5',\r\n      outline: 'none',\r\n    },\r\n    highlighter: {\r\n      padding: '0.375rem 0.75rem',\r\n      border: '1px solid transparent',\r\n    },\r\n  },\r\n  suggestions: {\r\n    list: {\r\n      backgroundColor: 'var(--theme-bg)',\r\n      border: '1px solid var(--theme-elevation-150)',\r\n      borderRadius: 'var(--border-radius)',\r\n      maxHeight: '200px',\r\n      overflowY: 'auto' as const,\r\n    },\r\n    item: {\r\n      padding: '4px 12px',\r\n      '&focused': {\r\n        backgroundColor: 'var(--theme-elevation-50)',\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\nexport const TextWithTokens: React.FC<TextFieldClientProps> = (props) => {\r\n  const { path, field } = props;\r\n  const { label, required } = field;\r\n  const { value, setValue } = useField<string>({ path });\r\n\r\n  const tokensField = useFormFields(([fields]) => fields.tokens);\r\n  let tokens = (tokensField?.value as string[]) || [];\r\n  tokens = tokens.map((token) => token.replace('[', '').replace(']', ''));\r\n\r\n  const classes = ['field-type', 'textarea', baseClass].join(' ');\r\n\r\n  return (\r\n    <div className={classes}>\r\n      <FieldLabel label={label} path={path} required={required} />\r\n      <MentionsInput\r\n        singleLine\r\n        value={value ?? ''}\r\n        onChange={(_, newValue) => setValue(newValue)}\r\n        style={mentionsStyle}\r\n      >\r\n        <Mention\r\n          trigger=\"[\"\r\n          data={tokens.map((t) => ({ id: t, display: t }))}\r\n          markup=\"[__display__]\"\r\n          displayTransform={(_, display) => `[${display}]`}\r\n          appendSpaceOnAdd\r\n        />\r\n      </MentionsInput>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["FieldLabel","useField","useFormFields","React","Mention","MentionsInput","baseClass","mentionsStyle","control","display","width","input","padding","border","borderRadius","backgroundColor","color","fontSize","lineHeight","outline","highlighter","suggestions","list","maxHeight","overflowY","item","TextWithTokens","props","path","field","label","required","value","setValue","tokensField","fields","tokens","map","token","replace","classes","join","div","className","singleLine","onChange","_","newValue","style","trigger","data","t","id","markup","displayTransform","appendSpaceOnAdd"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAiB;AAErE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,OAAO,EAAEC,aAAa,QAAQ,iBAAiB;AAExD,MAAMC,YAAY;AAElB,MAAMC,gBAAgB;IACpBC,SAAS;QACPC,SAAS;QACTC,OAAO;IACT;IACA,eAAe;QACbC,OAAO;YACLD,OAAO;YACPE,SAAS;YACTC,QAAQ;YACRC,cAAc;YACdC,iBAAiB;YACjBC,OAAO;YACPC,UAAU;YACVC,YAAY;YACZC,SAAS;QACX;QACAC,aAAa;YACXR,SAAS;YACTC,QAAQ;QACV;IACF;IACAQ,aAAa;QACXC,MAAM;YACJP,iBAAiB;YACjBF,QAAQ;YACRC,cAAc;YACdS,WAAW;YACXC,WAAW;QACb;QACAC,MAAM;YACJb,SAAS;YACT,YAAY;gBACVG,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,OAAO,MAAMW,iBAAiD,CAACC;IAC7D,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAC5B,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGhC,SAAiB;QAAE2B;IAAK;IAEpD,MAAMM,cAAchC,cAAc,CAAC,CAACiC,OAAO,GAAKA,OAAOC,MAAM;IAC7D,IAAIA,SAAS,AAACF,aAAaF,SAAsB,EAAE;IACnDI,SAASA,OAAOC,GAAG,CAAC,CAACC,QAAUA,MAAMC,OAAO,CAAC,KAAK,IAAIA,OAAO,CAAC,KAAK;IAEnE,MAAMC,UAAU;QAAC;QAAc;QAAYlC;KAAU,CAACmC,IAAI,CAAC;IAE3D,qBACE,MAACC;QAAIC,WAAWH;;0BACd,KAACxC;gBAAW8B,OAAOA;gBAAOF,MAAMA;gBAAMG,UAAUA;;0BAChD,KAAC1B;gBACCuC,UAAU;gBACVZ,OAAOA,SAAS;gBAChBa,UAAU,CAACC,GAAGC,WAAad,SAASc;gBACpCC,OAAOzC;0BAEP,cAAA,KAACH;oBACC6C,SAAQ;oBACRC,MAAMd,OAAOC,GAAG,CAAC,CAACc,IAAO,CAAA;4BAAEC,IAAID;4BAAG1C,SAAS0C;wBAAE,CAAA;oBAC7CE,QAAO;oBACPC,kBAAkB,CAACR,GAAGrC,UAAY,CAAC,CAAC,EAAEA,QAAQ,CAAC,CAAC;oBAChD8C,gBAAgB;;;;;AAK1B,EAAE"}

package/dist/exports/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../src/components/TextWithTokens.tsx","../../src/components/Tokens.tsx"],"sourcesContent":[],"mappings":";;;;cASa,gBAAgB,KAAA,CAAM,GAAG;;;;cCFzB,QAAQ,KAAA,CAAM,GAAG"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../src/components/TextWithTokens.tsx","../../src/components/Tokens.tsx"],"sourcesContent":[],"mappings":";;;;cAgDa,gBAAgB,KAAA,CAAM,GAAG;;;;cCzCzB,QAAQ,KAAA,CAAM,GAAG"}

package/dist/exports/client.js

@@ -1,3 +1,4 @@
+'use client';
 export { TextWithTokens } from '../components/TextWithTokens';
 export { Tokens } from '../components/Tokens';
 

package/dist/exports/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { TextWithTokens } from '../components/TextWithTokens';\r\nexport { Tokens } from '../components/Tokens';\r\n"],"names":["TextWithTokens","Tokens"],"mappings":"AAAA,SAASA,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,MAAM,QAAQ,uBAAuB"}
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["'use client';\r\n\r\nexport { TextWithTokens } from '../components/TextWithTokens';\r\nexport { Tokens } from '../components/Tokens';\r\n\r\n"],"names":["TextWithTokens","Tokens"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,MAAM,QAAQ,uBAAuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/payload-plugin-seo",
-  "version": "2.0.1-next.3",
+  "version": "2.0.1-next.4",
   "description": "SEO plugin for PayloadCms",
   "keywords": [
     "payload",
@@ -29,14 +29,14 @@
     "types": "tsc --noemit"
   },
   "dependencies": {
-    "react-autocomplete-input": "^1.0.31",
+    "react-mentions": "^4.4.10",
     "ts-deepmerge": "^2.0.1"
   },
   "peerDependencies": {
     "@payloadcms/db-mongodb": "3.70.0",
+    "@payloadcms/ui": "3.70.0",
     "@websolutespa/bom-core": "2.0.1-next.2",
     "@websolutespa/payload-utils": "2.0.1-next.2",
-    "@payloadcms/ui": "3.70.0",
     "payload": "3.70.0",
     "react": "19.2.1",
     "react-dom": "19.2.1",
@@ -49,8 +49,9 @@
     "@swc/cli": "0.6.0",
     "@swc/core": "1.6.4",
     "@types/express": "^4.17.15",
-    "@types/react-dom": "19.2.1",
     "@types/react": "19.2.1",
+    "@types/react-dom": "19.2.1",
+    "@types/react-mentions": "^4.4.1",
     "@types/uuid": "^9.0.2",
     "@websolutespa/bom-core": "2.0.1-next.2",
     "@websolutespa/eslint-config": "2.0.1-next.2",
@@ -63,8 +64,8 @@
     "mongodb-memory-server": "10.1.4",
     "npm-run-all": "4.1.5",
     "payload": "3.70.0",
-    "react-dom": "19.2.1",
     "react": "19.2.1",
+    "react-dom": "19.2.1",
     "tsdown": "0.12.9",
     "typescript": "5.8.3",
     "uuid": "9.0.1"