@contentful/field-editor-slug 3.0.6 → 3.1.0

package/dist/cjs/SlugEditor.js

@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function isSupportedFieldTypes(val) {
     return val === 'Symbol';
 }
-function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id }) {
+function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id, maxLength }) {
     const safeSetValue = _react.useCallback(async (...args)=>{
         try {
             await setValue(...args);
@@ -77,7 +77,8 @@ function FieldConnectorCallback({ Component, value, disabled, setValue, errors,
         isDisabled: disabled,
         titleValue: titleValue,
         setValue: safeSetValue,
-        id: id
+        id: id,
+        maxLength: maxLength
     }));
 }
 function SlugEditor(props) {
@@ -89,6 +90,7 @@ function SlugEditor(props) {
     const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
     const entrySys = entry.getSys();
     const isUniqueValidationEnabled = (field.validations || []).some((validation)=>'unique' in validation && validation.unique === true);
+    const maxLength = (field.validations || []).find((validation)=>'size' in validation)?.size?.max;
     const isLocaleOptional = locales.optional[field.locale];
     const localeFallbackCode = locales.fallbacks[field.locale];
     const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
@@ -139,7 +141,8 @@ function SlugEditor(props) {
                 performUniqueCheck: performUniqueCheck,
                 isUniqueValidationEnabled: isUniqueValidationEnabled,
                 key: `slug-editor-${externalReset}`,
-                id: id
+                id: id,
+                maxLength: maxLength
             });
         }));
 }

package/dist/cjs/SlugEditor.test.js

@@ -527,22 +527,31 @@ describe('SlugEditor', ()=>{
             });
         });
     });
-    it('slug suggestion is limited to 75 symbols', async ()=>{
+    it('slug suggestion is limited to size validation max', async ()=>{
         const { field, sdk } = createMocks({
             field: '',
             titleField: ''
         });
+        field.validations = [
+            {
+                unique: true
+            },
+            {
+                size: {
+                    max: 20
+                }
+            }
+        ];
         (0, _react1.render)(/*#__PURE__*/ _react.createElement(_SlugEditor.SlugEditor, {
             field: field,
             baseSdk: sdk,
             isInitiallyDisabled: false
         }));
         await (0, _react1.waitFor)(async ()=>{
-            await sdk.entry.fields['title-id'].setValue('a'.repeat(80));
+            await sdk.entry.fields['title-id'].setValue('the quick brown fox jumps over the lazy dog');
         });
         await (0, _react1.waitFor)(()=>{
-            const expectedSlug = 'a'.repeat(75);
-            expect(field.setValue).toHaveBeenLastCalledWith(expectedSlug);
+            expect(field.setValue).toHaveBeenLastCalledWith('the-quick-brown-fox');
         });
     });
     it('slug suggestion does not contain cut-off words', async ()=>{
@@ -550,6 +559,16 @@ describe('SlugEditor', ()=>{
             field: '',
             titleField: ''
         });
+        field.validations = [
+            {
+                unique: true
+            },
+            {
+                size: {
+                    max: 20
+                }
+            }
+        ];
         (0, _react1.render)(/*#__PURE__*/ _react.createElement(_SlugEditor.SlugEditor, {
             field: field,
             baseSdk: sdk,

package/dist/cjs/SlugEditorField.js

@@ -65,27 +65,19 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function useSlugUpdater(props, check) {
-    const { value, setValue, createdAt, locale, titleValue, isOptionalLocaleWithFallback } = props;
+function useSlugUpdater({ value, setValue }, check, generateSlug) {
     _react.useEffect(()=>{
         if (check === false) {
             return;
         }
-        const newSlug = (0, _makeSlug.makeSlug)(titleValue, {
-            isOptionalLocaleWithFallback,
-            locale,
-            createdAt
-        });
+        const newSlug = generateSlug();
         if (newSlug !== value) {
             setValue(newSlug);
         }
     }, [
         value,
-        titleValue,
-        isOptionalLocaleWithFallback,
+        generateSlug,
         check,
-        createdAt,
-        locale,
         setValue
     ]);
 }
@@ -157,19 +149,26 @@ function SlugEditorFieldStatic(props) {
     })));
 }
 function SlugEditorField(props) {
-    const { titleValue, isOptionalLocaleWithFallback, locale, createdAt, value } = props;
-    const areEqual = _react.useCallback(()=>{
-        const potentialSlug = (0, _makeSlug.makeSlug)(titleValue, {
+    const { titleValue, isOptionalLocaleWithFallback, locale, createdAt, value, maxLength } = props;
+    const generateSlug = _react.useCallback(()=>{
+        return (0, _makeSlug.makeSlug)(titleValue, {
             isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
             locale: locale,
-            createdAt: createdAt
+            createdAt: createdAt,
+            maxLength: maxLength
         });
-        return value === potentialSlug;
     }, [
         titleValue,
         isOptionalLocaleWithFallback,
         locale,
         createdAt,
+        maxLength
+    ]);
+    const areEqual = _react.useCallback(()=>{
+        const potentialSlug = generateSlug();
+        return value === potentialSlug;
+    }, [
+        generateSlug,
         value
     ]);
     const [check, setCheck] = _react.useState(()=>{
@@ -189,7 +188,7 @@ function SlugEditorField(props) {
         props.titleValue,
         areEqual
     ]);
-    useSlugUpdater(props, check);
+    useSlugUpdater(props, check, generateSlug);
     return /*#__PURE__*/ _react.createElement(SlugEditorFieldStatic, {
         ...props,
         onChange: ()=>{

package/dist/cjs/services/makeSlug.js

@@ -30,13 +30,13 @@ function formatUtcDate(date) {
     const seconds = formatTwoDigit(date.getUTCSeconds());
     return `${year} ${month} ${day} at ${hour} ${minutes} ${seconds}`;
 }
-function untitledSlug({ isOptionalLocaleWithFallback, createdAt }) {
+function untitledSlug({ isOptionalLocaleWithFallback, createdAt, maxLength }) {
     if (isOptionalLocaleWithFallback) {
         return '';
     }
     const createdAtFormatted = formatUtcDate(new Date(createdAt));
-    return (0, _slugify.slugify)('Untitled entry ' + createdAtFormatted, 'en-US');
+    return (0, _slugify.slugify)('Untitled entry ' + createdAtFormatted, 'en-US', maxLength);
 }
 function makeSlug(title, options) {
-    return title ? (0, _slugify.slugify)(title, options.locale) : untitledSlug(options);
+    return title ? (0, _slugify.slugify)(title, options.locale, options.maxLength) : untitledSlug(options);
 }

package/dist/cjs/services/makeSlug.test.js

@@ -11,4 +11,12 @@ describe('makeSlug', ()=>{
             createdAt: '2020-01-14T14:45:39.709Z'
         })).toBe('untitled-entry-2020-01-14-at-14-45-39');
     });
+    it('should respect maxLength when provided', ()=>{
+        expect((0, _makeSlug.makeSlug)('hello world foo bar', {
+            locale: 'en',
+            isOptionalLocaleWithFallback: false,
+            createdAt: '2020-01-14T14:45:39.709Z',
+            maxLength: 11
+        })).toBe('hello-world');
+    });
 });

package/dist/cjs/services/slugify.js

@@ -14,7 +14,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const CF_GENERATED_SLUG_MAX_LENGTH = 75;
+const MAX_FIELD_LENGTH = 256;
 const languages = [
     'ar',
     'az',
@@ -49,11 +49,11 @@ function supportedLanguage(locale) {
     const prefix = locale.slice(0, 2).toLowerCase();
     return languages[languages.indexOf(prefix)];
 }
-function slugify(text, locale = 'en') {
+function slugify(text, locale = 'en', maxLength) {
     return (0, _speakingurl.default)(text, {
         separator: '-',
         lang: supportedLanguage(locale) || 'en',
-        truncate: CF_GENERATED_SLUG_MAX_LENGTH + 1,
+        truncate: maxLength ?? MAX_FIELD_LENGTH,
         custom: {
             "'": '',
             '`': '',

package/dist/cjs/services/slugify.test.js

@@ -27,4 +27,7 @@ describe('slugify', ()=>{
             expect((0, _slugify.slugify)(input[0])).toBe(input[1]);
         });
     });
+    it('truncates to maxLength', ()=>{
+        expect((0, _slugify.slugify)('hello world', 'en', 5)).toBe('hello');
+    });
 });

package/dist/esm/SlugEditor.js

@@ -5,7 +5,7 @@ import { TrackingFieldConnector } from './TrackingFieldConnector';
 function isSupportedFieldTypes(val) {
     return val === 'Symbol';
 }
-function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id }) {
+function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id, maxLength }) {
     const safeSetValue = React.useCallback(async (...args)=>{
         try {
             await setValue(...args);
@@ -26,7 +26,8 @@ function FieldConnectorCallback({ Component, value, disabled, setValue, errors,
         isDisabled: disabled,
         titleValue: titleValue,
         setValue: safeSetValue,
-        id: id
+        id: id,
+        maxLength: maxLength
     }));
 }
 export function SlugEditor(props) {
@@ -38,6 +39,7 @@ export function SlugEditor(props) {
     const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
     const entrySys = entry.getSys();
     const isUniqueValidationEnabled = (field.validations || []).some((validation)=>'unique' in validation && validation.unique === true);
+    const maxLength = (field.validations || []).find((validation)=>'size' in validation)?.size?.max;
     const isLocaleOptional = locales.optional[field.locale];
     const localeFallbackCode = locales.fallbacks[field.locale];
     const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
@@ -88,7 +90,8 @@ export function SlugEditor(props) {
                 performUniqueCheck: performUniqueCheck,
                 isUniqueValidationEnabled: isUniqueValidationEnabled,
                 key: `slug-editor-${externalReset}`,
-                id: id
+                id: id,
+                maxLength: maxLength
             });
         }));
 }

package/dist/esm/SlugEditor.test.js

@@ -482,22 +482,31 @@ describe('SlugEditor', ()=>{
             });
         });
     });
-    it('slug suggestion is limited to 75 symbols', async ()=>{
+    it('slug suggestion is limited to size validation max', async ()=>{
         const { field, sdk } = createMocks({
             field: '',
             titleField: ''
         });
+        field.validations = [
+            {
+                unique: true
+            },
+            {
+                size: {
+                    max: 20
+                }
+            }
+        ];
         render(/*#__PURE__*/ React.createElement(SlugEditor, {
             field: field,
             baseSdk: sdk,
             isInitiallyDisabled: false
         }));
         await waitFor(async ()=>{
-            await sdk.entry.fields['title-id'].setValue('a'.repeat(80));
+            await sdk.entry.fields['title-id'].setValue('the quick brown fox jumps over the lazy dog');
         });
         await waitFor(()=>{
-            const expectedSlug = 'a'.repeat(75);
-            expect(field.setValue).toHaveBeenLastCalledWith(expectedSlug);
+            expect(field.setValue).toHaveBeenLastCalledWith('the-quick-brown-fox');
         });
     });
     it('slug suggestion does not contain cut-off words', async ()=>{
@@ -505,6 +514,16 @@ describe('SlugEditor', ()=>{
             field: '',
             titleField: ''
         });
+        field.validations = [
+            {
+                unique: true
+            },
+            {
+                size: {
+                    max: 20
+                }
+            }
+        ];
         render(/*#__PURE__*/ React.createElement(SlugEditor, {
             field: field,
             baseSdk: sdk,

package/dist/esm/SlugEditorField.js

@@ -6,27 +6,19 @@ import { i18n as $_i18n } from "@lingui/core";
 import { useDebounce } from 'use-debounce';
 import { makeSlug } from './services/makeSlug';
 import * as styles from './styles';
-function useSlugUpdater(props, check) {
-    const { value, setValue, createdAt, locale, titleValue, isOptionalLocaleWithFallback } = props;
+function useSlugUpdater({ value, setValue }, check, generateSlug) {
     React.useEffect(()=>{
         if (check === false) {
             return;
         }
-        const newSlug = makeSlug(titleValue, {
-            isOptionalLocaleWithFallback,
-            locale,
-            createdAt
-        });
+        const newSlug = generateSlug();
         if (newSlug !== value) {
             setValue(newSlug);
         }
     }, [
         value,
-        titleValue,
-        isOptionalLocaleWithFallback,
+        generateSlug,
         check,
-        createdAt,
-        locale,
         setValue
     ]);
 }
@@ -98,19 +90,26 @@ export function SlugEditorFieldStatic(props) {
     })));
 }
 export function SlugEditorField(props) {
-    const { titleValue, isOptionalLocaleWithFallback, locale, createdAt, value } = props;
-    const areEqual = React.useCallback(()=>{
-        const potentialSlug = makeSlug(titleValue, {
+    const { titleValue, isOptionalLocaleWithFallback, locale, createdAt, value, maxLength } = props;
+    const generateSlug = React.useCallback(()=>{
+        return makeSlug(titleValue, {
             isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
             locale: locale,
-            createdAt: createdAt
+            createdAt: createdAt,
+            maxLength: maxLength
         });
-        return value === potentialSlug;
     }, [
         titleValue,
         isOptionalLocaleWithFallback,
         locale,
         createdAt,
+        maxLength
+    ]);
+    const areEqual = React.useCallback(()=>{
+        const potentialSlug = generateSlug();
+        return value === potentialSlug;
+    }, [
+        generateSlug,
         value
     ]);
     const [check, setCheck] = React.useState(()=>{
@@ -130,7 +129,7 @@ export function SlugEditorField(props) {
         props.titleValue,
         areEqual
     ]);
-    useSlugUpdater(props, check);
+    useSlugUpdater(props, check, generateSlug);
     return /*#__PURE__*/ React.createElement(SlugEditorFieldStatic, {
         ...props,
         onChange: ()=>{

package/dist/esm/services/makeSlug.js

@@ -12,13 +12,13 @@ export function formatUtcDate(date) {
     const seconds = formatTwoDigit(date.getUTCSeconds());
     return `${year} ${month} ${day} at ${hour} ${minutes} ${seconds}`;
 }
-function untitledSlug({ isOptionalLocaleWithFallback, createdAt }) {
+function untitledSlug({ isOptionalLocaleWithFallback, createdAt, maxLength }) {
     if (isOptionalLocaleWithFallback) {
         return '';
     }
     const createdAtFormatted = formatUtcDate(new Date(createdAt));
-    return slugify('Untitled entry ' + createdAtFormatted, 'en-US');
+    return slugify('Untitled entry ' + createdAtFormatted, 'en-US', maxLength);
 }
 export function makeSlug(title, options) {
-    return title ? slugify(title, options.locale) : untitledSlug(options);
+    return title ? slugify(title, options.locale, options.maxLength) : untitledSlug(options);
 }

package/dist/esm/services/makeSlug.test.js

@@ -7,4 +7,12 @@ describe('makeSlug', ()=>{
             createdAt: '2020-01-14T14:45:39.709Z'
         })).toBe('untitled-entry-2020-01-14-at-14-45-39');
     });
+    it('should respect maxLength when provided', ()=>{
+        expect(makeSlug('hello world foo bar', {
+            locale: 'en',
+            isOptionalLocaleWithFallback: false,
+            createdAt: '2020-01-14T14:45:39.709Z',
+            maxLength: 11
+        })).toBe('hello-world');
+    });
 });

package/dist/esm/services/slugify.js

@@ -1,5 +1,5 @@
 import getSlug from 'speakingurl';
-const CF_GENERATED_SLUG_MAX_LENGTH = 75;
+const MAX_FIELD_LENGTH = 256;
 const languages = [
     'ar',
     'az',
@@ -34,11 +34,11 @@ function supportedLanguage(locale) {
     const prefix = locale.slice(0, 2).toLowerCase();
     return languages[languages.indexOf(prefix)];
 }
-export function slugify(text, locale = 'en') {
+export function slugify(text, locale = 'en', maxLength) {
     return getSlug(text, {
         separator: '-',
         lang: supportedLanguage(locale) || 'en',
-        truncate: CF_GENERATED_SLUG_MAX_LENGTH + 1,
+        truncate: maxLength ?? MAX_FIELD_LENGTH,
         custom: {
             "'": '',
             '`': '',

package/dist/esm/services/slugify.test.js

@@ -23,4 +23,7 @@ describe('slugify', ()=>{
             expect(slugify(input[0])).toBe(input[1]);
         });
     });
+    it('truncates to maxLength', ()=>{
+        expect(slugify('hello world', 'en', 5)).toBe('hello');
+    });
 });

package/dist/types/SlugEditorField.d.ts

@@ -11,6 +11,7 @@ interface SlugEditorFieldProps {
     setValue: (value: string | null | undefined) => void;
     performUniqueCheck: (value: string) => Promise<boolean>;
     id?: string;
+    maxLength?: number;
 }
 export declare function SlugEditorFieldStatic(props: SlugEditorFieldProps & {
     onChange?: Function;

package/dist/types/services/makeSlug.d.ts

@@ -2,6 +2,7 @@ type MakeSlugOptions = {
     locale: string;
     isOptionalLocaleWithFallback: boolean;
     createdAt: string;
+    maxLength?: number;
 };
 export declare function formatUtcDate(date: Date): string;
 export declare function makeSlug(title: string | null | undefined, options: MakeSlugOptions): string;

package/dist/types/services/slugify.d.ts

@@ -4,9 +4,5 @@
  * is used as the symbol language. Otherwise, the symbol language
  * is english.
  * Slug suggestions are limited to 75 characters.
- *
- * @param {string} text To be turned into a slug.
- * @param {string?} locale
- * @returns {string} Slug for provided text.
  */
-export declare function slugify(text: string, locale?: string): string;
+export declare function slugify(text: string, locale?: string, maxLength?: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-slug",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "e6cb0a3f4265d739980e3d6bf8a346b968d2be32"
+  "gitHead": "279a5f77320f2f38ef30ef9b701d5106232fbfa4"
 }