slash command dropdown position inside editor

[Rithwinsai2]

📝 Ask a question

Move dropdown position above and below inside editor.

_getBalloonPosition() {
const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;
const viewportHeight = window.innerHeight;
const editorRect = editor.ui.view.editable.element.getBoundingClientRect();
const editorBottom = editorRect.bottom;

    const target = () => {
        const range = view.domConverter.viewRangeToDom(viewDocument.selection.getFirstRange());
        const rect = range.getBoundingClientRect(); 

        if (rect.top === 0 && rect.left === 0 && rect.height === 0 && rect.width === 0) {
            return this._getEditorPosition(editorRect, viewportHeight);
        }

        let top = rect.top + rect.height + 10;

        if (top + 100 > editorBottom) { 
            top = rect.top - 100 - 10; 
        }
        if (top + 100 > viewportHeight) { 
            top = viewportHeight - 100 - 10;
        }

        if (top < 100) {
            top = 100; 
        }

        const left = Math.max(rect.left, editorRect.left);  
        const right = Math.min(rect.right, editorRect.right); 

        return { top, left, right };
    };

    return { target };
}

_getEditorPosition(editorRect, viewportHeight) {
    let top = editorRect.top + editorRect.height + 10; 

    if (top + 100 > viewportHeight) {
        top = viewportHeight - 100 - 10; 
    }
    const left = editorRect.left;
    const right = editorRect.right;

    return {left, right };
}

actual outpt:
7f-4b83-8e0a-343670cdd0cf)

expected output: