From 86e77d2b08463839454dc9d6cb65d1d092ccd0cc Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 16 Jul 2024 11:56:08 +0200
Subject: [PATCH] Improve editable link component

* Only show action button when content element is selected

* Make link preview and action button position configurable

REDMINE-20782
---
 .../inlineEditing/ActionButton.module.css     |  5 +++
 .../frontend/inlineEditing/EditableLink.js    | 33 ++++++++++++-------
 .../src/frontend/inlineEditing/LinkTooltip.js |  3 +-
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/ActionButton.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/ActionButton.module.css
index 48fb474d2..bd1a94b47 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/ActionButton.module.css
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/ActionButton.module.css
@@ -34,6 +34,11 @@
   right: -0.8em;
 }
 
+.position-outsideLeft {
+  top: calc(100% + 0.3em);
+  left: 0;
+}
+
 .position-outsideIndented {
   top: calc(100% + 0.3em);
   right: 0.5em;
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js
index 1c519dc85..a189574f7 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js
@@ -2,14 +2,21 @@ import React from 'react';
 
 import {LinkTooltipProvider, LinkPreview} from './LinkTooltip';
 import {ActionButton} from './ActionButton'
+import {useContentElementEditorState} from '../useContentElementEditorState';
 import {useSelectLinkDestination} from './useSelectLinkDestination';
 import {useI18n} from '../i18n';
 
 import styles from './EditableLink.module.css';
 
-export function EditableLink({className, href, openInNewTab, children, linkPreviewDisabled, onChange}) {
+export function EditableLink({
+  className, href, openInNewTab, children, linkPreviewDisabled,
+  onChange,
+  linkPreviewPosition = 'below',
+  actionButtonPosition = 'outside'
+}) {
   const selectLinkDestination = useSelectLinkDestination();
   const {t} = useI18n({locale: 'ui'});
+  const {isSelected} = useContentElementEditorState();
 
   function handleButtonClick() {
     selectLinkDestination().then(onChange, () => {});
@@ -17,17 +24,19 @@ export function EditableLink({className, href, openInNewTab, children, linkPrevi
 
   return (
     <div className={styles.wrapper}>
-      <ActionButton text={href ?
-                          t('pageflow_scrolled.inline_editing.change_link_destination') :
-                          t('pageflow_scrolled.inline_editing.select_link_destination')}
-                    icon="link"
-                    position="outside"
-                    onClick={handleButtonClick} />
-      <LinkTooltipProvider disabled={linkPreviewDisabled} position="below" align="left" gap={5}>
-        <LinkPreview href={href} openInNewTab={openInNewTab}>
-          <span className={className}>
-            {children}
-          </span>
+      {isSelected &&
+       <ActionButton text={href ?
+                           t('pageflow_scrolled.inline_editing.change_link_destination') :
+                           t('pageflow_scrolled.inline_editing.select_link_destination')}
+                     icon="link"
+                     position={actionButtonPosition}
+                     onClick={handleButtonClick} />}
+      <LinkTooltipProvider disabled={linkPreviewDisabled}
+                           position={linkPreviewPosition}
+                           align="left"
+                           gap={5}>
+        <LinkPreview href={href} openInNewTab={openInNewTab} className={className}>
+          {children}
         </LinkPreview>
       </LinkTooltipProvider>
     </div>
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.js b/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.js
index 07f11ef17..d379d914b 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.js
@@ -71,11 +71,12 @@ export function LinkTooltipProvider({
   );
 }
 
-export function LinkPreview({href, openInNewTab, children}) {
+export function LinkPreview({href, openInNewTab, children, className}) {
   const {activate, deactivate} = useContext(UpdateContext);
   const ref = useRef();
   return (
     <span ref={ref}
+          className={className}
           onMouseEnter={() => activate(href, openInNewTab, ref)}
           onMouseLeave={deactivate}
           onMouseDown={deactivate}>