marathi_typing 0.1.3 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f7da6deb5a3d1bd52b560302e0e92b442c5932f73894c966381c7241125c18e
-  data.tar.gz: c56dbcc87be46f67e6d35107ecfb148280422903a86f1dd76b453cef6bd4f99f
+  metadata.gz: bea1ae0ad19188d8d72b79dd93e2458edcb7815de0b9a2eef7a068467cae9ad2
+  data.tar.gz: 0df203a4cc8a8d1e6b5a62684c38b116ccaa657b80c8cc1419b6b88c5d1d3e4d
 SHA512:
-  metadata.gz: 74094b83da6d95f2706932319064aa9381b6dc8cdd50b792ed434f0d3826e40589ad94a3b0a4623aac0840a780929c3a0a5ea3ccfa14c10148b78dd82421dee4
-  data.tar.gz: 5acfb3c4a6dcd827865956863229ea4c147663e01123e9f47964486438d43735d99b175c479126047e05732aefc00a36253a8b9e9cef5e44c267ceb068fd033f
+  metadata.gz: dc082fc3eaaac92ecee8282cda4fb7adbdc8264ab33594f7888bef997f6968e074c207015f12ad918f70685481563ea2113d1f668e57c130583811b021ba8d75
+  data.tar.gz: b24417a8cfc3a182135f0f37144d074f4d8adb43ccd648595e761f532f75c4a01c684f7cf5ab5c6b115ac89168b21846a255f65b93dafdc69a14f2fdb9823132

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

@@ -1,9 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["input"]
-  timeout = null
+  static targets = ["input"];
 
+  timeout = null
 
   connect() {
 
@@ -14,16 +14,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 +30,11 @@ export default class extends Controller {
     input.addEventListener("keyup", (e) => {
 
       if (e.key === " ") {
-
         this.selectFirstSuggestion();
       }
     });
 
     document.addEventListener("click", this.handleClickOutside);
-
   }
 
   fetchSuggestions(event) {
@@ -48,47 +43,54 @@ 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;
+
+      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)
   }
 
   buildSuggestionsBox() {
-
-    const box = document.createElement("div")
+    const box = document.createElement("div");
     box.className = "marathi-suggestions";
     box.style.position = "absolute";
-    box.style.background = "#fff";
+    box.style.background = "rgb(239 238 236)";
     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
+    // Get the input's position relative to the viewport
     const rect = this.inputTarget.getBoundingClientRect();
-    const scrollOffset = window.scrollY || window.pageYOffset;
 
-    box.style.top = `${rect.bottom + scrollOffset}px`;
-    box.style.left = `${rect.left}px`; // 
+    // Calculate position relative to the document
+    const scrollTop = window.scrollY || window.pageYOffset;
+    const scrollLeft = window.scrollX || window.pageXOffset;
+
+    // Set position just below the input
+    box.style.top = `${rect.bottom + scrollTop}px`;
+    box.style.left = `${rect.left + scrollLeft}px`;
 
-    this.element.parentElement.appendChild(box)
+    // Append to body to avoid being affected by parent positioning
+    document.body.appendChild(box);
 
-    return box
+    return box;
   }
 
-  showSuggestions(suggestions, lastWord) {
-    this.suggestionsTarget.innerHTML = ""
-    this.suggestionsTarget.style.border = "1px solid #ccc";
-    this.suggestionsTarget.style.border = "4px";
 
+  showSuggestions(suggestions, lastWord) {
+    this.showSuggestionsBox();
 
     suggestions.forEach(suggestion => {
       const option = document.createElement("div")
@@ -108,36 +110,48 @@ export default class extends Controller {
   }
 
   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;
+
+      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 +159,65 @@ 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() {
+
+    const rect = this.inputTarget.getBoundingClientRect();
+
+    // Calculate position relative to the document
+    const scrollTop = window.scrollY || window.pageYOffset;
+    const scrollLeft = window.scrollX || window.pageXOffset;
+
+    // Set position just below the input
+    this.suggestionsTarget.style.top = `${rect.bottom + scrollTop}px`;
+    this.suggestionsTarget.style.left = `${rect.left + scrollLeft}px`;
+
+    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.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marathi_typing
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.1
 platform: ruby
 authors:
 - Ajit Dhanje
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-15 00:00:00.000000000 Z
+date: 2025-04-17 00:00:00.000000000 Z
 dependencies: []
 description:
 email: