@vonaffenfels/slate-editor 1.0.1 → 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.
Files changed (12) hide show
  1. package/componentLoader.js +10 -8
  2. package/dist/BlockEditor.css +1 -90
  3. package/dist/BlockEditor.js +1 -1
  4. package/dist/Renderer.js +1 -1
  5. package/dist/index.css +1 -90
  6. package/dist/index.js +1 -1
  7. package/package.json +2 -3
  8. package/scss/sidebarEditor.scss +104 -0
  9. package/src/BlockEditor.js +2 -2
  10. package/src/SidebarEditor/SidebarEditorField.js +35 -32
  11. package/src/SidebarEditor.js +26 -24
  12. package/src/SidebarEditor.css +0 -90
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/slate-editor",
3
- "version": "1.0.1",
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": "06971175660ea52650bfb65a3d68b34a7926475e",
74
+ "gitHead": "5886b3f191d7e644434c7baef0808194aec62802",
76
75
  "publishConfig": {
77
76
  "access": "public"
78
77
  }
package/scss/sidebarEditor.scss ADDED
@@ -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] + 1];
176
+ let to = [path[0] - 1];
177
177
 
178
178
  if (direction === "down") {
179
- to = [path[0] - 1];
179
+ to = [path[0] + 1];
180
180
  }
181
181
 
182
182
  try {
package/src/SidebarEditor/SidebarEditorField.js CHANGED
@@ -195,39 +195,42 @@ export const SidebarEditorField = ({
195
195
  );
196
196
  case "mvp":
197
197
  return (
198
- <>
199
- {storybookElement?.attributes[fieldKey]?.map((f, index) => {
200
- return (
201
- <div className="mb-4" key={`mvp-${index}`}>
202
- <div className="mb-2 flex items-center">
203
- <b className="grow">{field.name} [{index.toString()}]</b>
204
- <div className="cursor-pointer p-1" onClick={() => deleteMVPEntry(fieldKey, index)}><Icon icon="Delete" /></div>
205
- </div>
206
- {Object.keys(field.control.fields).map((key, mvpIndex) => {
207
- let mvpField = field.control.fields[key];
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
- value = storybookElement.attributes?.[fieldKey]?.[index]?.[key];
211
+ value = storybookElement.attributes?.[fieldKey]?.[index]?.[key];
210
212
 
211
- return (
212
- <div key={`mvp-field-${key}`}>
213
- <SidebarEditorField
214
- field={mvpField}
215
- fieldKey={fieldKey}
216
- value={value}
217
- storybookElement={storybookElement}
218
- sdk={sdk}
219
- onChange={(fK, value) => onChange(
220
- fK, value, key, index,
221
- )} />
222
- </div>
223
- );
224
- })}
225
- <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}} />
226
- </div>
227
- );
228
- })}
229
- <Button onClick={() => onChange(fieldKey, [...storybookElement.attributes[fieldKey], {}])}>Neue Zeile</Button>
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 "./SidebarEditor.css";
13
+ import "../scss/sidebarEditor.scss";
14
14
  import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
15
15
  import {ToolMargin} from "./Tools/Margin";
16
16
 
@@ -83,18 +83,17 @@ const SidebarEditor = ({
83
83
 
84
84
  return (
85
85
  <div id="sidebar-editor">
86
- <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange}/>
86
+ <div className="mb-2">
87
+ <div className="flex items-center">
88
+ <div className="grow pr-2">
89
+ <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange} className="font-bold"/>
90
+ </div>
91
+ {!!onClose && <div className="cursor-pointer p-1" onClick={onClose} title="Schließen"><Icon icon="Close" /></div>}
92
+ </div>
93
+ </div>
87
94
  {storybookElement?.block && (
88
95
  <div>
89
- <div>
90
- <div className="flex">
91
- <div className="grow">
92
- <Heading>{storybookElement.block}</Heading>
93
- </div>
94
- {!!onClose && <div className="cursor-pointer p-1" onClick={onClose}><Icon icon="Close" /></div>}
95
- </div>
96
- <VariantSelect story={story} onChange={onChange}/>
97
- </div>
96
+ <VariantSelect story={story} onChange={onChange} className="mb-2" />
98
97
  <div className="flex items-center">
99
98
  <select
100
99
  value={storybookElement.attributes.blockWidth}
@@ -107,10 +106,10 @@ const SidebarEditor = ({
107
106
  <option value={"small"}>Klein</option>
108
107
  </select>
109
108
  <div className="cursor-pointer p-2" title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")}>
110
- ↑
109
+ <Icon icon="ArrowUp" />
111
110
  </div>
112
111
  <div className="cursor-pointer p-2" title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
113
- ↓
112
+ <Icon icon="ArrowDown" />
114
113
  </div>
115
114
  <div className="p-2 pt-3">
116
115
  <ToolMargin
@@ -118,7 +117,7 @@ const SidebarEditor = ({
118
117
  onChange={value => handleFieldValueChange("margin", value)} />
119
118
  </div>
120
119
  <div className="cursor-pointer p-2" title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
121
- 🗑
120
+ <Icon icon="Delete" />
122
121
  </div>
123
122
  </div>
124
123
  <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
@@ -143,10 +142,11 @@ const SidebarEditor = ({
143
142
  )}
144
143
  />;
145
144
  })}
146
- <Accordion>
147
- {Object.keys(fields.tables).map(tableKey => {
148
- return (
149
- <AccordionItem key={`accordion-item-${tableKey}`} title={tableKey}>
145
+ {Object.keys(fields.tables).map(tableKey => {
146
+ return (
147
+ <details key={`accordion-item-${tableKey}`}>
148
+ <summary>{tableKey}</summary>
149
+ <div className="mt-4">
150
150
  {Object.keys(fields.tables[tableKey]).map(key => {
151
151
  const field = fields.tables[tableKey][key];
152
152
 
@@ -160,10 +160,10 @@ const SidebarEditor = ({
160
160
  onChange={value => handleFieldValueChange(key, value)}
161
161
  />;
162
162
  })}
163
- </AccordionItem>
164
- );
165
- })}
166
- </Accordion>
163
+ </div>
164
+ </details>
165
+ );
166
+ })}
167
167
  </>
168
168
  )}
169
169
  </div>
@@ -173,6 +173,7 @@ const SidebarEditor = ({
173
173
  const VariantSelect = ({
174
174
  story,
175
175
  onChange,
176
+ className,
176
177
  }) => {
177
178
  const stories = story?.stories?.filter(s => s.title !== story.title) || [];
178
179
 
@@ -181,7 +182,7 @@ const VariantSelect = ({
181
182
  }
182
183
 
183
184
  return <select
184
- className="mt-2"
185
+ className={className}
185
186
  onChange={e => onChange && onChange({
186
187
  block: story.id,
187
188
  attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
@@ -197,6 +198,7 @@ const BlockSelect = ({
197
198
  stories,
198
199
  active,
199
200
  onChange,
201
+ className,
200
202
  }) => {
201
203
  if (!onChange) {
202
204
  return null;
@@ -216,8 +218,8 @@ const BlockSelect = ({
216
218
 
217
219
  return (
218
220
  <select
219
- className="mt-2"
220
221
  onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
222
+ className={className}
221
223
  >
222
224
  <option>Element wählen</option>
223
225
  {stories.map(s => (
package/src/SidebarEditor.css DELETED
@@ -1,90 +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
- }
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
- display: block;
30
- margin: 0 0 4px 0 !important;
31
- }
32
-
33
- input[type="text"],
34
- input[type="number"],
35
- input[type="color"],
36
- input[type="date"],
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;
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
- }