From c289e53e420598ba97a0d535b02fd0175d661c63 Mon Sep 17 00:00:00 2001
From: Vukile Langa <vukilelanga@me.com>
Date: Sun, 9 Jun 2024 16:39:57 +0200
Subject: [PATCH] fix(components): use sibling figcaption
---
wax-prosemirror-services/src/ImageService/AltComponent.js | 6 ++++--
.../src/ImageService/LongDescComponent.js | 7 ++++---
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js
index 8f6212426..c7354b0b4 100644
--- a/wax-prosemirror-services/src/ImageService/AltComponent.js
+++ b/wax-prosemirror-services/src/ImageService/AltComponent.js
@@ -7,9 +7,9 @@ const StyledInputAlt = styled.input`
background: #e2ebff;
border: none;
box-sizing: border-box;
- width: 240px;
min-height: 20px;
padding: 4px;
+ width: 240px;
&:focus {
outline: none;
@@ -50,13 +50,15 @@ export default ({ setPosition, position }) => {
`[data-fileid='${selection.node.attrs.fileid}']`,
);
- const figCaption = document.getElementsByTagName('figcaption')[0];
+ const siblings = [...image.parentElement.children];
+ const figCaption = siblings.find(s => s.localName === 'figcaption');
if (!image || !figCaption) return;
const imagePosition = image.getBoundingClientRect();
const figCaptionPosition = figCaption.getBoundingClientRect().height - 5;
const left = imagePosition.left - WaxSurface.left;
const top = imagePosition.bottom - WaxSurface.top - figCaptionPosition;
+
setPosition({ ...position, left, top });
}, [position.left, position.top]);
diff --git a/wax-prosemirror-services/src/ImageService/LongDescComponent.js b/wax-prosemirror-services/src/ImageService/LongDescComponent.js
index 4928a75e0..a1e4cb822 100644
--- a/wax-prosemirror-services/src/ImageService/LongDescComponent.js
+++ b/wax-prosemirror-services/src/ImageService/LongDescComponent.js
@@ -53,13 +53,14 @@ export default ({ setPosition, position }) => {
`[data-fileid='${selection.node.attrs.fileid}']`,
);
- const figCaption = document.getElementsByTagName('figcaption')[0];
+ const siblings = [...image.parentElement.children];
+ const figCaption = siblings.find(s => s.localName === 'figcaption');
if (!image || !figCaption) return;
const imagePosition = image.getBoundingClientRect();
- const figCaptionPosition = figCaption.getBoundingClientRect().bottom + 5;
+ const figCaptionPosition = figCaption.getBoundingClientRect().height + 10;
const left = imagePosition.left - WaxSurface.left;
- const top = figCaptionPosition - WaxSurface.top;
+ const top = imagePosition.bottom - WaxSurface.top + figCaptionPosition;
setPosition({ ...position, left, top });
}, [position.left, position.top]);
--
GitLab