If-User-Types-Punctuation-Adding--That-Punctuation-For-Every-Suggestion

README.md

@@ -183,6 +183,7 @@ const data = await getTransliterateSuggestions(
     numOptions: 5, // number of suggestions to fetch
     showCurrentWordAsLastSuggestion: true, // add the word as the last suggestion
     lang: "hi", // target language
+    punctuationsToBeHandledAtEndOfWord: [",", '"'] // some punctuations may not be properly handled by transliterate pass them here
   },
 );
 ```
@@ -209,6 +210,7 @@ For a full example, take a look at the `example` folder
 | triggerKeys                      |           | `KEY_SPACE, KEY_ENTER, KEY_TAB, KEY_RETURN` | Keys which when pressed, input the current selection to the textbox                                                                  |
 | insertCurrentSelectionOnBlur     |           | `true`                                      | Should the current selection be inserted when `blur` event occurs                                                                    |
 | showCurrentWordAsLastSuggestion  |           | `true`                                      | Show current input as the last option in the suggestion box                                                                          |
+| punctuationsToBeHandledAtEndOfWord  |           | `[',', '"']`                                      | Last punctation mark will be truncated and added back when the user types the punctation                                                                          |
 
 ### Supported Languages
 

src/index.tsx

@@ -39,6 +39,7 @@ export const ReactTransliterate = ({
   ],
   insertCurrentSelectionOnBlur = true,
   showCurrentWordAsLastSuggestion = true,
+  punctuationsToBeHandledAtEndOfWord = [",", '"'],
   enabled = true,
   ...rest
 }: ReactTransliterateProps): JSX.Element => {
@@ -110,6 +111,7 @@ export const ReactTransliterate = ({
       numOptions,
       showCurrentWordAsLastSuggestion,
       lang,
+      punctuationsToBeHandledAtEndOfWord,
     });
     setOptions(data);
   };

src/interfaces/Props.ts

@@ -87,6 +87,13 @@ export interface ReactTransliterateProps
    */
   showCurrentWordAsLastSuggestion?: boolean;
 
+  /**
+   * Last punctation mark will be truncated and added back when the user types the punctation
+   * @type string[]
+   */
+  punctuationsToBeHandledAtEndOfWord?: string[];
+
+
   /**
    * Control whether suggestions should be shown
    * @type boolean

src/util/suggestions-util.ts

@@ -4,35 +4,58 @@ type Config = {
   numOptions?: number;
   showCurrentWordAsLastSuggestion?: boolean;
   lang?: Language;
+  punctuationsToBeHandledAtEndOfWord?: string[];
 };
 
 export const getTransliterateSuggestions = async (
   word: string,
   config?: Config,
 ): Promise<string[]> => {
-  const { numOptions, showCurrentWordAsLastSuggestion, lang } = config || {
+  const {
+    numOptions,
+    showCurrentWordAsLastSuggestion,
+    lang,
+    punctuationsToBeHandledAtEndOfWord,
+  } = config || {
     numOptions: 5,
     showCurrentWordAsLastSuggestion: true,
     lang: "hi",
+    punctuationsToBeHandledAtEndOfWord: [",", '"'],
   };
   // fetch suggestion from api
   // const url = `https://www.google.com/inputtools/request?ime=transliteration_en_${lang}&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&text=${word}`;
 
+  let punctuation = word.slice(-1);
+  if (punctuationsToBeHandledAtEndOfWord?.includes(punctuation)) {
+    word = word.slice(0, -1);
+  } else {
+    punctuation = "";
+  }
+
   const url = `https://inputtools.google.com/request?text=${word}&itc=${lang}-t-i0-und&num=${numOptions}&cp=0&cs=1&ie=utf-8&oe=utf-8&app=demopage`;
   try {
     const res = await fetch(url);
     const data = await res.json();
+    let suggestions;
     if (data && data[0] === "SUCCESS") {
-      const found = showCurrentWordAsLastSuggestion
+      suggestions = showCurrentWordAsLastSuggestion
         ? [...data[1][0][1], word]
         : data[1][0][1];
-      return found;
     } else {
       if (showCurrentWordAsLastSuggestion) {
-        return [word];
+        suggestions = [word];
       }
-      return [];
+      suggestions = [];
     }
+
+    // doublequotes are returned as &quot by google-transliterate
+    suggestions = suggestions.map((suggestion: string) =>
+      suggestion.replace(/&quot;/g, '"'),
+    );
+
+    return punctuation
+      ? suggestions.map((suggestion: string) => suggestion + punctuation)
+      : suggestions;
   } catch (e) {
     // catch error
     console.error("There was an error with transliteration", e);