@vonaffenfels/contentful-slate-editor 1.1.37 → 1.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/components/DialogTranslation.js +110 -93
  3. package/src/components/Sidebar.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/contentful-slate-editor",
3
- "version": "1.1.37",
3
+ "version": "1.1.38",
4
4
  "scripts": {
5
5
  "prepublish": "yarn run build",
6
6
  "dev": "yarn run start",
@@ -98,7 +98,7 @@
98
98
  "@vonaffenfels/slate-editor": "^1.1.37",
99
99
  "webpack": "5.88.2"
100
100
  },
101
- "gitHead": "23bd1926bceee0ce73a5d25f021c544ead009f77",
101
+ "gitHead": "e620b8cc19b444275dcddcff3207b4b3936516fa",
102
102
  "publishConfig": {
103
103
  "access": "public"
104
104
  }
package/src/components/DialogTranslation.js CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  useEffect, useState,
3
3
  } from "react";
4
4
  import {
5
- Button, Table,
5
+ Button, Select, Table,
6
6
  } from "@contentful/f36-components";
7
7
  import getSlug from "speakingurl";
8
8
 
@@ -15,6 +15,7 @@ export const DialogTranslation = ({
15
15
  const [entry, setEntry] = useState(null);
16
16
  const [loading, setLoading] = useState({});
17
17
  const [usage, setUsage] = useState({});
18
+ const [provider, setProvider] = useState("deepl");
18
19
  const [contentType, setContentType] = useState(null);
19
20
  const localizedFields = contentType?.fields?.filter(field => field.localized);
20
21
 
@@ -68,7 +69,7 @@ export const DialogTranslation = ({
68
69
  return null;
69
70
  }
70
71
 
71
- const translateValue = async (content, targetLanguage) => {
72
+ const translateValue = async (content, targetLanguage, provider) => {
72
73
  if (!sdk?.parameters?.installation?.translationService) {
73
74
  console.error(`no translation service configured!`);
74
75
  return;
@@ -82,6 +83,7 @@ export const DialogTranslation = ({
82
83
  editorContent: typeof content === "object" ? content : undefined,
83
84
  text: typeof content === "string" ? content : undefined,
84
85
  targetLanguage,
86
+ provider,
85
87
  translateFromLocale: translateFromLocale,
86
88
  }),
87
89
  });
@@ -136,7 +138,7 @@ export const DialogTranslation = ({
136
138
  [targetLanguage + localizedField.id]: true,
137
139
  });
138
140
 
139
- let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
141
+ let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage, provider);
140
142
 
141
143
  setLoading({
142
144
  ...loading,
@@ -189,112 +191,127 @@ export const DialogTranslation = ({
189
191
  return true;
190
192
  };
191
193
 
194
+ const onProviderChange = function (e) {
195
+ setProvider(e.target.value);
196
+ };
197
+
192
198
  const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
193
199
 
194
- return <div className="flex flex-col gap-2 p-4">
195
- <Table>
196
- <Table.Head>
197
- <Table.Row>
198
- <Table.Cell style={{width: 250}}>Feld</Table.Cell>
199
- <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
200
- {sdk.locales.available.map(locale => {
201
- const languageComplete = isComplete(locale);
202
- const isTranslateFromLocale = locale === translateFromLocale;
203
-
204
- if (isTranslateFromLocale) {
205
- return <Table.Cell key={locale}/>;
206
- }
207
-
208
- if (loading[locale]) {
209
- return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
210
- }
211
-
212
- const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
213
-
214
- return <Table.Cell key={locale}>
215
- <Button
216
- size="small"
217
- className="group"
218
- variant={languageComplete ? "secondary" : "primary"}
219
- title={buttonLabel}
220
- onClick={e => onTranslateClick(locale, languageComplete)}>
221
- {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen</span>}
222
- {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
223
- </Button>
224
- </Table.Cell>;
225
- })}
226
- </Table.Row>
227
- </Table.Head>
228
- <Table.Body>
229
- <Table.Row>
230
- <Table.Cell/>
231
- <Table.Cell>∑ {fullUsage}</Table.Cell>
232
- {sdk.locales.available.map(locale => {
233
- const name = sdk.locales.names[locale];
234
-
235
- return <Table.Cell key={locale}>
236
- {name}
237
- </Table.Cell>;
238
- })}
239
- </Table.Row>
240
- {localizedFields.map(field => {
241
- return <Table.Row key={field.id}>
242
- <Table.Cell>
243
- <Button
244
- className="max-w-full truncate"
245
- style={{maxWidth: 250}}
246
- size="small"
247
- variant={"transparent"}
248
- title={"Alle Übersetzungen Aktualisieren"}
249
- onClick={e => {
250
- onTranslateClick(sdk.locales.available, false, [field.id]);
251
- }}>
252
- {field.name}
253
- </Button>
254
- </Table.Cell>
255
- <Table.Cell>
256
- {usage?.[field.id]}
257
- </Table.Cell>
200
+ return <div className="flex h-full flex-col justify-between gap-4 p-4">
201
+ <div className="h-full overflow-y-scroll">
202
+ <Table>
203
+ <Table.Head>
204
+ <Table.Row>
205
+ <Table.Cell style={{width: 250}}>Feld</Table.Cell>
206
+ <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
258
207
  {sdk.locales.available.map(locale => {
259
- let preview = entry?.fields[field.id]?.[locale];
208
+ const languageComplete = isComplete(locale);
209
+ const isTranslateFromLocale = locale === translateFromLocale;
260
210
 
261
- if (!preview) {
262
- preview = "";
211
+ if (isTranslateFromLocale) {
212
+ return <Table.Cell key={locale}/>;
263
213
  }
264
214
 
265
- if (typeof preview === "object") {
266
- preview = "Keine Vorschau Verfügbar";
215
+ if (loading[locale]) {
216
+ return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
267
217
  }
268
218
 
269
- if (locale === translateFromLocale) {
270
- return <Table.Cell key={locale}>
271
- <div
272
- className="max-w-full truncate"
273
- style={{maxWidth: 250}}>
274
- {preview}
275
- </div>
276
- </Table.Cell>;
277
- }
219
+ const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
278
220
 
279
- if (loading[locale + field.id]) {
280
- return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
281
- }
221
+ return <Table.Cell key={locale}>
222
+ <Button
223
+ size="small"
224
+ className="group"
225
+ variant={languageComplete ? "secondary" : "primary"}
226
+ title={buttonLabel}
227
+ onClick={e => onTranslateClick(locale, languageComplete)}>
228
+ {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen ({provider})</span>}
229
+ {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
230
+ </Button>
231
+ </Table.Cell>;
232
+ })}
233
+ </Table.Row>
234
+ </Table.Head>
235
+ <Table.Body>
236
+ <Table.Row>
237
+ <Table.Cell/>
238
+ <Table.Cell>∑ {fullUsage}</Table.Cell>
239
+ {sdk.locales.available.map(locale => {
240
+ const name = sdk.locales.names[locale];
282
241
 
283
242
  return <Table.Cell key={locale}>
243
+ {name}
244
+ </Table.Cell>;
245
+ })}
246
+ </Table.Row>
247
+ {localizedFields.map(field => {
248
+ return <Table.Row key={field.id}>
249
+ <Table.Cell>
284
250
  <Button
285
251
  className="max-w-full truncate"
286
252
  style={{maxWidth: 250}}
287
253
  size="small"
288
254
  variant={"transparent"}
289
- title={"Übersetzung Aktualisieren"}
290
- onClick={e => onTranslateClick(locale, false, [field.id])}>
291
- {preview}
255
+ title={"Alle Übersetzungen Aktualisieren"}
256
+ onClick={e => {
257
+ onTranslateClick(sdk.locales.available, false, [field.id]);
258
+ }}>
259
+ {field.name}
292
260
  </Button>
293
- </Table.Cell>;
294
- })}
295
- </Table.Row>;
296
- })}
297
- </Table.Body>
298
- </Table>
261
+ </Table.Cell>
262
+ <Table.Cell>
263
+ {usage?.[field.id]}
264
+ </Table.Cell>
265
+ {sdk.locales.available.map(locale => {
266
+ let preview = entry?.fields[field.id]?.[locale];
267
+
268
+ if (!preview) {
269
+ preview = "";
270
+ }
271
+
272
+ if (typeof preview === "object") {
273
+ preview = "Keine Vorschau Verfügbar";
274
+ }
275
+
276
+ if (locale === translateFromLocale) {
277
+ return <Table.Cell key={locale}>
278
+ <div
279
+ className="max-w-full truncate"
280
+ style={{maxWidth: 250}}>
281
+ {preview}
282
+ </div>
283
+ </Table.Cell>;
284
+ }
285
+
286
+ if (loading[locale + field.id]) {
287
+ return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
288
+ }
289
+
290
+ return <Table.Cell key={locale}>
291
+ <Button
292
+ className="max-w-full truncate"
293
+ style={{maxWidth: 250}}
294
+ size="small"
295
+ variant={"transparent"}
296
+ title={"Übersetzung Aktualisieren"}
297
+ onClick={e => onTranslateClick(locale, false, [field.id])}>
298
+ {preview}
299
+ </Button>
300
+ </Table.Cell>;
301
+ })}
302
+ </Table.Row>;
303
+ })}
304
+ </Table.Body>
305
+ </Table>
306
+ </div>
307
+ <div>
308
+ <label className="flex flex-row gap-4 align-middle">
309
+ <div className="flex items-center font-sans">Übersetzen mit</div>
310
+ <Select value={provider} onChange={onProviderChange} className="w-full">
311
+ <option value="deepl">DeepL</option>
312
+ <option value="gpt">Chat GPT (BETA)</option>
313
+ </Select>
314
+ </label>
315
+ </div>
299
316
  </div>;
300
317
  };
package/src/components/Sidebar.js CHANGED
@@ -36,7 +36,7 @@ const OpenProdPageLink = ({
36
36
 
37
37
  useEffect(() => {
38
38
  if (locale) {
39
- setSlug(sdk?.entry?.fields?.slug.getForLocale(locale).getValue());
39
+ setSlug(sdk?.entry?.fields?.slug?.getForLocale(locale).getValue());
40
40
  }
41
41
  }, [locale]);
42
42