@vonaffenfels/slate-editor 1.1.27 → 1.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.27",
+    "version": "1.1.29",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "78986d6bb0100171800ced4a7c77c3d08de9e002",
+    "gitHead": "6f766a57107e33b358372874a69e2199dc14d8f6",
     "publishConfig": {
         "access": "public"
     }

package/scss/toolbar.scss

@@ -9,25 +9,6 @@
     position: absolute;
     z-index: 500;
 
-    input[type="text"],
-    input[type="number"],
-    input[type="color"],
-    input[type="datetime-local"],
-    input[type="search"],
-    select,
-    textarea {
-        display: block;
-        font-size: 0.875rem !important;
-        color: rgb(90, 101, 124) !important;
-        background-color: white !important;
-        border: 1px solid #cfd9e0 !important;
-        border-radius: 6px !important;
-        box-shadow: none !important;
-        filter: none !important;
-        width: 100% !important;
-        padding: 8px 0.75rem !important;
-    }
-
     &.toolbar-static {
         display: block;
         position: fixed;

package/src/BlockEditor.js

@@ -21,6 +21,7 @@ import {Spinner} from '@contentful/forma-36-react-components';
 import {ObjectId} from "./ObjectId";
 import {Resizable} from "./SidebarEditor/Resizable";
 import {Loader} from "./Loader";
+import {TranslationToolbarButton} from "./Translation/TranslationToolbarButton";
 
 export default function BlockEditor({
     onChange,
@@ -33,6 +34,8 @@ export default function BlockEditor({
     onSaveClick,
     isLoading,
     activeConfig,
+    locale,
+    setLocale,
 }) {
     const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
@@ -382,11 +385,14 @@ export default function BlockEditor({
                                 editor={editor}
                                 sdk={contentfulSdk}
                                 lastSelection={lastSelection}
-                                buttons={activeConfig?.domain && slug && (
-                                    <a href={`${activeConfig.domain}/${slug}`} target="_blank" rel="noreferrer">
-                                        <button className='button button--secondary'>Live-Seite öffnen</button>
-                                    </a>
-                                )}/>
+                                buttons={<div className="flex gap-2">
+                                    <TranslationToolbarButton sdk={contentfulSdk} setEditorValue={onSlateChange} locale={locale} setLocale={setLocale}/>
+                                    {activeConfig?.domain && slug && (
+                                        <a href={`${activeConfig.domain}/${slug}`} target="_blank" rel="noreferrer">
+                                            <button className='button button--secondary'>Live-Seite öffnen</button>
+                                        </a>
+                                    )}
+                                </div>}/>
                         </div>
                         <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                             {isLoading && (

package/src/Translation/TranslationToolbarButton.js

@@ -0,0 +1,116 @@
+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>;
+};