@contentful/field-editor-rich-text 3.12.7 → 3.14.0

package/dist/esm/plugins/EmbeddedEntityInline/index.js

@@ -1,11 +1,12 @@
 import { INLINES } from '@contentful/rich-text-types';
-import { createInlineEntryNode, getWithEmbeddedEntryInlineEvents } from '../shared/EmbeddedInlineUtil';
+import { getWithEmbeddedEntryInlineEvents } from '../shared/EmbeddedInlineUtil';
 import { LinkedEntityInline } from './LinkedEntityInline';
 export function createEmbeddedEntityInlinePlugin(sdk) {
     const htmlAttributeName = 'data-embedded-entity-inline-id';
+    const nodeType = INLINES.EMBEDDED_ENTRY;
     return {
-        key: INLINES.EMBEDDED_ENTRY,
-        type: INLINES.EMBEDDED_ENTRY,
+        key: nodeType,
+        type: nodeType,
         isElement: true,
         isInline: true,
         isVoid: true,
@@ -14,7 +15,7 @@ export function createEmbeddedEntityInlinePlugin(sdk) {
             hotkey: 'mod+shift+2'
         },
         handlers: {
-            onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
+            onKeyDown: getWithEmbeddedEntryInlineEvents(nodeType, sdk)
         },
         deserializeHtml: {
             rules: [
@@ -23,7 +24,23 @@ export function createEmbeddedEntityInlinePlugin(sdk) {
                 }
             ],
             withoutChildren: true,
-            getNode: (el)=>createInlineEntryNode(el.getAttribute(htmlAttributeName))
+            getNode: (el)=>({
+                    type: nodeType,
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ],
+                    data: {
+                        target: {
+                            sys: {
+                                id: el.getAttribute('data-entity-id'),
+                                type: 'Link',
+                                linkType: el.getAttribute('data-entity-type')
+                            }
+                        }
+                    }
+                })
         }
     };
 }

package/dist/esm/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
+import { useResource } from '@contentful/field-editor-reference';
+import { entityHelpers } from '@contentful/field-editor-shared';
+import { INLINES } from '@contentful/rich-text-types';
+const { getEntryTitle , getEntryStatus  } = entityHelpers;
+export function FetchingWrappedResourceInlineCard(props) {
+    const { link , onEntityFetchComplete  } = props;
+    const { data , status: requestStatus  } = useResource(link.linkType, link.urn);
+    React.useEffect(()=>{
+        if (requestStatus === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        requestStatus
+    ]);
+    if (requestStatus === 'error') {
+        return React.createElement(InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: INLINES.EMBEDDED_RESOURCE,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading' || data === undefined) {
+        return React.createElement(InlineEntryCard, {
+            isLoading: true
+        });
+    }
+    const { resource: entry , contentType , defaultLocaleCode , space  } = data;
+    const title = getEntryTitle({
+        entry,
+        contentType,
+        defaultLocaleCode,
+        localeCode: defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const status = getEntryStatus(entry?.sys);
+    return React.createElement(InlineEntryCard, {
+        testId: INLINES.EMBEDDED_RESOURCE,
+        isSelected: props.isSelected,
+        title: `${data.contentType.name}: ${title} (Space: ${space.name})`,
+        status: status,
+        actions: [
+            React.createElement(MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, React.createElement(Text, null, title));
+}

package/dist/esm/plugins/EmbeddedResourceInline/LinkedResourceInline.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useSelected, useReadOnly } from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { findNodePath, removeNodes } from '../../internal';
+import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
+import { LinkedInlineWrapper } from '../shared/LinkedInlineWrapper';
+import { FetchingWrappedResourceInlineCard } from './FetchingWrappedResourceInlineCard';
+export function LinkedResourceInline(props) {
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    const isSelected = useSelected();
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const isDisabled = useReadOnly();
+    const link = element.data.target.sys;
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = findNodePath(editor, element);
+        removeNodes(editor, {
+            at: pathToElement
+        });
+    }
+    return React.createElement(LinkedInlineWrapper, {
+        attributes: attributes,
+        link: element.data.target,
+        card: React.createElement(FetchingWrappedResourceInlineCard, {
+            sdk: sdk,
+            link: link,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })
+    }, children);
+}

package/dist/esm/plugins/EmbeddedResourceInline/index.js

@@ -0,0 +1,46 @@
+import { INLINES } from '@contentful/rich-text-types';
+import { getWithEmbeddedEntryInlineEvents } from '../shared/EmbeddedInlineUtil';
+import { LinkedResourceInline } from './LinkedResourceInline';
+export function createEmbeddedResourceInlinePlugin(sdk) {
+    const htmlAttributeName = 'data-embedded-resource-inline-id';
+    const nodeType = INLINES.EMBEDDED_RESOURCE;
+    return {
+        key: nodeType,
+        type: nodeType,
+        isElement: true,
+        isInline: true,
+        isVoid: true,
+        component: LinkedResourceInline,
+        options: {
+            hotkey: 'mod+shift+p'
+        },
+        handlers: {
+            onKeyDown: getWithEmbeddedEntryInlineEvents(nodeType, sdk)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validAttribute: htmlAttributeName
+                }
+            ],
+            withoutChildren: true,
+            getNode: (el)=>({
+                    type: nodeType,
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ],
+                    data: {
+                        target: {
+                            sys: {
+                                urn: el.getAttribute('data-entity-id'),
+                                linkType: el.getAttribute('data-entity-type'),
+                                type: 'ResourceLink'
+                            }
+                        }
+                    }
+                })
+        }
+    };
+}

package/dist/esm/plugins/Heading/__tests__/createHeadingPlugin.test.js

@@ -8,6 +8,8 @@ describe('normalization', ()=>{
             uri: "https://contentful.com"
         }), jsx("hlink", {
             entry: "entry-id"
+        }), jsx("hlink", {
+            resource: "resource-urn"
         }), jsx("hlink", {
             asset: "asset-id"
         }), "some text after"), jsx("hp", null, jsx("htext", null)));

package/dist/esm/plugins/Hyperlink/HyperlinkModal.js

@@ -6,6 +6,7 @@ import { ModalDialogLauncher } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
 import { css } from 'emotion';
 import { getNodeEntryFromSelection, insertLink, LINK_TYPES, focus } from '../../helpers/editor';
+import getAllowedResourcesForNodeType from '../../helpers/getAllowedResourcesForNodeType';
 import getLinkedContentTypeIdsForNodeType from '../../helpers/getLinkedContentTypeIdsForNodeType';
 import { isNodeTypeEnabled } from '../../helpers/validations';
 import { withoutNormalizing } from '../../internal';
@@ -13,18 +14,22 @@ import { getText, isEditorReadOnly } from '../../internal/queries';
 import { select } from '../../internal/transforms';
 import { FetchingWrappedAssetCard } from '../shared/FetchingWrappedAssetCard';
 import { FetchingWrappedEntryCard } from '../shared/FetchingWrappedEntryCard';
+import { FetchingWrappedResourceCard } from '../shared/FetchingWrappedResourceCard';
 const styles = {
     removeSelectionLabel: css`
     margin-left: ${tokens.spacingS};
+    margin-bottom: ${tokens.spacingXs}; // to match FormLabel margin
   `
 };
 const SYS_LINK_TYPES = {
     [INLINES.ENTRY_HYPERLINK]: 'Entry',
-    [INLINES.ASSET_HYPERLINK]: 'Asset'
+    [INLINES.ASSET_HYPERLINK]: 'Asset',
+    [INLINES.RESOURCE_HYPERLINK]: 'Contentful:Entry'
 };
 const LINK_TYPE_SELECTION_VALUES = {
     [INLINES.HYPERLINK]: 'URL',
     [INLINES.ENTRY_HYPERLINK]: 'Entry',
+    [INLINES.RESOURCE_HYPERLINK]: 'Entry (different space)',
     [INLINES.ASSET_HYPERLINK]: 'Asset'
 };
 export function HyperlinkModal(props) {
@@ -50,7 +55,16 @@ export function HyperlinkModal(props) {
         const entityLinks = Object.keys(SYS_LINK_TYPES);
         const isEntityLink = entityLinks.includes(linkType);
         if (isEntityLink) {
-            return !!(linkText && linkEntity);
+            if (linkType === INLINES.ENTRY_HYPERLINK) {
+                return !!(linkText && isEntryLink(linkEntity));
+            }
+            if (linkType === INLINES.ASSET_HYPERLINK) {
+                return !!(linkText && isAssetLink(linkEntity));
+            }
+            if (linkType === INLINES.RESOURCE_HYPERLINK) {
+                return !!(linkText && isResourceLink(linkEntity));
+            }
+            return false;
         }
         return false;
     }
@@ -73,22 +87,55 @@ export function HyperlinkModal(props) {
             }
         };
     }
+    function entityToResourceLink(entity) {
+        const { urn  } = entity.sys;
+        return {
+            sys: {
+                urn,
+                type: 'ResourceLink',
+                linkType: 'Contentful:Entry'
+            }
+        };
+    }
+    function isResourceLink(link) {
+        return !!link && !!link.sys.urn;
+    }
+    function isEntryLink(link) {
+        return !!link && link.sys.type === 'Link' && link.sys.linkType === 'Entry';
+    }
+    function isAssetLink(link) {
+        return !!link && link.sys.type === 'Link' && link.sys.linkType === 'Asset';
+    }
     async function selectEntry() {
         const options = {
             locale: props.sdk.field.locale,
             contentTypes: getLinkedContentTypeIdsForNodeType(props.sdk.field, INLINES.ENTRY_HYPERLINK)
         };
         const entry = await props.sdk.dialogs.selectSingleEntry(options);
-        setLinkTarget('');
-        setLinkEntity(entityToLink(entry));
+        if (entry) {
+            setLinkTarget('');
+            setLinkEntity(entityToLink(entry));
+        }
+    }
+    async function selectResourceEntry() {
+        const options = {
+            allowedResources: getAllowedResourcesForNodeType(props.sdk.field, INLINES.RESOURCE_HYPERLINK)
+        };
+        const entry = await props.sdk.dialogs.selectSingleResourceEntry(options);
+        if (entry) {
+            setLinkTarget('');
+            setLinkEntity(entityToResourceLink(entry));
+        }
     }
     async function selectAsset() {
         const options = {
             locale: props.sdk.field.locale
         };
         const asset = await props.sdk.dialogs.selectSingleAsset(options);
-        setLinkTarget('');
-        setLinkEntity(entityToLink(asset));
+        if (asset) {
+            setLinkTarget('');
+            setLinkEntity(entityToLink(asset));
+        }
     }
     function resetLinkEntity(event) {
         event.preventDefault();
@@ -134,13 +181,18 @@ export function HyperlinkModal(props) {
         testId: "entity-selection-link",
         onClick: resetLinkEntity,
         className: styles.removeSelectionLabel
-    }, "Remove selection"), React.createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && React.createElement(FetchingWrappedEntryCard, {
+    }, "Remove selection"), React.createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && isEntryLink(linkEntity) && React.createElement(FetchingWrappedEntryCard, {
         sdk: props.sdk,
         locale: props.sdk.field.locale,
         entryId: linkEntity.sys.id,
         isDisabled: true,
         isSelected: false
-    }), linkType === INLINES.ASSET_HYPERLINK && React.createElement(FetchingWrappedAssetCard, {
+    }), linkType === INLINES.RESOURCE_HYPERLINK && isResourceLink(linkEntity) && React.createElement(FetchingWrappedResourceCard, {
+        sdk: props.sdk,
+        link: linkEntity.sys,
+        isDisabled: true,
+        isSelected: false
+    }), linkType === INLINES.ASSET_HYPERLINK && isAssetLink(linkEntity) && React.createElement(FetchingWrappedAssetCard, {
         sdk: props.sdk,
         locale: props.sdk.field.locale,
         assetId: linkEntity.sys.id,
@@ -149,6 +201,9 @@ export function HyperlinkModal(props) {
     }))) : React.createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && React.createElement(TextLink, {
         testId: "entity-selection-link",
         onClick: selectEntry
+    }, "Select entry"), linkType === INLINES.RESOURCE_HYPERLINK && React.createElement(TextLink, {
+        testId: "entity-selection-link",
+        onClick: selectResourceEntry
     }, "Select entry"), linkType === INLINES.ASSET_HYPERLINK && React.createElement(TextLink, {
         testId: "entity-selection-link",
         onClick: selectAsset

package/dist/esm/plugins/Hyperlink/__tests__/createHyperlinkPlugin.test.js

@@ -7,12 +7,14 @@ describe('normalization', ()=>{
             asset: "asset-id"
         })), jsx("hp", null, jsx("htext", null, "entry"), jsx("hlink", {
             entry: "entry-id"
+        })), jsx("hp", null, jsx("htext", null, "resource"), jsx("hlink", {
+            resource: "resource-urn"
         })), jsx("hp", null, jsx("htext", null, "explicit empty link"), jsx("hlink", {
             uri: "https://link.com"
         }, '')), jsx("hp", null, jsx("htext", null, "link with empty space"), jsx("hlink", {
             uri: "https://link.com"
         }, " ")));
-        const expected = jsx("editor", null, jsx("hp", null, jsx("htext", null, "link")), jsx("hp", null, jsx("htext", null, "asset")), jsx("hp", null, jsx("htext", null, "entry")), jsx("hp", null, jsx("htext", null, "explicit empty link")), jsx("hp", null, jsx("htext", null, "link with empty space")));
+        const expected = jsx("editor", null, jsx("hp", null, jsx("htext", null, "link")), jsx("hp", null, jsx("htext", null, "asset")), jsx("hp", null, jsx("htext", null, "entry")), jsx("hp", null, jsx("htext", null, "resource")), jsx("hp", null, jsx("htext", null, "explicit empty link")), jsx("hp", null, jsx("htext", null, "link with empty space")));
         assertOutput({
             input,
             expected

package/dist/esm/plugins/Hyperlink/components/ResourceHyperlink.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Tooltip, TextLink } from '@contentful/f36-components';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { fromDOMPoint } from '../../../internal';
+import { useLinkTracking } from '../../../plugins/links-tracking';
+import { useSdkContext } from '../../../SdkProvider';
+import { addOrEditLink } from '../HyperlinkModal';
+import { useResourceEntityInfo } from '../useResourceEntityInfo';
+import { styles } from './styles';
+export function ResourceHyperlink(props) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const { target  } = props.element.data;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    const tooltipContent = useResourceEntityInfo({
+        target,
+        onEntityFetchComplete
+    });
+    if (!target) return null;
+    function handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!editor) return;
+        const p = fromDOMPoint(editor, [
+            event.target,
+            0
+        ]);
+        if (p) {
+            addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
+        }
+    }
+    return React.createElement(Tooltip, {
+        content: tooltipContent,
+        targetWrapperClassName: styles.hyperlinkWrapper,
+        placement: "bottom",
+        maxWidth: "auto"
+    }, React.createElement(TextLink, {
+        as: "a",
+        onClick: handleClick,
+        className: styles.hyperlink,
+        "data-resource-link-type": target.sys.linkType,
+        "data-resource-link-urn": target.sys.urn
+    }, props.children));
+}

package/dist/esm/plugins/Hyperlink/createHyperlinkPlugin.js

@@ -4,12 +4,14 @@ import isHotkey from 'is-hotkey';
 import { isLinkActive, unwrapLink } from '../../helpers/editor';
 import { transformRemove } from '../../helpers/transformers';
 import { EntityHyperlink } from './components/EntityHyperlink';
+import { ResourceHyperlink } from './components/ResourceHyperlink';
 import { UrlHyperlink } from './components/UrlHyperlink';
 import { addOrEditLink } from './HyperlinkModal';
 import { hasText } from './utils';
 const isAnchor = (element)=>element.nodeName === 'A' && !!element.getAttribute('href') && element.getAttribute('href') !== '#';
 const isEntryAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Entry';
 const isAssetAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Asset';
+const isResourceAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-resource-link-type') === 'Contentful:Entry';
 const buildHyperlinkEventHandler = (sdk)=>(editor, { options: { hotkey  }  })=>{
         return (event)=>{
             if (!editor.selection) {
@@ -31,6 +33,14 @@ const getNodeOfType = (type)=>(el, node)=>({
             children: node.children,
             data: type === INLINES.HYPERLINK ? {
                 uri: el.getAttribute('href')
+            } : type === INLINES.RESOURCE_HYPERLINK ? {
+                target: {
+                    sys: {
+                        urn: el.getAttribute('data-resource-link-urn'),
+                        linkType: el.getAttribute('data-resource-link-type'),
+                        type: 'ResourceLink'
+                    }
+                }
             } : {
                 target: {
                     sys: {
@@ -89,6 +99,23 @@ export const createHyperlinkPlugin = (sdk)=>{
                     getNode: getNodeOfType(INLINES.ENTRY_HYPERLINK)
                 }
             },
+            {
+                ...common,
+                key: INLINES.RESOURCE_HYPERLINK,
+                type: INLINES.RESOURCE_HYPERLINK,
+                component: ResourceHyperlink,
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isResourceAnchor(el),
+                    getNode: getNodeOfType(INLINES.RESOURCE_HYPERLINK)
+                }
+            },
             {
                 ...common,
                 key: INLINES.ASSET_HYPERLINK,
@@ -113,7 +140,8 @@ export const createHyperlinkPlugin = (sdk)=>{
                     type: [
                         INLINES.HYPERLINK,
                         INLINES.ASSET_HYPERLINK,
-                        INLINES.ENTRY_HYPERLINK
+                        INLINES.ENTRY_HYPERLINK,
+                        INLINES.RESOURCE_HYPERLINK
                     ]
                 },
                 validNode: hasText,

package/dist/esm/plugins/Hyperlink/useResourceEntityInfo.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useResource } from '@contentful/field-editor-reference';
+import { truncateTitle } from './utils';
+export function useResourceEntityInfo({ onEntityFetchComplete , target  }) {
+    const { data , error , status  } = useResource(target.sys.linkType, target.sys.urn);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        status,
+        onEntityFetchComplete
+    ]);
+    if (status === 'loading') {
+        return `Loading entry...`;
+    }
+    if (!data || error) {
+        return `Entry missing or inaccessible`;
+    }
+    const title = truncateTitle(data.resource.fields[data.contentType.displayField]?.[data.defaultLocaleCode], 40) || 'Untitled';
+    return `${data.contentType.name}: ${title} (Space: ${data.space.name} – Env.: ${data.resource.sys.environment.sys.id})`;
+}

package/dist/esm/plugins/Hyperlink/utils.js

@@ -5,7 +5,7 @@ export const hasText = (editor, entry)=>{
     const [node, path] = entry;
     return !isAncestorEmpty(editor, node) && getText(editor, path).trim() !== '';
 };
-function truncate(str, length) {
+export function truncateTitle(str, length) {
     if (typeof str === 'string' && str.length > length) {
         return str && str.substr(0, length + 1).replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
     }
@@ -16,7 +16,7 @@ export function getEntityInfo(data) {
         return '';
     }
     const { entityTitle , contentTypeName , entityStatus , jobs  } = data;
-    const title = truncate(entityTitle, 60) || 'Untitled';
+    const title = truncateTitle(entityTitle, 60) || 'Untitled';
     const scheduledActions = jobs.length > 0 ? getScheduleTooltipContent({
         job: jobs[0],
         jobsCount: jobs.length

package/dist/esm/plugins/Paragraph/__tests__/createParagraphPlugin.test.js

@@ -8,6 +8,8 @@ describe('normalization', ()=>{
             uri: "https://contentful.com"
         }), jsx("hlink", {
             entry: "entry-id"
+        }), jsx("hlink", {
+            resource: "resource-urn"
         }), jsx("hlink", {
             asset: "asset-id"
         }), "some text after"));

package/dist/esm/plugins/Quote/__test__/createQuotePlugin.test.js

@@ -8,6 +8,8 @@ describe('normalization', ()=>{
             uri: "https://contentful.com"
         }), jsx("hlink", {
             entry: "entry-id"
+        }), jsx("hlink", {
+            resource: "resource-urn"
         }), jsx("hlink", {
             asset: "asset-id"
         }), "some text after")));

package/dist/esm/plugins/index.js

@@ -6,6 +6,7 @@ import { createDragAndDropPlugin } from './DragAndDrop';
 import { createEmbeddedAssetBlockPlugin, createEmbeddedEntryBlockPlugin } from './EmbeddedEntityBlock';
 import { createEmbeddedEntityInlinePlugin } from './EmbeddedEntityInline';
 import { createEmbeddedResourceBlockPlugin } from './EmbeddedResourceBlock';
+import { createEmbeddedResourceInlinePlugin } from './EmbeddedResourceInline';
 import { createHeadingPlugin } from './Heading';
 import { createHrPlugin } from './Hr';
 import { createHyperlinkPlugin } from './Hyperlink';
@@ -39,6 +40,7 @@ export const getPlugins = (sdk, onAction, restrictedMarks)=>[
         createEmbeddedResourceBlockPlugin(sdk),
         createHyperlinkPlugin(sdk),
         createEmbeddedEntityInlinePlugin(sdk),
+        createEmbeddedResourceInlinePlugin(sdk),
         createMarksPlugin(),
         createTrailingParagraphPlugin(),
         createTextPlugin(restrictedMarks),

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Badge, Flex, Icon, Menu } from '@contentful/f36-components';
+import { 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';
+import { ResourceNewBadge } from './ResourceNewBadge';
 export const styles = {
     icon: css({
         marginRight: '10px'
@@ -40,10 +41,7 @@ export function EmbeddedBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
         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")))));
+    }), React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && React.createElement(ResourceNewBadge, null))));
 }
 function getEntityTypeFromNodeType(nodeType) {
     const words = nodeType.toLowerCase().split('-');

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

@@ -1,8 +1,7 @@
 import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
 import isHotkey from 'is-hotkey';
+import { newEntitySelectorConfigFromRichTextField, newResourceEntitySelectorConfigFromRichTextField } from '../../helpers/config';
 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) {

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

@@ -7,7 +7,8 @@ import { css } from 'emotion';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { moveToTheNextChar } from '../../helpers/editor';
 import { useSdkContext } from '../../SdkProvider';
-import { selectEntityAndInsert } from '../shared/EmbeddedInlineUtil';
+import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedInlineUtil';
+import { ResourceNewBadge } from './ResourceNewBadge';
 const styles = {
     icon: css({
         marginRight: '10px'
@@ -21,20 +22,24 @@ const styles = {
         }
     })
 };
-export function EmbeddedInlineToolbarIcon(props) {
+export function EmbeddedInlineToolbarIcon({ onClose , nodeType , isDisabled  }) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
     async function handleClick(event) {
         event.preventDefault();
         if (!editor) return;
-        props.onClose();
-        await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        onClose();
+        if (nodeType === INLINES.EMBEDDED_RESOURCE) {
+            await selectResourceEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        } else {
+            await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        }
         moveToTheNextChar(editor);
     }
     return React.createElement(Menu.Item, {
-        disabled: props.isDisabled,
+        disabled: isDisabled,
         className: "rich-text__entry-link-block-button",
-        testId: `toolbar-toggle-${INLINES.EMBEDDED_ENTRY}`,
+        testId: `toolbar-toggle-${nodeType}`,
         onClick: handleClick
     }, React.createElement(Flex, {
         alignItems: "center",
@@ -42,5 +47,5 @@ export function EmbeddedInlineToolbarIcon(props) {
     }, React.createElement(EmbeddedEntryInlineIcon, {
         variant: "secondary",
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`
-    }), React.createElement("span", null, "Inline entry")));
+    }), React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && React.createElement(ResourceNewBadge, null))));
 }