@vonaffenfels/contentful-slate-editor 1.2.38 → 1.2.41

package/src/components/DialogTranslation.js

@@ -1,317 +1,317 @@
-import {
-    useEffect, useState,
-} from "react";
-import {
-    Button, Select, Table,
-} from "@contentful/f36-components";
-import getSlug from "speakingurl";
-
-export const DialogTranslation = ({
-    sdk,
-    activeConfig,
-    translateFromLocale = "de",
-}) => {
-    const {entryId} = sdk.parameters.invocation;
-    const [entry, setEntry] = useState(null);
-    const [loading, setLoading] = useState({});
-    const [usage, setUsage] = useState({});
-    const [provider, setProvider] = useState("deepl");
-    const [contentType, setContentType] = useState(null);
-    const localizedFields = contentType?.fields?.filter(field => field.localized);
-
-    const getTranslationUsage = async (content) => {
-        if (!sdk?.parameters?.installation?.translationService) {
-            console.error(`no translation service configured!`);
-            return;
-        }
-
-        try {
-            const response = await fetch(sdk?.parameters?.installation?.translationService + "/usage", {
-                method: "POST",
-                headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
-                body: JSON.stringify({
-                    editorContent: typeof content === "object" ? content : undefined,
-                    text: typeof content === "string" ? content : undefined,
-                }),
-            });
-
-            const translatedValue = await response.json();
-            return translatedValue?.usage || 0;
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    const updateUsage = async (entry, contentType) => {
-        const localizedFields = contentType?.fields?.filter(field => field.localized);
-        const newUsage = {};
-        for (let i = 0; i < localizedFields.length; i++) {
-            const localizedField = localizedFields[i];
-            newUsage[localizedField.id] = await getTranslationUsage(entry?.fields[localizedField.id]?.[translateFromLocale]);
-        }
-
-        return newUsage;
-    };
-
-    useEffect(() => {
-        sdk.space.getEntry(entryId).then(entry => {
-            sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
-                updateUsage(entry, contentType).then((usage) => {
-                    setUsage(usage);
-                    setEntry(entry);
-                    setContentType(contentType);
-                });
-            });
-        });
-    }, []);
-
-    if (!contentType) {
-        return null;
-    }
-
-    const translateValue = async (content, targetLanguage, provider) => {
-        if (!sdk?.parameters?.installation?.translationService) {
-            console.error(`no translation service configured!`);
-            return;
-        }
-
-        try {
-            const response = await fetch(sdk?.parameters?.installation?.translationService, {
-                method: "POST",
-                headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
-                body: JSON.stringify({
-                    editorContent: typeof content === "object" ? content : undefined,
-                    text: typeof content === "string" ? content : undefined,
-                    targetLanguage,
-                    provider,
-                    translateFromLocale: translateFromLocale,
-                }),
-            });
-
-            const translatedValue = await response.json();
-            return translatedValue?.translation || "";
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    const onTranslateClick = async (targetLanguageOrLanguages, refreshAll = false, onlyFields = []) => {
-        if (!Array.isArray(targetLanguageOrLanguages)) {
-            targetLanguageOrLanguages = [targetLanguageOrLanguages];
-        }
-
-        let newEntry = entry;
-        for (let i = 0; i < targetLanguageOrLanguages.length; i++) {
-            if (targetLanguageOrLanguages[i] === translateFromLocale) {
-                continue;
-            }
-
-            newEntry = await translateForLocale(
-                targetLanguageOrLanguages[i], newEntry, refreshAll, onlyFields,
-            );
-        }
-
-        await sdk.space.updateEntry(newEntry);
-        setEntry(await sdk.space.getEntry(entryId));
-    };
-
-    const translateForLocale = async (
-        targetLanguage, entry = {}, refreshAll = false, onlyFields = [],
-    ) => {
-        setLoading({
-            ...loading,
-            [targetLanguage]: true,
-        });
-        const newEntry = {...entry};
-        for (let i = 0; i < localizedFields.length; i++) {
-            const localizedField = localizedFields[i];
-            const currentValue = entry?.fields[localizedField.id]?.[targetLanguage];
-            if (
-                (!refreshAll && !isEmptyValue(currentValue) && !onlyFields.length) ||
-                (onlyFields.length && !onlyFields.includes(localizedField.id))
-            ) {
-                continue;
-            }
-
-            setLoading({
-                ...loading,
-                [targetLanguage + localizedField.id]: true,
-            });
-
-            let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage, provider);
-
-            setLoading({
-                ...loading,
-                [targetLanguage + localizedField.id]: false,
-            });
-
-            if (!newValue) {
-                continue;
-            }
-
-            if (localizedField.id === "slug" && newValue) {
-                newValue = getSlug(newValue);
-            }
-
-            newEntry.fields[localizedField.id][targetLanguage] = newValue;
-        }
-        setLoading({
-            ...loading,
-            [targetLanguage]: false,
-        });
-
-        return newEntry;
-    };
-
-    const isEmptyValue = (value) => {
-        if (!value) {
-            return true;
-        }
-
-        // editor value
-        if (Array.isArray(value)) {
-            if (value.length === 1 && value[0].type === "paragraph" && value[0].children.length === 1 && value[0].children[0].text === "") {
-                return true;
-            }
-        }
-
-        return false;
-    };
-
-    const isComplete = (locale) => {
-        for (let i = 0; i < localizedFields.length; i++) {
-            const localizedField = localizedFields[i];
-            const value = entry?.fields[localizedField.id]?.[locale];
-
-            if (isEmptyValue(value)) {
-                return false;
-            }
-        }
-
-        return true;
-    };
-
-    const onProviderChange = function (e) {
-        setProvider(e.target.value);
-    };
-
-    const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
-
-    return <div className="flex h-full flex-col justify-between gap-4 p-4">
-        <div className="h-full overflow-y-scroll">
-            <Table>
-                <Table.Head>
-                    <Table.Row>
-                        <Table.Cell style={{width: 250}}>Feld</Table.Cell>
-                        <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
-                        {sdk.locales.available.map(locale => {
-                            const languageComplete = isComplete(locale);
-                            const isTranslateFromLocale = locale === translateFromLocale;
-
-                            if (isTranslateFromLocale) {
-                                return <Table.Cell key={locale}/>;
-                            }
-
-                            if (loading[locale]) {
-                                return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
-                            }
-
-                            const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
-
-                            return <Table.Cell key={locale}>
-                                <Button
-                                    size="small"
-                                    className="group"
-                                    variant={languageComplete ? "secondary" : "primary"}
-                                    title={buttonLabel}
-                                    onClick={e => onTranslateClick(locale, languageComplete)}>
-                                    {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen ({provider})</span>}
-                                    {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
-                                </Button>
-                            </Table.Cell>;
-                        })}
-                    </Table.Row>
-                </Table.Head>
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell/>
-                        <Table.Cell>∑ {fullUsage}</Table.Cell>
-                        {sdk.locales.available.map(locale => {
-                            const name = sdk.locales.names[locale];
-
-                            return <Table.Cell key={locale}>
-                                {name}
-                            </Table.Cell>;
-                        })}
-                    </Table.Row>
-                    {localizedFields.map(field => {
-                        return <Table.Row key={field.id}>
-                            <Table.Cell>
-                                <Button
-                                    className="max-w-full truncate"
-                                    style={{maxWidth: 250}}
-                                    size="small"
-                                    variant={"transparent"}
-                                    title={"Alle Übersetzungen Aktualisieren"}
-                                    onClick={e => {
-                                        onTranslateClick(sdk.locales.available, false, [field.id]);
-                                    }}>
-                                    {field.name}
-                                </Button>
-                            </Table.Cell>
-                            <Table.Cell>
-                                {usage?.[field.id]}
-                            </Table.Cell>
-                            {sdk.locales.available.map(locale => {
-                                let preview = entry?.fields[field.id]?.[locale];
-
-                                if (!preview) {
-                                    preview = "";
-                                }
-
-                                if (typeof preview === "object") {
-                                    preview = "Keine Vorschau Verfügbar";
-                                }
-
-                                if (locale === translateFromLocale) {
-                                    return <Table.Cell key={locale}>
-                                        <div
-                                            className="max-w-full truncate"
-                                            style={{maxWidth: 250}}>
-                                            {preview}
-                                        </div>
-                                    </Table.Cell>;
-                                }
-
-                                if (loading[locale + field.id]) {
-                                    return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
-                                }
-
-                                return <Table.Cell key={locale}>
-                                    <Button
-                                        className="max-w-full truncate"
-                                        style={{maxWidth: 250}}
-                                        size="small"
-                                        variant={"transparent"}
-                                        title={"Übersetzung Aktualisieren"}
-                                        onClick={e => onTranslateClick(locale, false, [field.id])}>
-                                        {preview}
-                                    </Button>
-                                </Table.Cell>;
-                            })}
-                        </Table.Row>;
-                    })}
-                </Table.Body>
-            </Table>
-        </div>
-        <div>
-            <label className="flex flex-row gap-4 align-middle">
-                <div className="flex items-center font-sans">Übersetzen mit</div>
-                <Select value={provider} onChange={onProviderChange} className="w-full">
-                    <option value="deepl">DeepL</option>
-                    <option value="gpt">Chat GPT (BETA)</option>
-                </Select>
-            </label>
-        </div>
-    </div>;
+import {
+    useEffect, useState,
+} from "react";
+import {
+    Button, Select, Table,
+} from "@contentful/f36-components";
+import getSlug from "speakingurl";
+
+export const DialogTranslation = ({
+    sdk,
+    activeConfig,
+    translateFromLocale = "de",
+}) => {
+    const {entryId} = sdk.parameters.invocation;
+    const [entry, setEntry] = useState(null);
+    const [loading, setLoading] = useState({});
+    const [usage, setUsage] = useState({});
+    const [provider, setProvider] = useState("deepl");
+    const [contentType, setContentType] = useState(null);
+    const localizedFields = contentType?.fields?.filter(field => field.localized);
+
+    const getTranslationUsage = async (content) => {
+        if (!sdk?.parameters?.installation?.translationService) {
+            console.error(`no translation service configured!`);
+            return;
+        }
+
+        try {
+            const response = await fetch(sdk?.parameters?.installation?.translationService + "/usage", {
+                method: "POST",
+                headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
+                body: JSON.stringify({
+                    editorContent: typeof content === "object" ? content : undefined,
+                    text: typeof content === "string" ? content : undefined,
+                }),
+            });
+
+            const translatedValue = await response.json();
+            return translatedValue?.usage || 0;
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const updateUsage = async (entry, contentType) => {
+        const localizedFields = contentType?.fields?.filter(field => field.localized);
+        const newUsage = {};
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            newUsage[localizedField.id] = await getTranslationUsage(entry?.fields[localizedField.id]?.[translateFromLocale]);
+        }
+
+        return newUsage;
+    };
+
+    useEffect(() => {
+        sdk.space.getEntry(entryId).then(entry => {
+            sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
+                updateUsage(entry, contentType).then((usage) => {
+                    setUsage(usage);
+                    setEntry(entry);
+                    setContentType(contentType);
+                });
+            });
+        });
+    }, []);
+
+    if (!contentType) {
+        return null;
+    }
+
+    const translateValue = async (content, targetLanguage, provider) => {
+        if (!sdk?.parameters?.installation?.translationService) {
+            console.error(`no translation service configured!`);
+            return;
+        }
+
+        try {
+            const response = await fetch(sdk?.parameters?.installation?.translationService, {
+                method: "POST",
+                headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
+                body: JSON.stringify({
+                    editorContent: typeof content === "object" ? content : undefined,
+                    text: typeof content === "string" ? content : undefined,
+                    targetLanguage,
+                    provider,
+                    translateFromLocale: translateFromLocale,
+                }),
+            });
+
+            const translatedValue = await response.json();
+            return translatedValue?.translation || "";
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const onTranslateClick = async (targetLanguageOrLanguages, refreshAll = false, onlyFields = []) => {
+        if (!Array.isArray(targetLanguageOrLanguages)) {
+            targetLanguageOrLanguages = [targetLanguageOrLanguages];
+        }
+
+        let newEntry = entry;
+        for (let i = 0; i < targetLanguageOrLanguages.length; i++) {
+            if (targetLanguageOrLanguages[i] === translateFromLocale) {
+                continue;
+            }
+
+            newEntry = await translateForLocale(
+                targetLanguageOrLanguages[i], newEntry, refreshAll, onlyFields,
+            );
+        }
+
+        await sdk.space.updateEntry(newEntry);
+        setEntry(await sdk.space.getEntry(entryId));
+    };
+
+    const translateForLocale = async (
+        targetLanguage, entry = {}, refreshAll = false, onlyFields = [],
+    ) => {
+        setLoading({
+            ...loading,
+            [targetLanguage]: true,
+        });
+        const newEntry = {...entry};
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            const currentValue = entry?.fields[localizedField.id]?.[targetLanguage];
+            if (
+                (!refreshAll && !isEmptyValue(currentValue) && !onlyFields.length) ||
+                (onlyFields.length && !onlyFields.includes(localizedField.id))
+            ) {
+                continue;
+            }
+
+            setLoading({
+                ...loading,
+                [targetLanguage + localizedField.id]: true,
+            });
+
+            let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage, provider);
+
+            setLoading({
+                ...loading,
+                [targetLanguage + localizedField.id]: false,
+            });
+
+            if (!newValue) {
+                continue;
+            }
+
+            if (localizedField.id === "slug" && newValue) {
+                newValue = getSlug(newValue);
+            }
+
+            newEntry.fields[localizedField.id][targetLanguage] = newValue;
+        }
+        setLoading({
+            ...loading,
+            [targetLanguage]: false,
+        });
+
+        return newEntry;
+    };
+
+    const isEmptyValue = (value) => {
+        if (!value) {
+            return true;
+        }
+
+        // editor value
+        if (Array.isArray(value)) {
+            if (value.length === 1 && value[0].type === "paragraph" && value[0].children.length === 1 && value[0].children[0].text === "") {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
+    const isComplete = (locale) => {
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            const value = entry?.fields[localizedField.id]?.[locale];
+
+            if (isEmptyValue(value)) {
+                return false;
+            }
+        }
+
+        return true;
+    };
+
+    const onProviderChange = function (e) {
+        setProvider(e.target.value);
+    };
+
+    const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
+
+    return <div className="flex h-full flex-col justify-between gap-4 p-4">
+        <div className="h-full overflow-y-scroll">
+            <Table>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.Cell style={{width: 250}}>Feld</Table.Cell>
+                        <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
+                        {sdk.locales.available.map(locale => {
+                            const languageComplete = isComplete(locale);
+                            const isTranslateFromLocale = locale === translateFromLocale;
+
+                            if (isTranslateFromLocale) {
+                                return <Table.Cell key={locale}/>;
+                            }
+
+                            if (loading[locale]) {
+                                return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
+                            }
+
+                            const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
+
+                            return <Table.Cell key={locale}>
+                                <Button
+                                    size="small"
+                                    className="group"
+                                    variant={languageComplete ? "secondary" : "primary"}
+                                    title={buttonLabel}
+                                    onClick={e => onTranslateClick(locale, languageComplete)}>
+                                    {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen ({provider})</span>}
+                                    {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
+                                </Button>
+                            </Table.Cell>;
+                        })}
+                    </Table.Row>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell/>
+                        <Table.Cell>∑ {fullUsage}</Table.Cell>
+                        {sdk.locales.available.map(locale => {
+                            const name = sdk.locales.names[locale];
+
+                            return <Table.Cell key={locale}>
+                                {name}
+                            </Table.Cell>;
+                        })}
+                    </Table.Row>
+                    {localizedFields.map(field => {
+                        return <Table.Row key={field.id}>
+                            <Table.Cell>
+                                <Button
+                                    className="max-w-full truncate"
+                                    style={{maxWidth: 250}}
+                                    size="small"
+                                    variant={"transparent"}
+                                    title={"Alle Übersetzungen Aktualisieren"}
+                                    onClick={e => {
+                                        onTranslateClick(sdk.locales.available, false, [field.id]);
+                                    }}>
+                                    {field.name}
+                                </Button>
+                            </Table.Cell>
+                            <Table.Cell>
+                                {usage?.[field.id]}
+                            </Table.Cell>
+                            {sdk.locales.available.map(locale => {
+                                let preview = entry?.fields[field.id]?.[locale];
+
+                                if (!preview) {
+                                    preview = "";
+                                }
+
+                                if (typeof preview === "object") {
+                                    preview = "Keine Vorschau Verfügbar";
+                                }
+
+                                if (locale === translateFromLocale) {
+                                    return <Table.Cell key={locale}>
+                                        <div
+                                            className="max-w-full truncate"
+                                            style={{maxWidth: 250}}>
+                                            {preview}
+                                        </div>
+                                    </Table.Cell>;
+                                }
+
+                                if (loading[locale + field.id]) {
+                                    return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
+                                }
+
+                                return <Table.Cell key={locale}>
+                                    <Button
+                                        className="max-w-full truncate"
+                                        style={{maxWidth: 250}}
+                                        size="small"
+                                        variant={"transparent"}
+                                        title={"Übersetzung Aktualisieren"}
+                                        onClick={e => onTranslateClick(locale, false, [field.id])}>
+                                        {preview}
+                                    </Button>
+                                </Table.Cell>;
+                            })}
+                        </Table.Row>;
+                    })}
+                </Table.Body>
+            </Table>
+        </div>
+        <div>
+            <label className="flex flex-row gap-4 align-middle">
+                <div className="flex items-center font-sans">Übersetzen mit</div>
+                <Select value={provider} onChange={onProviderChange} className="w-full">
+                    <option value="deepl">DeepL</option>
+                    <option value="gpt">Chat GPT (BETA)</option>
+                </Select>
+            </label>
+        </div>
+    </div>;
 };