diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js index 8f6212426cf6fefdd509517162e1642ba8aee6fc..c7354b0b4be4addcbf1333a97103907d0c990eca 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 4928a75e0d55c2ed47c1ad81e122144e6ddddb7d..a1e4cb82284d8cf5a32a398cfa2f2c827e389642 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]);