Sõnaveeb: Display clickable candidates for oblique cases

src/background/background.js

@@ -30,5 +30,17 @@ const init = async () => {
 };
 init();
 
+const onMessage = async (request) => {
+  log.log(logDir, "onMessage()", request);
+  switch (request.message) {
+    case "translateText": {
+      const tab = (await browser.tabs.query({ active: true, currentWindow: true }))[0];
+      browser.tabs.sendMessage(tab.id, request);
+      break;
+    }
+  }
+};
+
 browser.runtime.onInstalled.addListener(onInstalledListener);
 browser.commands.onCommand.addListener(onCommandListener);
+browser.runtime.onMessage.addListener(onMessage);

src/common/translate.js

@@ -127,12 +127,8 @@ const sendRequestToSonaveeb = async (word) => {
   }
 
   const mainDocument = domParser.parseFromString(mainPage.data, "text/html");
-  const wordIdElement = mainDocument.querySelector('input[name="word-id"]');
-  if (!wordIdElement) {
-    resultData.isError = true;
-    resultData.errorMessage = `${browser.i18n.getMessage("sonaveebWordIdNotFound")}`;
-    return resultData;
-  }
+  const wordIdElement = mainDocument.querySelector("input[name=\"word-id\"]");
+  if (wordIdElement) {
     const wordId = wordIdElement.getAttribute("value");
 
     const wordDetailsPage = await _sendRequestToSonaveeb(`https://sonaveeb.ee/worddetails/unif/${wordId}`, resultData);
@@ -143,7 +139,7 @@ const sendRequestToSonaveeb = async (word) => {
     resultData.resultText = wordDetailsPage.data;
 
     const wordDetailsDocument = domParser.parseFromString(wordDetailsPage.data, "text/html");
-  const morphoModalElement = wordDetailsDocument.querySelector('#morpho-modal-0');
+    const morphoModalElement = wordDetailsDocument.querySelector("#morpho-modal-0");
     if (morphoModalElement) {
       const paradigmId = morphoModalElement.getAttribute("data-paradigm-id");
 
@@ -155,6 +151,16 @@ const sendRequestToSonaveeb = async (word) => {
         resultData.errorMessage = "";
       }
     }
+  } else {
+    const wordFormElement = mainDocument.querySelector("a.word-form");
+    if (!wordFormElement) {
+      resultData.isError = true;
+      resultData.errorMessage = `${browser.i18n.getMessage("sonaveebWordIdNotFound")}`;
+      return resultData;
+    }
+
+    resultData.candidateText = wordFormElement.parentNode.innerHTML;
+  }
 
   resultData.sourceLanguage = "et";
   resultData.percentage = 1;

src/content/components/TranslatePanel.js

@@ -138,6 +138,17 @@ export default class TranslatePanel extends Component {
     return { panelWidth: wrapperWidth, panelHeight: wrapperHeight };
   };
 
+  onCandidateClick = e => {
+    e.preventDefault();
+    if (e.target.tagName === "A" && e.target.className === "word-form") {
+      browser.runtime.sendMessage({
+        message: "translateText",
+        text: e.target.dataset.word,
+        position: this.props.position,
+      });
+    }
+  };
+
   componentWillReceiveProps = nextProps => {
     const isChangedContents =
       this.props.resultText !== nextProps.resultText ||
@@ -201,9 +212,12 @@ export default class TranslatePanel extends Component {
               ? ( <p className="simple-translate-result" dir="auto" dangerouslySetInnerHTML={{__html: resultText}}></p> )
               : ( <p className="simple-translate-result" style={getResultFontColor()} dir="auto">{splitLine(resultText)}</p> )
             }
-            <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto">
+            {rawHTML
+              ? ( <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto" onClick={this.onCandidateClick} dangerouslySetInnerHTML={{__html: candidateText}}></p> )
+              : ( <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto">
                 {splitLine(candidateText)}
-            </p>
+              </p> )
+            }
             {isError && (
               <p className="simple-translate-error">
                 {errorMessage}

src/content/index.js

@@ -167,6 +167,12 @@ const handleMessage = async request => {
       showTranslateContainer(selectedText, selectedPosition, null, true);
       break;
     }
+    case "translateText": {
+      if (!isEnabled) return empty;
+      removeTranslatecontainer();
+      showTranslateContainer(request.text, request.position, null, true);
+      break;
+    }
     case "getEnabled":
       return isEnabled;
     case "enableExtension":