Isolate Sõnaveeb styles&HTML in Shadow DOM

package-lock.json

@@ -18,6 +18,7 @@
         "react-dom": "^16.13.1",
         "react-router": "^4.3.1",
         "react-router-dom": "^4.3.1",
+        "react-shadow": "^20.4.0",
         "react-toggle": "^4.0.2"
       },
       "devDependencies": {
@@ -7851,6 +7852,11 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -9794,6 +9800,19 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-shadow": {
+      "version": "20.4.0",
+      "resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-20.4.0.tgz",
+      "integrity": "sha512-sirvAmFja7Ss6MoyQbKWxaQ5IDTAW3Za3Tvegylfr5jXnwKZObHRIyiatefeNlskoGKfuPaZ8DNT052T0SUGcg==",
+      "dependencies": {
+        "humps": "^2.0.1"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-toggle": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz",
@@ -17373,6 +17392,11 @@
         "ms": "^2.0.0"
       }
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -18849,6 +18873,14 @@
         "warning": "^4.0.1"
       }
     },
+    "react-shadow": {
+      "version": "20.4.0",
+      "resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-20.4.0.tgz",
+      "integrity": "sha512-sirvAmFja7Ss6MoyQbKWxaQ5IDTAW3Za3Tvegylfr5jXnwKZObHRIyiatefeNlskoGKfuPaZ8DNT052T0SUGcg==",
+      "requires": {
+        "humps": "^2.0.1"
+      }
+    },
     "react-toggle": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^16.13.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-shadow": "^20.4.0",
     "react-toggle": "^4.0.2"
   },
   "devDependencies": {

src/content/components/TranslatePanel.js

@@ -1,6 +1,7 @@
 import browser from "webextension-polyfill";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
+import root from "react-shadow";
 import { getSettings } from "src/settings/settings";
 import "../styles/TranslatePanel.scss";
 import { getBackgroundColor, getCandidateFontColor, getResultFontColor } from "../../settings/defaultColors";
@@ -204,10 +205,10 @@ 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">
+          <root.div className="simple-translate-result-contents">
+            {translationApi === "sonaveeb" && ( <link rel="stylesheet" href="https://sonaveeb.ee/view/css/styles.css" /> )}
             {rawHTML
               ? ( <p className="simple-translate-result" dir="auto" dangerouslySetInnerHTML={{__html: resultText}}></p> )
               : ( <p className="simple-translate-result" style={getResultFontColor()} dir="auto">{splitLine(resultText)}</p> )
@@ -235,7 +236,7 @@ export default class TranslatePanel extends Component {
                 )}
               </p>
             )}
-          </div>
+          </root.div>
         </div>
       </div>
     );

src/popup/components/PopupPage.js

@@ -177,7 +177,6 @@ export default class PopupPage extends Component {
   render() {
     return (
       <div className={rtlLanguageClassName}>
-        {this.state.translationApi === "sonaveeb" && ( <link rel="stylesheet" href="https://sonaveeb.ee/view/css/styles.css" /> )}
         <Header
           toggleEnabledOnPage={this.toggleEnabledOnPage}
           isEnabledOnPage={this.state.isEnabledOnPage}

src/popup/components/ResultArea.js

@@ -1,4 +1,5 @@
 import React from "react";
+import root from "react-shadow";
 import browser from "webextension-polyfill";
 import { getSettings } from "src/settings/settings";
 import openUrl from "src/common/openUrl";
@@ -27,7 +28,8 @@ export default props => {
   };
 
   return (
-    <div id="resultArea">
+    <root.div id="resultArea">
+      {translationApi === "sonaveeb" && ( <link rel="stylesheet" href="https://sonaveeb.ee/view/css/styles.css" /> )}
       {rawHTML
         ? ( <p className="resultText" dir="auto" dangerouslySetInnerHTML={{__html: resultText}}></p> )
         : ( <p className="resultText" dir="auto">{splitLine(resultText)}</p> )
@@ -48,6 +50,6 @@ export default props => {
         <CopyButton text={resultText} />
         <ListenButton text={resultText} lang={targetLang} />
       </div>
-    </div>
+    </root.div>
   );
 };