@vonaffenfels/slate-editor 1.0.55 → 1.0.58
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.
- package/dist/BlockEditor.css +1 -1
- package/dist/BlockEditor.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/scss/storybook.scss +2 -1
- package/src/SidebarEditor/SidebarEditorField.js +92 -42
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonaffenfels/slate-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.58",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"cssnano": "^5.0.1",
|
|
72
72
|
"escape-html": "^1.0.3"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "e85142a8a7b6863ad2aa7a1ded8ee89a5f4d64aa",
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
77
77
|
}
|
package/scss/storybook.scss
CHANGED
|
@@ -6,13 +6,14 @@
|
|
|
6
6
|
width: 100%;
|
|
7
7
|
height: 100%;
|
|
8
8
|
position: absolute;
|
|
9
|
-
z-index:
|
|
9
|
+
z-index: 20;
|
|
10
10
|
background-color: rgba(255, 255, 255, 0.7);
|
|
11
11
|
color: black;
|
|
12
12
|
font-size: 1em;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: center;
|
|
15
15
|
content-visibility: auto;
|
|
16
|
+
outline: 3px dashed #036fe3;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
&.storybook-inline {
|
|
@@ -37,6 +37,10 @@ export const SidebarEditorField = ({
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
const renderFieldSelectOptions = field => {
|
|
40
|
+
if (field.options) {
|
|
41
|
+
field.control.options = field.options;
|
|
42
|
+
}
|
|
43
|
+
|
|
40
44
|
if (field?.control?.labels) {
|
|
41
45
|
field.control.options = field.control.labels;
|
|
42
46
|
}
|
|
@@ -51,12 +55,16 @@ export const SidebarEditorField = ({
|
|
|
51
55
|
));
|
|
52
56
|
} else {
|
|
53
57
|
return Object.keys(field.control.options).map(key => (
|
|
54
|
-
<option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
|
|
58
|
+
<option key={`select-option-${key}`} value={field.control.options[key]}>{field.control.options[key]}</option>
|
|
55
59
|
));
|
|
56
60
|
}
|
|
57
61
|
};
|
|
58
62
|
|
|
59
63
|
const getInputByField = (field, fieldKey) => {
|
|
64
|
+
if (!field) {
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
|
|
60
68
|
if (field?.control?.type === undefined) {
|
|
61
69
|
if (field?.options) {
|
|
62
70
|
field.control = {
|
|
@@ -68,6 +76,8 @@ export const SidebarEditorField = ({
|
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
|
|
79
|
+
const options = field?.control?.options || {};
|
|
80
|
+
|
|
71
81
|
switch (field?.control?.type) {
|
|
72
82
|
case "text":
|
|
73
83
|
return <textarea
|
|
@@ -84,7 +94,7 @@ export const SidebarEditorField = ({
|
|
|
84
94
|
onFocus={e => {
|
|
85
95
|
e.target.style.height = "5px";
|
|
86
96
|
e.target.style.height = e.target.scrollHeight + 2 + "px";
|
|
87
|
-
}}
|
|
97
|
+
}}/>;
|
|
88
98
|
case "boolean":
|
|
89
99
|
return (
|
|
90
100
|
<div>
|
|
@@ -92,7 +102,7 @@ export const SidebarEditorField = ({
|
|
|
92
102
|
id={fieldKey}
|
|
93
103
|
type="checkbox"
|
|
94
104
|
checked={value}
|
|
95
|
-
onChange={e => onChange(fieldKey, e.target.checked)}
|
|
105
|
+
onChange={e => onChange(fieldKey, e.target.checked)}/>
|
|
96
106
|
<label htmlFor={fieldKey}>{value ? "Ja" : "Nein"}</label>
|
|
97
107
|
</div>
|
|
98
108
|
);
|
|
@@ -111,7 +121,7 @@ export const SidebarEditorField = ({
|
|
|
111
121
|
value={value || ""}
|
|
112
122
|
onChange={e => onChange(fieldKey, e.target.value)}>
|
|
113
123
|
<option value="">Auswählen</option>
|
|
114
|
-
{field
|
|
124
|
+
{(field?.control?.streams || []).map(stream => (
|
|
115
125
|
<option key={`select-option-${stream.value}`} value={stream.value}>{stream.label}</option>
|
|
116
126
|
))}
|
|
117
127
|
</select>
|
|
@@ -121,7 +131,7 @@ export const SidebarEditorField = ({
|
|
|
121
131
|
<input
|
|
122
132
|
type="number"
|
|
123
133
|
value={value || ""}
|
|
124
|
-
onChange={e => onChange(fieldKey, e.target.value)}
|
|
134
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
125
135
|
);
|
|
126
136
|
case "range":
|
|
127
137
|
return (
|
|
@@ -131,7 +141,7 @@ export const SidebarEditorField = ({
|
|
|
131
141
|
max={field.control.max}
|
|
132
142
|
step={field.control.step}
|
|
133
143
|
value={value}
|
|
134
|
-
onChange={e => onChange(fieldKey, e.target.value)}
|
|
144
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
135
145
|
);
|
|
136
146
|
case "object":
|
|
137
147
|
return (
|
|
@@ -148,14 +158,20 @@ export const SidebarEditorField = ({
|
|
|
148
158
|
onFocus={e => {
|
|
149
159
|
e.target.style.height = "5px";
|
|
150
160
|
e.target.style.height = e.target.scrollHeight + 2 + "px";
|
|
151
|
-
}}
|
|
161
|
+
}}/>
|
|
152
162
|
);
|
|
153
163
|
case "radio":
|
|
154
164
|
return (
|
|
155
165
|
<div>
|
|
156
|
-
{Object.keys(
|
|
166
|
+
{Object.keys(options).map((key, index) => (
|
|
157
167
|
<div key={`radio-option-${key}`}>
|
|
158
|
-
<input
|
|
168
|
+
<input
|
|
169
|
+
id={`${fieldKey}-${index}`}
|
|
170
|
+
checked={value === field.control.options[key]}
|
|
171
|
+
type="radio"
|
|
172
|
+
value={field.control.options[key]}
|
|
173
|
+
name={fieldKey}
|
|
174
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
159
175
|
<label htmlFor={`${fieldKey}-${index}`}>{key}</label>
|
|
160
176
|
</div>
|
|
161
177
|
))}
|
|
@@ -164,9 +180,15 @@ export const SidebarEditorField = ({
|
|
|
164
180
|
case "inline-radio":
|
|
165
181
|
return (
|
|
166
182
|
<div>
|
|
167
|
-
{Object.keys(
|
|
183
|
+
{Object.keys(options).map((key, index) => (
|
|
168
184
|
<div key={`inline-radio-option-${key}`} className="inline-check-wrapper">
|
|
169
|
-
<input
|
|
185
|
+
<input
|
|
186
|
+
id={`${fieldKey}-${index}`}
|
|
187
|
+
checked={value === field.control.options[key]}
|
|
188
|
+
type="radio"
|
|
189
|
+
value={field.control.options[key]}
|
|
190
|
+
name={fieldKey}
|
|
191
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
170
192
|
<label htmlFor={`${fieldKey}-${index}`}>{key}</label>
|
|
171
193
|
</div>
|
|
172
194
|
))}
|
|
@@ -175,18 +197,18 @@ export const SidebarEditorField = ({
|
|
|
175
197
|
case "check":
|
|
176
198
|
return (
|
|
177
199
|
<div>
|
|
178
|
-
{Object.keys(
|
|
200
|
+
{Object.keys(options).map((key, index) => (
|
|
179
201
|
<div key={`check-option-${key}`}>
|
|
180
202
|
<input
|
|
181
203
|
id={`${fieldKey}-${index}`}
|
|
182
204
|
type="checkbox"
|
|
183
|
-
value={
|
|
205
|
+
value={options[key]}
|
|
184
206
|
name={fieldKey}
|
|
185
|
-
checked={value?.[
|
|
207
|
+
checked={value?.[options[key]]}
|
|
186
208
|
onChange={e => onChange(fieldKey, {
|
|
187
209
|
...value,
|
|
188
|
-
[
|
|
189
|
-
})}
|
|
210
|
+
[options[key]]: e.target.checked,
|
|
211
|
+
})}/>
|
|
190
212
|
<label htmlFor={`${fieldKey}-${index}`}>{key}</label>
|
|
191
213
|
</div>
|
|
192
214
|
))}
|
|
@@ -195,18 +217,18 @@ export const SidebarEditorField = ({
|
|
|
195
217
|
case "inline-check":
|
|
196
218
|
return (
|
|
197
219
|
<div>
|
|
198
|
-
{Object.keys(
|
|
220
|
+
{Object.keys(options || {}).map((key, index) => (
|
|
199
221
|
<div key={`inline-check-option-${key}`} className="inline-check-wrapper">
|
|
200
222
|
<input
|
|
201
223
|
id={`${fieldKey}-${index}`}
|
|
202
224
|
type="checkbox"
|
|
203
|
-
value={
|
|
225
|
+
value={options[key]}
|
|
204
226
|
name={fieldKey}
|
|
205
|
-
checked={value?.[
|
|
227
|
+
checked={value?.[options[key]]}
|
|
206
228
|
onChange={e => onChange(fieldKey, {
|
|
207
229
|
...value,
|
|
208
|
-
[
|
|
209
|
-
})}
|
|
230
|
+
[options[key]]: e.target.checked,
|
|
231
|
+
})}/>
|
|
210
232
|
<label htmlFor={`${fieldKey}-${index}`}>{key}</label>
|
|
211
233
|
</div>
|
|
212
234
|
))}
|
|
@@ -217,14 +239,14 @@ export const SidebarEditorField = ({
|
|
|
217
239
|
<input
|
|
218
240
|
type="color"
|
|
219
241
|
value={value || ""}
|
|
220
|
-
onChange={e => onChange(fieldKey, e.target.value)}
|
|
242
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
221
243
|
);
|
|
222
244
|
case "date":
|
|
223
245
|
return (
|
|
224
246
|
<input
|
|
225
247
|
type="date"
|
|
226
248
|
value={value || ""}
|
|
227
|
-
onChange={e => onChange(fieldKey, e.target.value)}
|
|
249
|
+
onChange={e => onChange(fieldKey, e.target.value)}/>
|
|
228
250
|
);
|
|
229
251
|
case "multi-select":
|
|
230
252
|
return (
|
|
@@ -236,15 +258,17 @@ export const SidebarEditorField = ({
|
|
|
236
258
|
|
|
237
259
|
onChange(fieldKey, v);
|
|
238
260
|
}}>
|
|
239
|
-
{
|
|
240
|
-
<option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
|
|
241
|
-
))}
|
|
261
|
+
{renderFieldSelectOptions(field)}
|
|
242
262
|
</select>
|
|
243
263
|
);
|
|
244
264
|
case "contentful-content":
|
|
245
265
|
return (
|
|
246
266
|
<>
|
|
247
|
-
{!!value && <div className="mb-2"><Asset
|
|
267
|
+
{!!value && <div className="mb-2"><Asset
|
|
268
|
+
sdk={sdk}
|
|
269
|
+
asset={value}
|
|
270
|
+
onDeleteClick={() => onChange(fieldKey, null)}
|
|
271
|
+
onChange={v => onChange(fieldKey, v)}/></div>}
|
|
248
272
|
<button
|
|
249
273
|
className="button"
|
|
250
274
|
onClick={() => {
|
|
@@ -252,7 +276,8 @@ export const SidebarEditorField = ({
|
|
|
252
276
|
onChange(fieldKey, reduceContentfulResponse(content, field.control.paths));
|
|
253
277
|
});
|
|
254
278
|
}}
|
|
255
|
-
>Auswählen
|
|
279
|
+
>Auswählen
|
|
280
|
+
</button>
|
|
256
281
|
</>
|
|
257
282
|
);
|
|
258
283
|
case "contentful-contents":
|
|
@@ -270,7 +295,7 @@ export const SidebarEditorField = ({
|
|
|
270
295
|
sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
|
|
271
296
|
onChange(fieldKey, reduceContentfulResponse([...value, ...contents], field.control.paths));
|
|
272
297
|
});
|
|
273
|
-
}}
|
|
298
|
+
}}/>
|
|
274
299
|
</div>
|
|
275
300
|
</details>
|
|
276
301
|
)}
|
|
@@ -281,13 +306,18 @@ export const SidebarEditorField = ({
|
|
|
281
306
|
onChange(fieldKey, reduceContentfulResponse(contents, field.control.paths));
|
|
282
307
|
});
|
|
283
308
|
}}
|
|
284
|
-
>Auswählen
|
|
309
|
+
>Auswählen
|
|
310
|
+
</button>
|
|
285
311
|
</>
|
|
286
312
|
);
|
|
287
313
|
case "cloudinary-image":
|
|
288
314
|
return (
|
|
289
315
|
<>
|
|
290
|
-
{!!value && <div className="mb-2"><Asset
|
|
316
|
+
{!!value && <div className="mb-2"><Asset
|
|
317
|
+
cloudinary
|
|
318
|
+
sdk={sdk}
|
|
319
|
+
asset={value}
|
|
320
|
+
onDeleteClick={() => onChange(fieldKey, null)}/></div>}
|
|
291
321
|
<button
|
|
292
322
|
className="button"
|
|
293
323
|
onClick={() => {
|
|
@@ -296,12 +326,16 @@ export const SidebarEditorField = ({
|
|
|
296
326
|
title: "Select Image",
|
|
297
327
|
shouldCloseOnOverlayClick: true,
|
|
298
328
|
shouldCloseOnEscapePress: true,
|
|
299
|
-
parameters: {
|
|
329
|
+
parameters: {
|
|
330
|
+
type: "cloudinary",
|
|
331
|
+
portal: sdk?.entry?.fields?.portal?.getValue(),
|
|
332
|
+
},
|
|
300
333
|
}).then((data) => {
|
|
301
334
|
onChange(fieldKey, data?.assets?.[0]);
|
|
302
335
|
});
|
|
303
336
|
}}
|
|
304
|
-
>Auswählen
|
|
337
|
+
>Auswählen
|
|
338
|
+
</button>
|
|
305
339
|
</>
|
|
306
340
|
);
|
|
307
341
|
case "cloudinary-images":
|
|
@@ -325,11 +359,12 @@ export const SidebarEditorField = ({
|
|
|
325
359
|
parameters: {
|
|
326
360
|
type: "cloudinary",
|
|
327
361
|
multiple: true,
|
|
362
|
+
portal: sdk?.entry?.fields?.portal?.getValue(),
|
|
328
363
|
},
|
|
329
364
|
}).then((data) => {
|
|
330
365
|
onChange(fieldKey, [...value, ...(data?.assets || [])]);
|
|
331
366
|
});
|
|
332
|
-
}}
|
|
367
|
+
}}/>
|
|
333
368
|
</div>
|
|
334
369
|
</details>
|
|
335
370
|
)}
|
|
@@ -344,12 +379,14 @@ export const SidebarEditorField = ({
|
|
|
344
379
|
parameters: {
|
|
345
380
|
type: "cloudinary",
|
|
346
381
|
multiple: true,
|
|
382
|
+
portal: sdk?.entry?.fields?.portal?.getValue(),
|
|
347
383
|
},
|
|
348
384
|
}).then((data) => {
|
|
349
385
|
onChange(fieldKey, data?.assets);
|
|
350
386
|
});
|
|
351
387
|
}}
|
|
352
|
-
>Auswählen
|
|
388
|
+
>Auswählen
|
|
389
|
+
</button>
|
|
353
390
|
</>
|
|
354
391
|
);
|
|
355
392
|
case "mvp":
|
|
@@ -363,10 +400,18 @@ export const SidebarEditorField = ({
|
|
|
363
400
|
<div className="mb-2 flex items-center">
|
|
364
401
|
<b className="grow">{field.name} [{index.toString()}]</b>
|
|
365
402
|
<div className="icon-button-group mr-1">
|
|
366
|
-
<IconButton
|
|
367
|
-
|
|
403
|
+
<IconButton
|
|
404
|
+
size="small"
|
|
405
|
+
onClick={() => handleMVPMoveClick(fieldKey, "up", index)}
|
|
406
|
+
disabled={index === 0}>↑</IconButton>
|
|
407
|
+
<IconButton
|
|
408
|
+
size="small"
|
|
409
|
+
onClick={() => handleMVPMoveClick(fieldKey, "down", index)}
|
|
410
|
+
disabled={index === storybookElement.attributes?.[fieldKey]?.length - 1}>↓</IconButton>
|
|
368
411
|
</div>
|
|
369
|
-
<IconButton
|
|
412
|
+
<IconButton
|
|
413
|
+
size="small"
|
|
414
|
+
onClick={() => deleteMVPEntry(fieldKey, index)}>🗑</IconButton>
|
|
370
415
|
</div>
|
|
371
416
|
{Object.keys(field.control.fields).map((key, mvpIndex) => {
|
|
372
417
|
let mvpField = field.control.fields[key];
|
|
@@ -383,20 +428,25 @@ export const SidebarEditorField = ({
|
|
|
383
428
|
sdk={sdk}
|
|
384
429
|
onChange={(fK, value) => onChange(
|
|
385
430
|
fK, value, key, index,
|
|
386
|
-
)}
|
|
431
|
+
)}/>
|
|
387
432
|
</div>
|
|
388
433
|
);
|
|
389
434
|
})}
|
|
390
|
-
<hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}
|
|
435
|
+
<hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
|
|
391
436
|
</div>
|
|
392
437
|
);
|
|
393
438
|
})}
|
|
394
|
-
<button
|
|
439
|
+
<button
|
|
440
|
+
className="button button--secondary"
|
|
441
|
+
onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue
|
|
442
|
+
Zeile
|
|
443
|
+
</button>
|
|
395
444
|
</div>
|
|
396
445
|
</details>
|
|
397
446
|
);
|
|
398
447
|
default:
|
|
399
|
-
return <div className="message message--negative">Keine Konfiguration zu Feldtyp "{field?.control?.type}"
|
|
448
|
+
return <div className="message message--negative">Keine Konfiguration zu Feldtyp "{field?.control?.type}"
|
|
449
|
+
gefunden</div>;
|
|
400
450
|
}
|
|
401
451
|
};
|
|
402
452
|
|