@vonaffenfels/slate-editor 1.0.68 → 1.0.71
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/src/BlockEditor.js +4 -4
- package/src/ElementAutocomplete.js +38 -16
- package/src/Nodes/StorybookDisplay.js +2 -2
- package/src/SidebarEditor/SidebarEditorField.js +7 -7
- package/src/SidebarEditor/Switch.js +30 -0
- package/src/SidebarEditor.js +89 -48
- 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.
|
|
3
|
+
"version": "1.0.71",
|
|
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": "ff4d8d5cebc25ef55b2fd66c35e85634f614048b",
|
|
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 =
|
|
182
|
+
const handleSidebarEditorChange = newElement => {
|
|
183
183
|
let newNodeProps = {
|
|
184
|
-
block:
|
|
184
|
+
block: newElement.block,
|
|
185
185
|
isEmpty: false,
|
|
186
186
|
isInline: selectedStorybookElement.isInline,
|
|
187
|
-
attributes:
|
|
188
|
-
type:
|
|
187
|
+
attributes: newElement.attributes,
|
|
188
|
+
type: newElement.type,
|
|
189
189
|
};
|
|
190
190
|
|
|
191
191
|
if (!newNodeProps.attributes.teasermanagerSlotId) {
|
|
@@ -16,29 +16,44 @@ export const ElementAutocomplete = ({
|
|
|
16
16
|
onChange,
|
|
17
17
|
...props
|
|
18
18
|
}) => {
|
|
19
|
-
const items = (storybookStories
|
|
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 (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
if (story.type === "storybook") {
|
|
26
|
+
if (!story.id) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
25
29
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
|
|
33
|
-
|
|
36
|
+
if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
34
39
|
}
|
|
35
40
|
|
|
41
|
+
|
|
36
42
|
return {
|
|
37
|
-
value: story.id
|
|
38
|
-
label: storyTitleSplit[storyTitleSplit.length - 1],
|
|
39
|
-
|
|
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
|
+
];
|
|
@@ -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
|
}
|
|
@@ -4,6 +4,7 @@ import {reduceContentfulResponse} from "../util/reduceContentfulResponse";
|
|
|
4
4
|
import {
|
|
5
5
|
Asset, AssetList,
|
|
6
6
|
} from "./AssetList";
|
|
7
|
+
import {Switch} from "./Switch";
|
|
7
8
|
|
|
8
9
|
export const SidebarEditorField = ({
|
|
9
10
|
field,
|
|
@@ -97,13 +98,12 @@ export const SidebarEditorField = ({
|
|
|
97
98
|
}}/>;
|
|
98
99
|
case "boolean":
|
|
99
100
|
return (
|
|
100
|
-
<div>
|
|
101
|
-
<
|
|
102
|
-
id={fieldKey}
|
|
101
|
+
<div className="flex items-center">
|
|
102
|
+
<Switch
|
|
103
103
|
type="checkbox"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<
|
|
104
|
+
value={value}
|
|
105
|
+
onClick={() => onChange(fieldKey, !value)}/>
|
|
106
|
+
<span className="ml-2">{value ? "Ja" : "Nein"}</span>
|
|
107
107
|
</div>
|
|
108
108
|
);
|
|
109
109
|
case "select":
|
|
@@ -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
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
|
|
4
|
+
export const Switch = ({
|
|
5
|
+
value,
|
|
6
|
+
onClick,
|
|
7
|
+
}) => {
|
|
8
|
+
return (<>
|
|
9
|
+
<button
|
|
10
|
+
onClick={onClick}
|
|
11
|
+
type="button"
|
|
12
|
+
role="switch"
|
|
13
|
+
aria-checked="false"
|
|
14
|
+
className={classNames({
|
|
15
|
+
"bg-green-500": value,
|
|
16
|
+
"bg-gray-200": !value,
|
|
17
|
+
},
|
|
18
|
+
"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition duration-100 ease-in-out focus:outline-none")}
|
|
19
|
+
>
|
|
20
|
+
<span
|
|
21
|
+
aria-hidden="true"
|
|
22
|
+
className={classNames({
|
|
23
|
+
"translate-x-5": value,
|
|
24
|
+
"translate-x-0": !value,
|
|
25
|
+
},
|
|
26
|
+
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-100 ease-in-out")}
|
|
27
|
+
/>
|
|
28
|
+
</button>
|
|
29
|
+
</>);
|
|
30
|
+
};
|
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:
|
|
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
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
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:
|
|
100
|
+
type: item.type,
|
|
101
101
|
block: item.value,
|
|
102
|
-
attributes:
|
|
102
|
+
attributes: item.attributes,
|
|
103
103
|
};
|
|
104
104
|
|
|
105
105
|
Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});
|