Discource-C
/
discourse-ai
mirror of https://github.com/discourse/discourse-ai.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Keegan George 2023-08-28 13:31:21 -07:00 committed by GitHub
parent b470692409
commit 2c50791f26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
View File

@ -192,6 +192,22 @@ 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");
@ -199,6 +215,9 @@ export default class AiHelperContextMenu extends Component {
pos: caretPosition(this._dEditorInput),
});
// prevent overflow of context menu outside of editor
this.handleBoundaries();
this.virtualElement = {
getBoundingClientRect: this.generateGetBoundingClientRect(
this._contextMenu.clientWidth,

4
assets/stylesheets/modules/ai-helper/common/ai-helper.scss
View File

@ -51,6 +51,10 @@
list-style: none;
z-index: 999;
&.out-of-bounds {
visibility: hidden;
}
ul {
margin: 0;
list-style: none;