DEV: Dynamically set popper placement (#174)

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",

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -53,6 +53,7 @@
 
   &.out-of-bounds {
     visibility: hidden;
+    pointer-events: none;
   }
 
   ul {