@vonaffenfels/slate-editor 1.0.34 → 1.0.41
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/Renderer.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 +5 -4
- package/src/Nodes/StorybookDisplay.js +0 -2
- package/src/SidebarEditor/SidebarEditorField.js +1 -4
- package/src/SidebarEditor.js +102 -103
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonaffenfels/slate-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.41",
|
|
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": "1ad8ddd858ff27ea19e568d79f189f20a2ef0488",
|
|
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,
|
|
@@ -33,7 +34,7 @@ export default function BlockEditor({
|
|
|
33
34
|
}) {
|
|
34
35
|
const scrollContainer = useRef(null);
|
|
35
36
|
const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
|
|
36
|
-
const renderElement =
|
|
37
|
+
const renderElement = (props) => {
|
|
37
38
|
return <Element
|
|
38
39
|
{...props}
|
|
39
40
|
editor={editor}
|
|
@@ -54,7 +55,7 @@ export default function BlockEditor({
|
|
|
54
55
|
onElementClick={() => {
|
|
55
56
|
setSelectedStorybookElement(null);
|
|
56
57
|
}}/>;
|
|
57
|
-
}
|
|
58
|
+
};
|
|
58
59
|
const renderLeaf = useCallback(props => <Leaf {...props} elementPropsMap={elementPropsMap}/>, []);
|
|
59
60
|
const emptyValue = [
|
|
60
61
|
{
|
|
@@ -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
|
@@ -3,10 +3,7 @@ import {
|
|
|
3
3
|
} from "react";
|
|
4
4
|
import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
|
|
5
5
|
import {ToolMargin} from "./Tools/Margin";
|
|
6
|
-
|
|
7
6
|
import "../scss/sidebarEditor.scss";
|
|
8
|
-
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
9
|
-
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
|
|
10
7
|
import {Spinner} from "@contentful/forma-36-react-components";
|
|
11
8
|
|
|
12
9
|
const devMode = localStorage.getItem("dev-mode") === "true";
|
|
@@ -170,113 +167,115 @@ const SidebarEditor = ({
|
|
|
170
167
|
useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
|
|
171
168
|
|
|
172
169
|
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
|
-
<
|
|
170
|
+
<div id="sidebar-editor-wrapper">
|
|
171
|
+
<div id="sidebar-editor">
|
|
172
|
+
{isLoading ? (
|
|
173
|
+
<div className="flex h-full flex-col items-center justify-center">
|
|
174
|
+
<Spinner />
|
|
175
|
+
<span className="mt-2">Elemente werden geladen</span>
|
|
176
|
+
</div>
|
|
177
|
+
) : (
|
|
178
|
+
<>
|
|
179
|
+
<div>
|
|
180
|
+
<div className="flex items-center justify-end">
|
|
181
|
+
<div className="grow">
|
|
182
|
+
{storybookElement?.block && (
|
|
183
|
+
<div className="flex items-center">
|
|
184
|
+
<div className="icon-button-group mr-1">
|
|
185
|
+
<IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
|
|
186
|
+
<IconButton title="Wiederherstellen" onClick={redo} disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
|
|
187
|
+
</div>
|
|
188
|
+
<div className="icon-button-group mr-1">
|
|
189
|
+
<IconButton title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")} disabled={storybookElement.path[0] === 0}>
|
|
192
190
|
↑
|
|
193
|
-
|
|
194
|
-
|
|
191
|
+
</IconButton>
|
|
192
|
+
<IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
|
|
195
193
|
↓
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
194
|
+
</IconButton>
|
|
195
|
+
</div>
|
|
196
|
+
<IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
|
|
199
197
|
🗑
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
198
|
+
</IconButton>
|
|
199
|
+
<div className="ml-1 flex items-center">
|
|
200
|
+
<ToolMargin
|
|
201
|
+
margin={storybookElement.attributes.margin}
|
|
202
|
+
onChange={value => handleFieldValueChange("margin", value)} />
|
|
203
|
+
</div>
|
|
205
204
|
</div>
|
|
206
|
-
|
|
207
|
-
|
|
205
|
+
)}
|
|
206
|
+
</div>
|
|
207
|
+
{!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
|
|
208
208
|
</div>
|
|
209
|
-
|
|
209
|
+
<hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
|
|
210
210
|
</div>
|
|
211
|
-
<
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
onChange={handleBlockSelectChange}
|
|
219
|
-
storyContext={sdk.parameters.instance.storyContext} />
|
|
220
|
-
</div>
|
|
221
|
-
{storybookElement?.block && (
|
|
222
|
-
<div>
|
|
223
|
-
<div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
|
|
224
|
-
<VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
|
|
225
|
-
<BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
|
|
226
|
-
</div>
|
|
227
|
-
<hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
|
|
211
|
+
<div className="grow overflow-y-auto pr-2 pt-2">
|
|
212
|
+
<div className="mb-2">
|
|
213
|
+
<BlockSelect
|
|
214
|
+
stories={storybookStories}
|
|
215
|
+
active={storybookElement}
|
|
216
|
+
onChange={handleBlockSelectChange}
|
|
217
|
+
storyContext={sdk.parameters.instance.storyContext} />
|
|
228
218
|
</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
|
-
|
|
219
|
+
{storybookElement?.block && (
|
|
220
|
+
<div>
|
|
221
|
+
<div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
|
|
222
|
+
<VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
|
|
223
|
+
<BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
|
|
224
|
+
</div>
|
|
225
|
+
<hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
|
|
226
|
+
</div>
|
|
227
|
+
)}
|
|
228
|
+
{!!story && (
|
|
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
|
+
return (
|
|
249
|
+
<details key={`accordion-item-${tableKey}`} className="mb-2">
|
|
250
|
+
<summary>{tableKey}</summary>
|
|
251
|
+
<div className="mt-4">
|
|
252
|
+
{Object.keys(fields.tables[tableKey]).map(key => {
|
|
253
|
+
const field = fields.tables[tableKey][key];
|
|
254
|
+
|
|
255
|
+
return <SidebarEditorField
|
|
256
|
+
sdk={sdk}
|
|
257
|
+
value={storybookElement?.attributes?.[key]}
|
|
258
|
+
key={key}
|
|
259
|
+
fieldKey={key}
|
|
260
|
+
story={storybookElement}
|
|
261
|
+
field={field}
|
|
262
|
+
onChange={(
|
|
263
|
+
key, value, mvpField, mvpIndex,
|
|
264
|
+
) => handleFieldValueChange(
|
|
265
|
+
key, value, mvpField, mvpIndex,
|
|
266
|
+
)}
|
|
267
|
+
/>;
|
|
268
|
+
})}
|
|
269
|
+
</div>
|
|
270
|
+
</details>
|
|
271
|
+
);
|
|
272
|
+
})}
|
|
273
|
+
</>
|
|
274
|
+
)}
|
|
275
|
+
</div>
|
|
276
|
+
</>
|
|
277
|
+
)}
|
|
278
|
+
</div>
|
|
280
279
|
</div>
|
|
281
280
|
);
|
|
282
281
|
};
|