refactor: hyperlink extract common logic [TOL-1637] (#1568)

refactor: hyperlink extract common logic
contentful · Jan 4, 2024 · 2410b7a · 2410b7a
1 parent 03940a9
commit 2410b7a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 31 deletions.
diff --git a/packages/rich-text/src/plugins/Hyperlink/components/EntityHyperlink.tsx b/packages/rich-text/src/plugins/Hyperlink/components/EntityHyperlink.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
 
-import { FieldAppSDK, Link } from '@contentful/app-sdk';
+import { Link } from '@contentful/app-sdk';
 import { Text } from '@contentful/f36-components';
 
-import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { findNodePath, isChildPath } from '../../../internal/queries';
 import { Element, RenderElementProps } from '../../../internal/types';
-import { useSdkContext } from '../../../SdkProvider';
 import { useLinkTracking } from '../../links-tracking';
 import { useEntityInfo } from '../useEntityInfo';
 import { handleEditLink, handleRemoveLink } from './linkHandlers';
 import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
+import { useHyperlinkCommon } from './useHyperlinkCommon';
 
 export type HyperlinkElementProps = {
   element: Element & {
@@ -32,13 +30,9 @@ export type HyperlinkElementProps = {
 };
 
 export function EntityHyperlink(props: HyperlinkElementProps) {
-  const editor = useContentfulEditor();
-  const sdk: FieldAppSDK = useSdkContext();
-  const focus = editor.selection?.focus;
-  const { target } = props.element.data;
+  const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
   const { onEntityFetchComplete } = useLinkTracking();
-  const pathToElement = findNodePath(editor, props.element);
-  const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
+  const { target } = props.element.data;
 
   const tooltipContent = useEntityInfo({
     target,

diff --git a/packages/rich-text/src/plugins/Hyperlink/components/ResourceHyperlink.tsx b/packages/rich-text/src/plugins/Hyperlink/components/ResourceHyperlink.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
 
-import { FieldAppSDK, Link } from '@contentful/app-sdk';
+import { Link } from '@contentful/app-sdk';
 import { Text } from '@contentful/f36-components';
 
-import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { findNodePath, isChildPath } from '../../../internal/queries';
 import { Element, RenderElementProps } from '../../../internal/types';
-import { useSdkContext } from '../../../SdkProvider';
 import { useLinkTracking } from '../../links-tracking';
 import { useResourceEntityInfo } from '../useResourceEntityInfo';
 import { handleEditLink, handleRemoveLink } from './linkHandlers';
 import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
+import { useHyperlinkCommon } from './useHyperlinkCommon';
 
 export type ResourceHyperlinkProps = {
   element: Element & {
@@ -31,13 +29,9 @@ export type ResourceHyperlinkProps = {
 };
 
 export function ResourceHyperlink(props: ResourceHyperlinkProps) {
-  const editor = useContentfulEditor();
-  const sdk: FieldAppSDK = useSdkContext();
-  const focus = editor.selection?.focus;
-  const { target } = props.element.data;
+  const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
   const { onEntityFetchComplete } = useLinkTracking();
-  const pathToElement = findNodePath(editor, props.element);
-  const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
+  const { target } = props.element.data;
 
   const tooltipContent = useResourceEntityInfo({ target, onEntityFetchComplete });
 

diff --git a/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx b/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
 
-import { FieldAppSDK, Link } from '@contentful/app-sdk';
+import { Link } from '@contentful/app-sdk';
 import { TextLink } from '@contentful/f36-components';
 
-import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { findNodePath, isChildPath } from '../../../internal/queries';
 import { Element, RenderElementProps } from '../../../internal/types';
-import { useSdkContext } from '../../../SdkProvider';
 import { handleCopyLink, handleEditLink, handleRemoveLink } from './linkHandlers';
 import { LinkPopover } from './LinkPopover';
 import { styles } from './styles';
+import { useHyperlinkCommon } from './useHyperlinkCommon';
 
-type HyperlinkElementProps = {
+type UrlHyperlinkProps = {
   element: Element & {
     data: {
       uri?: string;
@@ -29,13 +27,9 @@ type HyperlinkElementProps = {
   children: Pick<RenderElementProps, 'children'>;
 };
 
-export function UrlHyperlink(props: HyperlinkElementProps) {
-  const editor = useContentfulEditor();
-  const sdk: FieldAppSDK = useSdkContext();
-  const focus = editor.selection?.focus;
+export function UrlHyperlink(props: UrlHyperlinkProps) {
+  const { editor, sdk, isLinkFocused, pathToElement } = useHyperlinkCommon(props.element);
   const uri = props.element.data?.uri;
-  const pathToElement = findNodePath(editor, props.element);
-  const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
 
   const popoverText = (
     <TextLink className={styles.openLink} href={uri} rel="noopener noreferrer" target="_blank">

diff --git a/packages/rich-text/src/plugins/Hyperlink/components/useHyperlinkCommon.tsx b/packages/rich-text/src/plugins/Hyperlink/components/useHyperlinkCommon.tsx
@@ -0,0 +1,15 @@
+import { FieldAppSDK } from '@contentful/app-sdk';
+
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { findNodePath, isChildPath } from '../../../internal/queries';
+import { useSdkContext } from '../../../SdkProvider';
+
+export function useHyperlinkCommon(element) {
+  const editor = useContentfulEditor();
+  const sdk: FieldAppSDK = useSdkContext();
+  const focus = editor.selection?.focus;
+  const pathToElement = findNodePath(editor, element);
+  const isLinkFocused = pathToElement && focus && isChildPath(focus.path, pathToElement);
+
+  return { editor, sdk, isLinkFocused, pathToElement };
+}