@vonaffenfels/contentful-slate-editor 1.1.27 → 1.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.1.27",
+    "version": "1.1.29",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -56,6 +56,8 @@
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
         "@contentful/app-sdk": "^3.33.0",
+        "@contentful/f36-components": "^4.56.2",
+        "@contentful/f36-multiselect": "^4.21.0",
         "@contentful/field-editor-single-line": "^0.14.1",
         "@contentful/field-editor-test-utils": "^0.11.1",
         "@contentful/forma-36-fcss": "^0.3.1",
@@ -91,10 +93,10 @@
         "webpack-watch-files-plugin": "^1.2.1"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.1.27",
+        "@vonaffenfels/slate-editor": "^1.1.29",
         "webpack": "5.88.2"
     },
-    "gitHead": "78986d6bb0100171800ced4a7c77c3d08de9e002",
+    "gitHead": "6f766a57107e33b358372874a69e2199dc14d8f6",
     "publishConfig": {
         "access": "public"
     }

package/src/components/ConfigScreen.js

@@ -1,83 +1,112 @@
-import React, {Component} from 'react';
+import React, {
+    useEffect, useState,
+} from 'react';
 import {
-    Heading, Form, TextField, Workbench, Paragraph,
+    Heading, Form, TextField, Workbench,
 } from '@contentful/forma-36-react-components';
+import {FormControl} from '@contentful/f36-components';
+import {Multiselect} from '@contentful/f36-multiselect';
 import {css} from 'emotion';
 
-export default class Config extends Component {
+const Config = ({sdk}) => {
+    const [params, setParams] = useState({
+        translationService: "",
+        usersWithTranslation: [],
+    });
+    const [spaceUsers, setSpaceUsers] = useState([]);
 
-    constructor(props) {
-        super(props);
-        this.state = {parameters: {}};
+    const onConfigure = async () => {
+        const currentState = await sdk.app.getCurrentState();
 
-        // `onConfigure` allows to configure a callback to be
-        // invoked when a user attempts to install the app or update
-        // its configuration.
-        props.sdk.app.onConfigure(() => this.onConfigure());
-    }
-
-    async componentDidMount() {
-        // Get current parameters of the app.
-        // If the app is not installed yet, `parameters` will be `null`.
-        const parameters = await this.props.sdk.app.getParameters();
+        return {
+            parameters: params,
+            targetState: currentState,
+        };
+    };
 
-        this.setState(parameters ? {parameters} : this.state, () => {
-            // Once preparation has finished, call `setReady` to hide
-            // the loading screen and present the app to a user.
-            this.props.sdk.app.setReady();
+    const onFieldChanged = (value, field) => {
+        setParams({
+            ...params,
+            [field]: value,
         });
-    }
+    };
 
-    async onConfigure() {
-        // This method will be called when a user clicks on "Install"
-        // or "Save" in the configuration screen.
-        // for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
+    useEffect(() => {
+        if (sdk) {
+            sdk.app.getParameters().then(params => {
+                setParams(params);
+                sdk.app.setReady();
+            });
+            sdk.space.getUsers().then(users => {
+                setSpaceUsers(users.items.map(v => v.email));
+            });
+        }
+    }, [sdk]);
 
-        // Get current the state of EditorInterface and other entities
-        // related to this app installation
-        const currentState = await this.props.sdk.app.getCurrentState();
+    useEffect(() => {
+        if (sdk) {
+            sdk.app.onConfigure(() => onConfigure());
+        }
+    }, [sdk, params]);
 
-        return {
-            // Parameters to be persisted as the app configuration.
-            parameters: this.state.parameters,
-            // In case you don't want to submit any update to app
-            // locations, you can just pass the currentState as is
-            targetState: currentState,
-        };
-    }
+    const handleSelectItem = (event) => {
+        const {
+            checked,
+            value,
+        } = event.target;
+
+        let newValue = params?.usersWithTranslation || [];
+        if (checked) {
+            newValue = [...newValue, value];
+        } else {
+            newValue = newValue.filter((email) => email !== value);
+        }
 
-    onFieldChanged(value, field) {
-        this.setState({
-            parameters: {
-                ...this.state.parameters,
-                [field]: value,
-            },
+        setParams({
+            ...params,
+            usersWithTranslation: newValue,
         });
-    }
+    };
+
+
+    return (
+        <Workbench className={css({
+            padding: '80px',
+            backgroundColor: "#FFF",
+        })}>
+            <Form>
+                <Heading>Configuration</Heading>
 
-    render() {
-        return (
-            <Workbench className={css({
-                padding: '80px',
-                backgroundColor: "#FFF",
-            })}>
-                <Form>
-                    <Heading>Configuration</Heading>
-                    <TextField
-                        value={this.state.parameters.cloudinaryApiKey}
-                        onChange={e => this.onFieldChanged(e.target.value, "cloudinaryApiKey")}
-                        labelText="Cloudinary API Key"
-                        required
-                    />
-                    <TextField
-                        value={this.state.parameters.cloudinaryCloudName}
-                        onChange={e => this.onFieldChanged(e.target.value, "cloudinaryCloudName")}
-                        labelText="Cloudinary Cloud Name"
-                        required
-                    />
-                </Form>
-            </Workbench>
-        );
-    }
+                <FormControl>
+                    <FormControl.Label>Benutzer mit Übersetzung im Editor</FormControl.Label>
+                    <Multiselect
+                        currentSelection={params.usersWithTranslation}
+                        popoverProps={{isFullWidth: true}}
+                    >
+                        {spaceUsers.map((userEmail) => {
+                            const val = userEmail.toLowerCase().replace(/\s/g, '-');
+                            return (
+                                <Multiselect.Option
+                                    key={`user-${val}}`}
+                                    itemId={val}
+                                    value={userEmail}
+                                    label={userEmail}
+                                    onSelectItem={handleSelectItem}
+                                    isChecked={params.usersWithTranslation?.includes(userEmail)}
+                                />
+                            );
+                        })}
+                    </Multiselect>
+                </FormControl>
+                <TextField
+                    value={params.translationService}
+                    onChange={e => onFieldChanged(e.target.value, "translationService")}
+                    labelText="Translation Service URL"
+                    required
+                />
+            </Form>
+        </Workbench>
+    );
+};
 
-}
+export default Config;

package/src/components/Dialog.js

@@ -7,6 +7,7 @@ import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 import BlockEditor from "@vonaffenfels/slate-editor/dist/BlockEditor";
 // eslint-disable-next-line import/no-unresolved
 import storybookStories from "storybookStories";
+import {DialogTranslation} from "./DialogTranslation";
 
 const Dialog = ({
     sdk,
@@ -30,6 +31,8 @@ const Dialog = ({
     switch (sdk.parameters.invocation.type) {
         case "cloudinary":
             return <DialogCloudinary sdk={sdk} config={sdk.parameters.invocation} activeConfig={activeConfig} />;
+        case "translation":
+            return <DialogTranslation sdk={sdk} config={sdk.parameters.invocation} activeConfig={activeConfig} />;
         default:
             return <div className="relative flex h-full max-h-full justify-between">
                 <BlockEditor

package/src/components/DialogTranslation.js

@@ -0,0 +1,119 @@
+import {
+    useEffect, useState,
+} from "react";
+import {
+    Button, Table,
+} from "@contentful/f36-components";
+
+export const DialogTranslation = ({
+    sdk,
+    activeConfig,
+}) => {
+    const {entryId} = sdk.parameters.invocation;
+    const [entry, setEntry] = useState(null);
+    const [loading, setLoading] = useState({});
+    const [contentType, setContentType] = useState(null);
+
+    useEffect(() => {
+        sdk.space.getEntry(entryId).then(entry => {
+            sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
+                setEntry(entry);
+                setContentType(contentType);
+            });
+        });
+    }, []);
+
+    if (!contentType) {
+        return null;
+    }
+
+    const translateValue = async (content, targetLanguage, translateFromLocale = "de") => {
+        if (!sdk?.parameters?.installation?.translationService) {
+            console.error(`no translation service configured!`);
+            return;
+        }
+
+        try {
+            const response = await fetch(sdk?.parameters?.installation?.translationService, {
+                method: "POST",
+                body: JSON.stringify({
+                    editorContent: typeof content === "object" ? content : undefined,
+                    text: typeof content === "string" ? content : undefined,
+                    targetLanguage,
+                    sourceLanguage: translateFromLocale,
+                }),
+            });
+
+            const translatedValue = await response.json();
+            return translatedValue?.translation || "";
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const localizedFields = contentType.fields.filter(field => field.localized);
+    const onTranslateClick = async (targetLanguage) => {
+        setLoading({[targetLanguage]: true});
+        const newEntry = {...entry};
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            const newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
+
+            newEntry.fields[localizedField.id][targetLanguage] = newValue;
+        }
+
+        await sdk.space.updateEntry(newEntry);
+        setEntry(await sdk.space.getEntry(entryId));
+        setLoading({});
+    };
+
+
+    return <div className="flex flex-col gap-2 p-4">
+        <Table>
+            <Table.Head>
+                <Table.Row>
+                    <Table.Cell />
+                    {sdk.locales.available.map(locale => {
+                        return <Table.Cell key={locale}>
+                            {locale !== "de" && <Button size="small" variant="primary" onClick={e => onTranslateClick(locale)}>Übersetzen</Button>}
+                        </Table.Cell>;
+                    })}
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                <Table.Row>
+                    <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>
+                            {field.name}
+                        </Table.Cell>
+                        {sdk.locales.available.map(locale => {
+                            let preview = entry?.fields[field.id]?.[locale];
+
+                            if (!preview) {
+                                preview = "";
+                            }
+
+                            if (typeof preview === "object") {
+                                preview = "Keine Vorschau...";
+                            }
+
+                            return <Table.Cell key={locale}>
+                                {preview}
+                            </Table.Cell>;
+                        })}
+                    </Table.Row>;
+                })}
+            </Table.Body>
+        </Table>
+    </div>;
+};

package/src/components/EditorField.js

@@ -22,6 +22,7 @@ const EditorField = ({
     sdk,
     portal,
     locale,
+    setLocale,
     onStorybookElementClick,
     elementPropsMap,
     activeConfig,
@@ -151,6 +152,8 @@ const EditorField = ({
         <BlockEditor
             onChange={onChange}
             value={validateValue(value)}
+            locale={locale}
+            setLocale={setLocale}
             contentfulSdk={sdk}
             config={JSON.parse("{}")}
             elementPropsMap={elementPropsMap}

package/src/components/EntryEditor.js

@@ -37,6 +37,7 @@ const Entry = ({
         fieldSdk={fieldSdk}
         editorSdk={sdk.editor}
         locale={locale}
+        setLocale={setLocale}
         elementPropsMap={elementPropsMap}
         entrySdk={sdk.entry}
         appSdk={sdk.app}

package/src/components/Sidebar.js

@@ -0,0 +1,71 @@
+import {Button} from "@contentful/f36-components";
+import React, {
+    useEffect, useState,
+} from "react";
+
+export const Sidebar = ({
+    sdk,
+    activeConfig,
+}) => {
+    return <div className="flex w-full flex-col gap-2">
+        <div className="w-full">
+            <OpenProdPageLink sdk={sdk} activeConfig={activeConfig}/>
+        </div>
+        <div className="w-full">
+            <SidebarTranslations sdk={sdk}/>
+        </div>
+    </div>;
+};
+
+const OpenProdPageLink = ({
+    activeConfig,
+    sdk,
+}) => {
+    const [slug, setSlug] = useState(sdk?.entry?.fields?.slug?.getValue());
+
+    useEffect(() => {
+        if (sdk?.entry?.fields?.slug) {
+            return sdk.entry.fields.slug.onValueChanged(setSlug);
+        }
+    }, [sdk]);
+
+    const disabled = !activeConfig?.domain || !slug;
+    const link = `${activeConfig.domain}/${slug}`;
+
+    const onClick = () => {
+        if (disabled) {
+            return;
+        }
+        window.open(link, "_blank");
+    };
+
+    return <Button isDisabled={disabled} isFullWidth={true} variant="secondary" onClick={onClick}>Live-Seite öffnen</Button>;
+};
+
+const SidebarTranslations = ({sdk}) => {
+    const enabled = sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService;
+
+    if (!enabled) {
+        return null;
+    }
+
+    const onClick = () => {
+        sdk.dialogs.openCurrentApp({
+            title: 'Übersetzen',
+            width: 'fullWidth',
+            position: "center",
+            allowHeightOverflow: true,
+            shouldCloseOnOverlayClick: false,
+            shouldCloseOnEscapePress: false,
+            minHeight: 500,
+            parameters: {
+                type: "translation",
+                entryId: sdk.entry.getSys().id,
+            },
+        });
+    };
+
+    return <>
+        <Button isFullWidth={true} onClick={onClick}>Übersetzen</Button>
+    </>;
+};

package/src/index.js

@@ -14,6 +14,7 @@ import EntryEditor from './components/EntryEditor';
 import Config from './components/ConfigScreen';
 import Field from './components/Field';
 import Dialog from "./components/Dialog";
+import {Sidebar} from "./components/Sidebar";
 
 export const BaseContentfulApp = (props) => {
     init(async (sdk) => {
@@ -69,6 +70,10 @@ export const BaseContentfulApp = (props) => {
                 location: locations.LOCATION_DIALOG,
                 component: <Dialog sdk={sdk} elementPropsMap={elementPropsMap} activeConfig={config}/>,
             },
+            {
+                location: locations.LOCATION_ENTRY_SIDEBAR,
+                component: <Sidebar sdk={sdk} activeConfig={config}/>,
+            },
         ];
 
         ComponentLocationSettings.forEach((componentLocationSetting) => {