@vonaffenfels/slate-editor 1.0.1

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 (77) hide show
  1. package/.babelrc +44 -0
  2. package/README.md +5 -0
  3. package/componentLoader.js +52 -0
  4. package/dist/BlockEditor.css +93 -0
  5. package/dist/BlockEditor.js +2 -0
  6. package/dist/BlockEditor.js.LICENSE.txt +61 -0
  7. package/dist/Renderer.js +2 -0
  8. package/dist/Renderer.js.LICENSE.txt +15 -0
  9. package/dist/fromHTML.js +1 -0
  10. package/dist/index.css +93 -0
  11. package/dist/index.js +2 -0
  12. package/dist/index.js.LICENSE.txt +69 -0
  13. package/dist/toHTML.js +2 -0
  14. package/dist/toHTML.js.LICENSE.txt +23 -0
  15. package/dist/toText.js +2 -0
  16. package/dist/toText.js.LICENSE.txt +23 -0
  17. package/package.json +79 -0
  18. package/postcss.config.js +7 -0
  19. package/scss/demo.scss +142 -0
  20. package/scss/editor.scss +394 -0
  21. package/scss/storybook.scss +66 -0
  22. package/scss/toolbar.scss +160 -0
  23. package/src/BlockEditor.js +252 -0
  24. package/src/Blocks/EmptyBlock.js +12 -0
  25. package/src/Blocks/EmptyWrapper.js +5 -0
  26. package/src/Blocks/ErrorBoundary.js +41 -0
  27. package/src/Blocks/LayoutBlock.js +179 -0
  28. package/src/Blocks/LayoutSlot.js +61 -0
  29. package/src/Context/StorybookContext.js +7 -0
  30. package/src/Nodes/Default.js +151 -0
  31. package/src/Nodes/Element.js +72 -0
  32. package/src/Nodes/Leaf.js +40 -0
  33. package/src/Nodes/Storybook.js +170 -0
  34. package/src/Nodes/StorybookDisplay.js +118 -0
  35. package/src/Nodes/Text.js +67 -0
  36. package/src/Renderer.js +41 -0
  37. package/src/Serializer/Html.js +43 -0
  38. package/src/Serializer/Serializer.js +318 -0
  39. package/src/Serializer/Text.js +18 -0
  40. package/src/Serializer/ads.js +175 -0
  41. package/src/Serializer/index.js +4 -0
  42. package/src/SidebarEditor/SidebarEditorField.js +249 -0
  43. package/src/SidebarEditor.css +90 -0
  44. package/src/SidebarEditor.js +236 -0
  45. package/src/Storybook.js +152 -0
  46. package/src/Toolbar/Align.js +65 -0
  47. package/src/Toolbar/Block.js +121 -0
  48. package/src/Toolbar/Element.js +49 -0
  49. package/src/Toolbar/Formats.js +60 -0
  50. package/src/Toolbar/Insert.js +29 -0
  51. package/src/Toolbar/Layout.js +333 -0
  52. package/src/Toolbar/Link.js +165 -0
  53. package/src/Toolbar/Toolbar.js +164 -0
  54. package/src/Tools/Margin.js +52 -0
  55. package/src/dev/App.js +61 -0
  56. package/src/dev/draftToSlate.json +3148 -0
  57. package/src/dev/index.css +3 -0
  58. package/src/dev/index.html +11 -0
  59. package/src/dev/index.js +5 -0
  60. package/src/dev/sampleValue1.json +4295 -0
  61. package/src/dev/sampleValue2.json +0 -0
  62. package/src/dev/sampleValueValid.json +411 -0
  63. package/src/dev/testComponents/TestStory.js +9 -0
  64. package/src/dev/testComponents/TestStory.stories.js +172 -0
  65. package/src/dev/testSampleValue.json +747 -0
  66. package/src/fromHTML.js +5 -0
  67. package/src/index.js +9 -0
  68. package/src/plugins/ListItem.js +49 -0
  69. package/src/plugins/SoftBreak.js +24 -0
  70. package/src/toHTML.js +7 -0
  71. package/src/toText.js +7 -0
  72. package/src/util.js +20 -0
  73. package/storyLoader.js +46 -0
  74. package/tailwind.config.js +5 -0
  75. package/webpack.config.build.js +53 -0
  76. package/webpack.config.dev.js +61 -0
  77. package/webpack.config.js +117 -0
package/src/dev/sampleValue2.json ADDED
File without changes
package/src/dev/sampleValueValid.json ADDED
@@ -0,0 +1,411 @@
1
+ [
2
+ {
3
+ "type": "paragraph",
4
+ "children": [
5
+ {
6
+ "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gub ergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
7
+ }
8
+ ]
9
+ },
10
+ {
11
+ "type": "layout",
12
+ "children": [
13
+ {
14
+ "type": "layout-slot",
15
+ "attributes": {
16
+ "name": "grid-half"
17
+ },
18
+ "children": [
19
+ {
20
+ "type": "paragraph",
21
+ "children": [
22
+ {
23
+ "text": ""
24
+ }
25
+ ]
26
+ }
27
+ ]
28
+ },
29
+ {
30
+ "type": "layout-slot",
31
+ "attributes": {
32
+ "name": "grid-half"
33
+ },
34
+ "children": [
35
+ {
36
+ "type": "paragraph",
37
+ "children": [
38
+ {
39
+ "text": ""
40
+ }
41
+ ]
42
+ }
43
+ ]
44
+ }
45
+ ]
46
+ },
47
+ {
48
+ "type": "layout",
49
+ "children": [
50
+ {
51
+ "type": "layout-slot",
52
+ "attributes": {
53
+ "name": "grid-2"
54
+ },
55
+ "children": [
56
+ {
57
+ "type": "paragraph",
58
+ "children": [
59
+ {
60
+ "text": ""
61
+ }
62
+ ]
63
+ }
64
+ ]
65
+ },
66
+ {
67
+ "type": "layout-slot",
68
+ "attributes": {
69
+ "name": "grid-1"
70
+ },
71
+ "children": [
72
+ {
73
+ "type": "paragraph",
74
+ "children": [
75
+ {
76
+ "text": ""
77
+ }
78
+ ]
79
+ }
80
+ ]
81
+ }
82
+ ]
83
+ },
84
+ {
85
+ "type": "layout",
86
+ "children": [
87
+ {
88
+ "type": "layout-slot",
89
+ "attributes": {
90
+ "name": "grid-1"
91
+ },
92
+ "children": [
93
+ {
94
+ "type": "storybook",
95
+ "children": [
96
+ {
97
+ "text": ""
98
+ }
99
+ ],
100
+ "attributes": {
101
+ "icon": "checkSimple",
102
+ "title": "Vivamus sagittis lacus",
103
+ "text": "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.Et magna sit morbi vitae lobortis."
104
+ },
105
+ "block": "Templates/Feature",
106
+ "storyId": "templates-feature"
107
+ }
108
+ ]
109
+ },
110
+ {
111
+ "type": "layout-slot",
112
+ "attributes": {
113
+ "name": "grid-1"
114
+ },
115
+ "children": [
116
+ {
117
+ "type": "storybook",
118
+ "children": [
119
+ {
120
+ "text": ""
121
+ }
122
+ ],
123
+ "attributes": {
124
+ "icon": "checkSimple",
125
+ "title": "Vivamus sagittis lacus",
126
+ "text": "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.Et magna sit morbi vitae lobortis."
127
+ },
128
+ "block": "Templates/Feature",
129
+ "storyId": "templates-feature"
130
+ }
131
+ ]
132
+ },
133
+ {
134
+ "type": "layout-slot",
135
+ "attributes": {
136
+ "name": "grid-1"
137
+ },
138
+ "children": [
139
+ {
140
+ "type": "storybook",
141
+ "children": [
142
+ {
143
+ "text": ""
144
+ }
145
+ ],
146
+ "attributes": {
147
+ "icon": "checkSimple",
148
+ "title": "Vivamus sagittis lacus",
149
+ "text": "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.Et magna sit morbi vitae lobortis."
150
+ },
151
+ "block": "Templates/Feature",
152
+ "storyId": "templates-feature"
153
+ }
154
+ ]
155
+ },
156
+ {
157
+ "type": "layout-slot",
158
+ "attributes": {
159
+ "name": "grid-1"
160
+ },
161
+ "children": [
162
+ {
163
+ "type": "storybook",
164
+ "children": [
165
+ {
166
+ "text": ""
167
+ }
168
+ ],
169
+ "attributes": {
170
+ "icon": "checkSimple",
171
+ "title": "Vivamus sagittis lacus",
172
+ "text": "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.Et magna sit morbi vitae lobortis."
173
+ },
174
+ "block": "Templates/Feature",
175
+ "storyId": "templates-feature"
176
+ }
177
+ ]
178
+ }
179
+ ]
180
+ },
181
+ {
182
+ "type": "layout",
183
+ "children": [
184
+ {
185
+ "type": "layout-slot",
186
+ "attributes": {
187
+ "name": "grid-1"
188
+ },
189
+ "children": [
190
+ {
191
+ "type": "paragraph",
192
+ "children": [
193
+ {
194
+ "text": ""
195
+ }
196
+ ]
197
+ }
198
+ ]
199
+ },
200
+ {
201
+ "type": "layout-slot",
202
+ "attributes": {
203
+ "name": "grid-2"
204
+ },
205
+ "children": [
206
+ {
207
+ "type": "paragraph",
208
+ "children": [
209
+ {
210
+ "text": ""
211
+ }
212
+ ]
213
+ }
214
+ ]
215
+ }
216
+ ]
217
+ },
218
+ {
219
+ "type": "layout",
220
+ "children": [
221
+ {
222
+ "type": "layout-slot",
223
+ "attributes": {
224
+ "name": "grid-1"
225
+ },
226
+ "children": [
227
+ {
228
+ "type": "paragraph",
229
+ "children": [
230
+ {
231
+ "text": ""
232
+ }
233
+ ]
234
+ }
235
+ ]
236
+ },
237
+ {
238
+ "type": "layout-slot",
239
+ "attributes": {
240
+ "name": "grid-1"
241
+ },
242
+ "children": [
243
+ {
244
+ "type": "paragraph",
245
+ "children": [
246
+ {
247
+ "text": ""
248
+ }
249
+ ]
250
+ }
251
+ ]
252
+ },
253
+ {
254
+ "type": "layout-slot",
255
+ "attributes": {
256
+ "name": "grid-1"
257
+ },
258
+ "children": [
259
+ {
260
+ "type": "paragraph",
261
+ "children": [
262
+ {
263
+ "text": ""
264
+ }
265
+ ]
266
+ }
267
+ ]
268
+ }
269
+ ]
270
+ },
271
+ {
272
+ "type": "layout",
273
+ "children": [
274
+ {
275
+ "type": "layout-slot",
276
+ "attributes": {
277
+ "name": "grid-auto"
278
+ },
279
+ "children": [
280
+ {
281
+ "type": "paragraph",
282
+ "children": [
283
+ {
284
+ "text": ""
285
+ }
286
+ ]
287
+ }
288
+ ]
289
+ },
290
+ {
291
+ "type": "layout-slot",
292
+ "attributes": {
293
+ "name": "grid-fill"
294
+ },
295
+ "children": [
296
+ {
297
+ "type": "paragraph",
298
+ "children": [
299
+ {
300
+ "text": ""
301
+ }
302
+ ]
303
+ }
304
+ ]
305
+ },
306
+ {
307
+ "type": "layout-slot",
308
+ "attributes": {
309
+ "name": "grid-auto"
310
+ },
311
+ "children": [
312
+ {
313
+ "type": "paragraph",
314
+ "children": [
315
+ {
316
+ "text": ""
317
+ }
318
+ ]
319
+ }
320
+ ]
321
+ }
322
+ ]
323
+ },
324
+ {
325
+ "type": "layout",
326
+ "children": [
327
+ {
328
+ "type": "layout-slot",
329
+ "attributes": {
330
+ "name": "grid-auto"
331
+ },
332
+ "children": [
333
+ {
334
+ "type": "paragraph",
335
+ "children": [
336
+ {
337
+ "text": ""
338
+ }
339
+ ]
340
+ }
341
+ ]
342
+ },
343
+ {
344
+ "type": "layout-slot",
345
+ "attributes": {
346
+ "name": "grid-fill"
347
+ },
348
+ "children": [
349
+ {
350
+ "type": "paragraph",
351
+ "children": [
352
+ {
353
+ "text": ""
354
+ }
355
+ ]
356
+ }
357
+ ]
358
+ }
359
+ ]
360
+ },
361
+ {
362
+ "type": "storybook",
363
+ "children": [
364
+ {
365
+ "text": ""
366
+ }
367
+ ],
368
+ "attributes": {
369
+ "provider": "twitter",
370
+ "provider_url": "https://twitter.com",
371
+ "cache_age": "3153600000",
372
+ "width": 550,
373
+ "height": null,
374
+ "tweet_id": "1368952570874654730",
375
+ "html": "<blockquote class=\"twitter-tweet\"><p lang=\"und\" dir=\"ltr\"><a href=\"https://t.co/XzqDvqokRZ\">pic.twitter.com/XzqDvqokRZ</a></p>&mdash; Roaring Kitty (@TheRoaringKitty) <a href=\"https://twitter.com/TheRoaringKitty/status/1368952570874654730?ref_src=twsrc%5Etfw\">March 8, 2021</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n",
376
+ "url": "https://twitter.com/TheRoaringKitty/status/1368952570874654730",
377
+ "version": "1.0",
378
+ "provider_name": "Twitter",
379
+ "type": "rich",
380
+ "author_url": "https://twitter.com/TheRoaringKitty",
381
+ "author_name": "Roaring Kitty"
382
+ },
383
+ "block": "Social/Embed",
384
+ "storyId": "social-embed-twitter"
385
+ },
386
+ {
387
+ "type": "storybook",
388
+ "children": [
389
+ {
390
+ "text": ""
391
+ }
392
+ ],
393
+ "attributes": {
394
+ "provider": "twitter",
395
+ "provider_url": "https://twitter.com",
396
+ "cache_age": "3153600000",
397
+ "width": 550,
398
+ "height": null,
399
+ "tweet_id": "1368952570874654730",
400
+ "html": "<blockquote class=\"twitter-tweet\"><p lang=\"und\" dir=\"ltr\"><a href=\"https://t.co/XzqDvqokRZ\">pic.twitter.com/XzqDvqokRZ</a></p>&mdash; Roaring Kitty (@TheRoaringKitty) <a href=\"https://twitter.com/TheRoaringKitty/status/1368952570874654730?ref_src=twsrc%5Etfw\">March 8, 2021</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n",
401
+ "url": "https://twitter.com/TheRoaringKitty/status/1368952570874654730",
402
+ "version": "1.0",
403
+ "provider_name": "Twitter",
404
+ "type": "rich",
405
+ "author_url": "https://twitter.com/TheRoaringKitty",
406
+ "author_name": "Roaring Kitty"
407
+ },
408
+ "block": "Social/Embed",
409
+ "storyId": "social-embed-twitter"
410
+ }
411
+ ]
package/src/dev/testComponents/TestStory.js ADDED
@@ -0,0 +1,9 @@
1
+ export default function TestStory({
2
+ title, ...props
3
+ }) {
4
+ return <div className="bg-green flex flex-col space-y-8 p-4 text-black">
5
+ <h1>{title}</h1>
6
+ <h2>Props</h2>
7
+ <div>{JSON.stringify(props)}</div>
8
+ </div>;
9
+ }
package/src/dev/testComponents/TestStory.stories.js ADDED
@@ -0,0 +1,172 @@
1
+ import TestStory from "./TestStory";
2
+
3
+ export default {
4
+ title: "Test Story",
5
+ id: "TestStory",
6
+ component: TestStory,
7
+ storyContext: ["layout"],
8
+ argTypes: {
9
+ title: {
10
+ name: "Titel",
11
+ control: {type: "text"},
12
+ },
13
+ text: {
14
+ name: "Text",
15
+ control: {type: "text"},
16
+ },
17
+ boolean: {
18
+ name: "Boolean",
19
+ control: {type: "boolean"},
20
+ },
21
+ number: {
22
+ name: "Number",
23
+ control: {
24
+ type: "number",
25
+ min:1,
26
+ max:30,
27
+ step: 2,
28
+ },
29
+ },
30
+ range: {
31
+ name: "Range",
32
+ control: {
33
+ type: "range",
34
+ min:1,
35
+ max:30,
36
+ step: 2,
37
+ },
38
+ },
39
+ object: {
40
+ name: "Object",
41
+ control: {type: "object"},
42
+ },
43
+ radio: {
44
+ name: "Radio",
45
+ control: {
46
+ type: "radio",
47
+ options: {
48
+ "Option 1": "option1",
49
+ "Option 2": "option2",
50
+ },
51
+ },
52
+ },
53
+ inlineRadio: {
54
+ name: "Inline Radio",
55
+ control: {
56
+ type: "inline-radio",
57
+ options: {
58
+ "Option 1": "option1",
59
+ "Option 2": "option2",
60
+ },
61
+ },
62
+ },
63
+ check: {
64
+ name: "Check",
65
+ control: {
66
+ type: "check",
67
+ options: {
68
+ "Option 1": "option1",
69
+ "Option 2": "option2",
70
+ },
71
+ },
72
+ },
73
+ inlineCheck: {
74
+ name: "Inline Check",
75
+ control: {
76
+ type: "inline-check",
77
+ options: {
78
+ "Option 1": "option1",
79
+ "Option 2": "option2",
80
+ },
81
+ },
82
+ },
83
+ select: {
84
+ name: "Select",
85
+ control: {
86
+ type: "select",
87
+ options: {
88
+ "Option 1": "option1",
89
+ "Option 2": "option2",
90
+ },
91
+ },
92
+ },
93
+ mutliSelect: {
94
+ name: "Multi Select",
95
+ control: {
96
+ type: "multi-select",
97
+ options: {
98
+ "Option 1": "option1",
99
+ "Option 2": "option2",
100
+ },
101
+ },
102
+ },
103
+ color: {
104
+ name: "Color",
105
+ control: {type: "color"},
106
+ },
107
+ date: {
108
+ name: "Date",
109
+ control: {type: "date"},
110
+ },
111
+ contentfulAsset: {
112
+ name: "Contentful Asset",
113
+ control: {
114
+ type: 'contentful-content',
115
+ contentTypes: ["asset"],
116
+ },
117
+ },
118
+ contentfulAssets: {
119
+ name: "Contentful Assets",
120
+ control: {
121
+ type: 'contentful-contents',
122
+ contentTypes: ["asset"],
123
+ },
124
+ },
125
+ cloudinaryImage: {
126
+ name: "Cloudinary Image",
127
+ control: {type: 'cloudinary-image'},
128
+ },
129
+ cloudinaryImages: {
130
+ name: "Cloudinary Images",
131
+ control: {type: 'cloudinary-images'},
132
+ },
133
+ mvp: {
134
+ name: "MVP",
135
+ control: {
136
+ type: "mvp",
137
+ fields: {
138
+ feld1: {
139
+ name: "Feld 1",
140
+ control: {type: "text"},
141
+ },
142
+ feld2: {
143
+ name: "Feld 2",
144
+ control: {type: "text"},
145
+ },
146
+ },
147
+ },
148
+ },
149
+ testText1: {
150
+ name: "Text 1",
151
+ control: {type: "text"},
152
+ table: {category: "Kategorie"},
153
+ },
154
+ testText2: {
155
+ name: "Text 2",
156
+ control: {type: "text"},
157
+ table: {category: "Kategorie"},
158
+ },
159
+ testText3: {
160
+ name: "Text 3",
161
+ control: {type: "text"},
162
+ table: {category: "Kategorie"},
163
+ },
164
+ },
165
+ };
166
+
167
+ export const TestStoryVariant1 = (args) => <TestStory {...args} />;
168
+ export const TestStoryVariant2 = (args) => <TestStory {...args} />;
169
+
170
+ TestStoryVariant1.args = {text: "Test 1"};
171
+
172
+ TestStoryVariant2.args = {text: "Test 2"};