From 2af942c141c2836f9936bd4b52b4927c2662fcd7 Mon Sep 17 00:00:00 2001
From: Yves Rijckaert <hi@yvesrijckaert.com>
Date: Mon, 13 Nov 2023 15:23:09 +0100
Subject: [PATCH] feat: hyperlink edit popover modal

---
 .../Hyperlink/components/UrlHyperlink.tsx     | 82 +++++++++++++------
 .../plugins/Hyperlink/components/styles.ts    |  6 ++
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx b/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx
index 42f828a369..79bcda4574 100644
--- a/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx
+++ b/packages/rich-text/src/plugins/Hyperlink/components/UrlHyperlink.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
 import { FieldAppSDK, Link } from '@contentful/app-sdk';
-import { Tooltip, TextLink } from '@contentful/f36-components';
+import { TextLink, Popover, IconButton, Tooltip, Flex, Text } from '@contentful/f36-components';
+import { EditIcon, LinkIcon } from '@contentful/f36-icons';
+import { Path } from 'slate';
 
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
-import { fromDOMPoint } from '../../../internal';
+import { findNodePath } from '../../../internal/queries';
 import { Element, RenderElementProps } from '../../../internal/types';
 import { useSdkContext } from '../../../SdkProvider';
 import { addOrEditLink } from '../HyperlinkModal';
@@ -30,37 +32,63 @@ type HyperlinkElementProps = {
 
 export function UrlHyperlink(props: HyperlinkElementProps) {
   const editor = useContentfulEditor();
+  const { focus } = editor.selection;
   const sdk: FieldAppSDK = useSdkContext();
   const { uri } = props.element.data;
+  const pathToElement = findNodePath(editor, props.element);
 
-  function handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    event.preventDefault();
-    event.stopPropagation();
+  const isLinkFocused = pathToElement && Path.isChild(focus.path, pathToElement);
+
+  function handleClick() {
     if (!editor) return;
-    const p = fromDOMPoint(editor, [event.target as Node, 0], {
-      exactMatch: false,
-      suppressThrow: false,
-    });
-    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p?.path);
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
   }
 
   return (
-    <Tooltip
-      usePortal
-      content={uri}
-      targetWrapperClassName={styles.hyperlinkWrapper}
-      placement="bottom"
-      maxWidth="min-content"
-    >
-      <TextLink
-        as="a"
-        href={uri}
-        rel="noopener noreferrer"
-        onClick={handleClick}
-        className={styles.hyperlink}
-      >
-        {props.children}
-      </TextLink>
-    </Tooltip>
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- we don't want to autofocus the popover
+    <Popover autoFocus={false} isOpen={isLinkFocused}>
+      <Popover.Trigger>
+        <TextLink as="a" href={uri} rel="noopener noreferrer" className={styles.hyperlink}>
+          {props.children}
+        </TextLink>
+      </Popover.Trigger>
+      <Popover.Content className={styles.popover}>
+        <Flex
+          alignItems="center"
+          paddingTop="spacing2Xs"
+          paddingBottom="spacing2Xs"
+          paddingRight="spacing2Xs"
+          paddingLeft="spacingXs"
+        >
+          <Text
+            marginLeft="spacingXs"
+            marginRight="spacingXs"
+            fontColor="blue600"
+            fontWeight="fontWeightMedium"
+          >
+            {uri}
+          </Text>
+          <Tooltip placement="bottom" content="Edit link" usePortal>
+            <IconButton
+              className={styles.iconButton}
+              onClick={handleClick}
+              size="small"
+              variant="transparent"
+              aria-label="Edit link"
+              icon={<EditIcon size="tiny" />}
+            />
+          </Tooltip>
+          <Tooltip placement="bottom" content="Remove link" usePortal>
+            <IconButton
+              className={styles.iconButton}
+              size="small"
+              variant="transparent"
+              aria-label="Remove link"
+              icon={<LinkIcon size="tiny" />}
+            />
+          </Tooltip>
+        </Flex>
+      </Popover.Content>
+    </Popover>
   );
 }
diff --git a/packages/rich-text/src/plugins/Hyperlink/components/styles.ts b/packages/rich-text/src/plugins/Hyperlink/components/styles.ts
index f92388e241..38b42f0674 100644
--- a/packages/rich-text/src/plugins/Hyperlink/components/styles.ts
+++ b/packages/rich-text/src/plugins/Hyperlink/components/styles.ts
@@ -9,6 +9,12 @@ export const styles = {
       fontSize: 'inherit !important',
     },
   }),
+  iconButton: css({
+    padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,
+  }),
+  popover: css({
+    zIndex: tokens.zIndexModal,
+  }),
   hyperlink: css({
     fontSize: 'inherit !important',
     display: 'inline !important',