Merge pull request #2129 from tf/editable-link-improvements

Improve editable link component
codevise · Jul 16, 2024 · 0640ffb · 0640ffb
2 parents c8522a7 + 86e77d2
commit 0640ffb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 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
@@ -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
@@ -2,32 +2,41 @@ 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, () => {});
   }
 
   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
@@ -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}>