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