@vonaffenfels/slate-editor 1.0.2 → 1.0.3
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/componentLoader.js +10 -8
- package/dist/BlockEditor.css +1 -92
- package/dist/BlockEditor.js +1 -1
- package/dist/Renderer.js +1 -1
- package/dist/index.css +1 -92
- package/dist/index.js +1 -1
- package/package.json +2 -3
- package/scss/sidebarEditor.scss +104 -0
- package/src/BlockEditor.js +2 -2
- package/src/SidebarEditor/SidebarEditorField.js +35 -32
- package/src/SidebarEditor.js +13 -12
- package/src/SidebarEditor.css +0 -92
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonaffenfels/slate-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
"dotenv-webpack": "^7.0.2",
|
|
42
42
|
"file-loader": "^6.2.0",
|
|
43
43
|
"graphql": "16.5.0",
|
|
44
|
-
"graphql-tag": "2.12.6",
|
|
45
44
|
"html-webpack-plugin": "^5.3.1",
|
|
46
45
|
"mini-css-extract-plugin": "^1.5.0",
|
|
47
46
|
"next": "^12.3.4",
|
|
@@ -72,7 +71,7 @@
|
|
|
72
71
|
"cssnano": "^5.0.1",
|
|
73
72
|
"escape-html": "^1.0.3"
|
|
74
73
|
},
|
|
75
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "5886b3f191d7e644434c7baef0808194aec62802",
|
|
76
75
|
"publishConfig": {
|
|
77
76
|
"access": "public"
|
|
78
77
|
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
#sidebar-editor {
|
|
2
|
+
background-color: rgb(247, 249, 250);
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow-y: auto;
|
|
5
|
+
flex-basis: 400px;
|
|
6
|
+
flex-shrink: 0;
|
|
7
|
+
padding: 61px 16px 16px 16px;
|
|
8
|
+
resize: horizontal;
|
|
9
|
+
|
|
10
|
+
* {
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
select {
|
|
15
|
+
font-size: 0.875rem !important;
|
|
16
|
+
color: rgb(90, 101, 124) !important;
|
|
17
|
+
background-color: white !important;
|
|
18
|
+
border: 1px solid #cfd9e0 !important;
|
|
19
|
+
border-radius: 6px !important;
|
|
20
|
+
box-shadow: none !important;
|
|
21
|
+
filter: none !important;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
p, label {
|
|
25
|
+
color: rgb(90, 101, 124);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
label {
|
|
29
|
+
margin: 0 0 6px 0 !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
input[type="text"],
|
|
33
|
+
input[type="number"],
|
|
34
|
+
input[type="color"],
|
|
35
|
+
input[type="date"],
|
|
36
|
+
select,
|
|
37
|
+
textarea {
|
|
38
|
+
display: block;
|
|
39
|
+
font-size: 0.875rem !important;
|
|
40
|
+
color: rgb(90, 101, 124) !important;
|
|
41
|
+
background-color: white !important;
|
|
42
|
+
border: 1px solid #cfd9e0 !important;
|
|
43
|
+
border-radius: 6px !important;
|
|
44
|
+
box-shadow: none !important;
|
|
45
|
+
filter: none !important;
|
|
46
|
+
width: 100% !important;
|
|
47
|
+
padding: 8px 0.75rem !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
input[type="color"] {
|
|
51
|
+
padding: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
input[type="range"] {
|
|
55
|
+
display: block;
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
input[type="radio"],
|
|
60
|
+
input[type="checkbox"] {
|
|
61
|
+
margin-right: 4px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* button[data-test-id="cf-ui-button"] span {
|
|
65
|
+
color: #036fe3 !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
button[data-test-id="cf-ui-button"] svg {
|
|
69
|
+
fill: #036fe3 !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
button[data-test-id="cf-ui-button"]:hover span {
|
|
73
|
+
color: #FFFFFF !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
button[data-test-id="cf-ui-button"]:hover svg {
|
|
77
|
+
fill: #FFFFFF !important;
|
|
78
|
+
} */
|
|
79
|
+
|
|
80
|
+
.inline-check-wrapper {
|
|
81
|
+
display: inline-block;
|
|
82
|
+
margin-right: 8px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
button {
|
|
86
|
+
width: 100%;
|
|
87
|
+
padding: 8px !important;
|
|
88
|
+
color: #036fe3 !important;
|
|
89
|
+
border: 1px solid #036fe3 !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
details {
|
|
93
|
+
display: block;
|
|
94
|
+
font-size: 0.875rem !important;
|
|
95
|
+
color: rgb(90, 101, 124) !important;
|
|
96
|
+
background-color: white !important;
|
|
97
|
+
border: 1px solid #cfd9e0 !important;
|
|
98
|
+
border-radius: 6px !important;
|
|
99
|
+
box-shadow: none !important;
|
|
100
|
+
filter: none !important;
|
|
101
|
+
width: 100% !important;
|
|
102
|
+
padding: 16px !important;
|
|
103
|
+
}
|
|
104
|
+
}
|
package/src/BlockEditor.js
CHANGED
|
@@ -173,10 +173,10 @@ export default function BlockEditor({
|
|
|
173
173
|
let path = ReactEditor.findPath(editor, node);
|
|
174
174
|
|
|
175
175
|
// Initially up
|
|
176
|
-
let to = [path[0]
|
|
176
|
+
let to = [path[0] - 1];
|
|
177
177
|
|
|
178
178
|
if (direction === "down") {
|
|
179
|
-
to = [path[0]
|
|
179
|
+
to = [path[0] + 1];
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
try {
|
|
@@ -195,39 +195,42 @@ export const SidebarEditorField = ({
|
|
|
195
195
|
);
|
|
196
196
|
case "mvp":
|
|
197
197
|
return (
|
|
198
|
-
|
|
199
|
-
{storybookElement?.attributes[fieldKey]?.
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<div className="
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
198
|
+
<details>
|
|
199
|
+
<summary>{storybookElement?.attributes?.[fieldKey]?.length || 0} Elemente</summary>
|
|
200
|
+
<div className="mt-4">
|
|
201
|
+
{storybookElement?.attributes?.[fieldKey]?.map((f, index) => {
|
|
202
|
+
return (
|
|
203
|
+
<div className="mb-4" key={`mvp-${index}`}>
|
|
204
|
+
<div className="mb-2 flex items-center">
|
|
205
|
+
<b className="grow">{field.name} [{index.toString()}]</b>
|
|
206
|
+
<div className="cursor-pointer p-1" onClick={() => deleteMVPEntry(fieldKey, index)}><Icon icon="Delete" /></div>
|
|
207
|
+
</div>
|
|
208
|
+
{Object.keys(field.control.fields).map((key, mvpIndex) => {
|
|
209
|
+
let mvpField = field.control.fields[key];
|
|
208
210
|
|
|
209
|
-
|
|
211
|
+
value = storybookElement.attributes?.[fieldKey]?.[index]?.[key];
|
|
210
212
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
213
|
+
return (
|
|
214
|
+
<div key={`mvp-field-${key}`}>
|
|
215
|
+
<SidebarEditorField
|
|
216
|
+
field={mvpField}
|
|
217
|
+
fieldKey={fieldKey}
|
|
218
|
+
value={value}
|
|
219
|
+
storybookElement={storybookElement}
|
|
220
|
+
sdk={sdk}
|
|
221
|
+
onChange={(fK, value) => onChange(
|
|
222
|
+
fK, value, key, index,
|
|
223
|
+
)} />
|
|
224
|
+
</div>
|
|
225
|
+
);
|
|
226
|
+
})}
|
|
227
|
+
<hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}} />
|
|
228
|
+
</div>
|
|
229
|
+
);
|
|
230
|
+
})}
|
|
231
|
+
<Button onClick={() => onChange(fieldKey, [...storybookElement.attributes[fieldKey], {}])}>Neue Zeile</Button>
|
|
232
|
+
</div>
|
|
233
|
+
</details>
|
|
231
234
|
);
|
|
232
235
|
default:
|
|
233
236
|
return <Note noteType="negative">Keine Konfiguration zu Feldtyp "{field?.control?.type}" gefunden</Note>;
|
|
@@ -242,7 +245,7 @@ export const SidebarEditorField = ({
|
|
|
242
245
|
|
|
243
246
|
return (
|
|
244
247
|
<div key={`${field.name}`} className="mb-2">
|
|
245
|
-
<label>{field.name}</label>
|
|
248
|
+
<label className="block">{field.name}</label>
|
|
246
249
|
{inputField}
|
|
247
250
|
</div>
|
|
248
251
|
);
|
package/src/SidebarEditor.js
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
Icon,
|
|
11
11
|
} from "@contentful/forma-36-react-components";
|
|
12
12
|
|
|
13
|
-
import "
|
|
13
|
+
import "../scss/sidebarEditor.scss";
|
|
14
14
|
import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
|
|
15
15
|
import {ToolMargin} from "./Tools/Margin";
|
|
16
16
|
|
|
@@ -106,10 +106,10 @@ const SidebarEditor = ({
|
|
|
106
106
|
<option value={"small"}>Klein</option>
|
|
107
107
|
</select>
|
|
108
108
|
<div className="cursor-pointer p-2" title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")}>
|
|
109
|
-
|
|
109
|
+
<Icon icon="ArrowUp" />
|
|
110
110
|
</div>
|
|
111
111
|
<div className="cursor-pointer p-2" title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
|
|
112
|
-
|
|
112
|
+
<Icon icon="ArrowDown" />
|
|
113
113
|
</div>
|
|
114
114
|
<div className="p-2 pt-3">
|
|
115
115
|
<ToolMargin
|
|
@@ -117,7 +117,7 @@ const SidebarEditor = ({
|
|
|
117
117
|
onChange={value => handleFieldValueChange("margin", value)} />
|
|
118
118
|
</div>
|
|
119
119
|
<div className="cursor-pointer p-2" title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
|
|
120
|
-
|
|
120
|
+
<Icon icon="Delete" />
|
|
121
121
|
</div>
|
|
122
122
|
</div>
|
|
123
123
|
<hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
|
|
@@ -142,10 +142,11 @@ const SidebarEditor = ({
|
|
|
142
142
|
)}
|
|
143
143
|
/>;
|
|
144
144
|
})}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<
|
|
145
|
+
{Object.keys(fields.tables).map(tableKey => {
|
|
146
|
+
return (
|
|
147
|
+
<details key={`accordion-item-${tableKey}`}>
|
|
148
|
+
<summary>{tableKey}</summary>
|
|
149
|
+
<div className="mt-4">
|
|
149
150
|
{Object.keys(fields.tables[tableKey]).map(key => {
|
|
150
151
|
const field = fields.tables[tableKey][key];
|
|
151
152
|
|
|
@@ -159,10 +160,10 @@ const SidebarEditor = ({
|
|
|
159
160
|
onChange={value => handleFieldValueChange(key, value)}
|
|
160
161
|
/>;
|
|
161
162
|
})}
|
|
162
|
-
</
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
163
|
+
</div>
|
|
164
|
+
</details>
|
|
165
|
+
);
|
|
166
|
+
})}
|
|
166
167
|
</>
|
|
167
168
|
)}
|
|
168
169
|
</div>
|
package/src/SidebarEditor.css
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
* {
|
|
2
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
#sidebar-editor {
|
|
6
|
-
background-color: rgb(247, 249, 250);
|
|
7
|
-
height: 100%;
|
|
8
|
-
overflow-y: auto;
|
|
9
|
-
flex-basis: 400px;
|
|
10
|
-
flex-shrink: 0;
|
|
11
|
-
padding: 61px 16px 16px 16px;
|
|
12
|
-
resize: horizontal;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
select {
|
|
16
|
-
font-size: 0.875rem !important;
|
|
17
|
-
color: rgb(90, 101, 124) !important;
|
|
18
|
-
background-color: white !important;
|
|
19
|
-
border: 1px solid #cfd9e0 !important;
|
|
20
|
-
border-radius: 6px !important;
|
|
21
|
-
box-shadow: none !important;
|
|
22
|
-
filter: none !important;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
p, label {
|
|
26
|
-
color: rgb(90, 101, 124);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
label {
|
|
30
|
-
display: block;
|
|
31
|
-
margin: 0 0 4px 0 !important;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
input[type="text"],
|
|
35
|
-
input[type="number"],
|
|
36
|
-
input[type="color"],
|
|
37
|
-
input[type="date"],
|
|
38
|
-
select,
|
|
39
|
-
textarea {
|
|
40
|
-
display: block;
|
|
41
|
-
font-size: 0.875rem !important;
|
|
42
|
-
color: rgb(90, 101, 124) !important;
|
|
43
|
-
background-color: white !important;
|
|
44
|
-
border: 1px solid #cfd9e0 !important;
|
|
45
|
-
border-radius: 6px !important;
|
|
46
|
-
box-shadow: none !important;
|
|
47
|
-
filter: none !important;
|
|
48
|
-
width: 100% !important;
|
|
49
|
-
padding: 8px 0.75rem !important;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
input[type="color"] {
|
|
53
|
-
padding: 0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
input[type="range"] {
|
|
57
|
-
display: block;
|
|
58
|
-
width: 100%;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
input[type="radio"],
|
|
62
|
-
input[type="checkbox"] {
|
|
63
|
-
margin-right: 4px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* button[data-test-id="cf-ui-button"] span {
|
|
67
|
-
color: #036fe3 !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
button[data-test-id="cf-ui-button"] svg {
|
|
71
|
-
fill: #036fe3 !important;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
button[data-test-id="cf-ui-button"]:hover span {
|
|
75
|
-
color: #FFFFFF !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
button[data-test-id="cf-ui-button"]:hover svg {
|
|
79
|
-
fill: #FFFFFF !important;
|
|
80
|
-
} */
|
|
81
|
-
|
|
82
|
-
.inline-check-wrapper {
|
|
83
|
-
display: inline-block;
|
|
84
|
-
margin-right: 8px;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
button {
|
|
88
|
-
width: 100%;
|
|
89
|
-
padding: 8px !important;
|
|
90
|
-
color: #036fe3 !important;
|
|
91
|
-
border: 1px solid #036fe3 !important;
|
|
92
|
-
}
|