Add translation button to rte

packages/admin/admin-rte/package.json

@@ -33,8 +33,9 @@
     "devDependencies": {
         "@babel/cli": "^7.17.6",
         "@babel/core": "^7.20.12",
-        "@comet/admin-babel-preset": "workspace:^5.1.0",
-        "@comet/eslint-config": "workspace:^5.1.0",
+        "@comet/admin": "workspace:^5.3.0",
+        "@comet/admin-babel-preset": "workspace:^5.3.0",
+        "@comet/eslint-config": "workspace:^5.3.0",
         "@mui/icons-material": "^5.0.0",
         "@mui/material": "^5.0.0",
         "@mui/styles": "^5.0.0",

packages/admin/admin-rte/src/core/Controls/Controls.tsx

@@ -10,6 +10,7 @@ import ListsControls from "./ListsControls";
 import ListsIndentControls from "./ListsIndentControls";
 import SpecialCharactersControls from "./SpecialCharactersControls";
 import Toolbar from "./Toolbar";
+import TranslationControls from "./TranslationControls";
 
 export default function Controls(p: IControlProps) {
     const {
@@ -22,6 +23,7 @@ export default function Controls(p: IControlProps) {
                 {[
                     HistoryControls,
                     BlockTypesControls,
+                    TranslationControls,
                     InlineStyleTypeControls,
                     ListsControls,
                     ListsIndentControls,

packages/admin/admin-rte/src/core/Controls/TranslationControls.tsx

@@ -0,0 +1,14 @@
+import { useContentTranslationService } from "@comet/admin";
+import { ButtonGroup } from "@mui/material";
+import * as React from "react";
+
+import TranslationToolbarButton from "../translation/ToolbarButton";
+import { IControlProps } from "../types";
+
+function TranslationControls(props: IControlProps) {
+    const translationContext = useContentTranslationService();
+
+    return <ButtonGroup>{translationContext && <TranslationToolbarButton {...props} />}</ButtonGroup>;
+}
+
+export default TranslationControls;

packages/admin/admin-rte/src/core/translation/ToolbarButton.tsx

@@ -0,0 +1,45 @@
+import { useContentTranslationService } from "@comet/admin";
+import { Translate } from "@comet/admin-icons";
+import Tooltip from "@mui/material/Tooltip";
+import { convertToRaw } from "draft-js";
+import * as React from "react";
+import { FormattedMessage } from "react-intl";
+
+import ControlButton from "../Controls/ControlButton";
+import { IControlProps } from "../types";
+import { transformStateToXml } from "./xml/transformStateToXml";
+import { translateAndTransformXmlToState } from "./xml/translateAndTransformToState";
+
+function ToolbarButton({ editorState, setEditorState }: IControlProps): React.ReactElement {
+    const translationContext = useContentTranslationService();
+
+    async function handleClick(event: React.MouseEvent) {
+        if (translationContext) {
+            event.preventDefault();
+
+            const contentState = editorState.getCurrentContent();
+
+            const xml = transformStateToXml(contentState);
+
+            const translationPromises = xml.map(async (item) => ({
+                original: item,
+                replaceWith: (await translationContext.translate(item)) ?? item,
+            }));
+            const translations = await Promise.all(translationPromises);
+
+            const translatedState = translateAndTransformXmlToState(contentState, convertToRaw(contentState), translations);
+
+            setEditorState(translatedState);
+        }
+    }
+
+    return (
+        <Tooltip title={<FormattedMessage id="comet.rte.translation.buttonTooltip" defaultMessage="Translate" />} placement="top">
+            <span>
+                <ControlButton icon={Translate} onButtonClick={handleClick} />
+            </span>
+        </Tooltip>
+    );
+}
+
+export default ToolbarButton;

packages/admin/admin-rte/tsconfig.json

@@ -2,7 +2,8 @@
     "extends": "../tsconfig.base.json",
     "compilerOptions": {
         "outDir": "lib",
-        "rootDir": "src"
+        "rootDir": "src",
+        "downlevelIteration": true
     },
     "include": ["./src"]
 }