diff --git a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js index 034e6834..ed9bfa1d 100644 --- a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js +++ b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js @@ -45,6 +45,7 @@ export default class AiHelperContextMenu extends Component { @tracked lastUsedOption = null; @tracked showDiffModal = false; @tracked diff; + @tracked popperPlacement = "top-start"; CONTEXT_MENU_STATES = { triggers: "TRIGGERS", @@ -205,12 +206,21 @@ export default class AiHelperContextMenu extends Component { } handleBoundaries() { - const boundaryElement = document + const textAreaWrapper = document .querySelector(".d-editor-textarea-wrapper") .getBoundingClientRect(); + const buttonBar = document + .querySelector(".d-editor-button-bar") + .getBoundingClientRect(); + + const boundaryElement = { + top: buttonBar.bottom, + bottom: textAreaWrapper.bottom, + }; const contextMenuRect = this._contextMenu.getBoundingClientRect(); + // Hide context menu if it's scrolled out of bounds: if (contextMenuRect.top < boundaryElement.top) { this._contextMenu.classList.add("out-of-bounds"); } else if (contextMenuRect.bottom > boundaryElement.bottom) { @@ -218,6 +228,13 @@ export default class AiHelperContextMenu extends Component { } else { this._contextMenu.classList.remove("out-of-bounds"); } + + // Position context menu at based on if interfering with button bar + if (this.caretCoords.y - contextMenuRect.height < boundaryElement.top) { + this.popperPlacement = "bottom-start"; + } else { + this.popperPlacement = "top-start"; + } } @afterRender @@ -240,7 +257,7 @@ export default class AiHelperContextMenu extends Component { }; this._popper = createPopper(this.virtualElement, this._contextMenu, { - placement: "top-start", + placement: this.popperPlacement, modifiers: [ { name: "offset", diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss index 0f030f06..d4efa827 100644 --- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss +++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss @@ -53,6 +53,7 @@ &.out-of-bounds { visibility: hidden; + pointer-events: none; } ul {