@contentful/field-editor-slug 1.2.0 → 1.3.0

package/dist/cjs/SlugEditorField.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SlugEditorFieldStatic: function() {
+        return SlugEditorFieldStatic;
+    },
+    SlugEditorField: function() {
+        return SlugEditorField;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _usedebounce = require("use-debounce");
+const _makeSlug = require("./services/makeSlug");
+const _styles = _interop_require_wildcard(require("./styles"));
+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];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function useSlugUpdater(props, check) {
+    const { value , setValue , createdAt , locale , titleValue , isOptionalLocaleWithFallback  } = props;
+    _react.useEffect(()=>{
+        if (check === false) {
+            return;
+        }
+        const newSlug = (0, _makeSlug.makeSlug)(titleValue, {
+            isOptionalLocaleWithFallback,
+            locale,
+            createdAt
+        });
+        if (newSlug !== value) {
+            setValue(newSlug);
+        }
+    }, [
+        value,
+        titleValue,
+        isOptionalLocaleWithFallback,
+        check,
+        createdAt,
+        locale,
+        setValue
+    ]);
+}
+function useUniqueChecker(props) {
+    const { performUniqueCheck  } = props;
+    const [status, setStatus] = _react.useState(props.value ? 'checking' : 'unique');
+    const [debouncedValue] = (0, _usedebounce.useDebounce)(props.value, 1000);
+    _react.useEffect(()=>{
+        if (!debouncedValue) {
+            setStatus('unique');
+            return;
+        }
+        setStatus('checking');
+        performUniqueCheck(debouncedValue).then((unique)=>{
+            setStatus(unique ? 'unique' : 'duplicate');
+        }).catch(()=>{
+            setStatus('checking');
+        });
+    }, [
+        debouncedValue,
+        performUniqueCheck
+    ]);
+    return status;
+}
+function SlugEditorFieldStatic(props) {
+    const { hasError , isDisabled , value , setValue , onChange , onBlur  } = props;
+    const status = useUniqueChecker(props);
+    return _react.createElement("div", {
+        className: _styles.inputContainer
+    }, _react.createElement(_f36icons.LinkIcon, {
+        className: _styles.icon
+    }), _react.createElement(_f36components.TextInput, {
+        className: _styles.input,
+        isInvalid: hasError || status === 'duplicate',
+        isDisabled: isDisabled,
+        value: value || '',
+        onChange: (e)=>{
+            setValue(e.target.value);
+            if (onChange) {
+                onChange();
+            }
+        },
+        onBlur: ()=>{
+            if (onBlur) {
+                onBlur();
+            }
+        }
+    }), status === 'checking' && _react.createElement("div", {
+        className: _styles.spinnerContainer
+    }, _react.createElement(_f36components.Spinner, {
+        testId: "slug-editor-spinner"
+    })), status === 'duplicate' && _react.createElement(_f36components.ValidationMessage, {
+        testId: "slug-editor-duplicate-error",
+        className: _styles.uniqueValidationError
+    }, "This slug has already been published in another entry"));
+}
+function SlugEditorField(props) {
+    const { titleValue , isOptionalLocaleWithFallback , locale , createdAt , value  } = props;
+    const areEqual = _react.useCallback(()=>{
+        const potentialSlug = (0, _makeSlug.makeSlug)(titleValue, {
+            isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+            locale: locale,
+            createdAt: createdAt
+        });
+        return value === potentialSlug;
+    }, [
+        titleValue,
+        isOptionalLocaleWithFallback,
+        locale,
+        createdAt,
+        value
+    ]);
+    const [check, setCheck] = _react.useState(()=>{
+        if (props.value) {
+            if (!props.titleValue) {
+                return false;
+            }
+            return areEqual();
+        }
+        return true;
+    });
+    _react.useEffect(()=>{
+        if (areEqual()) {
+            setCheck(true);
+        }
+    }, [
+        props.titleValue,
+        areEqual
+    ]);
+    useSlugUpdater(props, check);
+    return _react.createElement(SlugEditorFieldStatic, {
+        ...props,
+        onChange: ()=>{
+            setCheck(false);
+        },
+        onBlur: ()=>{
+            if (areEqual()) {
+                setCheck(true);
+            }
+        }
+    });
+}

package/dist/cjs/TrackingFieldConnector.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TrackingFieldConnector", {
+    enumerable: true,
+    get: function() {
+        return TrackingFieldConnector;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function getTitleField(sdk, trackingFieldId) {
+    const { entry , contentType  } = sdk;
+    if (trackingFieldId && entry.fields[trackingFieldId]) {
+        return entry.fields[trackingFieldId];
+    }
+    return entry.fields[contentType.displayField];
+}
+var _React_Component;
+class TrackingFieldConnector extends (_React_Component = _react.Component) {
+    componentDidMount() {
+        this.unsubscribeSysChanges = this.props.sdk.entry.onSysChanged((sys)=>{
+            this.setState({
+                isPublished: Boolean(sys.publishedVersion)
+            });
+        });
+        const titleField = getTitleField(this.props.sdk, this.props.trackingFieldId);
+        if (!titleField) {
+            return;
+        }
+        if (!this.state.isSame) {
+            this.unsubscribeLocalizedValue = titleField.onValueChanged(this.props.field.locale, (value)=>{
+                this.setState({
+                    titleValue: value
+                });
+            });
+        }
+        if (this.props.field.locale !== this.props.defaultLocale) {
+            if (!this.props.isOptionalLocaleWithFallback) {
+                this.unsubscribeValue = titleField.onValueChanged(this.props.defaultLocale, (value)=>{
+                    if (!titleField.getValue(this.props.field.locale)) {
+                        this.setState({
+                            titleValue: value
+                        });
+                    }
+                });
+            }
+        }
+    }
+    componentWillUnmount() {
+        if (typeof this.unsubscribeValue === 'function') {
+            this.unsubscribeValue();
+        }
+        if (typeof this.unsubscribeLocalizedValue === 'function') {
+            this.unsubscribeLocalizedValue();
+        }
+        if (typeof this.unsubscribeSysChanges === 'function') {
+            this.unsubscribeSysChanges();
+        }
+    }
+    render() {
+        return this.props.children({
+            ...this.state
+        });
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "unsubscribeValue", null);
+        _define_property(this, "unsubscribeLocalizedValue", null);
+        _define_property(this, "unsubscribeSysChanges", null);
+        const titleField = getTitleField(props.sdk, props.trackingFieldId);
+        const entrySys = props.sdk.entry.getSys();
+        const isSame = titleField ? props.field.id === titleField.id : false;
+        this.state = {
+            titleValue: titleField ? titleField.getValue() : '',
+            isPublished: Boolean(entrySys.publishedVersion),
+            isSame
+        };
+    }
+}
+_define_property(TrackingFieldConnector, "defaultProps", {
+    children: ()=>{
+        return null;
+    }
+});

package/dist/cjs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SlugEditor: function() {
+        return _SlugEditor.SlugEditor;
+    },
+    slugify: function() {
+        return _slugify.slugify;
+    },
+    makeSlug: function() {
+        return _makeSlug.makeSlug;
+    }
+});
+const _SlugEditor = require("./SlugEditor");
+const _slugify = require("./services/slugify");
+const _makeSlug = require("./services/makeSlug");

package/dist/cjs/services/makeSlug.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    formatUtcDate: function() {
+        return formatUtcDate;
+    },
+    makeSlug: function() {
+        return makeSlug;
+    }
+});
+const _slugify = require("./slugify");
+function formatTwoDigit(num) {
+    const asString = String(num);
+    return asString.length === 1 ? `0${asString}` : asString;
+}
+function formatUtcDate(date) {
+    const year = date.getFullYear();
+    const month = formatTwoDigit(date.getUTCMonth() + 1);
+    const day = formatTwoDigit(date.getUTCDate());
+    const hour = formatTwoDigit(date.getUTCHours());
+    const minutes = formatTwoDigit(date.getUTCMinutes());
+    const seconds = formatTwoDigit(date.getUTCSeconds());
+    return `${year} ${month} ${day} at ${hour} ${minutes} ${seconds}`;
+}
+function untitledSlug({ isOptionalLocaleWithFallback , createdAt  }) {
+    if (isOptionalLocaleWithFallback) {
+        return '';
+    }
+    const createdAtFormatted = formatUtcDate(new Date(createdAt));
+    return (0, _slugify.slugify)('Untitled entry ' + createdAtFormatted, 'en-US');
+}
+function makeSlug(title, options) {
+    return title ? (0, _slugify.slugify)(title, options.locale) : untitledSlug(options);
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _makeSlug = require("./makeSlug");
+describe('makeSlug', ()=>{
+    it('should return untitled slug if title is empty', ()=>{
+        expect((0, _makeSlug.makeSlug)('', {
+            locale: 'en',
+            isOptionalLocaleWithFallback: false,
+            createdAt: '2020-01-14T14:45:39.709Z'
+        })).toBe('untitled-entry-2020-01-14-at-14-45-39');
+    });
+});

package/dist/cjs/services/slugify.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "slugify", {
+    enumerable: true,
+    get: function() {
+        return slugify;
+    }
+});
+const _speakingurl = _interop_require_default(require("speakingurl"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CF_GENERATED_SLUG_MAX_LENGTH = 75;
+const languages = [
+    'ar',
+    'az',
+    'cs',
+    'de',
+    'dv',
+    'en',
+    'es',
+    'fa',
+    'fi',
+    'fr',
+    'ge',
+    'gr',
+    'hu',
+    'it',
+    'lt',
+    'lv',
+    'my',
+    'mk',
+    'nl',
+    'pl',
+    'pt',
+    'ro',
+    'ru',
+    'sk',
+    'sr',
+    'tr',
+    'uk',
+    'vn'
+];
+function supportedLanguage(locale) {
+    const prefix = locale.slice(0, 2).toLowerCase();
+    return languages[languages.indexOf(prefix)];
+}
+function slugify(text, locale = 'en') {
+    return (0, _speakingurl.default)(text, {
+        separator: '-',
+        lang: supportedLanguage(locale) || 'en',
+        truncate: CF_GENERATED_SLUG_MAX_LENGTH + 1,
+        custom: {
+            "'": '',
+            '`': '',
+            '’': '',
+            '‘': ''
+        }
+    });
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _slugify = require("./slugify");
+describe('slugify', ()=>{
+    const cases = [
+        [
+            'We ♥ $ & €',
+            'we-love-usd-and-eur'
+        ],
+        [
+            'it`s a Slug',
+            'its-a-slug'
+        ],
+        [
+            'it’S a slug',
+            'its-a-slug'
+        ],
+        [
+            "it's a SLUG",
+            'its-a-slug'
+        ]
+    ];
+    cases.forEach((input)=>{
+        it(`converts "${input[0]}" to "${input[1]}"`, ()=>{
+            expect((0, _slugify.slugify)(input[0])).toBe(input[1]);
+        });
+    });
+});

package/dist/cjs/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    validationRow: function() {
+        return validationRow;
+    },
+    inputContainer: function() {
+        return inputContainer;
+    },
+    input: function() {
+        return input;
+    },
+    icon: function() {
+        return icon;
+    },
+    spinnerContainer: function() {
+        return spinnerContainer;
+    },
+    uniqueValidationError: function() {
+        return uniqueValidationError;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const validationRow = (0, _emotion.css)({
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    fontSize: _f36tokens.default.fontSizeM,
+    marginTop: _f36tokens.default.spacingXs,
+    color: _f36tokens.default.gray700
+});
+const inputContainer = (0, _emotion.css)({
+    position: 'relative'
+});
+const input = (0, _emotion.css)({
+    paddingLeft: '40px'
+});
+const icon = (0, _emotion.css)({
+    position: 'absolute',
+    left: '10px',
+    top: '8px',
+    zIndex: 2,
+    width: '25px',
+    height: '25px',
+    fill: _f36tokens.default.gray500
+});
+const spinnerContainer = (0, _emotion.css)({
+    position: 'absolute',
+    zIndex: 2,
+    right: '8px',
+    top: '8px'
+});
+const uniqueValidationError = (0, _emotion.css)({
+    marginTop: _f36tokens.default.spacingS
+});

package/dist/esm/SlugEditor.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import { SlugEditorField, SlugEditorFieldStatic } from './SlugEditorField';
+import { TrackingFieldConnector } from './TrackingFieldConnector';
+function isSupportedFieldTypes(val) {
+    return val === 'Symbol';
+}
+function FieldConnectorCallback({ Component , value , disabled , setValue , errors , titleValue , isOptionalLocaleWithFallback , locale , createdAt , performUniqueCheck  }) {
+    const safeSetValue = React.useCallback(async (...args)=>{
+        try {
+            await setValue(...args);
+        } catch (e) {}
+    }, [
+        setValue
+    ]);
+    return React.createElement("div", {
+        "data-test-id": "slug-editor"
+    }, React.createElement(Component, {
+        locale: locale,
+        createdAt: createdAt,
+        performUniqueCheck: performUniqueCheck,
+        hasError: errors.length > 0,
+        value: value,
+        isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+        isDisabled: disabled,
+        titleValue: titleValue,
+        setValue: safeSetValue
+    }));
+}
+export function SlugEditor(props) {
+    const { field , parameters  } = props;
+    const { locales , entry , space  } = props.baseSdk;
+    if (!isSupportedFieldTypes(field.type)) {
+        throw new Error(`"${field.type}" field type is not supported by SlugEditor`);
+    }
+    const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
+    const entrySys = entry.getSys();
+    const isLocaleOptional = locales.optional[field.locale];
+    const localeFallbackCode = locales.fallbacks[field.locale];
+    const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
+    const isOptionalLocaleWithFallback = Boolean(isOptionalFieldLocale && localeFallbackCode && locales.available.includes(localeFallbackCode));
+    const performUniqueCheck = React.useCallback((value)=>{
+        const searchQuery = {
+            content_type: entrySys?.contentType?.sys?.id,
+            [`fields.${field.id}.${field.locale}`]: value,
+            'sys.id[ne]': entrySys.id,
+            'sys.publishedAt[exists]': true,
+            limit: 0
+        };
+        return space.getEntries(searchQuery).then((res)=>{
+            return res.total === 0;
+        });
+    }, [
+        entrySys?.contentType?.sys?.id,
+        field.id,
+        field.locale,
+        entrySys.id,
+        space
+    ]);
+    return React.createElement(TrackingFieldConnector, {
+        sdk: props.baseSdk,
+        field: field,
+        defaultLocale: locales.default,
+        isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+        trackingFieldId: trackingFieldId
+    }, ({ titleValue , isPublished , isSame  })=>React.createElement(FieldConnector, {
+            field: field,
+            isInitiallyDisabled: props.isInitiallyDisabled,
+            throttle: 0
+        }, ({ value , errors , disabled , setValue , externalReset  })=>{
+            const shouldTrackTitle = isPublished === false && isSame === false;
+            const Component = shouldTrackTitle ? SlugEditorField : SlugEditorFieldStatic;
+            return React.createElement(FieldConnectorCallback, {
+                Component: Component,
+                titleValue: titleValue,
+                value: value,
+                errors: errors,
+                disabled: disabled,
+                setValue: setValue,
+                isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+                createdAt: entrySys.createdAt,
+                locale: field.locale,
+                performUniqueCheck: performUniqueCheck,
+                key: `slug-editor-${externalReset}`
+            });
+        }));
+}
+SlugEditor.defaultProps = {
+    isInitiallyDisabled: true
+};