@vonaffenfels/slate-editor 1.1.26 → 1.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.26",
+    "version": "1.1.28",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "5f0d00b0e64e0c1e25ade668bbabdebf85eafe02",
+    "gitHead": "a600552bfcbd6e605f8ababe0f4ef6f3222ac58a",
     "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/SidebarEditor/Fields/MultiSelect.js

@@ -0,0 +1,14 @@
+import {renderFieldSelectOptions} from "./Select";
+
+export const MultiSelect = ({
+    value,
+    field,
+    onChange,
+}) => {
+    return <select
+        multiple
+        value={value}
+        onChange={onChange}>
+        {renderFieldSelectOptions(field)}
+    </select>;
+};

package/src/SidebarEditor/Fields/RemoteSelect.js

@@ -0,0 +1,33 @@
+import {renderFieldSelectOptions} from "./Select";
+import {
+    useEffect, useState,
+} from "react";
+
+export const RemoteSelect = ({
+    value,
+    field,
+    onChange,
+}) => {
+    const [options, setOptions] = useState([]);
+
+    const reloadOptions = async () => {
+        setOptions(await fetch(field.control.url).then(res => res.json()));
+    };
+
+    useEffect(() => {
+        reloadOptions();
+    }, [field]);
+
+    return <select
+        value={value || ""}
+        onChange={onChange}>
+        <option value="">Auswählen</option>
+        {renderFieldSelectOptions({
+            ...field,
+            control: {
+                ...field.control,
+                options,
+            },
+        })}
+    </select>;
+};

package/src/SidebarEditor/Fields/Select.js

@@ -0,0 +1,48 @@
+
+export const Select = ({
+    value,
+    field,
+    onChange,
+}) => {
+    return <select
+        value={value || ""}
+        onChange={onChange}>
+        <option value="">Auswählen</option>
+        {renderFieldSelectOptions(field)}
+    </select>;
+};
+
+export const renderFieldSelectOptions = field => {
+    if (field.options) {
+        field.control.options = field.options;
+    }
+
+    if (field?.control?.labels) {
+        field.control.options = field.control.labels;
+    }
+
+    if (!field?.control?.options) {
+        return;
+    }
+
+    if (Array.isArray(field.control.options)) {
+        return field.control.options.map(option => {
+            if (option && typeof option === "object") {
+                return <option key={`select-option-${option.value}`} value={option.value}>{option.label}</option>;
+            }
+
+            return <option key={`select-option-${option}`} value={option}>{option}</option>;
+        });
+    } else {
+        return Object.keys(field.control.options).map(key => {
+            // Prevents false values being a string, e.g. "false"
+            if (!field.control.options[key]) {
+                field.control.options[key] = "";
+            }
+
+            return (
+                <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
+            );
+        });
+    }
+};

package/src/SidebarEditor/SidebarEditorField.js

@@ -5,6 +5,9 @@ import {
     Asset, AssetList,
 } from "./AssetList";
 import {Switch} from "./Switch";
+import {Select} from "./Fields/Select";
+import {RemoteSelect} from "./Fields/RemoteSelect";
+import {MultiSelect} from "./Fields/MultiSelect";
 
 export const SidebarEditorField = ({
     field,
@@ -37,37 +40,6 @@ export const SidebarEditorField = ({
         onChange(fieldKey, swapArrayElements(value, index, newIndex));
     };
 
-    const renderFieldSelectOptions = field => {
-        if (field.options) {
-            field.control.options = field.options;
-        }
-
-        if (field?.control?.labels) {
-            field.control.options = field.control.labels;
-        }
-
-        if (!field?.control?.options) {
-            return;
-        }
-
-        if (Array.isArray(field.control.options)) {
-            return field.control.options.map(value => (
-                <option key={`select-option-${value}`} value={value}>{value}</option>
-            ));
-        } else {
-            return Object.keys(field.control.options).map(key => {
-                // Prevents false values being a string, e.g. "false"
-                if (!field.control.options[key]) {
-                    field.control.options[key] = "";
-                }
-
-                return (
-                    <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
-                );
-            });
-        }
-    };
-
     const getInputByField = (field, fieldKey) => {
         if (!field) {
             return null;
@@ -114,14 +86,9 @@ export const SidebarEditorField = ({
                     </div>
                 );
             case "select":
-                return (
-                    <select
-                        value={value || ""}
-                        onChange={e => onChange(fieldKey, e.target.value)}>
-                        <option value="">Auswählen</option>
-                        {renderFieldSelectOptions(field)}
-                    </select>
-                );
+                return <Select onChange={e => onChange(fieldKey, e.target.value)} field={field} value={value} />;
+            case "remote-select":
+                return <RemoteSelect onChange={e => onChange(fieldKey, e.target.value)} field={field} value={value} />;
             case "data-stream":
                 return (
                     <select
@@ -268,18 +235,14 @@ export const SidebarEditorField = ({
                         onChange={e => onChange(fieldKey, e.target.value)}/>
                 );
             case "multi-select":
-                return (
-                    <select
-                        multiple
-                        value={value}
-                        onChange={e => {
-                            let v = Array.from(e.target.selectedOptions, option => option.value);
+                return <MultiSelect
+                    value={value}
+                    field={field}
+                    onChange={e => {
+                        let v = Array.from(e.target.selectedOptions, option => option.value);
 
-                            onChange(fieldKey, v);
-                        }}>
-                        {renderFieldSelectOptions(field)}
-                    </select>
-                );
+                        onChange(fieldKey, v);
+                    }} />;
             case "contentful-content":
                 return (
                     <>

package/src/Translation/TranslationToolbarButton.js

@@ -0,0 +1,124 @@
+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 [enabled, setEnabled] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        if (sdk) {
+            if (sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService) {
+                setEnabled(true);
+            }
+        }
+    }, [sdk]);
+
+    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>;
+};