diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 273352d9a01bf..273ee1093c650 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -45,6 +45,7 @@ export const image = { this.onKeyDown = this.onKeyDown.bind( this ); this.openModal = this.openModal.bind( this ); this.closeModal = this.closeModal.bind( this ); + this.anchorRef = null; this.state = { modal: false, }; @@ -95,6 +96,22 @@ export const image = { this.setState( { modal: false } ); } + componentDidMount() { + this.anchorRef = getRange(); + } + + componentDidUpdate( prevProps ) { + // When the popover is open or when the selected image changes, + // update the anchorRef. + if ( + ( ! prevProps.isObjectActive && this.props.isObjectActive ) || + prevProps.activeObjectAttributes.url !== + this.props.activeObjectAttributes.url + ) { + this.anchorRef = getRange(); + } + } + render() { const { value, @@ -151,7 +168,7 @@ export const image = { { // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar