From 289f3410295d8396d31ce238bf05ede6777700db Mon Sep 17 00:00:00 2001
From: Bohdan Horbeshko <bodqhrohro@gmail.com>
Date: Mon, 30 Oct 2023 09:32:04 +0200
Subject: [PATCH] =?UTF-8?q?Properly=20render=20S=C3=B5naveeb=20in=20transl?=
 =?UTF-8?q?ate=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_locales/en/messages.json                |  2 +-
 src/content/components/TranslateContainer.js |  3 +++
 src/content/components/TranslatePanel.js     | 10 ++++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 3c87fc2..0622534 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -453,7 +453,7 @@
     "message": "Error: Authentication of DeepL API failed. Please set the authentication key and plan correctly on the settings page."
   },
   "sonaveebWordIdNotFound": {
-    "message": "Sõnaveeb word id not found"
+    "message": "Word not found"
   },
   "unknownError": {
     "message": "Error: Unknown error"
diff --git a/src/content/components/TranslateContainer.js b/src/content/components/TranslateContainer.js
index 62af2a5..911e82e 100644
--- a/src/content/components/TranslateContainer.js
+++ b/src/content/components/TranslateContainer.js
@@ -39,6 +39,7 @@ export default class TranslateContainer extends Component {
       shouldShowPanel: false,
       panelPosition: { x: 0, y: 0 },
       currentLang: getSettings("targetLang"),
+      rawHTML: false,
       resultText: "",
       candidateText: "",
       isError: false,
@@ -96,6 +97,7 @@ export default class TranslateContainer extends Component {
     this.setState({
       shouldShowPanel: true,
       panelPosition: panelPosition,
+      rawHTML: result.rawHTML,
       resultText: result.resultText,
       candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
       isError: result.isError,
@@ -121,6 +123,7 @@ export default class TranslateContainer extends Component {
           position={this.state.panelPosition}
           selectedText={this.selectedText}
           currentLang={this.state.currentLang}
+          rawHTML={this.state.rawHTML}
           resultText={this.state.resultText}
           candidateText={this.state.candidateText}
           isError={this.state.isError}
diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js
index 11b6e87..c1d282c 100644
--- a/src/content/components/TranslatePanel.js
+++ b/src/content/components/TranslatePanel.js
@@ -163,7 +163,7 @@ export default class TranslatePanel extends Component {
   };
 
   render = () => {
-    const { shouldShow, selectedText, currentLang, resultText, candidateText, isError, errorMessage } = this.props;
+    const { shouldShow, selectedText, currentLang, rawHTML, resultText, candidateText, isError, errorMessage } = this.props;
     const { width, height } = this.state.shouldResize
       ? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
       : { width: this.state.panelWidth, height: this.state.panelHeight };
@@ -193,12 +193,14 @@ export default class TranslatePanel extends Component {
         ref="panel"
         style={panelStyles}
       >
+        {translationApi === "sonaveeb" && ( <link rel="stylesheet" href="https://sonaveeb.ee/view/css/styles.css" /> )}
         <div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
           <div className="simple-translate-move" draggable="true" ref="move"></div>
           <div className="simple-translate-result-contents">
-            <p className="simple-translate-result" style={getResultFontColor()} dir="auto">
-              {splitLine(resultText)}
-            </p>
+            {rawHTML
+              ? ( <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">
               {splitLine(candidateText)}
             </p>