@vonaffenfels/slate-editor 1.0.34 → 1.0.35
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 +2 -2
- package/dist/BlockEditor.js +1 -1
- package/dist/index.css +2 -2
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/scss/sidebarEditor.scss +9 -3
- package/src/BlockEditor.js +3 -2
- package/src/SidebarEditor/SidebarEditorField.js +1 -4
- package/src/SidebarEditor.js +102 -100
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonaffenfels/slate-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.35",
|
|
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": "8531e3bdf7affdda47f286a5786cd7778044f1fc",
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
77
77
|
}
|
package/scss/sidebarEditor.scss
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
|
+
#sidebar-editor-wrapper {
|
|
2
|
+
padding-top: 45px;
|
|
3
|
+
height: 100%;
|
|
4
|
+
flex-basis: 400px;
|
|
5
|
+
flex-shrink: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
#sidebar-editor {
|
|
2
9
|
display: flex;
|
|
3
10
|
flex-direction: column;
|
|
4
11
|
background-color: rgb(247, 249, 250);
|
|
5
12
|
max-height: 100%;
|
|
13
|
+
height: 100%;
|
|
6
14
|
overflow-y: auto;
|
|
7
|
-
|
|
8
|
-
flex-shrink: 0;
|
|
9
|
-
padding: 60px 16px 16px 16px;
|
|
15
|
+
padding: 16px;
|
|
10
16
|
|
|
11
17
|
* {
|
|
12
18
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
package/src/BlockEditor.js
CHANGED
|
@@ -19,6 +19,7 @@ import ErrorBoundary from "../src/Blocks/ErrorBoundary";
|
|
|
19
19
|
import SidebarEditor from './SidebarEditor';
|
|
20
20
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
21
21
|
import {faSpinner} from '@fortawesome/free-solid-svg-icons';
|
|
22
|
+
import {Spinner} from '@contentful/forma-36-react-components';
|
|
22
23
|
|
|
23
24
|
export default function BlockEditor({
|
|
24
25
|
onChange,
|
|
@@ -255,8 +256,8 @@ export default function BlockEditor({
|
|
|
255
256
|
</div>
|
|
256
257
|
<div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
|
|
257
258
|
{isLoading && (
|
|
258
|
-
<div className=
|
|
259
|
-
<
|
|
259
|
+
<div className="pointer-events-none fixed left-0 top-0 z-50" style={{padding: "61px 0 0 16px"}}>
|
|
260
|
+
<Spinner color={window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "white" : "default"} />
|
|
260
261
|
</div>
|
|
261
262
|
)}
|
|
262
263
|
<ErrorBoundary
|
|
@@ -135,10 +135,7 @@ export const SidebarEditorField = ({
|
|
|
135
135
|
<textarea
|
|
136
136
|
value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
|
|
137
137
|
onChange={e => {
|
|
138
|
-
|
|
139
|
-
onChange(fieldKey, JSON.parse(e.target.value));
|
|
140
|
-
}
|
|
141
|
-
|
|
138
|
+
onChange(fieldKey, isJson(e.target.value) ? JSON.parse(e.target.value) : e.target.value);
|
|
142
139
|
e.target.style.height = "5px";
|
|
143
140
|
e.target.style.height = e.target.scrollHeight + 2 + "px";
|
|
144
141
|
}}
|
package/src/SidebarEditor.js
CHANGED
|
@@ -170,113 +170,115 @@ const SidebarEditor = ({
|
|
|
170
170
|
useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
|
|
171
171
|
|
|
172
172
|
return (
|
|
173
|
-
<div id="sidebar-editor">
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<div
|
|
183
|
-
<div className="
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<div className="
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<
|
|
173
|
+
<div id="sidebar-editor-wrapper">
|
|
174
|
+
<div id="sidebar-editor">
|
|
175
|
+
{isLoading ? (
|
|
176
|
+
<div className="flex h-full flex-col items-center justify-center">
|
|
177
|
+
<Spinner />
|
|
178
|
+
<span className="mt-2">Elemente werden geladen</span>
|
|
179
|
+
</div>
|
|
180
|
+
) : (
|
|
181
|
+
<>
|
|
182
|
+
<div>
|
|
183
|
+
<div className="flex items-center justify-end">
|
|
184
|
+
<div className="grow">
|
|
185
|
+
{storybookElement?.block && (
|
|
186
|
+
<div className="flex items-center">
|
|
187
|
+
<div className="icon-button-group mr-1">
|
|
188
|
+
<IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
|
|
189
|
+
<IconButton title="Wiederherstellen" onClick={redo} disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
|
|
190
|
+
</div>
|
|
191
|
+
<div className="icon-button-group mr-1">
|
|
192
|
+
<IconButton title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")} disabled={storybookElement.path[0] === 0}>
|
|
192
193
|
↑
|
|
193
|
-
|
|
194
|
-
|
|
194
|
+
</IconButton>
|
|
195
|
+
<IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
|
|
195
196
|
↓
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
197
|
+
</IconButton>
|
|
198
|
+
</div>
|
|
199
|
+
<IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
|
|
199
200
|
🗑
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
201
|
+
</IconButton>
|
|
202
|
+
<div className="ml-1 flex items-center">
|
|
203
|
+
<ToolMargin
|
|
204
|
+
margin={storybookElement.attributes.margin}
|
|
205
|
+
onChange={value => handleFieldValueChange("margin", value)} />
|
|
206
|
+
</div>
|
|
205
207
|
</div>
|
|
206
|
-
|
|
207
|
-
|
|
208
|
+
)}
|
|
209
|
+
</div>
|
|
210
|
+
{!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
|
|
208
211
|
</div>
|
|
209
|
-
|
|
210
|
-
</div>
|
|
211
|
-
<hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
|
|
212
|
-
</div>
|
|
213
|
-
<div className="grow overflow-y-auto pr-2 pt-2">
|
|
214
|
-
<div className="mb-2">
|
|
215
|
-
<BlockSelect
|
|
216
|
-
stories={storybookStories}
|
|
217
|
-
active={storybookElement}
|
|
218
|
-
onChange={handleBlockSelectChange}
|
|
219
|
-
storyContext={sdk.parameters.instance.storyContext} />
|
|
212
|
+
<hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
|
|
220
213
|
</div>
|
|
221
|
-
|
|
222
|
-
<div>
|
|
223
|
-
<
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
214
|
+
<div className="grow overflow-y-auto pr-2 pt-2">
|
|
215
|
+
<div className="mb-2">
|
|
216
|
+
<BlockSelect
|
|
217
|
+
stories={storybookStories}
|
|
218
|
+
active={storybookElement}
|
|
219
|
+
onChange={handleBlockSelectChange}
|
|
220
|
+
storyContext={sdk.parameters.instance.storyContext} />
|
|
228
221
|
</div>
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
field=
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
key
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
field=
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
key
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
222
|
+
{storybookElement?.block && (
|
|
223
|
+
<div>
|
|
224
|
+
<div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
|
|
225
|
+
<VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
|
|
226
|
+
<BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
|
|
227
|
+
</div>
|
|
228
|
+
<hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
|
|
229
|
+
</div>
|
|
230
|
+
)}
|
|
231
|
+
{!!story && (
|
|
232
|
+
<>
|
|
233
|
+
{Object.keys(fields.fields).map(key => {
|
|
234
|
+
const field = fields.fields[key];
|
|
235
|
+
|
|
236
|
+
return <SidebarEditorField
|
|
237
|
+
sdk={sdk}
|
|
238
|
+
value={storybookElement?.attributes?.[key]}
|
|
239
|
+
key={key}
|
|
240
|
+
storybookElement={storybookElement}
|
|
241
|
+
fieldKey={key}
|
|
242
|
+
field={field}
|
|
243
|
+
onChange={(
|
|
244
|
+
key, value, mvpField, mvpIndex,
|
|
245
|
+
) => handleFieldValueChange(
|
|
246
|
+
key, value, mvpField, mvpIndex,
|
|
247
|
+
)}
|
|
248
|
+
/>;
|
|
249
|
+
})}
|
|
250
|
+
{Object.keys(fields.tables).map(tableKey => {
|
|
251
|
+
return (
|
|
252
|
+
<details key={`accordion-item-${tableKey}`} className="mb-2">
|
|
253
|
+
<summary>{tableKey}</summary>
|
|
254
|
+
<div className="mt-4">
|
|
255
|
+
{Object.keys(fields.tables[tableKey]).map(key => {
|
|
256
|
+
const field = fields.tables[tableKey][key];
|
|
257
|
+
|
|
258
|
+
return <SidebarEditorField
|
|
259
|
+
sdk={sdk}
|
|
260
|
+
value={storybookElement?.attributes?.[key]}
|
|
261
|
+
key={key}
|
|
262
|
+
fieldKey={key}
|
|
263
|
+
story={storybookElement}
|
|
264
|
+
field={field}
|
|
265
|
+
onChange={(
|
|
266
|
+
key, value, mvpField, mvpIndex,
|
|
267
|
+
) => handleFieldValueChange(
|
|
268
|
+
key, value, mvpField, mvpIndex,
|
|
269
|
+
)}
|
|
270
|
+
/>;
|
|
271
|
+
})}
|
|
272
|
+
</div>
|
|
273
|
+
</details>
|
|
274
|
+
);
|
|
275
|
+
})}
|
|
276
|
+
</>
|
|
277
|
+
)}
|
|
278
|
+
</div>
|
|
279
|
+
</>
|
|
280
|
+
)}
|
|
281
|
+
</div>
|
|
280
282
|
</div>
|
|
281
283
|
);
|
|
282
284
|
};
|