@contentful/field-editor-rich-text 3.4.22 → 3.6.0

package/dist/esm/plugins/index.js

@@ -0,0 +1,60 @@
+import { createDeserializeAstPlugin, createDeserializeHtmlPlugin } from '@udecode/plate-core';
+import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
+import { createSoftBreakPlugin, createExitBreakPlugin, createResetNodePlugin } from './Break';
+import { createCommandPalettePlugin } from './CommandPalette';
+import { isCommandPromptPluginEnabled } from './CommandPalette/useCommands';
+import { createDragAndDropPlugin } from './DragAndDrop';
+import { createEmbeddedAssetBlockPlugin, createEmbeddedEntryBlockPlugin } from './EmbeddedEntityBlock';
+import { createEmbeddedEntityInlinePlugin } from './EmbeddedEntityInline';
+import { createEmbeddedResourceBlockPlugin } from './EmbeddedResourceBlock';
+import { createHeadingPlugin } from './Heading';
+import { createHrPlugin } from './Hr';
+import { createHyperlinkPlugin } from './Hyperlink';
+import { createListPlugin } from './List';
+import { createMarksPlugin } from './Marks';
+import { createNormalizerPlugin } from './Normalizer';
+import { createParagraphPlugin } from './Paragraph';
+import { createPasteHTMLPlugin } from './PasteHTML';
+import { createQuotePlugin } from './Quote';
+import { createSelectOnBackspacePlugin } from './SelectOnBackspace';
+import { createTablePlugin } from './Table';
+import { createTextPlugin } from './Text';
+import { createTrackingPlugin } from './Tracking';
+import { createTrailingParagraphPlugin } from './TrailingParagraph';
+import { createVoidsPlugin } from './Voids';
+export const getPlugins = (sdk, onAction, restrictedMarks)=>[
+        createDeserializeHtmlPlugin(),
+        createDeserializeAstPlugin(),
+        createDeserializeDocxPlugin(),
+        createTrackingPlugin(onAction),
+        createDragAndDropPlugin(),
+        ...Object.values(isCommandPromptPluginEnabled(sdk)).some(Boolean) ? [
+            createCommandPalettePlugin()
+        ] : [],
+        createParagraphPlugin(),
+        createListPlugin(),
+        createHrPlugin(),
+        createHeadingPlugin(),
+        createQuotePlugin(),
+        createTablePlugin(),
+        createEmbeddedEntryBlockPlugin(sdk),
+        createEmbeddedAssetBlockPlugin(sdk),
+        createEmbeddedResourceBlockPlugin(sdk),
+        createHyperlinkPlugin(sdk),
+        createEmbeddedEntityInlinePlugin(sdk),
+        createMarksPlugin(),
+        createTrailingParagraphPlugin(),
+        createTextPlugin(restrictedMarks),
+        createVoidsPlugin(),
+        createSelectOnBackspacePlugin(),
+        createPasteHTMLPlugin(),
+        createSoftBreakPlugin(),
+        createExitBreakPlugin(),
+        createResetNodePlugin(),
+        createNormalizerPlugin()
+    ];
+export const disableCorePlugins = {
+    deserializeAst: true,
+    deserializeHtml: true,
+    eventEditor: true
+};

package/dist/esm/plugins/links-tracking.js

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { useContentfulEditorRef } from '../ContentfulEditorProvider';
+export function useLinkTracking() {
+    const editor = useContentfulEditorRef();
+    return {
+        onEntityFetchComplete: useCallback(()=>editor?.tracking.onViewportAction('linkRendered'), [
+            editor
+        ])
+    };
+}

package/dist/esm/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Badge, Flex, Icon, Menu } from '@contentful/f36-components';
+import { AssetIcon, EmbeddedEntryBlockIcon } from '@contentful/f36-icons';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { useSdkContext } from '../../SdkProvider';
+import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedBlockUtil';
+export const styles = {
+    icon: css({
+        marginRight: '10px'
+    })
+};
+export function EmbeddedBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const handleClick = async (event)=>{
+        event.preventDefault();
+        if (!editor) {
+            return;
+        }
+        onClose();
+        if (nodeType == BLOCKS.EMBEDDED_RESOURCE) {
+            await selectResourceEntityAndInsert(sdk, editor, editor.tracking.onToolbarAction);
+        } else {
+            await selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onToolbarAction);
+        }
+    };
+    const type = getEntityTypeFromNodeType(nodeType);
+    const baseClass = `rich-text__${nodeType}`;
+    return React.createElement(Menu.Item, {
+        disabled: isDisabled,
+        className: `${baseClass}-list-item`,
+        onClick: handleClick,
+        testId: `toolbar-toggle-${nodeType}`
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, React.createElement(Icon, {
+        as: type === 'Asset' ? AssetIcon : EmbeddedEntryBlockIcon,
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
+        variant: "secondary"
+    }), React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && React.createElement(React.Fragment, null, ' ', "(different space)", ' ', React.createElement(Badge, {
+        variant: "primary-filled",
+        size: "small"
+    }, "new")))));
+}
+function getEntityTypeFromNodeType(nodeType) {
+    const words = nodeType.toLowerCase().split('-');
+    if (words.includes('entry') || words.includes('resource')) {
+        return 'Entry';
+    }
+    if (words.includes('asset')) {
+        return 'Asset';
+    }
+    throw new Error(`Node type \`${nodeType}\` has no associated \`entityType\``);
+}

package/dist/esm/plugins/shared/EmbeddedBlockUtil.js

@@ -0,0 +1,144 @@
+import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { focus, getNodeEntryFromSelection, insertEmptyParagraph, moveToTheNextChar } from '../../helpers/editor';
+import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
+import newResourceEntitySelectorConfigFromRichTextField from '../../helpers/newResourceEntitySelectorConfigFromRichTextField';
+import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
+import { getText, getAboveNode, getLastNodeByLevel, insertNodes, setNodes, select, removeNodes } from '../../internal';
+export function getWithEmbeddedBlockEvents(nodeType, sdk) {
+    return (editor, { options: { hotkey  }  })=>(event)=>{
+            const [, pathToSelectedElement] = getNodeEntryFromSelection(editor, nodeType);
+            if (pathToSelectedElement) {
+                const isDelete = event.key === 'Delete';
+                const isBackspace = event.key === 'Backspace';
+                if (isDelete || isBackspace) {
+                    event.preventDefault();
+                    removeNodes(editor, {
+                        at: pathToSelectedElement
+                    });
+                }
+                return;
+            }
+            if (hotkey && isHotkey(hotkey, event)) {
+                if (nodeType === BLOCKS.EMBEDDED_RESOURCE) {
+                    selectResourceEntityAndInsert(sdk, editor, editor.tracking.onShortcutAction);
+                } else {
+                    selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onShortcutAction);
+                }
+            }
+        };
+}
+export async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType
+    });
+    const { field , dialogs  } = sdk;
+    const baseConfig = newEntitySelectorConfigFromRichTextField(field, nodeType);
+    const selectEntity = baseConfig.entityType === 'Asset' ? dialogs.selectSingleAsset : dialogs.selectSingleEntry;
+    const config = {
+        ...baseConfig,
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = watchCurrentSlide(sdk.navigator);
+    const entity = await selectEntity(config);
+    if (!entity) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType
+        });
+    } else {
+        select(editor, selection);
+        insertBlock(editor, nodeType, entity);
+        ensureFollowingParagraph(editor, [
+            BLOCKS.EMBEDDED_ASSET,
+            BLOCKS.EMBEDDED_ENTRY
+        ]);
+        logAction('insert', {
+            nodeType
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        focus(editor);
+    });
+}
+export async function selectResourceEntityAndInsert(sdk, editor, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType: BLOCKS.EMBEDDED_RESOURCE
+    });
+    const { field , dialogs  } = sdk;
+    const config = newResourceEntitySelectorConfigFromRichTextField(field, BLOCKS.EMBEDDED_RESOURCE);
+    const { selection  } = editor;
+    const entity = await dialogs.selectSingleResourceEntry(config);
+    if (!entity) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType: BLOCKS.EMBEDDED_RESOURCE
+        });
+    } else {
+        select(editor, selection);
+        insertBlock(editor, BLOCKS.EMBEDDED_RESOURCE, entity);
+        ensureFollowingParagraph(editor, [
+            BLOCKS.EMBEDDED_RESOURCE
+        ]);
+        logAction('insert', {
+            nodeType: BLOCKS.EMBEDDED_RESOURCE
+        });
+    }
+}
+function ensureFollowingParagraph(editor, nodeTypes) {
+    const entityBlock = getAboveNode(editor, {
+        match: {
+            type: nodeTypes
+        }
+    });
+    if (!entityBlock) {
+        return;
+    }
+    const level = entityBlock[1].length - 1;
+    const lastNode = getLastNodeByLevel(editor, level);
+    const isTextContainer = TEXT_CONTAINERS.includes(lastNode?.[0].type ?? '');
+    if (level !== 0 && !isTextContainer) {
+        insertEmptyParagraph(editor);
+    }
+    moveToTheNextChar(editor);
+}
+const getLink = (nodeType, entity)=>{
+    if (nodeType === BLOCKS.EMBEDDED_RESOURCE) {
+        return {
+            urn: entity.sys.urn,
+            type: 'ResourceLink',
+            linkType: 'Contentful:Entry'
+        };
+    }
+    return {
+        id: entity.sys.id,
+        type: 'Link',
+        linkType: entity.sys.type
+    };
+};
+const createNode = (nodeType, entity)=>{
+    return {
+        type: nodeType,
+        data: {
+            target: {
+                sys: getLink(nodeType, entity)
+            }
+        },
+        children: [
+            {
+                text: ''
+            }
+        ],
+        isVoid: true
+    };
+};
+function insertBlock(editor, nodeType, entity) {
+    if (!editor?.selection) return;
+    const linkedEntityBlock = createNode(nodeType, entity);
+    const hasText = editor.selection && !!getText(editor, editor.selection.focus.path);
+    if (hasText) {
+        insertNodes(editor, linkedEntityBlock);
+    } else {
+        setNodes(editor, linkedEntityBlock);
+    }
+}

package/dist/esm/plugins/shared/FetchingWrappedAssetCard.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { AssetCard } from '@contentful/f36-components';
+import { useEntity, useEntityLoader, MissingEntityCard, WrappedAssetCard } from '@contentful/field-editor-reference';
+import areEqual from 'fast-deep-equal';
+const InternalAssetCard = React.memo((props)=>{
+    if (props.asset === undefined) {
+        return React.createElement(AssetCard, {
+            size: "default",
+            isLoading: true
+        });
+    }
+    if (props.asset === 'failed') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Asset",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    return React.createElement(WrappedAssetCard, {
+        getEntityScheduledActions: props.loadEntityScheduledActions,
+        size: "small",
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.locale,
+        defaultLocaleCode: props.sdk.locales.default,
+        asset: props.asset,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false
+    });
+}, areEqual);
+InternalAssetCard.displayName = 'InternalAssetCard';
+export function FetchingWrappedAssetCard(props) {
+    const { onEntityFetchComplete  } = props;
+    const { data: asset , status  } = useEntity('Asset', props.assetId);
+    const { getEntityScheduledActions  } = useEntityLoader();
+    const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Asset', props.assetId), [
+        getEntityScheduledActions,
+        props.assetId
+    ]);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return React.createElement(InternalAssetCard, {
+        asset: asset,
+        sdk: props.sdk,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        loadEntityScheduledActions: loadEntityScheduledActions,
+        locale: props.locale,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove
+    });
+}

package/dist/esm/plugins/shared/FetchingWrappedEntryCard.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+import { useEntity, MissingEntityCard, WrappedEntryCard, useEntityLoader } from '@contentful/field-editor-reference';
+import areEqual from 'fast-deep-equal';
+const InternalEntryCard = React.memo((props)=>{
+    const { entry , sdk , loadEntityScheduledActions  } = props;
+    if (entry === undefined) {
+        return React.createElement(EntryCard, {
+            isLoading: true
+        });
+    }
+    if (entry === 'failed') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Entry",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const contentType = sdk.space.getCachedContentTypes().find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
+    return React.createElement(WrappedEntryCard, {
+        size: "default",
+        getAsset: props.sdk.space.getAsset,
+        getEntityScheduledActions: loadEntityScheduledActions,
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.locale,
+        defaultLocaleCode: props.sdk.locales.default,
+        contentType: contentType,
+        entry: entry,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false
+    });
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+export const FetchingWrappedEntryCard = (props)=>{
+    const { entryId , onEntityFetchComplete  } = props;
+    const { data: entry , status  } = useEntity('Entry', entryId);
+    const { getEntityScheduledActions  } = useEntityLoader();
+    const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Entry', entryId), [
+        getEntityScheduledActions,
+        entryId
+    ]);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return React.createElement(InternalEntryCard, {
+        entry: entry,
+        sdk: props.sdk,
+        locale: props.locale,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove,
+        loadEntityScheduledActions: loadEntityScheduledActions
+    });
+};

package/dist/esm/plugins/shared/FetchingWrappedResourceCard.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+import { MissingEntityCard, WrappedEntryCard, useResource } from '@contentful/field-editor-reference';
+import areEqual from 'fast-deep-equal';
+const InternalEntryCard = React.memo((props)=>{
+    if (props.status === 'loading') {
+        return React.createElement(EntryCard, {
+            isLoading: true
+        });
+    }
+    if (!props.data || props.status === 'error') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Entry",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const { contentType , resource: entry , space  } = props.data;
+    return React.createElement(WrappedEntryCard, {
+        size: "default",
+        getAsset: ()=>Promise.resolve(),
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.data.defaultLocaleCode,
+        defaultLocaleCode: props.data.defaultLocaleCode,
+        contentType: contentType,
+        spaceName: space?.name,
+        entry: entry,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false,
+        getEntityScheduledActions: ()=>Promise.resolve([])
+    });
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+export const FetchingWrappedResourceCard = (props)=>{
+    const { link , onEntityFetchComplete  } = props;
+    const { data , status  } = useResource(link.linkType, link.urn);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return React.createElement(InternalEntryCard, {
+        data: data,
+        status: status,
+        sdk: props.sdk,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove
+    });
+};

package/dist/esm/plugins/shared/LinkedBlockWrapper.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from 'emotion';
+import { IS_CHROME } from '../../helpers/environment';
+const styles = {
+    root: css({
+        marginBottom: '1.25rem !important',
+        display: 'block'
+    }),
+    container: css({
+        display: 'inline-block',
+        verticalAlign: 'text-top',
+        width: '100%'
+    })
+};
+const isResourceLink = (link)=>!!link.urn;
+export function LinkedBlockWrapper({ attributes , card , children , element  }) {
+    const link = element.data.target.sys;
+    return React.createElement("div", {
+        ...attributes,
+        className: styles.root,
+        "data-entity-type": link.linkType,
+        "data-entity-id": isResourceLink(link) ? link.urn : link.id,
+        contentEditable: IS_CHROME ? undefined : false,
+        draggable: IS_CHROME ? true : undefined
+    }, React.createElement("div", {
+        contentEditable: IS_CHROME ? false : undefined,
+        draggable: IS_CHROME ? true : undefined,
+        className: styles.container
+    }, card), children);
+}

package/dist/esm/plugins/shared/ToolbarButton.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button, Tooltip } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+const styles = {
+    button: css({
+        height: '30px',
+        width: '30px',
+        marginLeft: tokens.spacing2Xs,
+        marginRight: tokens.spacing2Xs
+    }),
+    tooltip: css({
+        zIndex: Number(tokens.zIndexTooltip)
+    })
+};
+export function ToolbarButton(props) {
+    const { title , testId , isActive , children , className , isDisabled =false  } = props;
+    const handleClick = (event)=>{
+        event.preventDefault();
+        props.onClick();
+    };
+    const button = React.createElement(Button, {
+        className: cx(styles.button, className),
+        isDisabled: isDisabled,
+        startIcon: children,
+        onClick: handleClick,
+        testId: testId,
+        variant: isActive ? 'secondary' : 'transparent',
+        size: "small"
+    });
+    if (title) {
+        return React.createElement(Tooltip, {
+            className: styles.tooltip,
+            placement: "bottom",
+            content: title
+        }, button);
+    }
+    return button;
+}

package/dist/esm/plugins/shared/__tests__/FetchingWrappedAssetCard.test.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { createFakeCMAAdapter } from '@contentful/field-editor-test-utils';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, fireEvent, render, waitFor } from '@testing-library/react';
+import publishedAsset from '../__fixtures__/published_asset.json';
+import { FetchingWrappedAssetCard } from '../FetchingWrappedAssetCard';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+let sdk;
+beforeEach(()=>{
+    sdk = {
+        locales: {
+            default: 'en-US'
+        },
+        cmaAdapter: createFakeCMAAdapter({
+            Asset: {
+                get: jest.fn().mockResolvedValue(publishedAsset)
+            },
+            ScheduledAction: {
+                getMany: jest.fn().mockResolvedValue({
+                    items: [],
+                    total: 0
+                })
+            }
+        }),
+        space: {
+            getEntityScheduledActions: jest.fn().mockResolvedValue([])
+        },
+        navigator: {
+            onSlideInNavigation: jest.fn()
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+});
+test('some dropdown actions should be disabled', async ()=>{
+    const { getByTestId , queryByTestId  } = render(React.createElement(EntityProvider, {
+        sdk: sdk
+    }, React.createElement(FetchingWrappedAssetCard, {
+        sdk: sdk,
+        assetId: "asset-id",
+        locale: "en-US",
+        onEdit: ()=>{},
+        onRemove: ()=>{},
+        isDisabled: true,
+        isSelected: true
+    })));
+    await waitFor(()=>expect(getByTestId('cf-ui-asset').textContent).toBe('asset title'));
+    fireEvent.click(getByTestId('cf-ui-card-actions'));
+    await waitFor(()=>{
+        expect(getByTestId('card-action-edit')).not.toBeDisabled();
+        expect(queryByTestId('card-action-remove')).toBeNull();
+        expect(getByTestId('card-action-download')).not.toBeDisabled();
+    });
+});

package/dist/esm/plugins/shared/__tests__/FetchingWrappedEntryCard.test.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { createFakeCMAAdapter } from '@contentful/field-editor-test-utils';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, fireEvent, render, waitFor } from '@testing-library/react';
+import publishedCT from '../__fixtures__/published_content_type.json';
+import publishedEntry from '../__fixtures__/published_entry.json';
+import { FetchingWrappedEntryCard } from '../FetchingWrappedEntryCard';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+let sdk;
+beforeEach(()=>{
+    sdk = {
+        locales: {
+            default: 'en-US'
+        },
+        cmaAdapter: createFakeCMAAdapter({
+            Entry: {
+                get: jest.fn().mockResolvedValue(publishedEntry)
+            },
+            ScheduledAction: {
+                getMany: jest.fn().mockResolvedValue({
+                    items: [],
+                    total: 0
+                })
+            }
+        }),
+        space: {
+            getEntityScheduledActions: jest.fn().mockResolvedValue([]),
+            getCachedContentTypes: jest.fn().mockReturnValue([
+                publishedCT
+            ])
+        },
+        navigator: {
+            onSlideInNavigation: jest.fn()
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+});
+test('some dropdown actions should be disabled/removed', async ()=>{
+    const { getByTestId , queryByTestId  } = render(React.createElement(EntityProvider, {
+        sdk: sdk
+    }, React.createElement(FetchingWrappedEntryCard, {
+        sdk: sdk,
+        entryId: "entry-id",
+        locale: "en-US",
+        onEdit: ()=>{},
+        onRemove: ()=>{},
+        isDisabled: true,
+        isSelected: true
+    })));
+    await waitFor(()=>expect(getByTestId('title').textContent).toBe('The best article ever'));
+    fireEvent.click(getByTestId('cf-ui-card-actions'));
+    await waitFor(()=>{
+        expect(getByTestId('edit')).not.toBeDisabled();
+        expect(queryByTestId('delete')).toBeNull();
+    });
+});