UX: Prevent context menu overflow outside of container (#168)

discourse · Aug 28, 2023 · 2c50791 · 2c50791
1 parent b470692
commit 2c50791
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
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
@@ -192,13 +192,32 @@ export default class AiHelperContextMenu extends Component {
     this.menuState = this.CONTEXT_MENU_STATES.review;
   }
 
+  handleBoundaries() {
+    const boundaryElement = document
+      .querySelector(".d-editor-textarea-wrapper")
+      .getBoundingClientRect();
+
+    const contextMenuRect = this._contextMenu.getBoundingClientRect();
+
+    if (contextMenuRect.top < boundaryElement.top) {
+      this._contextMenu.classList.add("out-of-bounds");
+    } else if (contextMenuRect.bottom > boundaryElement.bottom) {
+      this._contextMenu.classList.add("out-of-bounds");
+    } else {
+      this._contextMenu.classList.remove("out-of-bounds");
+    }
+  }
+
   @afterRender
   positionContextMenu() {
     this._contextMenu = document.querySelector(".ai-helper-context-menu");
     this.caretCoords = getCaretPosition(this._dEditorInput, {
       pos: caretPosition(this._dEditorInput),
     });
 
+    // prevent overflow of context menu outside of editor
+    this.handleBoundaries();
+
     this.virtualElement = {
       getBoundingClientRect: this.generateGetBoundingClientRect(
         this._contextMenu.clientWidth,

diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -51,6 +51,10 @@
   list-style: none;
   z-index: 999;
 
+  &.out-of-bounds {
+    visibility: hidden;
+  }
+
   ul {
     margin: 0;
     list-style: none;