Better suggestion accept on mobile and word wrap offset fix

This commit is contained in:
N0\A
2026-01-09 00:24:38 +01:00
parent 5bd7ccf76a
commit 87c56ba2f8
3 changed files with 70 additions and 70 deletions

View File

@@ -14,7 +14,6 @@ document.addEventListener("DOMContentLoaded", () => {
const generateBtn = document.getElementById("generate-more-btn");
const sidebarToggle = document.getElementById("sidebar-toggle");
const sidebar = document.getElementById("sidebar");
const acceptSuggestionBtn = document.getElementById("accept-suggestion-btn");
let currentSuggestion = "";
let isFetching = false;
@@ -101,15 +100,29 @@ document.addEventListener("DOMContentLoaded", () => {
};
const updateSuggestion = () => {
suggestionOverlay.innerHTML = "";
const editorText = editor.value;
const space = editorText.length > 0 && !/\s$/.test(editorText) ? " " : "";
suggestionOverlay.textContent = editorText + space + currentSuggestion;
// Show/hide accept button
// Create invisible text span to match editor content exactly
const textSpan = document.createElement("span");
textSpan.textContent = editorText + space;
textSpan.style.color = "transparent";
suggestionOverlay.appendChild(textSpan);
if (currentSuggestion) {
acceptSuggestionBtn.classList.add("visible");
} else {
acceptSuggestionBtn.classList.remove("visible");
const suggestionSpan = document.createElement("span");
suggestionSpan.textContent = currentSuggestion;
suggestionSpan.className = "suggestion-highlight";
// Add Tab Icon (Better SVG for Tab Key)
const iconSpan = document.createElement("span");
iconSpan.style.pointerEvents = "none"; // Ensure clicks pass through to suggestionSpan
iconSpan.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tab-icon"><path d="M21 9V15"/><path d="M3 12H17"/><path d="m14 9 3 3-3 3"/></svg>`;
suggestionSpan.appendChild(iconSpan);
suggestionOverlay.appendChild(suggestionSpan);
}
};
@@ -145,8 +158,9 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
acceptSuggestionBtn.addEventListener("click", () => {
if (currentSuggestion) {
// Handle click on suggestion
suggestionOverlay.addEventListener("click", (e) => {
if (e.target.classList.contains("suggestion-highlight")) {
insertText(currentSuggestion);
fetchPrediction(editor.value);
editor.focus();