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

package/dist/cjs/internal/hooks.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    useFocused: function() {
+        return useFocused;
+    },
     usePlateEditorRef: function() {
         return usePlateEditorRef;
     },
@@ -75,3 +78,6 @@ const usePlateEditorState = (id)=>{
 const usePlateSelectors = (id)=>{
     return _platecommon.usePlateSelectors(id);
 };
+const useFocused = ()=>{
+    return _slatereact.useFocused();
+};

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "LinkPopover", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
+const _hooks = require("../../../internal/hooks");
 const _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -53,16 +54,36 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     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
+const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink })=>{
+    const isEditorFocused = (0, _hooks.useFocused)();
+    const popoverContent = _react.useRef(null);
+    const [isPopoverContentClicked, setIsPopoverContentClicked] = _react.useState(false);
+    _react.useEffect(()=>{
+        const handleMouseDown = (event)=>{
+            if (popoverContent.current && popoverContent.current.contains(event.target)) {
+                setIsPopoverContentClicked(true);
+            } else {
+                setIsPopoverContentClicked(false);
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        return ()=>{
+            document.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, []);
+    const isOpen = isLinkFocused && isEditorFocused || isPopoverContentClicked;
+    // Important to render this component in a portal
+    // Otherwise the content of the popover will get copied over when users copy text from the rich text editor
+    return(// 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,
+        usePortal: true,
         autoFocus: false,
-        isOpen: isLinkFocused
+        isOpen: isOpen
     }, /*#__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",
+        ref: popoverContent,
         alignItems: "center",
         paddingTop: "spacing2Xs",
         paddingBottom: "spacing2Xs",
@@ -115,4 +136,5 @@ const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveL
             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/UrlHyperlink.js

@@ -76,10 +76,10 @@ function UrlHyperlink(props) {
         handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
         handleCopyLink: ()=>(0, _linkHandlers.handleCopyLink)(uri),
         popoverText: popoverText
-    }, /*#__PURE__*/ _react.createElement(_f36components.Text, {
+    }, /*#__PURE__*/ _react.createElement(_f36components.TextLink, {
         testId: "cf-ui-text-link",
-        fontColor: "blue600",
-        fontWeight: "fontWeightMedium",
+        href: uri,
+        onClick: (e)=>e.preventDefault(),
         className: _styles.styles.hyperlink
     }, props.children));
 }

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

@@ -36,13 +36,14 @@ const styles = {
         textOverflow: 'ellipsis'
     }),
     popover: (0, _emotion.css)({
-        zIndex: _f36tokens.default.zIndexDefault
+        zIndex: _f36tokens.default.zIndexModal
     }),
     hyperlink: (0, _emotion.css)({
         fontSize: 'inherit !important',
         display: 'inline !important',
         '&:hover': {
-            fill: _f36tokens.default.gray900
+            fill: _f36tokens.default.gray900,
+            textDecoration: 'none'
         },
         '&:focus': {
             fill: _f36tokens.default.gray900

package/dist/esm/internal/hooks.js

@@ -10,3 +10,6 @@ export const usePlateEditorState = (id)=>{
 export const usePlateSelectors = (id)=>{
     return p.usePlateSelectors(id);
 };
+export const useFocused = ()=>{
+    return sr.useFocused();
+};

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

@@ -1,17 +1,38 @@
 import * as React from 'react';
 import { Popover, IconButton, Tooltip, Flex } from '@contentful/f36-components';
 import { EditIcon, CopyIcon } from '@contentful/f36-icons';
+import { useFocused } from '../../../internal/hooks';
 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
+export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink })=>{
+    const isEditorFocused = useFocused();
+    const popoverContent = React.useRef(null);
+    const [isPopoverContentClicked, setIsPopoverContentClicked] = React.useState(false);
+    React.useEffect(()=>{
+        const handleMouseDown = (event)=>{
+            if (popoverContent.current && popoverContent.current.contains(event.target)) {
+                setIsPopoverContentClicked(true);
+            } else {
+                setIsPopoverContentClicked(false);
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        return ()=>{
+            document.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, []);
+    const isOpen = isLinkFocused && isEditorFocused || isPopoverContentClicked;
+    // Important to render this component in a portal
+    // Otherwise the content of the popover will get copied over when users copy text from the rich text editor
+    return(// eslint-disable-next-line jsx-a11y/no-autofocus -- we don't want to autofocus the popover
     /*#__PURE__*/ React.createElement(Popover, {
         renderOnlyWhenOpen: false,
-        usePortal: false,
+        usePortal: true,
         autoFocus: false,
-        isOpen: isLinkFocused
+        isOpen: isOpen
     }, /*#__PURE__*/ React.createElement(Popover.Trigger, null, children), /*#__PURE__*/ React.createElement(Popover.Content, {
         className: styles.popover
     }, /*#__PURE__*/ React.createElement(Flex, {
-        contentEditable: "false",
+        ref: popoverContent,
         alignItems: "center",
         paddingTop: "spacing2Xs",
         paddingBottom: "spacing2Xs",
@@ -64,4 +85,5 @@ export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handle
             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/UrlHyperlink.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextLink, Text } from '@contentful/f36-components';
+import { TextLink } from '@contentful/f36-components';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { findNodePath, isChildPath } from '../../../internal/queries';
 import { useSdkContext } from '../../../SdkProvider';
@@ -25,10 +25,10 @@ export function UrlHyperlink(props) {
         handleRemoveLink: ()=>handleRemoveLink(editor),
         handleCopyLink: ()=>handleCopyLink(uri),
         popoverText: popoverText
-    }, /*#__PURE__*/ React.createElement(Text, {
+    }, /*#__PURE__*/ React.createElement(TextLink, {
         testId: "cf-ui-text-link",
-        fontColor: "blue600",
-        fontWeight: "fontWeightMedium",
+        href: uri,
+        onClick: (e)=>e.preventDefault(),
         className: styles.hyperlink
     }, props.children));
 }

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

@@ -21,13 +21,14 @@ export const styles = {
         textOverflow: 'ellipsis'
     }),
     popover: css({
-        zIndex: tokens.zIndexDefault
+        zIndex: tokens.zIndexModal
     }),
     hyperlink: css({
         fontSize: 'inherit !important',
         display: 'inline !important',
         '&:hover': {
-            fill: tokens.gray900
+            fill: tokens.gray900,
+            textDecoration: 'none'
         },
         '&:focus': {
             fill: tokens.gray900

package/dist/types/internal/hooks.d.ts

@@ -4,3 +4,4 @@ export declare const useReadOnly: () => boolean;
 export declare const usePlateEditorRef: (id?: string) => PlateEditor;
 export declare const usePlateEditorState: (id?: string) => PlateEditor;
 export declare const usePlateSelectors: (id?: string) => p.GetRecord<p.PlateStoreState<Value, PlateEditor>>;
+export declare const useFocused: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -81,5 +81,5 @@
     "prism-react-renderer": "2.0.5",
     "react": ">=16.14.0"
   },
-  "gitHead": "9d07b5cbfb32a72cab6ff4fc4732e236033412bd"
+  "gitHead": "70604b5cc83909d95641b7ce9babe7c2dac1e6e6"
 }