@contentful/field-editor-rich-text 3.18.0 → 3.18.1

package/dist/cjs/internal/hooks.js

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

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

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function EntityHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
     const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
     const { target } = props.element.data;
     const tooltipContent = (0, _useEntityInfo.useEntityInfo)({
@@ -78,7 +78,8 @@ function EntityHyperlink(props) {
         isLinkFocused: isLinkFocused,
         handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
         handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, _react.createElement(_f36components.Text, {
         testId: "cf-ui-text-link",
         fontColor: "blue600",

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

@@ -11,7 +11,6 @@ Object.defineProperty(exports, "LinkPopover", {
 const _react = _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;
@@ -54,8 +53,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink })=>{
-    const isEditorFocused = (0, _hooks.useFocused)();
+const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, isEditorFocused })=>{
     const popoverContent = _react.useRef(null);
     const [isPopoverContentClicked, setIsPopoverContentClicked] = _react.useState(false);
     _react.useEffect(()=>{

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

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function ResourceHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
     const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
     const { target } = props.element.data;
     const tooltipContent = (0, _useResourceEntityInfo.useResourceEntityInfo)({
@@ -77,7 +77,8 @@ function ResourceHyperlink(props) {
         isLinkFocused: isLinkFocused,
         handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
         handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, _react.createElement(_f36components.Text, {
         testId: "cf-ui-text-link",
         fontColor: "blue600",

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

@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function UrlHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = (0, _useHyperlinkCommon.useHyperlinkCommon)(props.element);
     const uri = props.element.data?.uri;
     const popoverText = _react.createElement(_f36components.TextLink, {
         className: _styles.styles.openLink,
@@ -69,7 +69,8 @@ function UrlHyperlink(props) {
         handleEditLink: ()=>(0, _linkHandlers.handleEditLink)(editor, sdk, pathToElement),
         handleRemoveLink: ()=>(0, _linkHandlers.handleRemoveLink)(editor),
         handleCopyLink: ()=>(0, _linkHandlers.handleCopyLink)(uri),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, _react.createElement(_f36components.TextLink, {
         testId: "cf-ui-text-link",
         href: uri,

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "useHyperlinkCommon", {
         return useHyperlinkCommon;
     }
 });
+const _react = require("react");
 const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
 const _queries = require("../../../internal/queries");
 const _SdkProvider = require("../../../SdkProvider");
@@ -17,10 +18,30 @@ function useHyperlinkCommon(element) {
     const focus = editor.selection?.focus;
     const pathToElement = (0, _queries.findNodePath)(editor, element);
     const isLinkFocused = pathToElement && focus && (0, _queries.isChildPath)(focus.path, pathToElement);
+    const [isEditorFocused, setIsEditorFocused] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        const handleFocus = ()=>setIsEditorFocused(true);
+        const handleBlur = ()=>setIsEditorFocused(false);
+        const editorElement = document.getElementById(editor.id);
+        if (editorElement) {
+            setIsEditorFocused(document.activeElement === editorElement);
+            editorElement.addEventListener('focus', handleFocus);
+            editorElement.addEventListener('blur', handleBlur);
+        }
+        return ()=>{
+            if (editorElement) {
+                editorElement.removeEventListener('focus', handleFocus);
+                editorElement.removeEventListener('blur', handleBlur);
+            }
+        };
+    }, [
+        editor
+    ]);
     return {
         editor,
         sdk,
         isLinkFocused,
-        pathToElement
+        pathToElement,
+        isEditorFocused
     };
 }

package/dist/esm/internal/hooks.js

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

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

@@ -7,7 +7,7 @@ import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 import { useHyperlinkCommon } from './useHyperlinkCommon';
 export function EntityHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = useHyperlinkCommon(props.element);
     const { onEntityFetchComplete } = useLinkTracking();
     const { target } = props.element.data;
     const tooltipContent = useEntityInfo({
@@ -27,7 +27,8 @@ export function EntityHyperlink(props) {
         isLinkFocused: isLinkFocused,
         handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
         handleRemoveLink: ()=>handleRemoveLink(editor),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, React.createElement(Text, {
         testId: "cf-ui-text-link",
         fontColor: "blue600",

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

@@ -1,10 +1,8 @@
 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 })=>{
-    const isEditorFocused = useFocused();
+export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, isEditorFocused })=>{
     const popoverContent = React.useRef(null);
     const [isPopoverContentClicked, setIsPopoverContentClicked] = React.useState(false);
     React.useEffect(()=>{

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

@@ -7,7 +7,7 @@ import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 import { useHyperlinkCommon } from './useHyperlinkCommon';
 export function ResourceHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = useHyperlinkCommon(props.element);
     const { onEntityFetchComplete } = useLinkTracking();
     const { target } = props.element.data;
     const tooltipContent = useResourceEntityInfo({
@@ -26,7 +26,8 @@ export function ResourceHyperlink(props) {
         isLinkFocused: isLinkFocused,
         handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
         handleRemoveLink: ()=>handleRemoveLink(editor),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, React.createElement(Text, {
         testId: "cf-ui-text-link",
         fontColor: "blue600",

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

@@ -5,7 +5,7 @@ import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
 import { useHyperlinkCommon } from './useHyperlinkCommon';
 export function UrlHyperlink(props) {
-    const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
+    const { editor, sdk, isLinkFocused, pathToElement, isEditorFocused } = useHyperlinkCommon(props.element);
     const uri = props.element.data?.uri;
     const popoverText = React.createElement(TextLink, {
         className: styles.openLink,
@@ -18,7 +18,8 @@ export function UrlHyperlink(props) {
         handleEditLink: ()=>handleEditLink(editor, sdk, pathToElement),
         handleRemoveLink: ()=>handleRemoveLink(editor),
         handleCopyLink: ()=>handleCopyLink(uri),
-        popoverText: popoverText
+        popoverText: popoverText,
+        isEditorFocused: isEditorFocused
     }, React.createElement(TextLink, {
         testId: "cf-ui-text-link",
         href: uri,

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { findNodePath, isChildPath } from '../../../internal/queries';
 import { useSdkContext } from '../../../SdkProvider';
@@ -7,10 +8,30 @@ export function useHyperlinkCommon(element) {
     const focus = editor.selection?.focus;
     const pathToElement = findNodePath(editor, element);
     const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
+    const [isEditorFocused, setIsEditorFocused] = useState(false);
+    useEffect(()=>{
+        const handleFocus = ()=>setIsEditorFocused(true);
+        const handleBlur = ()=>setIsEditorFocused(false);
+        const editorElement = document.getElementById(editor.id);
+        if (editorElement) {
+            setIsEditorFocused(document.activeElement === editorElement);
+            editorElement.addEventListener('focus', handleFocus);
+            editorElement.addEventListener('blur', handleBlur);
+        }
+        return ()=>{
+            if (editorElement) {
+                editorElement.removeEventListener('focus', handleFocus);
+                editorElement.removeEventListener('blur', handleBlur);
+            }
+        };
+    }, [
+        editor
+    ]);
     return {
         editor,
         sdk,
         isLinkFocused,
-        pathToElement
+        pathToElement,
+        isEditorFocused
     };
 }

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

@@ -31,4 +31,3 @@ export declare const usePlateSelectors: (id?: string) => {
 } & {
     atom: <V>(atom: import("jotai").Atom<V>, options?: string | import("jotai-x").UseAtomOptions | undefined) => V;
 };
-export declare const useFocused: () => boolean;

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

@@ -6,6 +6,7 @@ type LinkPopoverProps = {
     handleRemoveLink: () => void;
     children: React.ReactNode;
     handleCopyLink?: () => void;
+    isEditorFocused: boolean;
 };
-export declare const LinkPopover: ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, }: LinkPopoverProps) => JSX.Element;
+export declare const LinkPopover: ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, isEditorFocused, }: LinkPopoverProps) => JSX.Element;
 export {};

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

@@ -4,4 +4,5 @@ export declare function useHyperlinkCommon(element: any): {
     sdk: FieldAppSDK;
     isLinkFocused: boolean | undefined;
     pathToElement: import("slate").Path | undefined;
+    isEditorFocused: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "07c583c9bd150caf992c18cdbccc536e8f3a6467"
+  "gitHead": "e9f015ed3812c349512b39f2fd2554dddd7ed8d4"
 }