Properly render Sõnaveeb in translate panel

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"

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}

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">
+            {rawHTML
-              {splitLine(resultText)}
+              ? ( <p className="simple-translate-result" dir="auto" dangerouslySetInnerHTML={{__html: resultText}}></p> )
-            </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>