@contentful/field-editor-reference 5.8.6 → 5.10.0

package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { AssetCard } from '@contentful/f36-components';
+import { ClockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { entityHelpers } from '@contentful/field-editor-shared';
+import mimetype from '@contentful/mimetype';
+import { css } from 'emotion';
+import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
+import { renderActions, renderAssetInfo } from './AssetCardActions';
+const groupToIconMap = {
+    image: 'image',
+    video: 'video',
+    audio: 'audio',
+    richtext: 'richtext',
+    presentation: 'presentation',
+    spreadsheet: 'spreadsheet',
+    pdfdocument: 'pdf',
+    archive: 'archive',
+    plaintext: 'plaintext',
+    code: 'code',
+    markup: 'markup'
+};
+const styles = {
+    scheduleIcon: css({
+        marginRight: tokens.spacing2Xs
+    })
+};
+const defaultProps = {
+    isClickable: true
+};
+function getFileType(file) {
+    if (!file) {
+        return 'archive';
+    }
+    const groupName = mimetype.getGroupLabel({
+        type: file.contentType,
+        fallbackFileName: file.fileName
+    });
+    return groupToIconMap[groupName] || 'archive';
+}
+export const WrappedAssetCard = (props)=>{
+    const { className , onEdit , getAssetUrl , onRemove , size , isDisabled , isSelected , isClickable  } = props;
+    const status = entityHelpers.getEntryStatus(props.asset.sys);
+    if (status === 'deleted') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Asset",
+            asSquare: true,
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const entityTitle = entityHelpers.getAssetTitle({
+        asset: props.asset,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
+    const href = getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined;
+    return React.createElement(AssetCard, {
+        as: href ? 'a' : 'article',
+        type: getFileType(entityFile),
+        title: entityTitle,
+        className: className,
+        isSelected: isSelected,
+        href: href,
+        status: status,
+        icon: React.createElement(ScheduledIconWithTooltip, {
+            getEntityScheduledActions: props.getEntityScheduledActions,
+            entityType: "Asset",
+            entityId: props.asset.sys.id
+        }, React.createElement(ClockIcon, {
+            className: styles.scheduleIcon,
+            size: "small",
+            variant: "muted",
+            testId: "schedule-icon"
+        })),
+        src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
+        onClick: isClickable ? (e)=>{
+            e.preventDefault();
+            onEdit && onEdit();
+        } : undefined,
+        onKeyDown: isClickable ? (e)=>{
+            if (e.key === 'Enter' && onEdit) {
+                e.preventDefault();
+                onEdit();
+            }
+        } : undefined,
+        dragHandleRender: props.renderDragHandle,
+        withDragHandle: !!props.renderDragHandle,
+        actions: [
+            ...renderActions({
+                entityFile,
+                isDisabled: isDisabled,
+                onEdit,
+                onRemove
+            }),
+            ...entityFile ? renderAssetInfo({
+                entityFile
+            }) : []
+        ].filter((item)=>item),
+        size: size
+    });
+};
+WrappedAssetCard.defaultProps = defaultProps;

package/dist/esm/assets/WrappedAssetCard/WrappedAssetLink.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+import { ClockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
+import { AssetThumbnail, MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
+import { renderActions, renderAssetInfo } from './AssetCardActions';
+const styles = {
+    scheduleIcon: css({
+        marginRight: tokens.spacing2Xs
+    })
+};
+export const WrappedAssetLink = (props)=>{
+    const { className , href , onEdit , onRemove , isDisabled  } = props;
+    const status = entityHelpers.getEntryStatus(props.asset.sys);
+    if (status === 'deleted') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Asset",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const entityTitle = entityHelpers.getAssetTitle({
+        asset: props.asset,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
+    return React.createElement(EntryCard, {
+        as: href ? 'a' : 'article',
+        contentType: "Asset",
+        title: entityTitle,
+        className: className,
+        href: href,
+        size: "small",
+        status: status,
+        thumbnailElement: entityFile && isValidImage(entityFile) ? React.createElement(AssetThumbnail, {
+            file: entityFile
+        }) : undefined,
+        icon: React.createElement(ScheduledIconWithTooltip, {
+            getEntityScheduledActions: props.getEntityScheduledActions,
+            entityType: "Asset",
+            entityId: props.asset.sys.id
+        }, React.createElement(ClockIcon, {
+            className: styles.scheduleIcon,
+            size: "small",
+            variant: "muted",
+            testId: "schedule-icon"
+        })),
+        onClick: (e)=>{
+            e.preventDefault();
+            onEdit();
+        },
+        onKeyDown: (e)=>{
+            if (e.key === 'Enter' && onEdit) {
+                e.preventDefault();
+                onEdit();
+            }
+        },
+        dragHandleRender: props.renderDragHandle,
+        withDragHandle: !!props.renderDragHandle,
+        actions: [
+            renderActions({
+                entityFile,
+                isDisabled: isDisabled,
+                onEdit,
+                onRemove
+            }),
+            entityFile ? renderAssetInfo({
+                entityFile
+            }) : null
+        ].filter((item)=>item)
+    });
+};

package/dist/esm/assets/index.js

@@ -0,0 +1,3 @@
+export { SingleMediaEditor } from './SingleMediaEditor';
+export { MultipleMediaEditor } from './MultipleMediaEditor';
+export { WrappedAssetCard } from './WrappedAssetCard/WrappedAssetCard';

package/dist/esm/common/EntityStore.js

@@ -0,0 +1,347 @@
+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;
+}
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { QueryCache, QueryClient, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
+import constate from 'constate';
+import { createClient } from 'contentful-management';
+import PQueue from 'p-queue';
+const globalQueue = new PQueue({
+    concurrency: 50
+});
+export class UnsupportedError extends Error {
+    constructor(message){
+        super(message);
+        _define_property(this, "isUnsupportedError", void 0);
+        this.isUnsupportedError = true;
+    }
+}
+export 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] = constate(function useInitServices(props) {
+    const currentSpaceId = props.sdk.ids.space;
+    const currentEnvironmentId = props.sdk.ids.environmentAlias ?? props.sdk.ids.environment;
+    const environmentIds = useMemo(()=>[
+            props.sdk.ids.environmentAlias,
+            props.sdk.ids.environment
+        ], [
+        props.sdk.ids.environmentAlias,
+        props.sdk.ids.environment
+    ]);
+    const queryClient = useQueryClient();
+    const queryCache = queryClient.getQueryCache();
+    const entityChangeUnsubscribers = useRef({});
+    const cmaClient = useMemo(()=>createClient({
+            apiAdapter: props.sdk.cmaAdapter
+        }, {
+            type: 'plain'
+        }), [
+        props.sdk.cmaAdapter
+    ]);
+    const queryQueue = useMemo(()=>{
+        if (props.queryConcurrency) {
+            return new PQueue({
+                concurrency: props.queryConcurrency
+            });
+        }
+        return globalQueue;
+    }, [
+        props.queryConcurrency
+    ]);
+    const fetch = 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 = 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 = 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 = 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 = 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;
+    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
+    }));
+export 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  } = useQuery(queryKey, ()=>getEntity(entityType, entityId, options), {
+        enabled: options?.enabled
+    });
+    return {
+        status,
+        data
+    };
+}
+export function useResource(resourceType, urn, options) {
+    const queryKey = [
+        'Resource',
+        resourceType,
+        urn
+    ];
+    const { getResource  } = useEntityLoader();
+    const { status , data , error  } = useQuery(queryKey, ()=>getResource(resourceType, urn, options), {
+        enabled: options?.enabled
+    });
+    return {
+        status,
+        data,
+        error
+    };
+}
+function EntityProvider({ children , ...props }) {
+    const reactQueryClient = useMemo(()=>{
+        const queryCache = new QueryCache();
+        const queryClient = new QueryClient({
+            queryCache,
+            defaultOptions: {
+                queries: {
+                    useErrorBoundary: false,
+                    refetchOnWindowFocus: false,
+                    refetchOnReconnect: true,
+                    refetchOnMount: false,
+                    staleTime: Infinity,
+                    retry: false
+                }
+            }
+        });
+        return queryClient;
+    }, []);
+    return React.createElement(QueryClientProvider, {
+        client: reactQueryClient
+    }, React.createElement(InternalServiceProvider, props, children));
+}
+export { EntityProvider, useEntityLoader };

package/dist/esm/common/MultipleReferenceEditor.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import arrayMove from 'array-move';
+import { LinkEntityActions } from '../components';
+import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
+import { ReferenceEditor } from './ReferenceEditor';
+import { useEditorPermissions } from './useEditorPermissions';
+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 = useEditorPermissions(props);
+    const items = React.useMemo(()=>{
+        return (props.items || []).map((link)=>link || nullableValue);
+    }, [
+        props.items
+    ]);
+    const onSortStart = useCallback((_, event)=>{
+        if (event instanceof MouseEvent) {
+            document.body.classList.add('grabbing');
+        }
+        event.preventDefault();
+    }, []);
+    const onSortEnd = useCallback(({ oldIndex , newIndex  })=>{
+        props.onSortingEnd && props.onSortingEnd({
+            oldIndex,
+            newIndex
+        });
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        setValue(newItems);
+        setIndexToUpdate && setIndexToUpdate(undefined);
+        document.body.classList.remove('grabbing');
+    }, [
+        items,
+        props,
+        setIndexToUpdate,
+        setValue
+    ]);
+    const onMove = useCallback((oldIndex, newIndex)=>{
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        setValue(newItems);
+    }, [
+        items,
+        setValue
+    ]);
+    const onCreate = useCallback((id, index)=>onLinkOrCreate(setValue, entityType, items, [
+            id
+        ], index), [
+        setValue,
+        items,
+        entityType
+    ]);
+    const onLink = useCallback((ids, index)=>onLinkOrCreate(setValue, entityType, items, ids, index), [
+        setValue,
+        items,
+        entityType
+    ]);
+    const linkActionsProps = useLinkActionsProps({
+        ...props,
+        canLinkMultiple: true,
+        editorPermissions,
+        onCreate,
+        onLink,
+        itemsLength: items.length
+    });
+    const customCardRenderer = 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(LinkEntityActions, {
+        renderCustomActions: props.renderCustomActions,
+        ...linkActionsProps
+    }));
+}
+export function MultipleReferenceEditor(props) {
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return React.createElement(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/esm/common/ReferenceEditor.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import deepEqual from 'deep-equal';
+import { EntityProvider } from './EntityStore';
+export function ReferenceEditor(props) {
+    return React.createElement(EntityProvider, {
+        sdk: props.sdk
+    }, React.createElement(FieldConnector, {
+        throttle: 0,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: (value1, value2)=>{
+            return deepEqual(value1, value2);
+        }
+    }, props.children));
+}
+ReferenceEditor.defaultProps = {
+    isInitiallyDisabled: true,
+    hasCardEditActions: true
+};