Untitled

(function() {
    CodeMirror.defineExtension("inlineSuggestion", function(options) {
        const editor = this;

        function fetchSuggestion(query) {
            // Hardcoded suggestion for demo purposes
            return new Promise((resolve) => {
                resolve("SELECT * FROM demo_table");
            });
        }

        function showSuggestion(suggestion) {
            const cursor = editor.getCursor();
            const token = editor.getTokenAt(cursor);

            const suggestionWidget = document.createElement("span");
            suggestionWidget.className = "CodeMirror-suggestion";
            suggestionWidget.textContent = suggestion;

            const coords = editor.cursorCoords();
            suggestionWidget.style.position = 'absolute';
            suggestionWidget.style.left = `${coords.left}px`;
            suggestionWidget.style.top = `${coords.bottom}px`;

            editor.addWidget(cursor, suggestionWidget, false);

            suggestionWidget.onclick = () => {
                editor.replaceRange(suggestion, token.start, token.end);
                suggestionWidget.remove();
            };
        }

        editor.on("inputRead", (cm, event) => {
            const cursor = editor.getCursor();
            const token = editor.getTokenAt(cursor);

            fetchSuggestion(token.string).then((suggestion) => {
                showSuggestion(suggestion);
            });
        });
    });
})();