@contentful/field-editor-reference 5.9.0 → 5.11.0

package/dist/cjs/common/EntityStore.js

@@ -0,0 +1,420 @@
+"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, {
+    UnsupportedError: function() {
+        return UnsupportedError;
+    },
+    isUnsupportedError: function() {
+        return isUnsupportedError;
+    },
+    useEntity: function() {
+        return useEntity;
+    },
+    useResource: function() {
+        return useResource;
+    },
+    EntityProvider: function() {
+        return EntityProvider;
+    },
+    useEntityLoader: function() {
+        return useEntityLoader;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _reactquery = require("@tanstack/react-query");
+const _constate = _interop_require_default(require("constate"));
+const _contentfulmanagement = require("contentful-management");
+const _pqueue = _interop_require_default(require("p-queue"));
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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;
+}
+const globalQueue = new _pqueue.default({
+    concurrency: 50
+});
+class UnsupportedError extends Error {
+    constructor(message){
+        super(message);
+        _define_property(this, "isUnsupportedError", void 0);
+        this.isUnsupportedError = true;
+    }
+}
+function isUnsupportedError(value) {
+    return typeof value === 'object' && value?.isUnsupportedError === true;
+}
+const isEntityQueryKey = (queryKey)=>{
+    return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
+};
+async function fetchContentfulEntry(params) {
+    const { urn , fetch , options  } = params;
+    const resourceId = urn.split(':', 6)[5];
+    const [, spaceId, , entryId] = resourceId.split('/');
+    const environmentId = 'master';
+    const [space, entry] = await Promise.all([
+        fetch([
+            'space',
+            spaceId
+        ], ({ cmaClient  })=>cmaClient.space.get({
+                spaceId
+            }), options),
+        fetch([
+            'entry',
+            spaceId,
+            environmentId,
+            entryId
+        ], ({ cmaClient  })=>cmaClient.entry.get({
+                spaceId,
+                environmentId,
+                entryId
+            }), options)
+    ]);
+    const contentTypeId = entry.sys.contentType.sys.id;
+    const [contentType, defaultLocaleCode] = await Promise.all([
+        fetch([
+            'contentType',
+            spaceId,
+            environmentId,
+            contentTypeId
+        ], ({ cmaClient  })=>cmaClient.contentType.get({
+                contentTypeId,
+                spaceId,
+                environmentId
+            }), options),
+        fetch([
+            'defaultLocale',
+            spaceId,
+            environmentId
+        ], async ({ cmaClient  })=>{
+            const locales = await cmaClient.locale.getMany({
+                spaceId,
+                environmentId,
+                query: {
+                    limit: 100
+                }
+            });
+            const defaultLocaleCode = locales.items.find((locale)=>locale.default)?.code;
+            return defaultLocaleCode;
+        }, options)
+    ]);
+    return {
+        defaultLocaleCode,
+        resource: entry,
+        space: space,
+        contentType: contentType
+    };
+}
+const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = (0, _constate.default)(function useInitServices(props) {
+    const currentSpaceId = props.sdk.ids.space;
+    const currentEnvironmentId = props.sdk.ids.environmentAlias ?? props.sdk.ids.environment;
+    const environmentIds = (0, _react.useMemo)(()=>[
+            props.sdk.ids.environmentAlias,
+            props.sdk.ids.environment
+        ], [
+        props.sdk.ids.environmentAlias,
+        props.sdk.ids.environment
+    ]);
+    const queryClient = (0, _reactquery.useQueryClient)();
+    const queryCache = queryClient.getQueryCache();
+    const entityChangeUnsubscribers = (0, _react.useRef)({});
+    const cmaClient = (0, _react.useMemo)(()=>(0, _contentfulmanagement.createClient)({
+            apiAdapter: props.sdk.cmaAdapter
+        }, {
+            type: 'plain'
+        }), [
+        props.sdk.cmaAdapter
+    ]);
+    const queryQueue = (0, _react.useMemo)(()=>{
+        if (props.queryConcurrency) {
+            return new _pqueue.default({
+                concurrency: props.queryConcurrency
+            });
+        }
+        return globalQueue;
+    }, [
+        props.queryConcurrency
+    ]);
+    const fetch = (0, _react.useCallback)(function fetch(queryKey, fn, options = {}) {
+        const { priority , ...queryOptions } = options;
+        return queryClient.fetchQuery(queryKey, ()=>queryQueue.add(()=>fn({
+                    cmaClient
+                }), {
+                priority
+            }), queryOptions);
+    }, [
+        queryClient,
+        queryQueue,
+        cmaClient
+    ]);
+    const getEntity = (0, _react.useCallback)(function getEntity(entityType, entityId, options) {
+        const spaceId = options?.spaceId ?? currentSpaceId;
+        const environmentId = options?.environmentId ?? currentEnvironmentId;
+        const queryKey = [
+            entityType,
+            entityId,
+            spaceId,
+            environmentId
+        ];
+        return fetch(queryKey, ({ cmaClient  })=>{
+            if (entityType === 'Entry') {
+                return cmaClient.entry.get({
+                    entryId: entityId,
+                    spaceId,
+                    environmentId
+                });
+            }
+            if (entityType === 'Asset') {
+                return cmaClient.asset.get({
+                    assetId: entityId,
+                    spaceId,
+                    environmentId
+                });
+            }
+            throw new UnsupportedError('Unsupported entity type');
+        }, options);
+    }, [
+        fetch,
+        currentSpaceId,
+        currentEnvironmentId
+    ]);
+    const getEntityScheduledActions = (0, _react.useCallback)(function getEntityScheduledActions(entityType, entityId, options) {
+        const fixedEntityCacheId = 'scheduledActionEntityId';
+        const maxScheduledActions = 500;
+        const spaceId = options?.spaceId ?? currentSpaceId;
+        const environmentId = options?.environmentId ?? currentEnvironmentId;
+        const queryKey = [
+            'scheduled-actions',
+            entityType,
+            fixedEntityCacheId,
+            spaceId,
+            environmentId
+        ];
+        return fetch(queryKey, async ({ cmaClient  })=>{
+            const response = await cmaClient.scheduledActions.getMany({
+                spaceId,
+                query: {
+                    'environment.sys.id': environmentId,
+                    'sys.status[in]': 'scheduled',
+                    order: 'scheduledFor.datetime',
+                    limit: maxScheduledActions
+                }
+            });
+            return response.items;
+        }, options).then((items)=>items.filter((action)=>action.entity.sys.id === entityId));
+    }, [
+        fetch,
+        currentSpaceId,
+        currentEnvironmentId
+    ]);
+    const getResource = (0, _react.useCallback)(function getResource(resourceType, urn, options) {
+        const queryKey = [
+            'Resource',
+            resourceType,
+            urn
+        ];
+        return fetch(queryKey, ()=>{
+            if (resourceType === 'Contentful:Entry') {
+                return fetchContentfulEntry({
+                    fetch,
+                    urn,
+                    options
+                });
+            }
+            throw new UnsupportedError('Unsupported resource type');
+        }, options);
+    }, [
+        fetch
+    ]);
+    const isSameSpaceEntityQueryKey = (0, _react.useCallback)((queryKey)=>{
+        const isEntityKey = isEntityQueryKey(queryKey);
+        const isSameSpaceEntityKey = isEntityKey && queryKey[2] === currentSpaceId && environmentIds.includes(queryKey[3]);
+        return isSameSpaceEntityKey;
+    }, [
+        currentSpaceId,
+        environmentIds
+    ]);
+    const onEntityChanged = props.sdk.space.onEntityChanged;
+    const onSlideInNavigation = props.sdk.navigator.onSlideInNavigation;
+    (0, _react.useEffect)(()=>{
+        function findSameSpaceQueries() {
+            return queryCache.findAll({
+                type: 'active',
+                predicate: (query)=>isSameSpaceEntityQueryKey(query.queryKey)
+            });
+        }
+        if (typeof onEntityChanged !== 'function') {
+            return onSlideInNavigation(({ oldSlideLevel , newSlideLevel  })=>{
+                if (oldSlideLevel > newSlideLevel) {
+                    findSameSpaceQueries().forEach((query)=>{
+                        void queryClient.invalidateQueries(query.queryKey);
+                    });
+                }
+            });
+        }
+        const subscribeQuery = ({ queryKey , queryHash  })=>{
+            const [entityType, entityId] = queryKey;
+            entityChangeUnsubscribers.current[queryHash] = onEntityChanged(entityType, entityId, (data)=>{
+                queryClient.setQueryData(queryKey, data);
+            });
+        };
+        findSameSpaceQueries().forEach(subscribeQuery);
+        const unsubscribe = queryCache.subscribe((event)=>{
+            if (!event) {
+                return;
+            }
+            const { type , query  } = event;
+            const { queryKey , queryHash  } = query;
+            if (!isSameSpaceEntityQueryKey(queryKey)) {
+                return;
+            }
+            if (type === 'added') {
+                subscribeQuery(query);
+            }
+            if (type === 'removed') {
+                entityChangeUnsubscribers.current[queryHash]?.();
+            }
+        });
+        return ()=>{
+            unsubscribe();
+            Object.values(entityChangeUnsubscribers.current).forEach((off)=>off());
+            entityChangeUnsubscribers.current = {};
+        };
+    }, [
+        onEntityChanged,
+        queryCache,
+        isSameSpaceEntityQueryKey,
+        queryClient,
+        getEntity,
+        onSlideInNavigation
+    ]);
+    return {
+        ids: props.sdk.ids,
+        cmaClient,
+        fetch,
+        getResource,
+        getEntity,
+        getEntityScheduledActions
+    };
+}, ({ fetch  })=>fetch, ({ getResource , getEntity , getEntityScheduledActions  })=>({
+        getResource,
+        getEntity,
+        getEntityScheduledActions
+    }), ({ ids  })=>({
+        environment: ids.environmentAlias ?? ids.environment,
+        space: ids.space
+    }));
+function useEntity(entityType, entityId, options) {
+    const { space , environment  } = useCurrentIds();
+    const { getEntity  } = useEntityLoader();
+    const queryKey = [
+        entityType,
+        entityId,
+        options?.spaceId ?? space,
+        options?.environmentId ?? environment
+    ];
+    const { status , data  } = (0, _reactquery.useQuery)(queryKey, ()=>getEntity(entityType, entityId, options), {
+        enabled: options?.enabled
+    });
+    return {
+        status,
+        data
+    };
+}
+function useResource(resourceType, urn, options) {
+    const queryKey = [
+        'Resource',
+        resourceType,
+        urn
+    ];
+    const { getResource  } = useEntityLoader();
+    const { status , data , error  } = (0, _reactquery.useQuery)(queryKey, ()=>getResource(resourceType, urn, options), {
+        enabled: options?.enabled
+    });
+    return {
+        status,
+        data,
+        error
+    };
+}
+function EntityProvider({ children , ...props }) {
+    const reactQueryClient = (0, _react.useMemo)(()=>{
+        const queryCache = new _reactquery.QueryCache();
+        const queryClient = new _reactquery.QueryClient({
+            queryCache,
+            defaultOptions: {
+                queries: {
+                    useErrorBoundary: false,
+                    refetchOnWindowFocus: false,
+                    refetchOnReconnect: true,
+                    refetchOnMount: false,
+                    staleTime: Infinity,
+                    retry: false
+                }
+            }
+        });
+        return queryClient;
+    }, []);
+    return _react.default.createElement(_reactquery.QueryClientProvider, {
+        client: reactQueryClient
+    }, _react.default.createElement(InternalServiceProvider, props, children));
+}

package/dist/cjs/common/MultipleReferenceEditor.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MultipleReferenceEditor", {
+    enumerable: true,
+    get: function() {
+        return MultipleReferenceEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _arraymove = _interop_require_default(require("array-move"));
+const _components = require("../components");
+const _LinkEntityActions = require("../components/LinkActions/LinkEntityActions");
+const _ReferenceEditor = require("./ReferenceEditor");
+const _useEditorPermissions = require("./useEditorPermissions");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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 onLinkOrCreate(setValue, entityType, items, ids, index = items.length) {
+    const links = ids.map((id)=>({
+            sys: {
+                type: 'Link',
+                linkType: entityType,
+                id
+            }
+        }));
+    const newItems = Array.from(items);
+    newItems.splice(index, 0, ...links);
+    setValue(newItems);
+}
+const emptyArray = [];
+const nullableValue = {
+    sys: {
+        id: 'null-value'
+    }
+};
+function Editor(props) {
+    const { setValue , entityType , setIndexToUpdate  } = props;
+    const editorPermissions = (0, _useEditorPermissions.useEditorPermissions)(props);
+    const items = _react.useMemo(()=>{
+        return (props.items || []).map((link)=>link || nullableValue);
+    }, [
+        props.items
+    ]);
+    const onSortStart = (0, _react.useCallback)((_, event)=>{
+        if (event instanceof MouseEvent) {
+            document.body.classList.add('grabbing');
+        }
+        event.preventDefault();
+    }, []);
+    const onSortEnd = (0, _react.useCallback)(({ oldIndex , newIndex  })=>{
+        props.onSortingEnd && props.onSortingEnd({
+            oldIndex,
+            newIndex
+        });
+        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        setValue(newItems);
+        setIndexToUpdate && setIndexToUpdate(undefined);
+        document.body.classList.remove('grabbing');
+    }, [
+        items,
+        props,
+        setIndexToUpdate,
+        setValue
+    ]);
+    const onMove = (0, _react.useCallback)((oldIndex, newIndex)=>{
+        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        setValue(newItems);
+    }, [
+        items,
+        setValue
+    ]);
+    const onCreate = (0, _react.useCallback)((id, index)=>onLinkOrCreate(setValue, entityType, items, [
+            id
+        ], index), [
+        setValue,
+        items,
+        entityType
+    ]);
+    const onLink = (0, _react.useCallback)((ids, index)=>onLinkOrCreate(setValue, entityType, items, ids, index), [
+        setValue,
+        items,
+        entityType
+    ]);
+    const linkActionsProps = (0, _LinkEntityActions.useLinkActionsProps)({
+        ...props,
+        canLinkMultiple: true,
+        editorPermissions,
+        onCreate,
+        onLink,
+        itemsLength: items.length
+    });
+    const customCardRenderer = (0, _react.useCallback)((cardProps, _, renderDefaultCard)=>props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false, [
+        linkActionsProps
+    ]);
+    return _react.createElement(_react.Fragment, null, props.children({
+        ...props,
+        onSortStart: onSortStart,
+        onSortEnd: onSortEnd,
+        onMove,
+        renderCustomCard: props.renderCustomCard && customCardRenderer
+    }), _react.createElement(_components.LinkEntityActions, {
+        renderCustomActions: props.renderCustomActions,
+        ...linkActionsProps
+    }));
+}
+function MultipleReferenceEditor(props) {
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return _react.createElement(_ReferenceEditor.ReferenceEditor, props, ({ value , disabled , setValue , externalReset  })=>{
+        return _react.createElement(Editor, {
+            ...props,
+            items: value || emptyArray,
+            isDisabled: disabled,
+            setValue: setValue,
+            key: `${externalReset}-list`,
+            allContentTypes: allContentTypes
+        });
+    });
+}
+MultipleReferenceEditor.defaultProps = {
+    hasCardEditActions: true
+};

package/dist/cjs/common/ReferenceEditor.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReferenceEditor", {
+    enumerable: true,
+    get: function() {
+        return ReferenceEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _deepequal = _interop_require_default(require("deep-equal"));
+const _EntityStore = require("./EntityStore");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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 ReferenceEditor(props) {
+    return _react.createElement(_EntityStore.EntityProvider, {
+        sdk: props.sdk
+    }, _react.createElement(_fieldeditorshared.FieldConnector, {
+        throttle: 0,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: (value1, value2)=>{
+            return (0, _deepequal.default)(value1, value2);
+        }
+    }, props.children));
+}
+ReferenceEditor.defaultProps = {
+    isInitiallyDisabled: true,
+    hasCardEditActions: true
+};