@vonaffenfels/slate-editor 1.0.33 → 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/BlockEditor.js.LICENSE.txt +33 -0
- package/dist/Renderer.js +1 -1
- package/dist/index.css +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +33 -0
- package/package.json +2 -2
- package/scss/sidebarEditor.scss +10 -4
- package/src/BlockEditor.js +4 -2
- package/src/Nodes/StorybookDisplay.js +18 -10
- package/src/SidebarEditor/SidebarEditorField.js +12 -1
- package/src/SidebarEditor.js +103 -99
|
@@ -4,6 +4,30 @@
|
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/*!
|
|
8
|
+
Copyright (c) 2015 Jed Watson.
|
|
9
|
+
Based on code that is Copyright 2013-2015, Facebook, Inc.
|
|
10
|
+
All rights reserved.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/*!
|
|
14
|
+
Copyright (c) 2018 Jed Watson.
|
|
15
|
+
Licensed under the MIT License (MIT), see
|
|
16
|
+
http://jedwatson.github.io/classnames
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/*!
|
|
20
|
+
* Adapted from jQuery UI core
|
|
21
|
+
*
|
|
22
|
+
* http://jqueryui.com
|
|
23
|
+
*
|
|
24
|
+
* Copyright 2014 jQuery Foundation and other contributors
|
|
25
|
+
* Released under the MIT license.
|
|
26
|
+
* http://jquery.org/license
|
|
27
|
+
*
|
|
28
|
+
* http://api.jqueryui.com/category/ui-core/
|
|
29
|
+
*/
|
|
30
|
+
|
|
7
31
|
/*!
|
|
8
32
|
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
|
|
9
33
|
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
|
@@ -34,3 +58,12 @@
|
|
|
34
58
|
/*! https://mths.be/esrever v0.2.0 by @mathias */
|
|
35
59
|
|
|
36
60
|
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
|
61
|
+
|
|
62
|
+
/** @license React v16.13.1
|
|
63
|
+
* react-is.production.min.js
|
|
64
|
+
*
|
|
65
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
66
|
+
*
|
|
67
|
+
* This source code is licensed under the MIT license found in the
|
|
68
|
+
* LICENSE file in the root directory of this source tree.
|
|
69
|
+
*/
|
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,18 +1,24 @@
|
|
|
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;
|
|
13
19
|
}
|
|
14
20
|
|
|
15
|
-
p, label, b {
|
|
21
|
+
p, label, b, span {
|
|
16
22
|
color: rgb(90, 101, 124);
|
|
17
23
|
}
|
|
18
24
|
|
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,
|
|
@@ -170,6 +171,7 @@ export default function BlockEditor({
|
|
|
170
171
|
isEmpty: false,
|
|
171
172
|
isInline: selectedStorybookElement.isInline,
|
|
172
173
|
attributes: newStorybookElement.attributes,
|
|
174
|
+
type: "storybook",
|
|
173
175
|
};
|
|
174
176
|
|
|
175
177
|
Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});
|
|
@@ -254,8 +256,8 @@ export default function BlockEditor({
|
|
|
254
256
|
</div>
|
|
255
257
|
<div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
|
|
256
258
|
{isLoading && (
|
|
257
|
-
<div className=
|
|
258
|
-
<
|
|
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"} />
|
|
259
261
|
</div>
|
|
260
262
|
)}
|
|
261
263
|
<ErrorBoundary
|
|
@@ -68,15 +68,7 @@ const BlockComponent = ({
|
|
|
68
68
|
attributes,
|
|
69
69
|
}) => {
|
|
70
70
|
const [loadedAttributes, setLoadedAttributes] = useState(attributes);
|
|
71
|
-
let LoadedComponent = storybookComponentLoader(block);
|
|
72
|
-
|
|
73
|
-
if (!LoadedComponent) {
|
|
74
|
-
LoadedComponent = EmptyBlock;
|
|
75
|
-
} else {
|
|
76
|
-
if (!LoadedComponent.displayName) {
|
|
77
|
-
LoadedComponent.displayName = block;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
71
|
+
let [LoadedComponent, setLoadedComponent] = useState(storybookComponentLoader(block));
|
|
80
72
|
|
|
81
73
|
useEffect(() => {
|
|
82
74
|
const loadData = async () => {
|
|
@@ -97,10 +89,26 @@ const BlockComponent = ({
|
|
|
97
89
|
}
|
|
98
90
|
});
|
|
99
91
|
|
|
92
|
+
let loadedComponent = storybookComponentLoader(block);
|
|
93
|
+
|
|
94
|
+
setLoadedAttributes({...attributes});
|
|
95
|
+
|
|
96
|
+
setLoadedComponent(loadedComponent);
|
|
97
|
+
|
|
98
|
+
console.log({loadedAttributes});
|
|
99
|
+
|
|
100
100
|
return () => {
|
|
101
101
|
mounted = false;
|
|
102
102
|
};
|
|
103
|
-
}, [attributes, block, storybookComponentDataLoader]);
|
|
103
|
+
}, [attributes, block, storybookComponentDataLoader, storybookComponentLoader]);
|
|
104
|
+
|
|
105
|
+
if (!LoadedComponent) {
|
|
106
|
+
LoadedComponent = EmptyBlock;
|
|
107
|
+
} else {
|
|
108
|
+
if (!LoadedComponent.displayName) {
|
|
109
|
+
LoadedComponent.displayName = block;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
104
112
|
|
|
105
113
|
if (loadedAttributes.blockWidth || loadedAttributes.margin) {
|
|
106
114
|
return <span className={classNames({
|
|
@@ -134,7 +134,18 @@ export const SidebarEditorField = ({
|
|
|
134
134
|
return (
|
|
135
135
|
<textarea
|
|
136
136
|
value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
|
|
137
|
-
onChange={e =>
|
|
137
|
+
onChange={e => {
|
|
138
|
+
onChange(fieldKey, isJson(e.target.value) ? JSON.parse(e.target.value) : e.target.value);
|
|
139
|
+
e.target.style.height = "5px";
|
|
140
|
+
e.target.style.height = e.target.scrollHeight + 2 + "px";
|
|
141
|
+
}}
|
|
142
|
+
onBlur={(e) => {
|
|
143
|
+
e.target.style.height = "42px";
|
|
144
|
+
}}
|
|
145
|
+
onFocus={e => {
|
|
146
|
+
e.target.style.height = "5px";
|
|
147
|
+
e.target.style.height = e.target.scrollHeight + 2 + "px";
|
|
148
|
+
}} />
|
|
138
149
|
);
|
|
139
150
|
case "radio":
|
|
140
151
|
return (
|
package/src/SidebarEditor.js
CHANGED
|
@@ -7,6 +7,7 @@ import {ToolMargin} from "./Tools/Margin";
|
|
|
7
7
|
import "../scss/sidebarEditor.scss";
|
|
8
8
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
9
9
|
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
|
|
10
|
+
import {Spinner} from "@contentful/forma-36-react-components";
|
|
10
11
|
|
|
11
12
|
const devMode = localStorage.getItem("dev-mode") === "true";
|
|
12
13
|
|
|
@@ -169,112 +170,115 @@ const SidebarEditor = ({
|
|
|
169
170
|
useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
|
|
170
171
|
|
|
171
172
|
return (
|
|
172
|
-
<div id="sidebar-editor">
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
<
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
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}>
|
|
190
193
|
↑
|
|
191
|
-
|
|
192
|
-
|
|
194
|
+
</IconButton>
|
|
195
|
+
<IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
|
|
193
196
|
↓
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
+
</IconButton>
|
|
198
|
+
</div>
|
|
199
|
+
<IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
|
|
197
200
|
🗑
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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>
|
|
203
207
|
</div>
|
|
204
|
-
|
|
205
|
-
|
|
208
|
+
)}
|
|
209
|
+
</div>
|
|
210
|
+
{!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
|
|
206
211
|
</div>
|
|
207
|
-
|
|
208
|
-
</div>
|
|
209
|
-
<hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
|
|
210
|
-
</div>
|
|
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} />
|
|
212
|
+
<hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
|
|
218
213
|
</div>
|
|
219
|
-
|
|
220
|
-
<div>
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
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} />
|
|
226
221
|
</div>
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
field=
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
key
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
field=
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
key
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
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>
|
|
278
282
|
</div>
|
|
279
283
|
);
|
|
280
284
|
};
|