diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js index 43542b354..dd4ba8a3e 100644 --- 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({ } - {presentOrEditing('title') && -

- - handleTextChange('title', value)} - placeholder={t('pageflow_scrolled.inline_editing.type_heading')} /> - -

} - {presentOrEditing('description') && - handleTextChange('description', value)} - scaleCategory="hotspotsTooltipDescription" - placeholder={t('pageflow_scrolled.inline_editing.type_text')} />} - {presentOrEditing('link') && - - handleLinkChange(value)}> - handleTextChange('link', value)} - placeholder={t('pageflow_scrolled.inline_editing.type_text')} /> - › - - } +
+ {presentOrEditing('title') && +

+ + handleTextChange('title', value)} + placeholder={t('pageflow_scrolled.inline_editing.type_heading')} /> + +

} + {presentOrEditing('description') && + handleTextChange('description', value)} + scaleCategory="hotspotsTooltipDescription" + placeholder={t('pageflow_scrolled.inline_editing.type_text')} />} + {presentOrEditing('link') && + + handleLinkChange(value)}> + handleTextChange('link', value)} + placeholder={t('pageflow_scrolled.inline_editing.type_text')} /> + › + + } +
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css index 6bff9bc90..150baac64 100644 --- 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 index a189574f7..f28024af5 100644 --- 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 (
- {isSelected && - } + {isSelected && + }
); } diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/HoveringToolbar.js b/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/HoveringToolbar.js index b0feac74a..d26e49d91 100644 --- 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 index 681ffc95e..fb7ae99c5 100644 --- 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; }