@vonaffenfels/contentful-slate-editor 1.1.33 → 1.1.36

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 +3 -3
  2. package/src/components/ConfigScreen.js +7 -0
  3. package/src/components/DialogTranslation.js +299 -297
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/contentful-slate-editor",
3
- "version": "1.1.33",
3
+ "version": "1.1.36",
4
4
  "scripts": {
5
5
  "prepublish": "yarn run build",
6
6
  "dev": "yarn run start",
@@ -95,10 +95,10 @@
95
95
  "webpack-watch-files-plugin": "^1.2.1"
96
96
  },
97
97
  "dependencies": {
98
- "@vonaffenfels/slate-editor": "^1.1.33",
98
+ "@vonaffenfels/slate-editor": "^1.1.36",
99
99
  "webpack": "5.88.2"
100
100
  },
101
- "gitHead": "65ee8d817acc8ea8c80ef308316b2c25def0ace0",
101
+ "gitHead": "c55640e4184996f5503928a6e1f990c3b4420a52",
102
102
  "publishConfig": {
103
103
  "access": "public"
104
104
  }
package/src/components/ConfigScreen.js CHANGED
@@ -11,6 +11,7 @@ import {css} from 'emotion';
11
11
  const Config = ({sdk}) => {
12
12
  const [params, setParams] = useState({
13
13
  translationService: "",
14
+ translationServiceKey: "",
14
15
  usersWithTranslation: [],
15
16
  });
16
17
  const [spaceUsers, setSpaceUsers] = useState([]);
@@ -104,6 +105,12 @@ const Config = ({sdk}) => {
104
105
  labelText="Translation Service URL"
105
106
  required
106
107
  />
108
+ <TextField
109
+ value={params.translationServiceKey}
110
+ onChange={e => onFieldChanged(e.target.value, "translationServiceKey")}
111
+ labelText="Translation Service API Key"
112
+ required
113
+ />
107
114
  </Form>
108
115
  </Workbench>
109
116
  );
package/src/components/DialogTranslation.js CHANGED
@@ -1,298 +1,300 @@
1
- import {
2
- useEffect, useState,
3
- } from "react";
4
- import {
5
- Button, Table,
6
- } from "@contentful/f36-components";
7
- import getSlug from "speakingurl";
8
-
9
- export const DialogTranslation = ({
10
- sdk,
11
- activeConfig,
12
- translateFromLocale = "de",
13
- }) => {
14
- const {entryId} = sdk.parameters.invocation;
15
- const [entry, setEntry] = useState(null);
16
- const [loading, setLoading] = useState({});
17
- const [usage, setUsage] = useState({});
18
- const [contentType, setContentType] = useState(null);
19
- const localizedFields = contentType?.fields?.filter(field => field.localized);
20
-
21
- const getTranslationUsage = async (content) => {
22
- if (!sdk?.parameters?.installation?.translationService) {
23
- console.error(`no translation service configured!`);
24
- return;
25
- }
26
-
27
- try {
28
- const response = await fetch(sdk?.parameters?.installation?.translationService + "/usage", {
29
- method: "POST",
30
- body: JSON.stringify({
31
- editorContent: typeof content === "object" ? content : undefined,
32
- text: typeof content === "string" ? content : undefined,
33
- }),
34
- });
35
-
36
- const translatedValue = await response.json();
37
- return translatedValue?.usage || 0;
38
- } catch (e) {
39
- console.error(e);
40
- }
41
- };
42
-
43
- const updateUsage = async (entry, contentType) => {
44
- const localizedFields = contentType?.fields?.filter(field => field.localized);
45
- const newUsage = {};
46
- for (let i = 0; i < localizedFields.length; i++) {
47
- const localizedField = localizedFields[i];
48
- newUsage[localizedField.id] = await getTranslationUsage(entry?.fields[localizedField.id]?.[translateFromLocale]);
49
- }
50
-
51
- return newUsage;
52
- };
53
-
54
- useEffect(() => {
55
- sdk.space.getEntry(entryId).then(entry => {
56
- sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
57
- updateUsage(entry, contentType).then((usage) => {
58
- setUsage(usage);
59
- setEntry(entry);
60
- setContentType(contentType);
61
- });
62
- });
63
- });
64
- }, []);
65
-
66
- if (!contentType) {
67
- return null;
68
- }
69
-
70
- const translateValue = async (content, targetLanguage) => {
71
- if (!sdk?.parameters?.installation?.translationService) {
72
- console.error(`no translation service configured!`);
73
- return;
74
- }
75
-
76
- try {
77
- const response = await fetch(sdk?.parameters?.installation?.translationService, {
78
- method: "POST",
79
- body: JSON.stringify({
80
- editorContent: typeof content === "object" ? content : undefined,
81
- text: typeof content === "string" ? content : undefined,
82
- targetLanguage,
83
- translateFromLocale: translateFromLocale,
84
- }),
85
- });
86
-
87
- const translatedValue = await response.json();
88
- return translatedValue?.translation || "";
89
- } catch (e) {
90
- console.error(e);
91
- }
92
- };
93
-
94
- const onTranslateClick = async (targetLanguageOrLanguages, refreshAll = false, onlyFields = []) => {
95
- if (!Array.isArray(targetLanguageOrLanguages)) {
96
- targetLanguageOrLanguages = [targetLanguageOrLanguages];
97
- }
98
-
99
- let newEntry = entry;
100
- for (let i = 0; i < targetLanguageOrLanguages.length; i++) {
101
- if (targetLanguageOrLanguages[i] === translateFromLocale) {
102
- continue;
103
- }
104
-
105
- newEntry = await translateForLocale(
106
- targetLanguageOrLanguages[i], newEntry, refreshAll, onlyFields,
107
- );
108
- }
109
-
110
- await sdk.space.updateEntry(newEntry);
111
- setEntry(await sdk.space.getEntry(entryId));
112
- };
113
-
114
- const translateForLocale = async (
115
- targetLanguage, entry = {}, refreshAll = false, onlyFields = [],
116
- ) => {
117
- setLoading({
118
- ...loading,
119
- [targetLanguage]: true,
120
- });
121
- const newEntry = {...entry};
122
- for (let i = 0; i < localizedFields.length; i++) {
123
- const localizedField = localizedFields[i];
124
- const currentValue = entry?.fields[localizedField.id]?.[targetLanguage];
125
- if (
126
- (!refreshAll && !isEmptyValue(currentValue) && !onlyFields.length) ||
127
- (onlyFields.length && !onlyFields.includes(localizedField.id))
128
- ) {
129
- continue;
130
- }
131
-
132
- setLoading({
133
- ...loading,
134
- [targetLanguage + localizedField.id]: true,
135
- });
136
-
137
- let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
138
-
139
- setLoading({
140
- ...loading,
141
- [targetLanguage + localizedField.id]: false,
142
- });
143
-
144
- if (!newValue) {
145
- continue;
146
- }
147
-
148
- if (localizedField.id === "slug" && newValue) {
149
- newValue = getSlug(newValue);
150
- }
151
-
152
- newEntry.fields[localizedField.id][targetLanguage] = newValue;
153
- }
154
- setLoading({
155
- ...loading,
156
- [targetLanguage]: false,
157
- });
158
-
159
- return newEntry;
160
- };
161
-
162
- const isEmptyValue = (value) => {
163
- if (!value) {
164
- return true;
165
- }
166
-
167
- // editor value
168
- if (Array.isArray(value)) {
169
- if (value.length === 1 && value[0].type === "paragraph" && value[0].children.length === 1 && value[0].children[0].text === "") {
170
- return true;
171
- }
172
- }
173
-
174
- return false;
175
- };
176
-
177
- const isComplete = (locale) => {
178
- for (let i = 0; i < localizedFields.length; i++) {
179
- const localizedField = localizedFields[i];
180
- const value = entry?.fields[localizedField.id]?.[locale];
181
-
182
- if (isEmptyValue(value)) {
183
- return false;
184
- }
185
- }
186
-
187
- return true;
188
- };
189
-
190
- const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
191
-
192
- return <div className="flex flex-col gap-2 p-4">
193
- <Table>
194
- <Table.Head>
195
- <Table.Row>
196
- <Table.Cell style={{width: 250}}>Feld</Table.Cell>
197
- <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
198
- {sdk.locales.available.map(locale => {
199
- const languageComplete = isComplete(locale);
200
- const isTranslateFromLocale = locale === translateFromLocale;
201
-
202
- if (isTranslateFromLocale) {
203
- return <Table.Cell key={locale}/>;
204
- }
205
-
206
- if (loading[locale]) {
207
- return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
208
- }
209
-
210
- const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
211
-
212
- return <Table.Cell key={locale}>
213
- <Button
214
- size="small"
215
- className="group"
216
- variant={languageComplete ? "secondary" : "primary"}
217
- title={buttonLabel}
218
- onClick={e => onTranslateClick(locale, languageComplete)}>
219
- {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen</span>}
220
- {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
221
- </Button>
222
- </Table.Cell>;
223
- })}
224
- </Table.Row>
225
- </Table.Head>
226
- <Table.Body>
227
- <Table.Row>
228
- <Table.Cell/>
229
- <Table.Cell>∑ {fullUsage}</Table.Cell>
230
- {sdk.locales.available.map(locale => {
231
- const name = sdk.locales.names[locale];
232
-
233
- return <Table.Cell key={locale}>
234
- {name}
235
- </Table.Cell>;
236
- })}
237
- </Table.Row>
238
- {localizedFields.map(field => {
239
- return <Table.Row key={field.id}>
240
- <Table.Cell>
241
- <Button
242
- className="max-w-full truncate"
243
- style={{maxWidth: 250}}
244
- size="small"
245
- variant={"transparent"}
246
- title={"Alle Übersetzungen Aktualisieren"}
247
- onClick={e => {
248
- onTranslateClick(sdk.locales.available, false, [field.id]);
249
- }}>
250
- {field.name}
251
- </Button>
252
- </Table.Cell>
253
- <Table.Cell>
254
- {usage?.[field.id]}
255
- </Table.Cell>
256
- {sdk.locales.available.map(locale => {
257
- let preview = entry?.fields[field.id]?.[locale];
258
-
259
- if (!preview) {
260
- preview = "";
261
- }
262
-
263
- if (typeof preview === "object") {
264
- preview = "Keine Vorschau Verfügbar";
265
- }
266
-
267
- if (locale === translateFromLocale) {
268
- return <Table.Cell key={locale}>
269
- <div
270
- className="max-w-full truncate"
271
- style={{maxWidth: 250}}>
272
- {preview}
273
- </div>
274
- </Table.Cell>;
275
- }
276
-
277
- if (loading[locale + field.id]) {
278
- return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
279
- }
280
-
281
- return <Table.Cell key={locale}>
282
- <Button
283
- className="max-w-full truncate"
284
- style={{maxWidth: 250}}
285
- size="small"
286
- variant={"transparent"}
287
- title={"Übersetzung Aktualisieren"}
288
- onClick={e => onTranslateClick(locale, false, [field.id])}>
289
- {preview}
290
- </Button>
291
- </Table.Cell>;
292
- })}
293
- </Table.Row>;
294
- })}
295
- </Table.Body>
296
- </Table>
297
- </div>;
1
+ import {
2
+ useEffect, useState,
3
+ } from "react";
4
+ import {
5
+ Button, Table,
6
+ } from "@contentful/f36-components";
7
+ import getSlug from "speakingurl";
8
+
9
+ export const DialogTranslation = ({
10
+ sdk,
11
+ activeConfig,
12
+ translateFromLocale = "de",
13
+ }) => {
14
+ const {entryId} = sdk.parameters.invocation;
15
+ const [entry, setEntry] = useState(null);
16
+ const [loading, setLoading] = useState({});
17
+ const [usage, setUsage] = useState({});
18
+ const [contentType, setContentType] = useState(null);
19
+ const localizedFields = contentType?.fields?.filter(field => field.localized);
20
+
21
+ const getTranslationUsage = async (content) => {
22
+ if (!sdk?.parameters?.installation?.translationService) {
23
+ console.error(`no translation service configured!`);
24
+ return;
25
+ }
26
+
27
+ try {
28
+ const response = await fetch(sdk?.parameters?.installation?.translationService + "/usage", {
29
+ method: "POST",
30
+ headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
31
+ body: JSON.stringify({
32
+ editorContent: typeof content === "object" ? content : undefined,
33
+ text: typeof content === "string" ? content : undefined,
34
+ }),
35
+ });
36
+
37
+ const translatedValue = await response.json();
38
+ return translatedValue?.usage || 0;
39
+ } catch (e) {
40
+ console.error(e);
41
+ }
42
+ };
43
+
44
+ const updateUsage = async (entry, contentType) => {
45
+ const localizedFields = contentType?.fields?.filter(field => field.localized);
46
+ const newUsage = {};
47
+ for (let i = 0; i < localizedFields.length; i++) {
48
+ const localizedField = localizedFields[i];
49
+ newUsage[localizedField.id] = await getTranslationUsage(entry?.fields[localizedField.id]?.[translateFromLocale]);
50
+ }
51
+
52
+ return newUsage;
53
+ };
54
+
55
+ useEffect(() => {
56
+ sdk.space.getEntry(entryId).then(entry => {
57
+ sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
58
+ updateUsage(entry, contentType).then((usage) => {
59
+ setUsage(usage);
60
+ setEntry(entry);
61
+ setContentType(contentType);
62
+ });
63
+ });
64
+ });
65
+ }, []);
66
+
67
+ if (!contentType) {
68
+ return null;
69
+ }
70
+
71
+ const translateValue = async (content, targetLanguage) => {
72
+ if (!sdk?.parameters?.installation?.translationService) {
73
+ console.error(`no translation service configured!`);
74
+ return;
75
+ }
76
+
77
+ try {
78
+ const response = await fetch(sdk?.parameters?.installation?.translationService, {
79
+ method: "POST",
80
+ headers: {"X-Api-Key": sdk?.parameters?.installation?.translationServiceKey},
81
+ body: JSON.stringify({
82
+ editorContent: typeof content === "object" ? content : undefined,
83
+ text: typeof content === "string" ? content : undefined,
84
+ targetLanguage,
85
+ translateFromLocale: translateFromLocale,
86
+ }),
87
+ });
88
+
89
+ const translatedValue = await response.json();
90
+ return translatedValue?.translation || "";
91
+ } catch (e) {
92
+ console.error(e);
93
+ }
94
+ };
95
+
96
+ const onTranslateClick = async (targetLanguageOrLanguages, refreshAll = false, onlyFields = []) => {
97
+ if (!Array.isArray(targetLanguageOrLanguages)) {
98
+ targetLanguageOrLanguages = [targetLanguageOrLanguages];
99
+ }
100
+
101
+ let newEntry = entry;
102
+ for (let i = 0; i < targetLanguageOrLanguages.length; i++) {
103
+ if (targetLanguageOrLanguages[i] === translateFromLocale) {
104
+ continue;
105
+ }
106
+
107
+ newEntry = await translateForLocale(
108
+ targetLanguageOrLanguages[i], newEntry, refreshAll, onlyFields,
109
+ );
110
+ }
111
+
112
+ await sdk.space.updateEntry(newEntry);
113
+ setEntry(await sdk.space.getEntry(entryId));
114
+ };
115
+
116
+ const translateForLocale = async (
117
+ targetLanguage, entry = {}, refreshAll = false, onlyFields = [],
118
+ ) => {
119
+ setLoading({
120
+ ...loading,
121
+ [targetLanguage]: true,
122
+ });
123
+ const newEntry = {...entry};
124
+ for (let i = 0; i < localizedFields.length; i++) {
125
+ const localizedField = localizedFields[i];
126
+ const currentValue = entry?.fields[localizedField.id]?.[targetLanguage];
127
+ if (
128
+ (!refreshAll && !isEmptyValue(currentValue) && !onlyFields.length) ||
129
+ (onlyFields.length && !onlyFields.includes(localizedField.id))
130
+ ) {
131
+ continue;
132
+ }
133
+
134
+ setLoading({
135
+ ...loading,
136
+ [targetLanguage + localizedField.id]: true,
137
+ });
138
+
139
+ let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
140
+
141
+ setLoading({
142
+ ...loading,
143
+ [targetLanguage + localizedField.id]: false,
144
+ });
145
+
146
+ if (!newValue) {
147
+ continue;
148
+ }
149
+
150
+ if (localizedField.id === "slug" && newValue) {
151
+ newValue = getSlug(newValue);
152
+ }
153
+
154
+ newEntry.fields[localizedField.id][targetLanguage] = newValue;
155
+ }
156
+ setLoading({
157
+ ...loading,
158
+ [targetLanguage]: false,
159
+ });
160
+
161
+ return newEntry;
162
+ };
163
+
164
+ const isEmptyValue = (value) => {
165
+ if (!value) {
166
+ return true;
167
+ }
168
+
169
+ // editor value
170
+ if (Array.isArray(value)) {
171
+ if (value.length === 1 && value[0].type === "paragraph" && value[0].children.length === 1 && value[0].children[0].text === "") {
172
+ return true;
173
+ }
174
+ }
175
+
176
+ return false;
177
+ };
178
+
179
+ const isComplete = (locale) => {
180
+ for (let i = 0; i < localizedFields.length; i++) {
181
+ const localizedField = localizedFields[i];
182
+ const value = entry?.fields[localizedField.id]?.[locale];
183
+
184
+ if (isEmptyValue(value)) {
185
+ return false;
186
+ }
187
+ }
188
+
189
+ return true;
190
+ };
191
+
192
+ const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
193
+
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>
258
+ {sdk.locales.available.map(locale => {
259
+ let preview = entry?.fields[field.id]?.[locale];
260
+
261
+ if (!preview) {
262
+ preview = "";
263
+ }
264
+
265
+ if (typeof preview === "object") {
266
+ preview = "Keine Vorschau Verfügbar";
267
+ }
268
+
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
+ }
278
+
279
+ if (loading[locale + field.id]) {
280
+ return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
281
+ }
282
+
283
+ return <Table.Cell key={locale}>
284
+ <Button
285
+ className="max-w-full truncate"
286
+ style={{maxWidth: 250}}
287
+ size="small"
288
+ variant={"transparent"}
289
+ title={"Übersetzung Aktualisieren"}
290
+ onClick={e => onTranslateClick(locale, false, [field.id])}>
291
+ {preview}
292
+ </Button>
293
+ </Table.Cell>;
294
+ })}
295
+ </Table.Row>;
296
+ })}
297
+ </Table.Body>
298
+ </Table>
299
+ </div>;
298
300
  };