@vonaffenfels/contentful-slate-editor 1.1.32 → 1.1.33

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 (4) hide show
  1. package/package.json +5 -3
  2. package/src/components/DialogTranslation.js +297 -297
  3. package/src/components/EditorField.js +8 -1
  4. package/src/components/Sidebar.js +23 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/contentful-slate-editor",
3
- "version": "1.1.32",
3
+ "version": "1.1.33",
4
4
  "scripts": {
5
5
  "prepublish": "yarn run build",
6
6
  "dev": "yarn run start",
@@ -15,6 +15,8 @@
15
15
  "@babel/preset-env": "^7.13.15",
16
16
  "@babel/preset-react": "^7.13.13",
17
17
  "@contentful/app-sdk": "^3.33.0",
18
+ "@contentful/f36-components": "^4.56.2",
19
+ "@contentful/f36-multiselect": "^4.21.0",
18
20
  "@contentful/field-editor-single-line": "^0.14.1",
19
21
  "@contentful/field-editor-test-utils": "^0.11.1",
20
22
  "@contentful/forma-36-fcss": "^0.3.1",
@@ -93,10 +95,10 @@
93
95
  "webpack-watch-files-plugin": "^1.2.1"
94
96
  },
95
97
  "dependencies": {
96
- "@vonaffenfels/slate-editor": "^1.1.32",
98
+ "@vonaffenfels/slate-editor": "^1.1.33",
97
99
  "webpack": "5.88.2"
98
100
  },
99
- "gitHead": "2580259ce68220072e2ed08afae7dec37f573dee",
101
+ "gitHead": "65ee8d817acc8ea8c80ef308316b2c25def0ace0",
100
102
  "publishConfig": {
101
103
  "access": "public"
102
104
  }
package/src/components/DialogTranslation.js CHANGED
@@ -1,298 +1,298 @@
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
+ 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>;
298
298
  };
package/src/components/EditorField.js CHANGED
@@ -148,6 +148,13 @@ const EditorField = ({
148
148
  });
149
149
  };
150
150
 
151
+ const slug = sdk?.entry?.fields?.slug?.getForLocale(locale)?.getValue();
152
+ let liveLink = slug ? `${activeConfig.domain}/${slug}` : null;
153
+
154
+ if (slug && sdk?.locales?.default !== locale) {
155
+ liveLink = `${activeConfig.domain}/${locale}/${slug}`;
156
+ }
157
+
151
158
  return <div ref={wrapperRef} className="editor-field h-full">
152
159
  <BlockEditor
153
160
  onChange={onChange}
@@ -162,7 +169,7 @@ const EditorField = ({
162
169
  isLoading={isLoadingCount !== 0}
163
170
  storybookComponentDataLoader={async (block, attributes) => await getLoaderResult(block, attributes)}
164
171
  onStorybookElementClick={onStorybookElementClick}
165
- activeConfig={activeConfig}
172
+ liveLink={liveLink}
166
173
  />
167
174
  </div>;
168
175
  };
package/src/components/Sidebar.js CHANGED
@@ -22,6 +22,23 @@ const OpenProdPageLink = ({
22
22
  sdk,
23
23
  }) => {
24
24
  const [slug, setSlug] = useState(sdk?.entry?.fields?.slug?.getValue());
25
+ const [locale, setLocale] = useState(sdk.locales.default);
26
+
27
+ useEffect(() => {
28
+ const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
29
+ setLocale(loc?.focused || sdk.locales.default);
30
+ });
31
+
32
+ return () => {
33
+ detachHandler();
34
+ };
35
+ }, [sdk]);
36
+
37
+ useEffect(() => {
38
+ if (locale) {
39
+ setSlug(sdk?.entry?.fields?.slug.getForLocale(locale).getValue());
40
+ }
41
+ }, [locale]);
25
42
 
26
43
  useEffect(() => {
27
44
  if (sdk?.entry?.fields?.slug) {
@@ -30,12 +47,17 @@ const OpenProdPageLink = ({
30
47
  }, [sdk]);
31
48
 
32
49
  const disabled = !activeConfig?.domain || !slug;
33
- const link = `${activeConfig.domain}/${slug}`;
50
+ let link = `${activeConfig.domain}/${slug}`;
51
+
52
+ if (sdk?.locales?.default !== locale) {
53
+ link = `${activeConfig.domain}/${locale}/${slug}`;
54
+ }
34
55
 
35
56
  const onClick = () => {
36
57
  if (disabled) {
37
58
  return;
38
59
  }
60
+
39
61
  window.open(link, "_blank");
40
62
  };
41
63