@contentful/field-editor-rich-text 3.15.1 → 3.16.0

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

@@ -11,11 +11,12 @@ Object.defineProperty(exports, "EntityHyperlink", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
-const _internal = require("../../../internal");
+const _queries = require("../../../internal/queries");
 const _SdkProvider = require("../../../SdkProvider");
 const _linkstracking = require("../../links-tracking");
-const _HyperlinkModal = require("../HyperlinkModal");
 const _useEntityInfo = require("../useEntityInfo");
+const _linkHandlers = require("./linkHandlers");
+const _LinkPopover = require("./LinkPopover");
 const _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -61,34 +62,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function EntityHyperlink(props) {
     const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
     const sdk = (0, _SdkProvider.useSdkContext)();
+    const focus = editor.selection?.focus;
     const { target } = props.element.data;
     const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
+    const pathToElement = (0, _queries.findNodePath)(editor, props.element);
+    const isLinkFocused = pathToElement && focus && (0, _queries.isChildPath)(focus.path, pathToElement);
     const tooltipContent = (0, _useEntityInfo.useEntityInfo)({
         target,
         sdk,
         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);
-        }
+    if (!target) {
+        return null;
     }
-    return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
-        content: tooltipContent,
-        targetWrapperClassName: _styles.styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "auto"
-    }, /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
-        as: "a",
-        onClick: handleClick,
+    const popoverText = /*#__PURE__*/ _react.createElement(_f36components.Text, {
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
+        className: _styles.styles.openLink
+    }, tooltipContent);
+    return /*#__PURE__*/ _react.createElement(_LinkPopover.LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
+        popoverText: popoverText
+    }, /*#__PURE__*/ _react.createElement(_f36components.Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: _styles.styles.hyperlink,
         "data-link-type": target.sys.linkType,
         "data-link-id": target.sys.id

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinkPopover", {
+    enumerable: true,
+    get: function() {
+        return LinkPopover;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+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 = {
+        __proto__: null
+    };
+    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 LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink })=>// eslint-disable-next-line jsx-a11y/no-autofocus -- we don't want to autofocus the popover
+    /*#__PURE__*/ _react.createElement(_f36components.Popover, {
+        renderOnlyWhenOpen: false,
+        usePortal: false,
+        autoFocus: false,
+        isOpen: isLinkFocused
+    }, /*#__PURE__*/ _react.createElement(_f36components.Popover.Trigger, null, children), /*#__PURE__*/ _react.createElement(_f36components.Popover.Content, {
+        className: _styles.styles.popover
+    }, /*#__PURE__*/ _react.createElement(_f36components.Flex, {
+        contentEditable: "false",
+        alignItems: "center",
+        paddingTop: "spacing2Xs",
+        paddingBottom: "spacing2Xs",
+        paddingRight: "spacing2Xs",
+        paddingLeft: "spacingXs"
+    }, popoverText, handleCopyLink && /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
+        placement: "bottom",
+        content: "Copy link",
+        usePortal: true
+    }, /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
+        className: _styles.styles.iconButton,
+        onClick: handleCopyLink,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Copy link",
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.CopyIcon, {
+            size: "tiny"
+        })
+    })), /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
+        placement: "bottom",
+        content: "Edit link",
+        usePortal: true
+    }, /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
+        className: _styles.styles.iconButton,
+        onClick: handleEditLink,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Edit link",
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.EditIcon, {
+            size: "tiny"
+        })
+    })), /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
+        placement: "bottom",
+        content: "Remove link",
+        usePortal: true
+    }, /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
+        onClick: handleRemoveLink,
+        className: _styles.styles.iconButton,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Remove link",
+        icon: //@TODO: Replace icon when available in f36
+        /*#__PURE__*/ _react.createElement("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/ _react.createElement("path", {
+            d: "M1.75 8C1.75 8.59674 1.98705 9.16903 2.40901 9.59099C2.83097 10.0129 3.40326 10.25 4 10.25H6.5C6.69891 10.25 6.88968 10.329 7.03033 10.4697C7.17098 10.6103 7.25 10.8011 7.25 11C7.25 11.1989 7.17098 11.3897 7.03033 11.5303C6.88968 11.671 6.69891 11.75 6.5 11.75H4C3.00544 11.75 2.05161 11.3549 1.34835 10.6517C0.645088 9.94839 0.25 8.99456 0.25 8C0.25 7.00544 0.645088 6.05161 1.34835 5.34835C2.05161 4.64509 3.00544 4.25 4 4.25H6.5C6.69891 4.25 6.88968 4.32902 7.03033 4.46967C7.17098 4.61032 7.25 4.80109 7.25 5C7.25 5.19891 7.17098 5.38968 7.03033 5.53033C6.88968 5.67098 6.69891 5.75 6.5 5.75H4C3.40326 5.75 2.83097 5.98705 2.40901 6.40901C1.98705 6.83097 1.75 7.40326 1.75 8ZM12 4.25H9.5C9.30109 4.25 9.11032 4.32902 8.96967 4.46967C8.82902 4.61032 8.75 4.80109 8.75 5C8.75 5.19891 8.82902 5.38968 8.96967 5.53033C9.11032 5.67098 9.30109 5.75 9.5 5.75H12C12.5967 5.75 13.169 5.98705 13.591 6.40901C14.0129 6.83097 14.25 7.40326 14.25 8C14.25 8.59674 14.0129 9.16903 13.591 9.59099C13.169 10.0129 12.5967 10.25 12 10.25H9.5C9.30109 10.25 9.11032 10.329 8.96967 10.4697C8.82902 10.6103 8.75 10.8011 8.75 11C8.75 11.1989 8.82902 11.3897 8.96967 11.5303C9.11032 11.671 9.30109 11.75 9.5 11.75H12C12.9946 11.75 13.9484 11.3549 14.6517 10.6517C15.3549 9.94839 15.75 8.99456 15.75 8C15.75 7.00544 15.3549 6.05161 14.6517 5.34835C13.9484 4.64509 12.9946 4.25 12 4.25Z",
+            fill: "black"
+        }))
+    })))));

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

@@ -11,11 +11,12 @@ Object.defineProperty(exports, "ResourceHyperlink", {
 const _react = /*#__PURE__*/ _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 _queries = require("../../../internal/queries");
 const _SdkProvider = require("../../../SdkProvider");
-const _HyperlinkModal = require("../HyperlinkModal");
+const _linkstracking = require("../../links-tracking");
 const _useResourceEntityInfo = require("../useResourceEntityInfo");
+const _linkHandlers = require("./linkHandlers");
+const _LinkPopover = require("./LinkPopover");
 const _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -61,33 +62,32 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function ResourceHyperlink(props) {
     const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
     const sdk = (0, _SdkProvider.useSdkContext)();
+    const focus = editor.selection?.focus;
     const { target } = props.element.data;
     const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
+    const pathToElement = (0, _queries.findNodePath)(editor, props.element);
+    const isLinkFocused = pathToElement && focus && (0, _queries.isChildPath)(focus.path, pathToElement);
     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);
-        }
+    if (!target) {
+        return null;
     }
-    return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
-        content: tooltipContent,
-        targetWrapperClassName: _styles.styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "auto"
-    }, /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
-        as: "a",
-        onClick: handleClick,
+    const popoverText = /*#__PURE__*/ _react.createElement(_f36components.Text, {
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
+        className: _styles.styles.openLink
+    }, tooltipContent);
+    return /*#__PURE__*/ _react.createElement(_LinkPopover.LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
+        popoverText: popoverText
+    }, /*#__PURE__*/ _react.createElement(_f36components.Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: _styles.styles.hyperlink,
         "data-resource-link-type": target.sys.linkType,
         "data-resource-link-urn": target.sys.urn

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

@@ -11,9 +11,10 @@ Object.defineProperty(exports, "UrlHyperlink", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
-const _internal = require("../../../internal");
+const _queries = require("../../../internal/queries");
 const _SdkProvider = require("../../../SdkProvider");
-const _HyperlinkModal = require("../HyperlinkModal");
+const _linkHandlers = require("./linkHandlers");
+const _LinkPopover = require("./LinkPopover");
 const _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -59,31 +60,26 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function UrlHyperlink(props) {
     const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
     const sdk = (0, _SdkProvider.useSdkContext)();
-    const { uri } = props.element.data;
-    function handleClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!editor) return;
-        const p = (0, _internal.fromDOMPoint)(editor, [
-            event.target,
-            0
-        ], {
-            exactMatch: false,
-            suppressThrow: false
-        });
-        (0, _HyperlinkModal.addOrEditLink)(editor, sdk, editor.tracking.onViewportAction, p?.path);
-    }
-    return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
-        usePortal: true,
-        content: uri,
-        targetWrapperClassName: _styles.styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "min-content"
-    }, /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
-        as: "a",
+    const focus = editor.selection?.focus;
+    const uri = props.element.data?.uri;
+    const pathToElement = (0, _queries.findNodePath)(editor, props.element);
+    const isLinkFocused = pathToElement && focus && (0, _queries.isChildPath)(focus.path, pathToElement);
+    const popoverText = /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
+        className: _styles.styles.openLink,
         href: uri,
         rel: "noopener noreferrer",
-        onClick: handleClick,
+        target: "_blank"
+    }, uri);
+    return /*#__PURE__*/ _react.createElement(_LinkPopover.LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
+        handleCopyLink: ()=>(0, _linkHandlers.handleCopyLink)(uri),
+        popoverText: popoverText
+    }, /*#__PURE__*/ _react.createElement(_f36components.Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: _styles.styles.hyperlink
     }, props.children));
 }

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    handleCopyLink: function() {
+        return handleCopyLink;
+    },
+    handleEditLink: function() {
+        return handleEditLink;
+    },
+    handleRemoveLink: function() {
+        return handleRemoveLink;
+    }
+});
+const _f36components = require("@contentful/f36-components");
+const _editor = require("../../../helpers/editor");
+const _HyperlinkModal = require("../HyperlinkModal");
+const handleEditLink = (editor, sdk, pathToElement)=>{
+    if (!editor || !pathToElement) return;
+    (0, _HyperlinkModal.addOrEditLink)(editor, sdk, editor.tracking.onViewportAction, pathToElement);
+};
+const handleRemoveLink = (editor)=>{
+    (0, _editor.unwrapLink)(editor);
+};
+const handleCopyLink = async (uri)=>{
+    if (uri) {
+        try {
+            await navigator.clipboard.writeText(uri);
+            _f36components.Notification.success('Successfully copied URL to clipboard');
+        } catch (error) {
+            _f36components.Notification.error('Failed to copy URL to clipboard');
+        }
+    }
+};

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

@@ -23,6 +23,21 @@ const styles = {
             fontSize: 'inherit !important'
         }
     }),
+    iconButton: (0, _emotion.css)({
+        padding: `${_f36tokens.default.spacing2Xs} ${_f36tokens.default.spacingXs}`
+    }),
+    openLink: (0, _emotion.css)({
+        display: 'inline-block',
+        marginLeft: _f36tokens.default.spacingXs,
+        marginRight: _f36tokens.default.spacingXs,
+        maxWidth: '22ch',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }),
+    popover: (0, _emotion.css)({
+        zIndex: _f36tokens.default.zIndexDefault
+    }),
     hyperlink: (0, _emotion.css)({
         fontSize: 'inherit !important',
         display: 'inline !important',

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

@@ -1,43 +1,43 @@
 import * as React from 'react';
-import { Tooltip, TextLink } from '@contentful/f36-components';
+import { Text } from '@contentful/f36-components';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { fromDOMPoint } from '../../../internal';
+import { findNodePath, isChildPath } from '../../../internal/queries';
 import { useSdkContext } from '../../../SdkProvider';
 import { useLinkTracking } from '../../links-tracking';
-import { addOrEditLink } from '../HyperlinkModal';
 import { useEntityInfo } from '../useEntityInfo';
+import { handleEditLink, handleRemoveLink } from './linkHandlers';
+import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 export function EntityHyperlink(props) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
+    const focus = editor.selection?.focus;
     const { target } = props.element.data;
     const { onEntityFetchComplete } = useLinkTracking();
+    const pathToElement = findNodePath(editor, props.element);
+    const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
     const tooltipContent = useEntityInfo({
         target,
         sdk,
         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);
-        }
+    if (!target) {
+        return null;
     }
-    return /*#__PURE__*/ React.createElement(Tooltip, {
-        content: tooltipContent,
-        targetWrapperClassName: styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "auto"
-    }, /*#__PURE__*/ React.createElement(TextLink, {
-        as: "a",
-        onClick: handleClick,
+    const popoverText = /*#__PURE__*/ React.createElement(Text, {
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
+        className: styles.openLink
+    }, tooltipContent);
+    return /*#__PURE__*/ React.createElement(LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>handleRemoveLink(editor),
+        popoverText: popoverText
+    }, /*#__PURE__*/ React.createElement(Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: styles.hyperlink,
         "data-link-type": target.sys.linkType,
         "data-link-id": target.sys.id

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Popover, IconButton, Tooltip, Flex } from '@contentful/f36-components';
+import { EditIcon, CopyIcon } from '@contentful/f36-icons';
+import { styles } from './styles';
+export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink })=>// eslint-disable-next-line jsx-a11y/no-autofocus -- we don't want to autofocus the popover
+    /*#__PURE__*/ React.createElement(Popover, {
+        renderOnlyWhenOpen: false,
+        usePortal: false,
+        autoFocus: false,
+        isOpen: isLinkFocused
+    }, /*#__PURE__*/ React.createElement(Popover.Trigger, null, children), /*#__PURE__*/ React.createElement(Popover.Content, {
+        className: styles.popover
+    }, /*#__PURE__*/ React.createElement(Flex, {
+        contentEditable: "false",
+        alignItems: "center",
+        paddingTop: "spacing2Xs",
+        paddingBottom: "spacing2Xs",
+        paddingRight: "spacing2Xs",
+        paddingLeft: "spacingXs"
+    }, popoverText, handleCopyLink && /*#__PURE__*/ React.createElement(Tooltip, {
+        placement: "bottom",
+        content: "Copy link",
+        usePortal: true
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        className: styles.iconButton,
+        onClick: handleCopyLink,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Copy link",
+        icon: /*#__PURE__*/ React.createElement(CopyIcon, {
+            size: "tiny"
+        })
+    })), /*#__PURE__*/ React.createElement(Tooltip, {
+        placement: "bottom",
+        content: "Edit link",
+        usePortal: true
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        className: styles.iconButton,
+        onClick: handleEditLink,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Edit link",
+        icon: /*#__PURE__*/ React.createElement(EditIcon, {
+            size: "tiny"
+        })
+    })), /*#__PURE__*/ React.createElement(Tooltip, {
+        placement: "bottom",
+        content: "Remove link",
+        usePortal: true
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        onClick: handleRemoveLink,
+        className: styles.iconButton,
+        size: "small",
+        variant: "transparent",
+        "aria-label": "Remove link",
+        icon: //@TODO: Replace icon when available in f36
+        /*#__PURE__*/ React.createElement("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/ React.createElement("path", {
+            d: "M1.75 8C1.75 8.59674 1.98705 9.16903 2.40901 9.59099C2.83097 10.0129 3.40326 10.25 4 10.25H6.5C6.69891 10.25 6.88968 10.329 7.03033 10.4697C7.17098 10.6103 7.25 10.8011 7.25 11C7.25 11.1989 7.17098 11.3897 7.03033 11.5303C6.88968 11.671 6.69891 11.75 6.5 11.75H4C3.00544 11.75 2.05161 11.3549 1.34835 10.6517C0.645088 9.94839 0.25 8.99456 0.25 8C0.25 7.00544 0.645088 6.05161 1.34835 5.34835C2.05161 4.64509 3.00544 4.25 4 4.25H6.5C6.69891 4.25 6.88968 4.32902 7.03033 4.46967C7.17098 4.61032 7.25 4.80109 7.25 5C7.25 5.19891 7.17098 5.38968 7.03033 5.53033C6.88968 5.67098 6.69891 5.75 6.5 5.75H4C3.40326 5.75 2.83097 5.98705 2.40901 6.40901C1.98705 6.83097 1.75 7.40326 1.75 8ZM12 4.25H9.5C9.30109 4.25 9.11032 4.32902 8.96967 4.46967C8.82902 4.61032 8.75 4.80109 8.75 5C8.75 5.19891 8.82902 5.38968 8.96967 5.53033C9.11032 5.67098 9.30109 5.75 9.5 5.75H12C12.5967 5.75 13.169 5.98705 13.591 6.40901C14.0129 6.83097 14.25 7.40326 14.25 8C14.25 8.59674 14.0129 9.16903 13.591 9.59099C13.169 10.0129 12.5967 10.25 12 10.25H9.5C9.30109 10.25 9.11032 10.329 8.96967 10.4697C8.82902 10.6103 8.75 10.8011 8.75 11C8.75 11.1989 8.82902 11.3897 8.96967 11.5303C9.11032 11.671 9.30109 11.75 9.5 11.75H12C12.9946 11.75 13.9484 11.3549 14.6517 10.6517C15.3549 9.94839 15.75 8.99456 15.75 8C15.75 7.00544 15.3549 6.05161 14.6517 5.34835C13.9484 4.64509 12.9946 4.25 12 4.25Z",
+            fill: "black"
+        }))
+    })))));

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

@@ -1,42 +1,42 @@
 import * as React from 'react';
-import { Tooltip, TextLink } from '@contentful/f36-components';
+import { Text } from '@contentful/f36-components';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { fromDOMPoint } from '../../../internal';
-import { useLinkTracking } from '../../../plugins/links-tracking';
+import { findNodePath, isChildPath } from '../../../internal/queries';
 import { useSdkContext } from '../../../SdkProvider';
-import { addOrEditLink } from '../HyperlinkModal';
+import { useLinkTracking } from '../../links-tracking';
 import { useResourceEntityInfo } from '../useResourceEntityInfo';
+import { handleEditLink, handleRemoveLink } from './linkHandlers';
+import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 export function ResourceHyperlink(props) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
+    const focus = editor.selection?.focus;
     const { target } = props.element.data;
     const { onEntityFetchComplete } = useLinkTracking();
+    const pathToElement = findNodePath(editor, props.element);
+    const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
     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);
-        }
+    if (!target) {
+        return null;
     }
-    return /*#__PURE__*/ React.createElement(Tooltip, {
-        content: tooltipContent,
-        targetWrapperClassName: styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "auto"
-    }, /*#__PURE__*/ React.createElement(TextLink, {
-        as: "a",
-        onClick: handleClick,
+    const popoverText = /*#__PURE__*/ React.createElement(Text, {
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
+        className: styles.openLink
+    }, tooltipContent);
+    return /*#__PURE__*/ React.createElement(LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>handleRemoveLink(editor),
+        popoverText: popoverText
+    }, /*#__PURE__*/ React.createElement(Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: styles.hyperlink,
         "data-resource-link-type": target.sys.linkType,
         "data-resource-link-urn": target.sys.urn

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

@@ -1,38 +1,34 @@
 import * as React from 'react';
-import { Tooltip, TextLink } from '@contentful/f36-components';
+import { TextLink, Text } from '@contentful/f36-components';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { fromDOMPoint } from '../../../internal';
+import { findNodePath, isChildPath } from '../../../internal/queries';
 import { useSdkContext } from '../../../SdkProvider';
-import { addOrEditLink } from '../HyperlinkModal';
+import { handleCopyLink, handleEditLink, handleRemoveLink } from './linkHandlers';
+import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 export function UrlHyperlink(props) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
-    const { uri } = props.element.data;
-    function handleClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!editor) return;
-        const p = fromDOMPoint(editor, [
-            event.target,
-            0
-        ], {
-            exactMatch: false,
-            suppressThrow: false
-        });
-        addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p?.path);
-    }
-    return /*#__PURE__*/ React.createElement(Tooltip, {
-        usePortal: true,
-        content: uri,
-        targetWrapperClassName: styles.hyperlinkWrapper,
-        placement: "bottom",
-        maxWidth: "min-content"
-    }, /*#__PURE__*/ React.createElement(TextLink, {
-        as: "a",
+    const focus = editor.selection?.focus;
+    const uri = props.element.data?.uri;
+    const pathToElement = findNodePath(editor, props.element);
+    const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
+    const popoverText = /*#__PURE__*/ React.createElement(TextLink, {
+        className: styles.openLink,
         href: uri,
         rel: "noopener noreferrer",
-        onClick: handleClick,
+        target: "_blank"
+    }, uri);
+    return /*#__PURE__*/ React.createElement(LinkPopover, {
+        isLinkFocused: isLinkFocused,
+        handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
+        handleRemoveLink: ()=>handleRemoveLink(editor),
+        handleCopyLink: ()=>handleCopyLink(uri),
+        popoverText: popoverText
+    }, /*#__PURE__*/ React.createElement(Text, {
+        testId: "cf-ui-text-link",
+        fontColor: "blue600",
+        fontWeight: "fontWeightMedium",
         className: styles.hyperlink
     }, props.children));
 }

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

@@ -0,0 +1,20 @@
+import { Notification } from '@contentful/f36-components';
+import { unwrapLink } from '../../../helpers/editor';
+import { addOrEditLink } from '../HyperlinkModal';
+export const handleEditLink = (editor, sdk, pathToElement)=>{
+    if (!editor || !pathToElement) return;
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, pathToElement);
+};
+export const handleRemoveLink = (editor)=>{
+    unwrapLink(editor);
+};
+export const handleCopyLink = async (uri)=>{
+    if (uri) {
+        try {
+            await navigator.clipboard.writeText(uri);
+            Notification.success('Successfully copied URL to clipboard');
+        } catch (error) {
+            Notification.error('Failed to copy URL to clipboard');
+        }
+    }
+};

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

@@ -8,6 +8,21 @@ export const styles = {
             fontSize: 'inherit !important'
         }
     }),
+    iconButton: css({
+        padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`
+    }),
+    openLink: css({
+        display: 'inline-block',
+        marginLeft: tokens.spacingXs,
+        marginRight: tokens.spacingXs,
+        maxWidth: '22ch',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }),
+    popover: css({
+        zIndex: tokens.zIndexDefault
+    }),
     hyperlink: css({
         fontSize: 'inherit !important',
         display: 'inline !important',

package/dist/types/plugins/Hyperlink/components/LinkPopover.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type LinkPopoverProps = {
+    isLinkFocused: boolean | undefined;
+    popoverText: React.ReactNode;
+    handleEditLink: () => void;
+    handleRemoveLink: () => void;
+    children: React.ReactNode;
+    handleCopyLink?: () => void;
+};
+export declare const LinkPopover: ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, }: LinkPopoverProps) => React.JSX.Element;
+export {};

package/dist/types/plugins/Hyperlink/components/linkHandlers.d.ts

@@ -0,0 +1,5 @@
+import { FieldAppSDK } from '@contentful/app-sdk';
+import { Path, PlateEditor } from '../../../internal/types';
+export declare const handleEditLink: (editor: PlateEditor, sdk: FieldAppSDK, pathToElement: Path | undefined) => void;
+export declare const handleRemoveLink: (editor: PlateEditor) => void;
+export declare const handleCopyLink: (uri: string | undefined) => Promise<void>;

package/dist/types/plugins/Hyperlink/components/styles.d.ts

@@ -1,4 +1,7 @@
 export declare const styles: {
     hyperlinkWrapper: string;
+    iconButton: string;
+    openLink: string;
+    popover: string;
     hyperlink: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.15.1",
+  "version": "3.16.0",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,7 +44,7 @@
     "@contentful/f36-icons": "^4.1.1",
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/f36-utils": "^4.19.0",
-    "@contentful/field-editor-reference": "^5.19.0",
+    "@contentful/field-editor-reference": "^5.20.0",
     "@contentful/field-editor-shared": "^1.4.2",
     "@contentful/rich-text-plain-text-renderer": "^16.0.4",
     "@contentful/rich-text-types": "16.3.0",
@@ -81,5 +81,5 @@
     "prism-react-renderer": "2.0.5",
     "react": ">=16.14.0"
   },
-  "gitHead": "4eb475c2da5d552ae5d4ef3573f2143d6574e019"
+  "gitHead": "9d07b5cbfb32a72cab6ff4fc4732e236033412bd"
 }