Merge pull request #2137 from tf/hotspot-keyboard-editing

Improve hotspot tooltip keyboard editing
codevise · Aug 1, 2024 · d3c05d7 · d3c05d7
2 parents a4cae0e + b4d1908
commit d3c05d7
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 38 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -32,6 +32,13 @@ import {getTooltipReferencePosition} from './getTooltipReferencePosition';
 
 import styles from './Tooltip.module.css';
 
+const arrowKeys = [
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight'
+];
+
 export function Tooltip({
   area,
   contentElementId, portraitMode, configuration, visible, active,
@@ -124,6 +131,13 @@ export function Tooltip({
     });
   }
 
+  function handleKeyDown(event) {
+    if (arrowKeys.includes(event.key) && isEditable) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
   function presentOrEditing(propertyName) {
     return !utils.isBlankEditableTextValue(tooltipTexts[area.id]?.[propertyName]) ||
            (isEditable && active) ||
@@ -171,32 +185,34 @@ export function Tooltip({
                     <InlineFileRights context="afterElement" items={[{file: tooltipImageFile, label: 'image'}]} />
                   </div>
                 </>}
-               {presentOrEditing('title') &&
-                <h3 id={`hotspots-tooltip-title-${contentElementId}-${area.id}`}>
-                  <Text inline scaleCategory="hotspotsTooltipTitle">
-                    <EditableInlineText value={tooltipTexts[area.id]?.title}
-                                        onChange={value => handleTextChange('title', value)}
-                                        placeholder={t('pageflow_scrolled.inline_editing.type_heading')} />
-                  </Text>
-                </h3>}
-               {presentOrEditing('description') &&
-                <EditableText value={tooltipTexts[area.id]?.description}
-                              onChange={value => handleTextChange('description', value)}
-                              scaleCategory="hotspotsTooltipDescription"
-                              placeholder={t('pageflow_scrolled.inline_editing.type_text')} />}
-               {presentOrEditing('link') &&
-                <Text inline scaleCategory="hotspotsTooltipLink">
-                  <EditableLink href={tooltipLinks[area.id]?.href}
-                                openInNewTab={tooltipLinks[area.id]?.openInNewTab}
-                                linkPreviewDisabled={utils.isBlankEditableTextValue(tooltipTexts[area.id]?.link)}
-                                className={styles.link}
-                                onChange={value => handleLinkChange(value)}>
-                    <EditableInlineText value={tooltipTexts[area.id]?.link}
-                                        onChange={value => handleTextChange('link', value)}
-                                        placeholder={t('pageflow_scrolled.inline_editing.type_text')} />
-                    ›
-                  </EditableLink>
-                </Text>}
+               <div onKeyDown={handleKeyDown}>
+                 {presentOrEditing('title') &&
+                  <h3 id={`hotspots-tooltip-title-${contentElementId}-${area.id}`}>
+                    <Text inline scaleCategory="hotspotsTooltipTitle">
+                      <EditableInlineText value={tooltipTexts[area.id]?.title}
+                                          onChange={value => handleTextChange('title', value)}
+                                          placeholder={t('pageflow_scrolled.inline_editing.type_heading')} />
+                    </Text>
+                  </h3>}
+                 {presentOrEditing('description') &&
+                  <EditableText value={tooltipTexts[area.id]?.description}
+                                onChange={value => handleTextChange('description', value)}
+                                scaleCategory="hotspotsTooltipDescription"
+                                placeholder={t('pageflow_scrolled.inline_editing.type_text')} />}
+                 {presentOrEditing('link') &&
+                  <Text inline scaleCategory="hotspotsTooltipLink">
+                    <EditableLink href={tooltipLinks[area.id]?.href}
+                                  openInNewTab={tooltipLinks[area.id]?.openInNewTab}
+                                  linkPreviewDisabled={utils.isBlankEditableTextValue(tooltipTexts[area.id]?.link)}
+                                  className={styles.link}
+                                  onChange={value => handleLinkChange(value)}>
+                      <EditableInlineText value={tooltipTexts[area.id]?.link}
+                                          onChange={value => handleTextChange('link', value)}
+                                          placeholder={t('pageflow_scrolled.inline_editing.type_text')} />
+                      ›
+                    </EditableLink>
+                  </Text>}
+               </div>
              </div>
            </div>
          </FloatingFocusManager>

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css
@@ -102,12 +102,11 @@
   margin: 0;
 }
 
-.box > h3,
-.box > div {
+.box h3 {
   margin-bottom: 0.5rem;
 }
 
-.box > :last-child {
+.box h3:last-child {
   margin-bottom: 0;
 }
 

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableLink.js
@@ -24,13 +24,6 @@ export function EditableLink({
 
   return (
     <div className={styles.wrapper}>
-      {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"
@@ -39,6 +32,13 @@ export function EditableLink({
           {children}
         </LinkPreview>
       </LinkTooltipProvider>
+      {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} />}
     </div>
   );
 }
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/HoveringToolbar.js b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/HoveringToolbar.js
@@ -43,7 +43,7 @@ export function HoveringToolbar({position}) {
     const rect = domRange.getBoundingClientRect()
     const outerRect = outerRef.current.getBoundingClientRect()
 
-    el.style.opacity = 1;
+    el.style.visibility = 'visible';
     el.style.left = `${rect.left - outerRect.left}px`;
 
     if (position === 'above') {

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.module.css
@@ -32,7 +32,7 @@
   z-index: 2;
   top: -10000px;
   left: -10000px;
-  opacity: 0;
+  visibility: hidden;
   white-space: nowrap;
 }