marathi_typing 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f7da6deb5a3d1bd52b560302e0e92b442c5932f73894c966381c7241125c18e
-  data.tar.gz: c56dbcc87be46f67e6d35107ecfb148280422903a86f1dd76b453cef6bd4f99f
+  metadata.gz: 8f9141d8b16760161d8c02f9611f2b28faf4c51430bf02dc4c9ea958cd5aa2c6
+  data.tar.gz: d080cc2cdc1cd09aac409e3dee8d069205f3582950aefe0828787f96c08071ee
 SHA512:
-  metadata.gz: 74094b83da6d95f2706932319064aa9381b6dc8cdd50b792ed434f0d3826e40589ad94a3b0a4623aac0840a780929c3a0a5ea3ccfa14c10148b78dd82421dee4
-  data.tar.gz: 5acfb3c4a6dcd827865956863229ea4c147663e01123e9f47964486438d43735d99b175c479126047e05732aefc00a36253a8b9e9cef5e44c267ceb068fd033f
+  metadata.gz: d0cbb74bb7d19520fdd564cc6eeaecca4504d96cbcf0638e4c50f9c13f94cb627bb600d7afa5e13dd28e69790dc6a765dbf81dfe6fd3db79e964101b8d7ba4ed
+  data.tar.gz: 37d6525b0e2d1e04152d79e710666f18fd5feb208e18852e0de93dd9c55a0b46f44437ea475974f0b03cbc6b470b61e3748c96810ce905231ea50cab9b4e48f1

data/lib/generators/marathi_typing/templates/marathi_typing_controller.js

@@ -1,7 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["input"]
+  static targets = ["input"];
+
   timeout = null
 
 
@@ -14,16 +15,13 @@ export default class extends Controller {
     this.suggestionsTarget = this.buildSuggestionsBox()
 
     input.addEventListener("keydown", (e) => {
-
       if (e.key === " ") {
         this.skipNextSuggestionFetch = true;
       }
     });
 
     input.addEventListener("input", (e) => {
-
       if (this.skipNextSuggestionFetch) {
-
         this.skipNextSuggestionFetch = false;
         return;
       }
@@ -33,13 +31,11 @@ export default class extends Controller {
     input.addEventListener("keyup", (e) => {
 
       if (e.key === " ") {
-
         this.selectFirstSuggestion();
       }
     });
 
     document.addEventListener("click", this.handleClickOutside);
-
   }
 
   fetchSuggestions(event) {
@@ -48,14 +44,21 @@ export default class extends Controller {
 
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
-      const lastWord = value.split(" ").pop()
 
-      fetch(`${this.apiUrl}?text=${lastWord}&itc=mr-t-i0-und&num=5&cp=0&cs=1&ie=utf-8&oe=utf-8&app=demopage`)
+      const { word: currentWord } = this.getCurrentWordAtCursor(this.inputTarget);
+
+      console.log("currentWord: ", currentWord)
+
+      if (!currentWord || !/^[a-zA-Z]+$/.test(currentWord)) return;
+      // if (!currentWord) return;
+
+
+      fetch(`${this.apiUrl}?text=${currentWord}&itc=mr-t-i0-und&num=5&cp=0&cs=1&ie=utf-8&oe=utf-8&app=demopage`)
         .then(res => res.json())
         .then(data => {
           if (data[0] === "SUCCESS") {
             const suggestions = data[1][0][1]
-            this.showSuggestions(suggestions, lastWord)
+            this.showSuggestions(suggestions, currentWord)
           }
         })
     }, 300)
@@ -66,13 +69,12 @@ export default class extends Controller {
     const box = document.createElement("div")
     box.className = "marathi-suggestions";
     box.style.position = "absolute";
-    box.style.background = "#fff";
+    box.style.background = "#808080";
     box.style.border = "0px solid #ccc";
     box.style.zIndex = "9999";
     box.style.padding = "0px";
     box.style.color = "black";
 
-    // Get the position of the input field
     const rect = this.inputTarget.getBoundingClientRect();
     const scrollOffset = window.scrollY || window.pageYOffset;
 
@@ -85,10 +87,7 @@ export default class extends Controller {
   }
 
   showSuggestions(suggestions, lastWord) {
-    this.suggestionsTarget.innerHTML = ""
-    this.suggestionsTarget.style.border = "1px solid #ccc";
-    this.suggestionsTarget.style.border = "4px";
-
+    this.showSuggestionsBox();
 
     suggestions.forEach(suggestion => {
       const option = document.createElement("div")
@@ -107,37 +106,55 @@ export default class extends Controller {
     this.suggestionsTarget.appendChild(originalOption);
   }
 
-  selectFirstSuggestion() {
 
+
+  selectFirstSuggestion() {
     if (!this.suggestionsTarget || this.suggestionsTarget.children.length === 0) return;
 
     const firstOption = this.suggestionsTarget.querySelector(".marathi-suggestion");
 
     if (firstOption) {
       const suggestion = firstOption.textContent;
-      const value = this.inputTarget.value.trim();
-      const lastWord = value.split(" ").pop();
-      this.selectSuggestion(suggestion, lastWord);
+      const input = this.inputTarget;
+      let { word: currentWord } = this.getCurrentWordAtCursor(input);
+
+      // If space was pressed, caret is after the space => no current word
+      if (!currentWord) {
+        const valueBeforeCursor = input.value.slice(0, input.selectionStart).trimEnd();
+        const words = valueBeforeCursor.split(/\s+/);
+        currentWord = words[words.length - 1] || "";
+      }
+
+
+      if (!currentWord) return;
+
+      console.log("currentWord:", currentWord, " suggestion:", suggestion);
+
+
+      this.selectSuggestion(suggestion, currentWord);
     }
   }
 
+  selectSuggestion(selected, originalWord) {
+    const input = this.inputTarget;
+    const { wordStart, wordEnd } = this.getCurrentWordAtCursor(input);
 
-  selectSuggestion(selected, lastWord) {
-    let currentValue = this.inputTarget.value;
-    const trailingSpace = currentValue.endsWith(" ") ? " " : "";
+    if (wordStart == null || wordEnd == null) return;
 
-    // Remove trailing space temporarily
-    currentValue = currentValue.trimEnd();
+    const value = input.value;
 
-    // Replace the last word
-    const newValue = currentValue.replace(new RegExp(`${lastWord}$`), selected);
+    // Reconstruct the value with the selected word
+    const newValue = value.slice(0, wordStart) + selected + value.slice(wordEnd);
 
-    // Re-apply trailing space if needed
-    this.inputTarget.value = newValue + trailingSpace;
+    // Update the input value and set caret after inserted suggestion
+    input.value = newValue;
+
+    // Move caret to after the inserted suggestion
+    const caretPos = wordStart + selected.length;
+    input.setSelectionRange(caretPos, caretPos);
+
+    this.hideSuggestions();
 
-    this.suggestionsTarget.innerHTML = "";
-    this.suggestionsTarget.style.border = "0";
-    this.suggestionsTarget.style.padding = "0";
   }
 
   handleClickOutside = (event) => {
@@ -145,12 +162,56 @@ export default class extends Controller {
     const isClickInsideSuggestions = this.suggestionsTarget?.contains(event.target);
 
     if (!isClickInsideInput && !isClickInsideSuggestions) {
-      this.suggestionsTarget.innerHTML = "";
-      this.suggestionsTarget.style.border = "0";
-      this.suggestionsTarget.style.padding = "0";
+      this.hideSuggestions();
     }
   };
 
 
-}
+  getCurrentWordAtCursor(input) {
+    const value = input.value;
+    let cursorPos = input.selectionStart;
+
+    // If cursor is just after a space, move it back to find previous word
+    if (cursorPos > 0 && value[cursorPos - 1] === " ") {
+      cursorPos--;
+    }
+
+    // Skip any Devanagari characters while going backwards
+    let wordStart = cursorPos;
+    while (
+      wordStart > 0 &&
+      value[wordStart - 1].match(/[a-zA-Z0-9]/) // Only count English letters and numbers
+    ) {
+      wordStart--;
+    }
+
+    // Skip Devanagari going forward too
+    let wordEnd = cursorPos;
+    while (
+      wordEnd < value.length &&
+      value[wordEnd].match(/[a-zA-Z0-9]/)
+    ) {
+      wordEnd++;
+    }
+
+
+    let word = value.slice(wordStart, wordEnd);
+
+    return { word, wordStart, wordEnd };
+  }
 
+
+
+  hideSuggestions() {
+    this.suggestionsTarget.innerHTML = "";
+    this.suggestionsTarget.style.border = "0";
+    this.suggestionsTarget.style.padding = "0";
+  }
+
+  showSuggestionsBox() {
+    this.suggestionsTarget.innerHTML = "";
+    this.suggestionsTarget.style.border = "1px solid #0a0a0a";
+    this.suggestionsTarget.style.padding = "4px";
+  }
+
+}

data/lib/marathi_typing/version.rb

@@ -1,3 +1,3 @@
 module MarathiTyping
-  VERSION = '0.1.3'
+  VERSION = '0.2.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: marathi_typing
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 platform: ruby
 authors:
 - Ajit Dhanje