@vonaffenfels/slate-editor 1.0.68 → 1.0.70

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 (9) 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/BlockEditor.js +4 -4
  5. package/src/ElementAutocomplete.js +38 -16
  6. package/src/Nodes/StorybookDisplay.js +2 -2
  7. package/src/SidebarEditor/SidebarEditorField.js +1 -1
  8. package/src/SidebarEditor.js +89 -48
  9. package/src/Toolbar/Toolbar.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/slate-editor",
3
- "version": "1.0.68",
3
+ "version": "1.0.70",
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": "90421d8d32693a90bf7945a65bfd00f4ad4a0d29",
74
+ "gitHead": "52dd9f4cd9125cc053694577cd2ac9d1bf0e9de3",
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  }
package/src/BlockEditor.js CHANGED
@@ -179,13 +179,13 @@ export default function BlockEditor({
179
179
  return editor;
180
180
  }, []);
181
181
 
182
- const handleSidebarEditorChange = newStorybookElement => {
182
+ const handleSidebarEditorChange = newElement => {
183
183
  let newNodeProps = {
184
- block: newStorybookElement.block,
184
+ block: newElement.block,
185
185
  isEmpty: false,
186
186
  isInline: selectedStorybookElement.isInline,
187
- attributes: {...(newStorybookElement.attributes || {})},
188
- type: "storybook",
187
+ attributes: newElement.attributes,
188
+ type: newElement.type,
189
189
  };
190
190
 
191
191
  if (!newNodeProps.attributes.teasermanagerSlotId) {
package/src/ElementAutocomplete.js CHANGED
@@ -16,29 +16,44 @@ export const ElementAutocomplete = ({
16
16
  onChange,
17
17
  ...props
18
18
  }) => {
19
- const items = (storybookStories || []).map(story => {
19
+ const items = ([...(storybookStories.map(story => ({
20
+ ...story,
21
+ type: "storybook",
22
+ })) || []), ...customStories]).map(story => {
20
23
  let storyTitleSplit = String(story.title || "").split("/");
21
24
 
22
- if (!story.id) {
23
- return;
24
- }
25
+ if (story.type === "storybook") {
26
+ if (!story.id) {
27
+ return;
28
+ }
25
29
 
26
- let splitStoryContext = String(storyContext || "").split(",");
27
- let isItemInStoryContext = splitStoryContext.find(context => {
28
- return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
29
- });
30
- let isItemInPortalContext = !story.portalContext || story.portalContext.includes(portal);
30
+ let splitStoryContext = String(storyContext || "").split(",");
31
+ let isItemInStoryContext = splitStoryContext.find(context => {
32
+ return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
33
+ });
34
+ let isItemInPortalContext = !story.portalContext || story.portalContext.includes(portal);
31
35
 
32
- if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
33
- return;
36
+ if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
37
+ return;
38
+ }
34
39
  }
35
40
 
41
+
36
42
  return {
37
- value: story.id.toLowerCase(),
38
- label: storyTitleSplit[storyTitleSplit.length - 1],
39
- stories: story.stories,
43
+ value: story.id?.toLowerCase(),
44
+ label: story.label || storyTitleSplit[storyTitleSplit.length - 1],
45
+ attributes: story?.stories?.[0]?.args || story?.stories?.[1]?.args || {},
46
+ type: story.type,
40
47
  };
41
- }).filter(Boolean);
48
+ }).filter(Boolean).sort(function (a, b) {
49
+ if (a.label < b.label) {
50
+ return -1;
51
+ }
52
+ if (a.label > b.label) {
53
+ return 1;
54
+ }
55
+ return 0;
56
+ });
42
57
 
43
58
  const [filteredItems, setFilteredItems] = useState(items);
44
59
 
@@ -81,4 +96,11 @@ export const ElementAutocomplete = ({
81
96
  }
82
97
  </Autocomplete>
83
98
  );
84
- };
99
+ };
100
+
101
+ const customStories = [
102
+ {
103
+ type: "paragraph",
104
+ label: "Text",
105
+ },
106
+ ];
package/src/Nodes/StorybookDisplay.js CHANGED
@@ -113,8 +113,8 @@ const BlockComponent = ({
113
113
  }
114
114
  } catch (e) {
115
115
  // this happens if we SSR a non ssr component, its a weird edge case of next/dynamic... so we just ignore it
116
- // LoadedComponent for some reason is not a component here...
117
- //console.error(`Error in setting displayName for ${block} :: ${e.message}`);
116
+ // LoadedComponent for some reason is not a component here....
117
+ // console.error(`Error in setting displayName for ${block} :: ${e.message}`);
118
118
  return null;
119
119
  }
120
120
  }
package/src/SidebarEditor/SidebarEditorField.js CHANGED
@@ -452,7 +452,7 @@ export const SidebarEditorField = ({
452
452
 
453
453
  const inputField = getInputByField(field, fieldKey);
454
454
 
455
- if (!inputField) {
455
+ if (!field || !inputField) {
456
456
  return null;
457
457
  }
458
458
 
package/src/SidebarEditor.js CHANGED
@@ -30,6 +30,7 @@ const SidebarEditor = ({
30
30
  const [lastChangedProperty, setLastChangedProperty] = useState(null);
31
31
  const [versionCount, setVersionCount] = useState(0);
32
32
  const [currentVersion, setCurrentVersion] = useState(0);
33
+ const [propertySearch, setPropertySearch] = useState("");
33
34
 
34
35
  const fields = {
35
36
  fields: {},
@@ -180,7 +181,8 @@ const SidebarEditor = ({
180
181
  onChange({
181
182
  ...storybookElement,
182
183
  block: item.value,
183
- attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
184
+ attributes: item.attributes,
185
+ type: item.type,
184
186
  });
185
187
  };
186
188
 
@@ -198,6 +200,84 @@ const SidebarEditor = ({
198
200
  return <h2 className="mb-2 text-lg font-bold">{storyTitleSplit[storyTitleSplit.length - 1]}</h2>;
199
201
  };
200
202
 
203
+ const renderFields = () => {
204
+ if (!story || (!fields.fields && !fields.tables)) {
205
+ return null;
206
+ }
207
+
208
+ if (propertySearch) {
209
+ Object.keys(fields.fields).forEach(key => {
210
+ let f = fields.fields[key];
211
+
212
+ if (!f.name || !f.name.toLowerCase().includes(propertySearch.toLowerCase())) {
213
+ fields.fields[key] = null;
214
+ }
215
+ });
216
+
217
+ Object.keys(fields.tables).forEach(tableKey => {
218
+ Object.keys(fields.tables[tableKey]).forEach(fieldKey => {
219
+ let f = fields.tables[tableKey][fieldKey];
220
+
221
+ if (!f.name || !f.name.toLowerCase().includes(propertySearch.toLowerCase())) {
222
+ fields.tables[tableKey][fieldKey] = null;
223
+ }
224
+ });
225
+ });
226
+ }
227
+
228
+ return (
229
+ <>
230
+ {Object.keys(fields.fields).map(key => {
231
+ const field = fields.fields[key];
232
+
233
+ return <SidebarEditorField
234
+ sdk={sdk}
235
+ value={storybookElement?.attributes?.[key]}
236
+ key={key}
237
+ storybookElement={storybookElement}
238
+ fieldKey={key}
239
+ field={field}
240
+ onChange={(
241
+ key, value, mvpField, mvpIndex,
242
+ ) => handleFieldValueChange(
243
+ key, value, mvpField, mvpIndex,
244
+ )}
245
+ />;
246
+ })}
247
+ {Object.keys(fields.tables).map(tableKey => {
248
+ if (!Object.keys(fields.tables[tableKey]).find(key => fields.tables[tableKey][key] !== null)) {
249
+ return null;
250
+ }
251
+
252
+ return (
253
+ <details key={`accordion-item-${tableKey}`} className="mb-2">
254
+ <summary>{tableKey}</summary>
255
+ <div className="mt-4">
256
+ {Object.keys(fields.tables[tableKey]).map(key => {
257
+ const field = fields.tables[tableKey][key];
258
+
259
+ return <SidebarEditorField
260
+ sdk={sdk}
261
+ value={storybookElement?.attributes?.[key]}
262
+ key={key}
263
+ fieldKey={key}
264
+ story={storybookElement}
265
+ field={field}
266
+ onChange={(
267
+ key, value, mvpField, mvpIndex,
268
+ ) => handleFieldValueChange(
269
+ key, value, mvpField, mvpIndex,
270
+ )}
271
+ />;
272
+ })}
273
+ </div>
274
+ </details>
275
+ );
276
+ })}
277
+ </>
278
+ );
279
+ };
280
+
201
281
  return (
202
282
  <div id="sidebar-editor-wrapper">
203
283
  <div id="sidebar-editor">
@@ -269,53 +349,14 @@ const SidebarEditor = ({
269
349
  <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
270
350
  </div>
271
351
  )}
272
- {!!story && !!fields.fields && (
273
- <>
274
- {Object.keys(fields.fields).map(key => {
275
- const field = fields.fields[key];
276
-
277
- return <SidebarEditorField
278
- sdk={sdk}
279
- value={storybookElement?.attributes?.[key]}
280
- key={key}
281
- storybookElement={storybookElement}
282
- fieldKey={key}
283
- field={field}
284
- onChange={(
285
- key, value, mvpField, mvpIndex,
286
- ) => handleFieldValueChange(
287
- key, value, mvpField, mvpIndex,
288
- )}
289
- />;
290
- })}
291
- {Object.keys(fields.tables).map(tableKey => {
292
- return (
293
- <details key={`accordion-item-${tableKey}`} className="mb-2">
294
- <summary>{tableKey}</summary>
295
- <div className="mt-4">
296
- {Object.keys(fields.tables[tableKey]).map(key => {
297
- const field = fields.tables[tableKey][key];
298
-
299
- return <SidebarEditorField
300
- sdk={sdk}
301
- value={storybookElement?.attributes?.[key]}
302
- key={key}
303
- fieldKey={key}
304
- story={storybookElement}
305
- field={field}
306
- onChange={(
307
- key, value, mvpField, mvpIndex,
308
- ) => handleFieldValueChange(
309
- key, value, mvpField, mvpIndex,
310
- )}
311
- />;
312
- })}
313
- </div>
314
- </details>
315
- );
316
- })}
317
- </>
318
- )}
352
+ <input
353
+ type="text"
354
+ placeholder="🔍 Eigenschaft suchen..."
355
+ onChange={e => setPropertySearch(e.target.value)}
356
+ value={propertySearch}
357
+ className="mb-2"
358
+ />
359
+ {renderFields()}
319
360
  </div>
320
361
  </>
321
362
  )}
package/src/Toolbar/Toolbar.js CHANGED
@@ -97,9 +97,9 @@ export const Toolbar = ({
97
97
  const handleAutocompleteChange = item => {
98
98
  let element = {
99
99
  children: [{text: ''}],
100
- type: "storybook",
100
+ type: item.type,
101
101
  block: item.value,
102
- attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
102
+ attributes: item.attributes,
103
103
  };
104
104
 
105
105
  Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});