narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Isolate Sõnaveeb styles&HTML in Shadow DOM

Browse source
This commit is contained in:
Bohdan Horbeshko 2023-11-02 06:07:50 +02:00
parent c6ce2b8f65
commit 2f88ef7020
5 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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": {

7
src/content/components/TranslatePanel.js
View file

@ -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>
);

1
src/popup/components/PopupPage.js
View file

@ -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}

6
src/popup/components/ResultArea.js
View file

@ -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>
);
};