@contentful/field-editor-rich-text 3.12.6 → 3.13.0

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useReadOnly, useSelected } from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { focus } from '../../helpers/editor';
+import { findNodePath } from '../../internal/queries';
+import { removeNodes } from '../../internal/transforms';
+import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
+import { LinkedInlineWrapper } from '../shared/LinkedInlineWrapper';
+import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
+export function LinkedEntityInline(props) {
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    const isSelected = useSelected();
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const isDisabled = useReadOnly();
+    const { id: entryId  } = element.data.target.sys;
+    function handleEditClick() {
+        return sdk.navigator.openEntry(entryId, {
+            slideIn: {
+                waitForClose: true
+            }
+        }).then(()=>{
+            editor && focus(editor);
+        });
+    }
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = findNodePath(editor, element);
+        removeNodes(editor, {
+            at: pathToElement
+        });
+    }
+    return React.createElement(LinkedInlineWrapper, {
+        attributes: attributes,
+        card: React.createElement(FetchingWrappedInlineEntryCard, {
+            sdk: sdk,
+            entryId: entryId,
+            isSelected: isSelected,
+            isDisabled: isDisabled,
+            onRemove: handleRemoveClick,
+            onEdit: handleEditClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        }),
+        link: element.data.target
+    }, children);
+}

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

@@ -1,141 +1,21 @@
-import * as React from 'react';
-import { Menu, Flex } from '@contentful/f36-components';
-import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
-import tokens from '@contentful/f36-tokens';
 import { INLINES } from '@contentful/rich-text-types';
-import { css } from 'emotion';
-import isHotkey from 'is-hotkey';
-import { useSelected, useReadOnly } from 'slate-react';
-import { useContentfulEditor } from '../../ContentfulEditorProvider';
-import { focus, moveToTheNextChar } from '../../helpers/editor';
-import { IS_CHROME } from '../../helpers/environment';
-import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
-import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
-import { findNodePath } from '../../internal/queries';
-import { insertNodes, removeNodes, select } from '../../internal/transforms';
-import { useSdkContext } from '../../SdkProvider';
-import { useLinkTracking } from '../links-tracking';
-import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
-import { createInlineEntryNode } from './Util';
-const styles = {
-    icon: css({
-        marginRight: '10px'
-    }),
-    root: css({
-        display: 'inline-block',
-        margin: `0 ${tokens.spacing2Xs}`,
-        fontSize: 'inherit',
-        span: {
-            userSelect: 'none'
-        }
-    })
-};
-function EmbeddedEntityInline(props) {
-    const editor = useContentfulEditor();
-    const sdk = useSdkContext();
-    const isSelected = useSelected();
-    const { id: entryId  } = props.element.data.target.sys;
-    const isDisabled = useReadOnly();
-    const { onEntityFetchComplete  } = useLinkTracking();
-    function handleEditClick() {
-        return sdk.navigator.openEntry(entryId, {
-            slideIn: {
-                waitForClose: true
-            }
-        }).then(()=>{
-            editor && focus(editor);
-        });
-    }
-    function handleRemoveClick() {
-        if (!editor) return;
-        const pathToElement = findNodePath(editor, props.element);
-        removeNodes(editor, {
-            at: pathToElement
-        });
-    }
-    return React.createElement("span", {
-        ...props.attributes,
-        className: styles.root,
-        "data-embedded-entity-inline-id": entryId,
-        contentEditable: IS_CHROME ? undefined : false,
-        draggable: IS_CHROME ? true : undefined
-    }, React.createElement("span", {
-        contentEditable: IS_CHROME ? false : undefined,
-        draggable: IS_CHROME ? true : undefined
-    }, React.createElement(FetchingWrappedInlineEntryCard, {
-        sdk: sdk,
-        entryId: entryId,
-        isSelected: isSelected,
-        isDisabled: isDisabled,
-        onRemove: handleRemoveClick,
-        onEdit: handleEditClick,
-        onEntityFetchComplete: onEntityFetchComplete
-    })), props.children);
-}
-async function selectEntityAndInsert(editor, sdk, logAction) {
-    logAction('openCreateEmbedDialog', {
-        nodeType: INLINES.EMBEDDED_ENTRY
-    });
-    const config = {
-        ...newEntitySelectorConfigFromRichTextField(sdk.field, INLINES.EMBEDDED_ENTRY),
-        withCreate: true
-    };
-    const { selection  } = editor;
-    const rteSlide = watchCurrentSlide(sdk.navigator);
-    const entry = await sdk.dialogs.selectSingleEntry(config);
-    if (!entry) {
-        logAction('cancelCreateEmbedDialog', {
-            nodeType: INLINES.EMBEDDED_ENTRY
-        });
-    } else {
-        select(editor, selection);
-        insertNodes(editor, createInlineEntryNode(entry.sys.id));
-        logAction('insert', {
-            nodeType: INLINES.EMBEDDED_ENTRY
-        });
-    }
-    rteSlide.onActive(()=>{
-        rteSlide.unwatch();
-        focus(editor);
-    });
-}
-export function ToolbarEmbeddedEntityInlineButton(props) {
-    const editor = useContentfulEditor();
-    const sdk = useSdkContext();
-    async function handleClick(event) {
-        event.preventDefault();
-        if (!editor) return;
-        props.onClose();
-        await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
-        moveToTheNextChar(editor);
-    }
-    return React.createElement(Menu.Item, {
-        disabled: props.isDisabled,
-        className: "rich-text__entry-link-block-button",
-        testId: `toolbar-toggle-${INLINES.EMBEDDED_ENTRY}`,
-        onClick: handleClick
-    }, React.createElement(Flex, {
-        alignItems: "center",
-        flexDirection: "row"
-    }, React.createElement(EmbeddedEntryInlineIcon, {
-        variant: "secondary",
-        className: `rich-text__embedded-entry-list-icon ${styles.icon}`
-    }), React.createElement("span", null, "Inline entry")));
-}
+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,
-        component: EmbeddedEntityInline,
+        component: LinkedEntityInline,
         options: {
             hotkey: 'mod+shift+2'
         },
         handlers: {
-            onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
+            onKeyDown: getWithEmbeddedEntryInlineEvents(nodeType, sdk)
         },
         deserializeHtml: {
             rules: [
@@ -144,17 +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')
+                            }
+                        }
+                    }
+                })
         }
     };
 }
-function getWithEmbeddedEntryInlineEvents(sdk) {
-    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
-        return function handleEvent(event) {
-            if (!editor) return;
-            if (hotkey && isHotkey(hotkey, event)) {
-                selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
-            }
-        };
-    };
-}

package/dist/esm/plugins/{shared/FetchingWrappedResourceCard.js → EmbeddedResourceBlock/FetchingWrappedResourceBlockCard.js}

@@ -26,7 +26,7 @@ const InternalEntryCard = React.memo((props)=>{
     });
 }, areEqual);
 InternalEntryCard.displayName = 'ReferenceCard';
-export const FetchingWrappedResourceCard = (props)=>{
+export const FetchingWrappedResourceBlockCard = (props)=>{
     const { link , onEntityFetchComplete  } = props;
     const { data , status , error  } = useResource(link.linkType, link.urn);
     React.useEffect(()=>{

package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js

@@ -4,8 +4,8 @@ import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { findNodePath, removeNodes } from '../../internal';
 import { useSdkContext } from '../../SdkProvider';
 import { useLinkTracking } from '../links-tracking';
-import { FetchingWrappedResourceCard } from '../shared/FetchingWrappedResourceCard';
 import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
+import { FetchingWrappedResourceBlockCard } from './FetchingWrappedResourceBlockCard';
 export function LinkedResourceBlock(props) {
     const { attributes , children , element  } = props;
     const { onEntityFetchComplete  } = useLinkTracking();
@@ -26,8 +26,8 @@ export function LinkedResourceBlock(props) {
     ]);
     return React.createElement(LinkedBlockWrapper, {
         attributes: attributes,
-        element: element,
-        card: React.createElement(FetchingWrappedResourceCard, {
+        link: element.data.target,
+        card: React.createElement(FetchingWrappedResourceBlockCard, {
             sdk: sdk,
             link: link,
             isDisabled: isDisabled,

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/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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Menu, Flex } from '@contentful/f36-components';
+import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { INLINES } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { moveToTheNextChar } from '../../helpers/editor';
+import { useSdkContext } from '../../SdkProvider';
+import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedInlineUtil';
+import { ResourceNewBadge } from './ResourceNewBadge';
+const styles = {
+    icon: css({
+        marginRight: '10px'
+    }),
+    root: css({
+        display: 'inline-block',
+        margin: `0 ${tokens.spacing2Xs}`,
+        fontSize: 'inherit',
+        span: {
+            userSelect: 'none'
+        }
+    })
+};
+export function EmbeddedInlineToolbarIcon({ onClose , nodeType , isDisabled  }) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    async function handleClick(event) {
+        event.preventDefault();
+        if (!editor) return;
+        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: isDisabled,
+        className: "rich-text__entry-link-block-button",
+        testId: `toolbar-toggle-${nodeType}`,
+        onClick: handleClick
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, React.createElement(EmbeddedEntryInlineIcon, {
+        variant: "secondary",
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`
+    }), React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && React.createElement(ResourceNewBadge, null))));
+}

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

@@ -0,0 +1,101 @@
+import { INLINES } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { newEntitySelectorConfigFromRichTextField, newResourceEntitySelectorConfigFromRichTextField } from '../../helpers/config';
+import { focus } from '../../helpers/editor';
+import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
+import { insertNodes, select } from '../../internal/transforms';
+export function getWithEmbeddedEntryInlineEvents(nodeType, sdk) {
+    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
+        return function handleEvent(event) {
+            if (!editor) return;
+            if (hotkey && isHotkey(hotkey, event)) {
+                if (nodeType === INLINES.EMBEDDED_RESOURCE) {
+                    selectResourceEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
+                } else {
+                    selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
+                }
+            }
+        };
+    };
+}
+const getLink = (nodeType, entity)=>{
+    if (nodeType === INLINES.EMBEDDED_RESOURCE) {
+        return {
+            urn: entity.sys.urn,
+            type: 'ResourceLink',
+            linkType: 'Contentful:Entry'
+        };
+    }
+    return {
+        id: entity.sys.id,
+        type: 'Link',
+        linkType: entity.sys.type
+    };
+};
+const createInlineEntryNode = (nodeType, entity)=>{
+    return {
+        type: nodeType,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: getLink(nodeType, entity)
+            }
+        }
+    };
+};
+export async function selectEntityAndInsert(editor, sdk, logAction) {
+    const nodeType = INLINES.EMBEDDED_ENTRY;
+    logAction('openCreateEmbedDialog', {
+        nodeType
+    });
+    const config = {
+        ...newEntitySelectorConfigFromRichTextField(sdk.field, nodeType),
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = watchCurrentSlide(sdk.navigator);
+    const entry = await sdk.dialogs.selectSingleEntry(config);
+    if (!entry) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType
+        });
+    } else {
+        select(editor, selection);
+        insertNodes(editor, createInlineEntryNode(nodeType, entry));
+        logAction('insert', {
+            nodeType
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        focus(editor);
+    });
+}
+export async function selectResourceEntityAndInsert(editor, sdk, logAction) {
+    const nodeType = INLINES.EMBEDDED_RESOURCE;
+    logAction('openCreateEmbedDialog', {
+        nodeType
+    });
+    const { dialogs , field  } = sdk;
+    const config = {
+        ...newResourceEntitySelectorConfigFromRichTextField(field, nodeType),
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const entry = await dialogs.selectSingleResourceEntry(config);
+    if (!entry) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType
+        });
+    } else {
+        select(editor, selection);
+        insertNodes(editor, createInlineEntryNode(nodeType, entry));
+        logAction('insert', {
+            nodeType
+        });
+    }
+}

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

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

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { IS_CHROME } from '../../helpers/environment';
+import { getLinkEntityId } from './utils';
+const styles = {
+    icon: css({
+        marginRight: '10px'
+    }),
+    root: css({
+        display: 'inline-block',
+        margin: `0 ${tokens.spacing2Xs}`,
+        fontSize: 'inherit',
+        span: {
+            userSelect: 'none'
+        }
+    })
+};
+export function LinkedInlineWrapper({ attributes , card , children , link  }) {
+    return React.createElement("span", {
+        ...attributes,
+        className: styles.root,
+        "data-entity-type": link.sys.linkType,
+        "data-entity-id": getLinkEntityId(link),
+        contentEditable: IS_CHROME ? undefined : false,
+        draggable: IS_CHROME ? true : undefined
+    }, React.createElement("span", {
+        contentEditable: IS_CHROME ? false : undefined,
+        draggable: IS_CHROME ? true : undefined
+    }, card), children);
+}