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

package/dist/cjs/Toolbar/components/EmbedEntityWidget.js

@@ -63,6 +63,7 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
     const onCloseEntityDropdown = ()=>setEmbedDropdownOpen(false);
     const onToggleEntityDropdown = ()=>setEmbedDropdownOpen(!isEmbedDropdownOpen);
     const inlineEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY);
+    const inlineResourceEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_RESOURCE);
     const blockEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
     const blockResourceEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_RESOURCE) && canInsertBlocks;
     const blockAssetEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
@@ -75,6 +76,11 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
         nodeType: _richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
         onClose: onCloseEntityDropdown
     }), inlineEntryEmbedEnabled && _react.default.createElement(_EmbeddedInlineToolbarIcon.EmbeddedInlineToolbarIcon, {
+        nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
+        onClose: onCloseEntityDropdown
+    }), inlineResourceEmbedEnabled && _react.default.createElement(_EmbeddedInlineToolbarIcon.EmbeddedInlineToolbarIcon, {
+        nodeType: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
         isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
         onClose: onCloseEntityDropdown
     }), blockAssetEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {

package/dist/cjs/Toolbar/index.js

@@ -205,7 +205,8 @@ function getValidationInfo(field) {
     const isAnyHyperlinkEnabled = someWithValidation([
         _richtexttypes.INLINES.HYPERLINK,
         _richtexttypes.INLINES.ASSET_HYPERLINK,
-        _richtexttypes.INLINES.ENTRY_HYPERLINK
+        _richtexttypes.INLINES.ENTRY_HYPERLINK,
+        _richtexttypes.INLINES.RESOURCE_HYPERLINK
     ], _validations.isNodeTypeEnabled);
     const isAnyBlockFormattingEnabled = someWithValidation([
         _richtexttypes.BLOCKS.UL_LIST,

package/dist/cjs/constants/Schema.js

@@ -154,6 +154,17 @@ const _default = {
                 }
             ]
         },
+        [_richtexttypes.INLINES.RESOURCE_HYPERLINK]: {
+            nodes: [
+                {
+                    match: [
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
         [_richtexttypes.INLINES.ASSET_HYPERLINK]: {
             nodes: [
                 {
@@ -167,6 +178,9 @@ const _default = {
         },
         [_richtexttypes.INLINES.EMBEDDED_ENTRY]: {
             isVoid: true
+        },
+        [_richtexttypes.INLINES.EMBEDDED_RESOURCE]: {
+            isVoid: true
         }
     }
 };

package/dist/cjs/helpers/{newEntitySelectorConfigFromRichTextField.js → config.js}

@@ -2,25 +2,34 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    newEntitySelectorConfigFromRichTextField: function() {
         return newEntitySelectorConfigFromRichTextField;
+    },
+    newResourceEntitySelectorConfigFromRichTextField: function() {
+        return newResourceEntitySelectorConfigFromRichTextField;
     }
 });
+const _getAllowedResourcesForNodeType = _interop_require_default(require("./getAllowedResourcesForNodeType"));
 const _getLinkedContentTypeIdsForNodeType = _interop_require_default(require("./getLinkedContentTypeIdsForNodeType"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function newEntitySelectorConfigFromRichTextField(field, nodeType) {
+const newEntitySelectorConfigFromRichTextField = (field, nodeType)=>{
     return {
         entityType: getEntityTypeFromRichTextNode(nodeType),
         locale: field.locale || null,
         contentTypes: (0, _getLinkedContentTypeIdsForNodeType.default)(field, nodeType)
     };
-}
+};
 function getEntityTypeFromRichTextNode(nodeType) {
     const words = nodeType.split('-');
     if (words.indexOf('entry') !== -1) {
@@ -31,3 +40,8 @@ function getEntityTypeFromRichTextNode(nodeType) {
     }
     throw new Error(`RichText node type \`${nodeType}\` has no associated \`entityType\``);
 }
+const newResourceEntitySelectorConfigFromRichTextField = (field, nodeType)=>{
+    return {
+        allowedResources: (0, _getAllowedResourcesForNodeType.default)(field, nodeType)
+    };
+};

package/dist/cjs/helpers/editor.js

@@ -84,6 +84,7 @@ const _environment = require("./environment");
 const LINK_TYPES = [
     _richtexttypes.INLINES.HYPERLINK,
     _richtexttypes.INLINES.ENTRY_HYPERLINK,
+    _richtexttypes.INLINES.RESOURCE_HYPERLINK,
     _richtexttypes.INLINES.ASSET_HYPERLINK
 ];
 const LIST_TYPES = [

package/dist/cjs/plugins/DragAndDrop/index.js

@@ -16,11 +16,13 @@ function createDragAndDropPlugin() {
         _richtexttypes.BLOCKS.EMBEDDED_ASSET,
         _richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
         _richtexttypes.BLOCKS.HR,
-        _richtexttypes.INLINES.EMBEDDED_ENTRY
+        _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        _richtexttypes.INLINES.EMBEDDED_RESOURCE
     ];
     const ON_DROP_ALLOWED_TYPES = {
         TABLE: [
-            _richtexttypes.INLINES.EMBEDDED_ENTRY
+            _richtexttypes.INLINES.EMBEDDED_ENTRY,
+            _richtexttypes.INLINES.EMBEDDED_RESOURCE
         ]
     };
     return {

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

@@ -13,9 +13,10 @@ const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
 const _LinkedEntityInline = require("./LinkedEntityInline");
 function createEmbeddedEntityInlinePlugin(sdk) {
     const htmlAttributeName = 'data-embedded-entity-inline-id';
+    const nodeType = _richtexttypes.INLINES.EMBEDDED_ENTRY;
     return {
-        key: _richtexttypes.INLINES.EMBEDDED_ENTRY,
-        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        key: nodeType,
+        type: nodeType,
         isElement: true,
         isInline: true,
         isVoid: true,
@@ -24,7 +25,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
             hotkey: 'mod+shift+2'
         },
         handlers: {
-            onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(sdk)
+            onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(nodeType, sdk)
         },
         deserializeHtml: {
             rules: [
@@ -33,7 +34,23 @@ function createEmbeddedEntityInlinePlugin(sdk) {
                 }
             ],
             withoutChildren: true,
-            getNode: (el)=>(0, _EmbeddedInlineUtil.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/cjs/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FetchingWrappedResourceInlineCard", {
+    enumerable: true,
+    get: function() {
+        return FetchingWrappedResourceInlineCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _richtexttypes = require("@contentful/rich-text-types");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const { getEntryTitle , getEntryStatus  } = _fieldeditorshared.entityHelpers;
+function FetchingWrappedResourceInlineCard(props) {
+    const { link , onEntityFetchComplete  } = props;
+    const { data , status: requestStatus  } = (0, _fieldeditorreference.useResource)(link.linkType, link.urn);
+    _react.useEffect(()=>{
+        if (requestStatus === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        requestStatus
+    ]);
+    if (requestStatus === 'error') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading' || data === undefined) {
+        return _react.createElement(_f36components.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(_f36components.InlineEntryCard, {
+        testId: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
+        isSelected: props.isSelected,
+        title: `${data.contentType.name}: ${title} (Space: ${space.name})`,
+        status: status,
+        actions: [
+            _react.createElement(_f36components.MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, _react.createElement(_f36components.Text, null, title));
+}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinkedResourceInline", {
+    enumerable: true,
+    get: function() {
+        return LinkedResourceInline;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _slatereact = require("slate-react");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _internal = require("../../internal");
+const _SdkProvider = require("../../SdkProvider");
+const _linkstracking = require("../links-tracking");
+const _LinkedInlineWrapper = require("../shared/LinkedInlineWrapper");
+const _FetchingWrappedResourceInlineCard = require("./FetchingWrappedResourceInlineCard");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function LinkedResourceInline(props) {
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = (0, _linkstracking.useLinkTracking)();
+    const isSelected = (0, _slatereact.useSelected)();
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const isDisabled = (0, _slatereact.useReadOnly)();
+    const link = element.data.target.sys;
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = (0, _internal.findNodePath)(editor, element);
+        (0, _internal.removeNodes)(editor, {
+            at: pathToElement
+        });
+    }
+    return _react.default.createElement(_LinkedInlineWrapper.LinkedInlineWrapper, {
+        attributes: attributes,
+        link: element.data.target,
+        card: _react.default.createElement(_FetchingWrappedResourceInlineCard.FetchingWrappedResourceInlineCard, {
+            sdk: sdk,
+            link: link,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })
+    }, children);
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createEmbeddedResourceInlinePlugin", {
+    enumerable: true,
+    get: function() {
+        return createEmbeddedResourceInlinePlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
+const _LinkedResourceInline = require("./LinkedResourceInline");
+function createEmbeddedResourceInlinePlugin(sdk) {
+    const htmlAttributeName = 'data-embedded-resource-inline-id';
+    const nodeType = _richtexttypes.INLINES.EMBEDDED_RESOURCE;
+    return {
+        key: nodeType,
+        type: nodeType,
+        isElement: true,
+        isInline: true,
+        isVoid: true,
+        component: _LinkedResourceInline.LinkedResourceInline,
+        options: {
+            hotkey: 'mod+shift+p'
+        },
+        handlers: {
+            onKeyDown: (0, _EmbeddedInlineUtil.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/cjs/plugins/Heading/__tests__/createHeadingPlugin.test.js

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

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

@@ -24,6 +24,7 @@ const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _richtexttypes = require("@contentful/rich-text-types");
 const _emotion = require("emotion");
 const _editor = require("../../helpers/editor");
+const _getAllowedResourcesForNodeType = _interop_require_default(require("../../helpers/getAllowedResourcesForNodeType"));
 const _getLinkedContentTypeIdsForNodeType = _interop_require_default(require("../../helpers/getLinkedContentTypeIdsForNodeType"));
 const _validations = require("../../helpers/validations");
 const _internal = require("../../internal");
@@ -31,6 +32,7 @@ const _queries = require("../../internal/queries");
 const _transforms = require("../../internal/transforms");
 const _FetchingWrappedAssetCard = require("../shared/FetchingWrappedAssetCard");
 const _FetchingWrappedEntryCard = require("../shared/FetchingWrappedEntryCard");
+const _FetchingWrappedResourceCard = require("../shared/FetchingWrappedResourceCard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -78,15 +80,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const styles = {
     removeSelectionLabel: (0, _emotion.css)`
     margin-left: ${_f36tokens.default.spacingS};
+    margin-bottom: ${_f36tokens.default.spacingXs}; // to match FormLabel margin
   `
 };
 const SYS_LINK_TYPES = {
     [_richtexttypes.INLINES.ENTRY_HYPERLINK]: 'Entry',
-    [_richtexttypes.INLINES.ASSET_HYPERLINK]: 'Asset'
+    [_richtexttypes.INLINES.ASSET_HYPERLINK]: 'Asset',
+    [_richtexttypes.INLINES.RESOURCE_HYPERLINK]: 'Contentful:Entry'
 };
 const LINK_TYPE_SELECTION_VALUES = {
     [_richtexttypes.INLINES.HYPERLINK]: 'URL',
     [_richtexttypes.INLINES.ENTRY_HYPERLINK]: 'Entry',
+    [_richtexttypes.INLINES.RESOURCE_HYPERLINK]: 'Entry (different space)',
     [_richtexttypes.INLINES.ASSET_HYPERLINK]: 'Asset'
 };
 function HyperlinkModal(props) {
@@ -112,7 +117,16 @@ function HyperlinkModal(props) {
         const entityLinks = Object.keys(SYS_LINK_TYPES);
         const isEntityLink = entityLinks.includes(linkType);
         if (isEntityLink) {
-            return !!(linkText && linkEntity);
+            if (linkType === _richtexttypes.INLINES.ENTRY_HYPERLINK) {
+                return !!(linkText && isEntryLink(linkEntity));
+            }
+            if (linkType === _richtexttypes.INLINES.ASSET_HYPERLINK) {
+                return !!(linkText && isAssetLink(linkEntity));
+            }
+            if (linkType === _richtexttypes.INLINES.RESOURCE_HYPERLINK) {
+                return !!(linkText && isResourceLink(linkEntity));
+            }
+            return false;
         }
         return false;
     }
@@ -135,22 +149,55 @@ 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: (0, _getLinkedContentTypeIdsForNodeType.default)(props.sdk.field, _richtexttypes.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: (0, _getAllowedResourcesForNodeType.default)(props.sdk.field, _richtexttypes.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();
@@ -196,13 +243,18 @@ function HyperlinkModal(props) {
         testId: "entity-selection-link",
         onClick: resetLinkEntity,
         className: styles.removeSelectionLabel
-    }, "Remove selection"), _react.createElement("div", null, linkType === _richtexttypes.INLINES.ENTRY_HYPERLINK && _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
+    }, "Remove selection"), _react.createElement("div", null, linkType === _richtexttypes.INLINES.ENTRY_HYPERLINK && isEntryLink(linkEntity) && _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
         sdk: props.sdk,
         locale: props.sdk.field.locale,
         entryId: linkEntity.sys.id,
         isDisabled: true,
         isSelected: false
-    }), linkType === _richtexttypes.INLINES.ASSET_HYPERLINK && _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
+    }), linkType === _richtexttypes.INLINES.RESOURCE_HYPERLINK && isResourceLink(linkEntity) && _react.createElement(_FetchingWrappedResourceCard.FetchingWrappedResourceCard, {
+        sdk: props.sdk,
+        link: linkEntity.sys,
+        isDisabled: true,
+        isSelected: false
+    }), linkType === _richtexttypes.INLINES.ASSET_HYPERLINK && isAssetLink(linkEntity) && _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
         sdk: props.sdk,
         locale: props.sdk.field.locale,
         assetId: linkEntity.sys.id,
@@ -211,6 +263,9 @@ function HyperlinkModal(props) {
     }))) : _react.createElement("div", null, linkType === _richtexttypes.INLINES.ENTRY_HYPERLINK && _react.createElement(_f36components.TextLink, {
         testId: "entity-selection-link",
         onClick: selectEntry
+    }, "Select entry"), linkType === _richtexttypes.INLINES.RESOURCE_HYPERLINK && _react.createElement(_f36components.TextLink, {
+        testId: "entity-selection-link",
+        onClick: selectResourceEntry
     }, "Select entry"), linkType === _richtexttypes.INLINES.ASSET_HYPERLINK && _react.createElement(_f36components.TextLink, {
         testId: "entity-selection-link",
         onClick: selectAsset

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

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

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ResourceHyperlink", {
+    enumerable: true,
+    get: function() {
+        return ResourceHyperlink;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
+const _internal = require("../../../internal");
+const _linkstracking = require("../../../plugins/links-tracking");
+const _SdkProvider = require("../../../SdkProvider");
+const _HyperlinkModal = require("../HyperlinkModal");
+const _useResourceEntityInfo = require("../useResourceEntityInfo");
+const _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function ResourceHyperlink(props) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const { target  } = props.element.data;
+    const { onEntityFetchComplete  } = (0, _linkstracking.useLinkTracking)();
+    const tooltipContent = (0, _useResourceEntityInfo.useResourceEntityInfo)({
+        target,
+        onEntityFetchComplete
+    });
+    if (!target) return null;
+    function handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!editor) return;
+        const p = (0, _internal.fromDOMPoint)(editor, [
+            event.target,
+            0
+        ]);
+        if (p) {
+            (0, _HyperlinkModal.addOrEditLink)(editor, sdk, editor.tracking.onViewportAction, p.path);
+        }
+    }
+    return _react.createElement(_f36components.Tooltip, {
+        content: tooltipContent,
+        targetWrapperClassName: _styles.styles.hyperlinkWrapper,
+        placement: "bottom",
+        maxWidth: "auto"
+    }, _react.createElement(_f36components.TextLink, {
+        as: "a",
+        onClick: handleClick,
+        className: _styles.styles.hyperlink,
+        "data-resource-link-type": target.sys.linkType,
+        "data-resource-link-urn": target.sys.urn
+    }, props.children));
+}