@vonaffenfels/slate-editor 1.1.71 → 1.2.10

package/src/Translation/TranslationToolbarButton.js

@@ -1,116 +1,120 @@
-import React, {
-    useEffect, useState,
-} from "react";
-import {Modal} from '@contentful/f36-components';
-import {
-    Select, Button, Paragraph,
-} from '@contentful/f36-components';
-
-export const TranslationToolbarButton = ({
-    sdk,
-    setEditorValue,
-    locale,
-    setLocale,
-    translateFromLocale = "de",
-}) => {
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const enabled = sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService;
-
-    if (sdk.locales.available.length < 2 || !enabled) {
-        return null;
-    }
-
-    const handleOnChange = (e) => {
-        setLocale(e.target.value);
-    };
-
-    const translateEditorValue = async (editorContent, targetLanguage) => {
-        if (!sdk?.parameters?.installation?.translationService) {
-            console.error(`no translation service configured!`);
-            return;
-        }
-
-        try {
-            setLoading(true);
-            const response = await fetch(sdk?.parameters?.installation?.translationService, {
-                method: "POST",
-                body: JSON.stringify({
-                    editorContent,
-                    targetLanguage,
-                    sourceLanguage: translateFromLocale,
-                }),
-            });
-
-            const translatedValue = await response.json();
-            setLoading(false);
-
-            if (translatedValue?.translation) {
-                setEditorValue(translatedValue.translation);
-            }
-        } catch (e) {
-            console.error(e);
-            setLoading(false);
-            setError({
-                title: "Error",
-                message: "Übersetzunggservice nicht erreichbar",
-            });
-        }
-    };
-
-    const onAutoTranslateClick = () => {
-        const translateFromValue = sdk.entry.fields?.[sdk.parameters.instance.contentField]?.getForLocale(translateFromLocale)?.getValue();
-        const currentValue = sdk.entry.fields?.[sdk.parameters.instance.contentField]?.getForLocale(locale)?.getValue();
-
-        if (!translateFromValue) {
-            console.error(`No value for field ${sdk.parameters.instance.contentField} in locale ${translateFromLocale}`);
-            return;
-        }
-
-        if (currentValue) {
-            // ask for overwrite?
-        }
-
-        translateEditorValue(translateFromValue, locale);
-    };
-
-    return <div className="flex gap-2">
-        {!!error && <ErrorOverlay title={error.title} message={error.message} />}
-        {locale !== sdk.locales.default &&
-            <Button
-                variant="secondary"
-                onClick={onAutoTranslateClick}
-                size="small">{loading ? "Wird übersetzt..." : "Automatisch Übersetzen"}</Button>}
-        <Select
-            value={locale}
-            onChange={handleOnChange}
-        >
-            {Object.keys(sdk?.locales?.names || {}).map((locale) => {
-                return <Select.Option key={locale} value={locale}>{sdk.locales.names[locale]}</Select.Option>;
-            })}
-        </Select>
-    </div>;
-};
-
-const ErrorOverlay = ({
-    title,
-    subtitle,
-    message,
-}) => {
-    const [isShown, setShown] = useState(true);
-
-    return <Modal onClose={() => setShown(false)} isShown={isShown}>
-        {() => (
-            <>
-                <Modal.Header
-                    title={title}
-                    subtitle={subtitle}
-                    onClose={() => setShown(false)}
-                />
-                <Modal.Content>
-                    <Paragraph>{message}</Paragraph>
-                </Modal.Content>
-            </>
-        )}
-    </Modal>;
+import React, {
+    useEffect, useState,
+} from "react";
+import {Modal} from '@contentful/f36-components';
+import {
+    Select, Button, Paragraph,
+} from '@contentful/f36-components';
+import classNames from "classnames";
+
+export const TranslationToolbarButton = ({
+    sdk,
+    setEditorValue,
+    locale,
+    setLocale,
+    translateFromLocale = "de",
+    className,
+}) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const enabled = sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService;
+
+    if (sdk.locales.available.length < 2 || !enabled) {
+        return null;
+    }
+
+    const handleOnChange = (e) => {
+        setLocale(e.target.value);
+    };
+
+    const translateEditorValue = async (editorContent, targetLanguage) => {
+        if (!sdk?.parameters?.installation?.translationService) {
+            console.error(`no translation service configured!`);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const response = await fetch(sdk?.parameters?.installation?.translationService, {
+                method: "POST",
+                body: JSON.stringify({
+                    editorContent,
+                    targetLanguage,
+                    sourceLanguage: translateFromLocale,
+                }),
+            });
+
+            const translatedValue = await response.json();
+            setLoading(false);
+
+            if (translatedValue?.translation) {
+                setEditorValue(translatedValue.translation);
+            }
+        } catch (e) {
+            console.error(e);
+            setLoading(false);
+            setError({
+                title: "Error",
+                message: "Übersetzunggservice nicht erreichbar",
+            });
+        }
+    };
+
+    const onAutoTranslateClick = () => {
+        const translateFromValue = sdk.entry.fields?.[sdk.parameters.instance.contentField]?.getForLocale(translateFromLocale)?.getValue();
+        const currentValue = sdk.entry.fields?.[sdk.parameters.instance.contentField]?.getForLocale(locale)?.getValue();
+
+        if (!translateFromValue) {
+            console.error(`No value for field ${sdk.parameters.instance.contentField} in locale ${translateFromLocale}`);
+            return;
+        }
+
+        if (currentValue) {
+            // ask for overwrite?
+        }
+
+        translateEditorValue(translateFromValue, locale);
+    };
+
+    return <div className={classNames("flex gap-2", className)}>
+        {!!error && <ErrorOverlay title={error.title} message={error.message} />}
+        {locale !== sdk.locales.default &&
+            <Button
+                variant="secondary"
+                className="shrink-0"
+                onClick={onAutoTranslateClick}
+                size="small">{loading ? "Wird übersetzt..." : "Automatisch Übersetzen"}</Button>}
+        <Select
+            value={locale}
+            onChange={handleOnChange}
+            className="shrink-0"
+        >
+            {Object.keys(sdk?.locales?.names || {}).map((locale) => {
+                return <Select.Option key={locale} value={locale}>{sdk.locales.names[locale]}</Select.Option>;
+            })}
+        </Select>
+    </div>;
+};
+
+const ErrorOverlay = ({
+    title,
+    subtitle,
+    message,
+}) => {
+    const [isShown, setShown] = useState(true);
+
+    return <Modal onClose={() => setShown(false)} isShown={isShown}>
+        {() => (
+            <>
+                <Modal.Header
+                    title={title}
+                    subtitle={subtitle}
+                    onClose={() => setShown(false)}
+                />
+                <Modal.Content>
+                    <Paragraph>{message}</Paragraph>
+                </Modal.Content>
+            </>
+        )}
+    </Modal>;
 };